MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Notification customize

    Scheduled Pinned Locked Moved Custom CSS
    10 Posts 2 Posters 1.5k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      MMRIZE @fischi87
      last edited by

      @fischi87
      I don’t know well about MMM-MQTTbridge, but AFAIK, that module can emit custom notifications like your code snippet. When your codes work, a SHOW_ALERT notification will be delivered to the alert module, so you may be able to see the alert message itself.
      Therefore, What you want is just to take the alert module into the bottom_center area, right?

      F 1 Reply Last reply Reply Quote 0
      • F Offline
        fischi87 @MMRIZE
        last edited by

        @MMRIZE
        The Problem is, when i send just the Alert without the notification Type, the alert Display in Center with a other Looks Like. So i think this Are 2 different things. I want the different between notification and the alert.

        I work with notification from other modules?

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          MMRIZE @fischi87
          last edited by

          @fischi87
          So, what you want is this kind? Instead of top position than bottom position?
          3b9d4d5f-4bda-467b-b1f8-bf04ed7131b5-image.png

          You can override most of presentation with css.
          Append this into your custom.css

          /* css/custom.css */
          .ns-box {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
          }
          
          .ns-effect-slide-center.ns-show {
            animation: new-anim-slide-elastic-center 1s ease;
          }
          
          @keyframes new-anim-slide-elastic-center {
            0% {
              opacity: 0;
              transform: translateY(100%);
            }
            90% {
              opacity: 1;
              transform: translateY(-20px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }
          
          

          You may need hiding animation. guess it by yourself. :)

          F 1 Reply Last reply Reply Quote 0
          • F Offline
            fischi87 @MMRIZE
            last edited by

            @MMRIZE

            thanks that looks fine and this is a alert or alert with type notification? because i need the type notification. if i get more than one notification the alert displayed just the last one and the notification more than just one. u know what i mean?

            M 2 Replies Last reply Reply Quote 0
            • M Offline
              MMRIZE @fischi87
              last edited by

              @fischi87
              It is for type: 'notification'.
              I used this;

              
              this.sendNotification('SHOW_ALERT', {
                      type: 'notification',
                      title: 'Test Module',
                      message: 'I am a test notification',
                      timer: 10000,
              })
              
              F 1 Reply Last reply Reply Quote 0
              • M Offline
                MMRIZE @fischi87
                last edited by

                @fischi87
                But what you want is a stackable something; it needs another CSS modification. (I thought only single notification case.)

                1 Reply Last reply Reply Quote 0
                • F Offline
                  fischi87 @MMRIZE
                  last edited by

                  @MMRIZE

                  i will give it a try later with ur css data and let u know if its work. thank man.

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy