How to change icon and payload by notification?

[MrCoffee]

Hello everyone,

I am trying to generate a touchable floorplan for controlling my smart home.
I am not very good at programming but I am able to copy and adjust:-) I am also willing to learn.

My idea is to have a background image of my floorplan and touchable icons in front of it.
Here is an example which shows what I would like to do and where my problem is:

Lets say I have got a touchable icon of a turned off bulb. The payload is “turn_on”. I use MMM-HTTPRequest to send a HTTP request to control my smart home when a notification is received.
So, if “turn_on” is recieved, a HTTP request will tell my smart home to turn the bulb on.
So far so good.
But here my problem starts:
The icon of the turned off bulb should change to a icon of a turned on bulb.
If I press the new turned on icon, the payload should be “turn_off” instead of “turn_on”.

My smart home is able to send notifications to the magic mirror like “page_increment” etc.
In case I turn the bulb off or on without using the magicmirror, my smart home will send a notification like “turn_on” to the magicmirror. But how should the programming on the mirror be, that the revieved notification changes the icon and payload on the mirror as well.

Maybe you know modules or part of codes which show me how to do it.

I am happy about any advice or help.

Thanks.
Mr.Coffee

[sdetweil]

@MrCoffee so the home automation code should send some ID with the notice, on or off…
and u have some table where u look up the ID (you could set the ID on the button in html)

what you are SUPPOSED to do, is save the info and then call updateDom(), which will regenerate the content by calling getDom().

lots of other modules change the dom directly, by using appropriate apis
so, the ID gets you the button object, and u can change its img tag src= value (or change its class which does all that)

var button=document.getElementById(id)

and of course u can examine the current class, or src= to use that as the ‘state’ you are toggling

[MrCoffee]

@sdetweil Thank you. That helped me unterstanding a bit more.
But it still seems a little bit far away for me for the moment:-)
Maybe I just found an alternative method. I played around with MMM-Touch a little.
The module has a possiblity to change the notification to send, the next time the button is pressed.
So if the button is pressed an light is turned on, than the notification send next time when the button is pressed can change to “turn off”.
MMM-Touch - on notification

Unfortunately it seems like the module only works with one button.

What is your opinion on this module?
Could you please have a look if I am right with one button only?
Will it be possible to install multiple instances like MMM-Touch1, 2, 3 … or even add some buttons customizing the code?

Thanks again.

[sdetweil]

@MrCoffee sorry, no info on that module, never used it. no idea if multiple instances can be used at once.

[MrCoffee]

@sdetweil Never mind. I will ask the developer.
I´ve just seen that you helped this guy out: image-on-notification. Things get clearer. Guess I have to try and play around a little.

Probably the best way is to set up a new module. Never tried it. Probably it will take some time:-)

[sdetweil]

@MrCoffee my sample module is here
https://github.com/sdetweil/SampleModule

based on what u wanted I assumed u were writing your own module to put multiple images over the floor layout

[MrCoffee]

@sdetweil Guess you are right.
I just cloned your sample module.
Thanks for helping me out.