# Python, MQTT, display colored lines in one widget

**URL:** <https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989>\
**Category:** Dashboard\
**Created:** [8 February 2022 15:03 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989 "2022-02-08T15:03:25Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmollow](https://avatars.discourse-cdn.com/v4/letter/t/7993a0/32.png) [@tmollow](https://discourse.nodered.org/u/tmollow)\
**Post date:** [8 February 2022 15:03 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/1 "2022-02-08T15:03:25Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/6773e794fe9e2379e5e43d7a4aa713931b01d014.png)

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](https://discourse.nodered.org/uploads/short-url/quSLjvbVYXf7Ih72PM2XeFFyP0s.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.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [8 February 2022 16:43 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/2 "2022-02-08T16:43:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tmollow](https://avatars.discourse-cdn.com/v4/letter/t/7993a0/32.png) [@tmollow](https://discourse.nodered.org/u/tmollow)\
**Post date:** [9 February 2022 07:40 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/3 "2022-02-09T07:40:41Z")

</div>

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](https://discourse.nodered.org/uploads/short-url/749GdjNQK9XpDWncBBsCPNCiiNS.json) (30.0 KB)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 February 2022 11:01 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/4 "2022-02-09T11:01:50Z")

</div>

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

 ![Untitled 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fb2c5ff27aa873fe972accc9bae49c43cbd00815.jpeg)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [9 February 2022 11:18 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/5 "2022-02-09T11:18:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tmollow](https://avatars.discourse-cdn.com/v4/letter/t/7993a0/32.png) [@tmollow](https://discourse.nodered.org/u/tmollow)\
**Post date:** [9 February 2022 12:50 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/6 "2022-02-09T12:50:11Z")

</div>

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0b3a00fbbd73234560eadf7ee9530882ef7203ae.png)  
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](https://discourse.nodered.org/uploads/short-url/aBma5YkCU9TzzQTQMhI25GWIfgc.json) (25.9 KB)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 15:10 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/7 "2022-02-09T15:10:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tmollow](https://avatars.discourse-cdn.com/v4/letter/t/7993a0/32.png) [@tmollow](https://discourse.nodered.org/u/tmollow)\
**Post date:** [9 February 2022 15:43 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/8 "2022-02-09T15:43:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 16:01 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/9 "2022-02-09T16:01:19Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 February 2022 16:13 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/10 "2022-02-09T16:13:43Z")

</div>

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

 ![Untitled 6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/079d5a5b27f7387ca55129a85697beda718b3aa6.jpeg)  
 ![Untitled 5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17faf4524f7a7f9acacb0d1560ec935b0bc92e04.jpeg)

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 16:28 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/11 "2022-02-09T16:28:32Z")

</div>

@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 🤣

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 February 2022 16:33 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/12 "2022-02-09T16:33:10Z")

</div>

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? 😉

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 16:37 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/13 "2022-02-09T16:37:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 February 2022 16:48 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/14 "2022-02-09T16:48:45Z")

</div>

Hopefully this explains my approach:

1. The MQTT in node gets all topics not just one.
2. 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):

```auto
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.

---

<div class="post-metadata">

**Author:** ![tmollow](https://avatars.discourse-cdn.com/v4/letter/t/7993a0/32.png) [@tmollow](https://discourse.nodered.org/u/tmollow)\
**Post date:** [9 February 2022 17:13 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/15 "2022-02-09T17:13:12Z")

</div>

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c01bf1bf70e9401cbc6dc939e03b7805b941a626.png)  
I'm thrilled and have to play with the template a bit tomorrow, hopefully understand it too  
Many thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 March 2022 17:14 UTC](https://discourse.nodered.org/t/python-mqtt-display-colored-lines-in-one-widget/57989/16 "2022-03-11T17:14:14Z")

</div>

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