Need help sending a notification after a click event



  • Hi All,

    I have a button on my magic mirror. When I click the button, I want it to send a notification to another module so that it can perform an action.

    Here’s a snippet of what I have so far, sorry if i’m way off, not really great at javascript :S

    getDom: function() {
    	var wrapper = document.createElement("div");
    	var button = document.createElement("div");	
            var text = document.createElement("span");	
             text.innerHTML = 'click me';
            button.appendChild(text);
    	wrapper.appendChild(button);
    
    	$(button).on("click", function(){
                          this.sendNotification("BUTTON_PRESSED", {});
    	});
                 return wrapper;
                }
         });
    

    When I execute this code, I get an error, ‘this.sendNotification is not a function’. So obviously I’m trying to call that function when it is not in scope. But I don’t really know of another way to wire up the button click to the send notification function. Any ideas anyone?

    Thanks!


  • Module Developer

    A button connected to the gpio of the raspberry?

    Then you’ll need either the MMM-button or MMM-buttons modules to read the state from the gpio.



  • Actually this isn’t a button connected to the gpio of the raspberry. This is literally a button displayed on the screen of the raspberry pi


  • Module Developer

    Ohh okey,
    I’m no coder myself, but,

    Try this one :

    getDom: function() {
    
            var self = this;
    	var wrapper = document.createElement("div");
            var text = document.createElement("span");	
            text.innerHTML = 'click me';
            text.addEventListener("click", () => button());
    
    	function button(){
                 self.sendNotification("BUTTON_PRESSED", {});
                 text.innerHTML = "You clicked me!";
    	};
    
            return wrapper;
            }
       });
    
    

    I’m at work so I can’t try this right now, but, give it a go



  • Thanks for your input, I modified it a bit to get the result I wanted! Works like a charm!

    getDom: function() {
    	var wrapper = document.createElement("div");
    	var button = document.createElement("div");
    	var text = document.createElement("span");
    	var hidden = true;		
    	button.className = "hide-toggle";
    	text.innerHTML = this.config.caption;
    	text.addEventListener("click", () => this.sendNotification("BUTTON_PRESSED", {}));
      button.appendChild(text);
      wrapper.appendChild(button);
    	return wrapper;
    }

Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.