Notification based on input

Dashboard
1

Hi there,
is it possible to create a notification based on the information coming from the node before?
I have some devices where I want to ask for confirmation before chaining the status, e.g. my printer.

I want the dialog to say: Turn Printer on or off based on the payload coming from the node before. And then send a (true/false) to the output after Yes/no was pressed

[{"id":"461f725.525490c","type":"ui_toast","z":"6880e39e.295cac","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"Yes","cancel":"No","topic":"Turn Printer on/off?","name":"","x":450,"y":360,"wires":[["2c63840.21217fc"]]},{"id":"fa3e93de.a01918","type":"ui_template","z":"6880e39e.295cac","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n    class=\"vibrate filled bigfont\"\n    ng-style=\"{background: !msg.payload ? 'red' : 'green' }\"\n    ng-click=\"send({payload: !msg.payload })\"\n    > \n    Drucker<br/>\n    </md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":240,"y":360,"wires":[["461f725.525490c"]]},{"id":"2c63840.21217fc","type":"debug","z":"6880e39e.295cac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":360,"wires":[]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]
2

I am not sure what you are asking for. The notification node will show whatever is in the payload if that is what you are looking for.

3

After playing around, I almost got to where I wanted to be.
Colin you're right, I can send whatever payload I want to be displayed.

My goal is to have a universal flow which creates a toggle button with notification window for a kind of "are you sure?" dialog.

I have three open issues:

  • I'm not able to preserve the original state of "Printer". But I need to since at the end I need to toggle based on the Notification Dialog result. Is there any clever way to achieve that?
  • How do I display the Topic name on the toggle button?
  • And this is more cosmetic, the first function which creates the "Phrase" or notification topic, how do I create that in the button template instead of using a separate function?
[{"id":"f27959d3.60f5f8","type":"ui_toast","z":"72373649.58baf8","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"Yes","cancel":"No","topic":"","name":"","x":570,"y":260,"wires":[["ae4a1df8.118e58","b9313c5.c09d94"]]},{"id":"d614d424.5b8a1","type":"ui_template","z":"72373649.58baf8","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n    class=\"vibrate filled bigfont\"\n    ng-style=\"{background: !msg.payload ? 'red' : 'green' }\"\n    ng-click=\"send({payload: msg.notification})\"\n    > \n    msg.topic\n    </md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":360,"y":260,"wires":[["f27959d3.60f5f8","d7863455.7aa8"]]},{"id":"b9313c5.c09d94","type":"debug","z":"72373649.58baf8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":750,"y":320,"wires":[]},{"id":"46b40042.ad6318","type":"function","z":"72373649.58baf8","name":"","func":"msg.notification = (msg.payload == \"true\" ? ('Turn on ' + msg.topic + '?') : ('Turn off ' + msg.topic + '?'));\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":260,"wires":[["d614d424.5b8a1","1f9920ce.224d37"]]},{"id":"d7863455.7aa8","type":"debug","z":"72373649.58baf8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":550,"y":320,"wires":[]},{"id":"aff37395.212b88","type":"mqtt in","z":"72373649.58baf8","name":"","topic":"Printer","qos":"2","broker":"aa21acb8.2e7348","x":70,"y":260,"wires":[["46b40042.ad6318"]]},{"id":"ae4a1df8.118e58","type":"function","z":"72373649.58baf8","name":"","func":"msg.payload = (msg.payload == \"Yes\") ? !msg.payload : msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":750,"y":260,"wires":[["c9fecf21.a0a7c8","5de67d26.b386ac"]]},{"id":"c9fecf21.a0a7c8","type":"mqtt out","z":"72373649.58baf8","name":"","topic":"Printer","qos":"","retain":"","broker":"aa21acb8.2e7348","x":930,"y":260,"wires":[]},{"id":"1f9920ce.224d37","type":"debug","z":"72373649.58baf8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":320,"wires":[]},{"id":"5de67d26.b386ac","type":"debug","z":"72373649.58baf8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":930,"y":320,"wires":[]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"aa21acb8.2e7348","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]
4

Please read: How to share code or flow json and edit your post to correct it.

5

If you move the value into another property of the message. msg.something then that should stick with the message all the way down the chain, then you can pick it up again when you need it. I think you will have to select Message Pass Through in teh toggle button, but I am not sure exactly how that works for a toggle. Experimenting required I think. You will have to watch out for an MQTT loop. Alternatively you can feed it round the outside and join it back in with a Join node set to generate key/value pairs.

Look at the info tab for the ui template node for how to expand message properties into the text.

The same way you have done the background.

6

I have to move it to payload, otherwise it doesn't show in the notification, or am i missing something?
that's why I put it into msg.notification first...

pass through works fine until the notification dialog, then only, in my case, "Yes" or "No" survives...

7

You can put it in the payload and copy it to another property at the same time. Are you saying that the notification node does not pass through other properties? I haven't tried it.

8

If I try this:

ng-click="send({msg.payload : !msg.payload})"

it doesn't work

If I try this:

ng-click="send({payload : !msg.payload})"

only msg.payload survives the template node

so I guess the problem is in the template node
How do I send the click off with only modifying the .payload property, leaving the others alone?

9

I haven't used ui_template much, but presumably you could use
ng-click="send({payload : !msg.payload, someproperty: msg.someproperty})"

10

True. You can't do this in one straight flow. Functionality of the button should be only to feed correct data to notification node, containing topic (goes to the notification header) and payload (goes to the notification message content).
After choosing the behavior with notification (yes or no) you must generate proper message (by device communication protocol ) to be sent to device.

11

almost figured it out....
the one thing missing is, how do I copy the message untouched as a whole from input to output in ui_template?
I can't use the passthrough command since that would pass data through when state changes and not when I press the button.

If i do

    ng-click="send({msg})"

an "msg" object within the msg object (with the right payload though) gets created. But I want it at root, so to speak...

orig:

{"_msgid":"87bd768.a993d88","topic":"","payload":"Turn on Drucker?","actState":false}

after ui_template

{"msg":{"templateScope":"local","topic":"","payload":"Turn on Drucker?","actState":false},"socketid":"gy-QR7Fmu0IvJhrjAAAO","_msgid":"edf6c54d.b3bc58"}
12

You could explicitly send all the properties you are interested in, or you could put a function node after it

msg = msg.payload.msg
return msg
13

What about to store device actual state to the flow or global context and after notification decision make new message based on state you then can read from context?

14

Also in your template you can change your msg properties like this:

ng-click="msg.keepforlater = msg.payload; msg.payload = msg.notification;send(msg)"
15

hugobox, thank you!!!
Why is this working now???
was it the {} brackets????
if you can tell me on top how to delete a property in ui_template that would be awesome....
(I want to delete msg.topic at that stage since I don't want to show it in the notification dialog)

16

The brackets create a brand new object. using send(msg) reuses the input message.
To hide the topic you can do:

ng-click="msg.topic = '';msg.keepforlater = msg.payload; msg.payload = msg.notification;send(msg)"
17

how do I display a variable on my button? I want to display msg.name

Is there anywhere a document or site where I can read about angular basics used in ui_template??

18

You can either use the mustache brackets :

 <md-button> {{msg.name}} </md-button>

or you can use:

<md-button ng-bind = "msg.name"> </md-button>
19

Here is the result:

Whoever has a need for something like this, I post my result here for further use
It is a toggle button with active feedback, works also if the state changes somewhere else, with an "are you sure" dialog.
If input contains a topic, it will be used for the button and the dialog.

I will use this for my house where I want a confirmation before turning something on or off.

[{"id":"f27959d3.60f5f8","type":"ui_toast","z":"72373649.58baf8","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"Yes","cancel":"No","topic":"","name":"","x":350,"y":360,"wires":[["ae4a1df8.118e58"]],"icon":"node-red/light.png"},{"id":"d614d424.5b8a1","type":"ui_template","z":"72373649.58baf8","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n    class=\"vibrate filled bigfont\"\n    ng-style=\"{background: !msg.actState ? 'red' : 'green' }\"\n    ng-bind = \"msg.name\"\n    ng-click=\"msg.topic = ''; msg.payload = msg.notification;send(msg)\"\n>\n</md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":360,"y":300,"wires":[["f27959d3.60f5f8"]]},{"id":"46b40042.ad6318","type":"function","z":"72373649.58baf8","name":"Save states; Create Notification(change text as necessary)","func":"msg.actState = msg.payload;\nmsg.name = msg.topic;\nmsg.notification = (msg.payload === true ? ('Turn off ' + msg.topic + '?') : ('Turn on ' + msg.topic + '?'));\nreturn msg;","outputs":1,"noerr":0,"x":500,"y":240,"wires":[["d614d424.5b8a1"]]},{"id":"aff37395.212b88","type":"mqtt in","z":"72373649.58baf8","name":"","topic":"Printer","qos":"2","broker":"aa21acb8.2e7348","x":330,"y":180,"wires":[["eb39af4a.11b3c"]]},{"id":"ae4a1df8.118e58","type":"function","z":"72373649.58baf8","name":"convert output based on actual state","func":"msg.payload = (msg.payload == \"Yes\") ? !msg.actState : msg.actState;\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":420,"wires":[["c9fecf21.a0a7c8"]]},{"id":"c9fecf21.a0a7c8","type":"mqtt out","z":"72373649.58baf8","name":"","topic":"Printer","qos":"","retain":"","broker":"aa21acb8.2e7348","x":330,"y":480,"wires":[]},{"id":"eb39af4a.11b3c","type":"json","z":"72373649.58baf8","name":"","property":"payload","action":"","pretty":false,"x":530,"y":180,"wires":[["46b40042.ad6318"]]},{"id":"c44ffede.b7498","type":"comment","z":"72373649.58baf8","name":"Remove, if using boolean input","info":"","x":610,"y":140,"wires":[]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"aa21acb8.2e7348","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]

Thanks for everybody's help, especially hugobox, I learned a lot

2 Likes