How to activate dynamically created UI switches


#1

I've used this flow https://gist.github.com/DeanCording/1541bcbba48bb088ec1503dba109f63c to dynamically create a set of md-switches on my UI corresponding to my sonoff devices.

How do I "connect" these dynamically created UI elements such that they reflect the current state and cause an action when clicked. I understand how to do these things if the UI switches were individually, manually defined, but can't see how to incorporate a dynamic switch into a sequence.


#2

You need to connect any update messages from your SONOFF's to the UI. Typically, you would use MQTT for this as it lets you subscribe to the appropriate update messages directly and feed the outputs direct to the Dashboard element.


#3

I put up a thread about my "Coffee Pot Timer" project that has a SonOff S20 with a coffee pot plugged into it. I have a dashboard button (the 'cup' that when you click it, it sends a message to the S20 to turn the pot on and starts a 20 minute count down timer that eil shut the plug off if I forget to (the reason I built the flow).

You might want to install it and examine it to learn what I did.


#4

Thanks for the answers, but they're kinda missing the point. My fault for wording the Q badly. I have mqtt, etc etc already up and running fine. I can manually declare a UI switch for each device and connect it up to my mqtt node, and that's all working fine too.

My question is specifically about how do I connect a dynamically created UI switch, ie. a switch created with template and therefore which doesn't exist in any of my flows.


#5

Providing your flow would be a step in the right direction. Then people could see what you are already doing/not doing.


#6

Ah, that's slightly different. But similar.

Firstly, you need to make sure that, when you dynamically create your switches, each gets a unique, repeatable ID. Preferably an ID that directly relates to the originating MQTT topic to make things simple. Then you will have to link things together via a flow. Without specifics it is hard to be clearer.


#7

The link to the flow is in the question


#8

The flow that creates the UI switches is in the question. My flow that drives the sonoffs is quite complex, but is outside of the scope of my question. Let's just say that when I toggle a UI switch I want to create a simple message with a payload of "toggle" that I want to route to a Debug node. I'm really really cool with how to drive sonoffs using MQTT. My question is all about how to "you will have to link things together via a flow". Remember these UI switches were created dynamically so do not appear in any flows.


#9

OK, but that is not relavent. As you have created the Dashboard Template yourself, it is up to you to include code in the template such that, when the switch is activated, it sends back a suitable message indicating the ID if the switch activated.

There are plenty of examples around of how to send a msg back to Node-RED. The only thing you are really missing is making sure that the msg that is sent back contains an identifier that you can link to the appropriate sonoff.

So, starting from the example you've linked to, you need to add an on-click event handler that triggers a JavaScript function with a single parameter that is passed in from the button. My Angular is a bit rusty or I would give you an example. You populate the parameter from the device variable that you receive from the loop.

The function does a msg.send back to Node-RED containing a suitable msg.topic related to the ID you've passed in, the payload need only be "toggle" or something else.

Once back in Node-RED, you connect the output from your template node to something that passes the msg onward to MQTT, processing the topic if it doesn't exactly match your SONOFF device topic.


#10

Cool thx.
It's the "There are plenty of examples around of how to send a msg back to Node-RED" that I'm missing. I couldn't find any.

So if I understand correctly, the magic is that I need client-side JS code that calls msg.send (not node.send()?). Then if I understand what you are saying, this message will appear as an output from the template node that created the UI.
Is any of this documented anwhere?


#11

You should have asked :wink:


#12

Fantastic. That's exactly what I was looking for. many thanks.