Python, MQTT, display colored lines in one widget

tmollow · 8 February 2022 15:03

For my Node-Red waste calendar, the following lines are generated via Python and MQTT
pass to Node-Red:
Publishing to MQTT topic: Home/RPi44/Abfall_1
Message: Tue 08.02.2022 yellow recycling bin
Publishing to MQTT topic: Home/RPi44/Abfall_2
Message: Wed 09.02.2022 black residual waste bin
Publishing to MQTT topic: Home/RPi44/Abfall_3
Message: Wed 02/16/2022 black residual waste bin
Publishing to MQTT topic: Home/RPi44/Abfall_4
Message: Wed 02/16/2022 blue paper bin

Node-Red then produces colored output
grafik

In order to be able to accommodate more rows, I want to display all rows in one widget.
Di 08.02.2022 gelbe Wertstofftonne
Mi 09.02.2022 schwarze Restmülltonne
Mi 16.02.2022 schwarze Restmülltonne
Mi 16.02.2022 blaue Papiertonne
flows.json (30.9 KB)

I have found that a long string is possible for me
, but then how do I adjust the colors.
Please help.

smcgann99 · 8 February 2022 16:43

I imported your flow but cannot really test it.
Could you provide a screen shot how it looks now, and perhaps some test data for setup via inject nodes rather than MQTT.
You could use a template node to display the info, as then you will have more control over the colors etc.

tmollow · 9 February 2022 07:40

I've added 4 injects for different colors. In addition, an inject with
that shows how it should look, but still without colors. I can't do anything with templatets yet, maybe I'll get some help or a tip for the existing output as well can be done with a widget.
Kalender.json (30.0 KB)

jbudd · 9 February 2022 11:01

Your flow seems unnecessarily complicated.
You have 4 copies of this block of nodes. Are they identical, apart from msg.topic?

zenofmud · 9 February 2022 11:18

What is the purpose of having the split node connected to the join node?

If you have Handle as a stream of messages checked, nothing will come from the split
If you have it unchecked, the results will be the same as what went into the split node.

tmollow · 9 February 2022 12:50

grafik
I copied almost everything from somewhere. I removed the splits and joins and the display works as before.
From my RPi I always get the next 4 appointments via Python and MQTT, which I don't want to display in 4 widgets, but in one.
Kalende1.json (25.9 KB)

smcgann99 · 9 February 2022 15:10

do you get 4 different messages or just 1 ?
can you provide exactly what you get from the mqtt input please ?

tmollow · 9 February 2022 15:43

I get 4 differen messages, the next 4 days.
16.03.2022 blaue Papiertonne
-------
Tho collur, date and 'Tonne' are differnt.

smcgann99 · 9 February 2022 16:01

so do you get 1 message for each color, from 4 different topics ?

Looking at your first post there are 4 mqtt inputs.

So is topic Abfall_1 allways for the same color bin ? If so then the topic could tell us the color ?

jbudd · 9 February 2022 16:13

You didn't answer my question so it's possible that this won't answer yours, but perhaps worth trying.

[{"id":"6d42f030bd923829","type":"tab","label":"Abfallkalender","disabled":false,"info":""},{"id":"0fab64809f592209","type":"inject","z":"6d42f030bd923829","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Home/RPi44/Abfall_1","payload":"16.03.2022 blaue Papiertonne","payloadType":"str","x":170,"y":100,"wires":[["d3ddbe358ae2c911"]]},{"id":"19883144e42c386c","type":"inject","z":"6d42f030bd923829","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Home/RPi44/Abfall_2","payload":"18.03.2022 grüne Biotonne","payloadType":"str","x":170,"y":140,"wires":[["d3ddbe358ae2c911"]]},{"id":"0ff9beda1abfba01","type":"inject","z":"6d42f030bd923829","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Home/RPi44/Abfall_3","payload":"22.03.2022 gelbe  Wertstofftonne","payloadType":"str","x":170,"y":180,"wires":[["d3ddbe358ae2c911"]]},{"id":"efc8437ce7cfb0e4","type":"inject","z":"6d42f030bd923829","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Home/RPi44/Abfall_4","payload":" 23.03.2022 schwarze Restmülltonne","payloadType":"str","x":170,"y":220,"wires":[["d3ddbe358ae2c911"]]},{"id":"d3ddbe358ae2c911","type":"join","z":"6d42f030bd923829","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"1","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":370,"y":120,"wires":[["fc65bded99e44615"]]},{"id":"437988dad5e380d9","type":"ui_template","z":"6d42f030bd923829","group":"0b2c5ed94dd5b6dc","name":"","order":6,"width":"7","height":"4","format":"<style>\n    td.black { color: black; }\n    td.blue { color: blue; }\n    td.green { color: green; }\n    td.orange { color: orange; }\n</style>\n\n<table class=\"table\">\n    <tr ng-repeat=\"line in msg.payload\">\n        <td class =\"{{line.class}}\">{{line.text}}</td>\n    </tr>\n</table>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":680,"y":120,"wires":[[]]},{"id":"fc65bded99e44615","type":"function","z":"6d42f030bd923829","name":"","func":"let data = msg.payload;\nvar out = [];\nout.push();\nlet foo = {};\n    \nconst keys = Object.keys(data);\n\nkeys.forEach((key, index) => {\n    let myvar = data[key];\n    let myclass = \"none\";\n    if (myvar.includes(\"schwarz\")) {myclass = \"black\"}\n    if (myvar.includes(\"grüne\")) {myclass = \"green\"}\n    if (myvar.includes(\"gelb\")) {myclass = \"orange\"}\n    if (myvar.includes(\"blau\")) {myclass = \"blue\"}\n    \n    out.push(  {class: myclass, text: myvar } )\n\n//    msg.payload.key.class = \"foo\";\n});\n\nmsg.payload = out;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":120,"wires":[["437988dad5e380d9"]]},{"id":"9903092624fc44d4","type":"mqtt in","z":"6d42f030bd923829","name":"","topic":"Home/RPi44/#","qos":"2","datatype":"utf8","broker":"3dd428715c0663e1","nl":false,"rap":false,"inputs":0,"x":140,"y":60,"wires":[["d3ddbe358ae2c911"]]},{"id":"b69c31d9a2fa9385","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"777e77b5cf0d244e","order":3,"width":1,"height":1},{"id":"89b93ed723fc9b6b","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"777e77b5cf0d244e","order":7,"width":1,"height":1},{"id":"deec755f09e8585b","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"777e77b5cf0d244e","order":8,"width":1,"height":1},{"id":"51486b43087fd20e","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"777e77b5cf0d244e","order":11,"width":1,"height":1},{"id":"fbbc029b2db14b80","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"e9da5156132bafb5","order":3,"width":2,"height":1},{"id":"67966b508bc7016d","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"e9da5156132bafb5","order":5,"width":2,"height":1},{"id":"41eff89a215ef5be","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"e9da5156132bafb5","order":7,"width":2,"height":1},{"id":"2b35ccb741ad9f47","type":"ui_spacer","z":"6d42f030bd923829","name":"spacer","group":"e9da5156132bafb5","order":9,"width":2,"height":1},{"id":"0b2c5ed94dd5b6dc","type":"ui_group","name":"Demo","tab":"4311353dbffb7643","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"3dd428715c0663e1","type":"mqtt-broker","name":"RPi44","broker":"192.168.178.44","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"/sonoff-light","birthQos":"0","birthRetain":"false","birthPayload":"/sonoff-light","birthMsg":{},"closeTopic":"","closeQos":"0","closeRetain":"false","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willRetain":"false","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"777e77b5cf0d244e","type":"ui_group","name":"Hamburg Wetter ","tab":"4bb34f67.69a87","order":1,"disp":false,"width":10,"collapse":false},{"id":"e9da5156132bafb5","type":"ui_group","name":"AbfallKalender","tab":"4bb34f67.69a87","order":3,"disp":false,"width":10,"collapse":false},{"id":"4311353dbffb7643","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false},{"id":"4bb34f67.69a87","type":"ui_tab","name":"Hamburg Wetter, Benzinpreise Wellingsbüttel, Abfallkalender","icon":"fa-thermometer-half","order":1,"disabled":false,"hidden":false}]

smcgann99 · 9 February 2022 16:28

@jbudd Beat me to it - I was just trying to tease out a bit more info

I'll let him explain how it works then

jbudd · 9 February 2022 16:33

Well I'd be interested to see your answer smcgann99 because I had a devil of a job working out how to convert the inputs to an object and the object to an array of objects!

Wait - explain how it works??
Isn't it obvious?

smcgann99 · 9 February 2022 16:37

We need some kind of ticket allocation, I keep getting gazumped

jbudd · 9 February 2022 16:48

Hopefully this explains my approach:

The MQTT in node gets all topics not just one.
The Join combines them into a single object containing something like

{"Home/RPi44/Abfall_1":"16.03.2022 blaue Papiertonne",
"Home/RPi44/Abfall_2":"18.03.2022 grüne Biotonne",
"Home/RPi44/Abfall_3":"22.03.2022 gelbe Wertstofftonne"}

3 Function node annotated (and stripped of some crud):

let data = msg.payload;     //Make a local copy
var out = [];               //An array for the result because the ui-template table expecht an array

const keys = Object.keys(data);  // The list of elements in the input data

keys.forEach((key, index) => {   // Loop though the input data object
    let myvar = data[key];      // A local copy of just the current element
    let myclass = "none";       // Add a field "class" which will be used to style the table row
    if (myvar.includes("schwarz")) {myclass = "black"}
    if (myvar.includes("grüne")) {myclass = "green"}
    if (myvar.includes("gelb")) {myclass = "orange"}
    if (myvar.includes("blau")) {myclass = "blue"}
    
    out.push(  {class: myclass, text: myvar } )   // Push it to the array, discarding the "Home/RPi44/ABfall.." stuff as it's no longer needed
});

msg.payload = out;
return msg;

4 The template node contains some CSS classes for black, blue, orange and green. It assembles the table rows from the array it receives.

tmollow · 9 February 2022 17:13

grafik
I'm thrilled and have to play with the template a bit tomorrow, hopefully understand it too
Many thanks!

system · 11 March 2022 17:14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Dynamically changing node color or label Developing Nodes	9	4850	14 November 2022
Monitoring of change of value via colors Dashboard node-red-dashboard , function-node , mqtt	5	352	5 January 2023
Dashboard - line graph - show datapoints from database Dashboard node-red-dashboard , database	16	749	11 October 2022
Updating the UI widgets on an alternative way? Dashboard node-red-dashboard	16	550	9 November 2022
Issue with Real-Time Data Reading from MQTT Node - Unable to Display Graph Dashboard node-red-dashboard	23	400	14 September 2023

Python, MQTT, display colored lines in one widget

Related topics