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.

    MM Default Alert Module Overlay Does not Go Away When Clicked

    Scheduled Pinned Locked Moved Troubleshooting
    6 Posts 2 Posters 872 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.
    • C Offline
      contactmike1
      last edited by contactmike1

      Hello,

      I use MM as a dashboard and not a mirror, so it’s a touch screen. I have a module that is submitting weather alerts to MM using the standard alert functionality. The weather alerts display great using the default module; however, when I click the alert using the touchscreen (to dismiss it), the alert and alert text go away, but the black overlay box does not. So, after I dismiss an alert, I am unable to interact with my touchscreen MM anymore because the black overlay box sits on top of everything, including my menus and page navigation, and so I cannot click on my menus or page navs anymore. :-( I have to either kill the mirror and restart it in the console or wait until the alert timeout limit is reached.

      My goal is to configure the alerts to stay up on the screen until they are manually dismissed (w/ a long multiple hour timeout so they don’t last forever), but this isn’t feasible if the overlay will prevent touchscreen access for the duration of the timeout when the alert is manually dismissed. I have looked at the actual JS code, and it appears to be coded so that the alert only goes away after the timeout.

      When I touch the alert, the alert box and text do go away on the screen, but I can not locate the code which causes the alert box and text to go away upon touch/click. If I could find the right code section, it would be simple to duplicate the hide alert function to get rid of the overlay. But I can’t figure out what section of code is causing the “click the alert to dismiss” functionality to work. Has anyone done something like this before, or does anyone who actually knows JS code understand how it’s coded? I learned enough JS to install MM and make baby tweaks to things, but it is still difficult for me to understand any code larger than a couple lines.

      A 2 Replies Last reply Reply Quote 0
      • A Offline
        ashishtank Module Developer @contactmike1
        last edited by

        Hi @contactmike1 I have checked the issue and reproduced it, I can confirm that it is a bug. I will create GitHub issue and will solve it as well.

        The issue is because alert.js is not getting call back from Notificationfx.js when it is dismissed by user, In case of timer it is working fine.

        Here in code below we are not assigning onClose call back handler (It should also set with right context).

        this.alerts[sender.name] = new NotificationFx({
        			message: image + message,
        			effect: this.config.alert_effect,
        			ttl: params.timer,
        			al_no: "ns-alert"
        		});
        

        Below notification handler is calling the callback when user dismisses it or it is dismissed by code.

        NotificationFx.prototype.dismiss = function () {
        		this.active = false;
        		clearTimeout(this.dismissttl);
        		this.ntf.classList.remove("ns-show");
        		setTimeout(() => {
        			this.ntf.classList.add("ns-hide");
        
        			// callback
        			this.options.onClose(); //< -----------
        		}, 25);
        
        1 Reply Last reply Reply Quote 0
        • A Offline
          ashishtank Module Developer @contactmike1
          last edited by

          @contactmike1 Pull request at https://github.com/MichMich/MagicMirror/pull/2229

          1 Reply Last reply Reply Quote 0
          • C Offline
            contactmike1
            last edited by

            @ashishtank Hey this is great!

            I figured if I was lucky, someone might toss me a snippet to add to my code, but I’m very impressed someone wants to update the Master.

            I wasn’t sure if this really amounted to an issue/bug since touchscreen/nav isn’t really the intended use of MM. I’ll pull in the new code once it gets merged. Thanks!

            A 1 Reply Last reply Reply Quote 0
            • A Offline
              ashishtank Module Developer @contactmike1
              last edited by

              @contactmike1 Sure, if there is a possibility to dismiss the alert by clicking on it then it should work correctly (should hide the overlay as well). More over people are also using MM with touch screen using IR frame so it should any ways work.

              You can add below one line in your code in alert.js file if you do not want to wait for merge in master.

              //Store alert in this.alerts
              		this.alerts[sender.name] = new NotificationFx({
              			message: image + message,
              			effect: this.config.alert_effect,
              			ttl: params.timer,
              			onClose: () => this.hide_alert(sender),  //< - add this line, with out this comment
              			al_no: "ns-alert"
              		});
              
              1 Reply Last reply Reply Quote 0
              • C Offline
                contactmike1
                last edited by

                Thanks Man! I am on holiday, but I will do this when I get back. It will work beautifully now!

                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