Working with different payload

Dashboard
1

Hey, I need to do a custom dashboard where I'll put a map of my office with different values from sensors. My problem is that I have 3 mqtt nodes and I need to connect this 3 nodes to the same ui-template dashboard because there I add the map image and I access to the msg.payload of mqtt nodes.

The main question is how I can differentiate the 3 payloads into iu-template node :slight_smile:

This is the code of ui-template node:

> <div id="planta" style="position: relative; top: 75%; left: 15%; font-size:160%; font-weight: bold;">
>     {{msg.payload}} dB
> </div>
> 
> 
> <div id="planta" style="position: relative; top: 33%; left: 79%; font-size:160%; font-weight: bold;">
>     {{msg.payload}} dB
> </div>
> 
> <div id="planta" style="position: relative; top: 68%; left: 79%; font-size:160%; font-weight: bold;">
>     {{msg.payload}} dB
> </div>
> 
> <div id="planta">
>     <img src="/plano_de_oficina.png" alt="Cinque Terre" width="1000" height="600">
> </div>

Thanks you very much :slight_smile:

2

Well, if each sensor sets a different topic on the msg it sends, then each ui element can be linked to an mqtt in node that listens for only that topic... is this what you are asking?

3

Hi shrickus, thanks you for your time :slight_smile:

The main problem is that if I put a ui-template node for each one mqtt in node, the dashboard split the differents contents that I need show there, this are: 3 values into a image, for this reason I'm trying to put the 3 values and the image in the same ui-template node instead of different nodes.

4

at some previous point do you have them either in the one object ? or different topics ? or somehow differentiated... if in a single object (with eg item1, item2 etc you could use {{msg.payload.item1}} etc

5

Hi @dceejay, thanks for help me,

My goal is some like this picture:
goal

where in ui-template code is in my first message :slight_smile:

6

Sounds like you need to use 3 topics with a common root (e.g. "OfficeA/Sensor1", "OfficeA/Sensor2", "OfficeA/Sensor3") -- then set up the mqtt in node to listen for the topic "OfficeA/#" so that one node receives all three sensor readings.

Wire that to a join node set to manual mode that waits for all 3 topics and groups the readings into a single payload object. When the ui_template gets the payload object, it should be able to reference each part of the payload by topic name. If that is not clear, then post the part of your flow you have developed (surrounded by lines with only 3 backtics ```) and someone will be able to help you get it working.

7

In fact, I tryed to use the join node the similar form that you say but I don't know how to do that the respectives sensor have the same array posicion, for example, sensor 1 in position 0, sensor 2 in position 1... for in the template access to it msg[0].payload and if, for example, one sensor stop send, join node have to drive data without wait all sensor.

8

It's possible to set some criteria in the ui_template code? because I think some like: show msg.payload of node that msg.topic is topic1.

9

using the join as below ought to get you a single message with all three parts in

image

10

This flow shows how 3 different topics/payloads can be combined into one payload, with each sensor value in its own named property:

image
image.png1097Ă—448 31.6 KB 

[{"id":"9ce94fe7.f2429","type":"join","z":"9cd675b0.a84be8","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":450,"y":1220,"wires":[["72d26ae1.fab164"]]},{"id":"202e0bd.d893bf4","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor1","payload":"10","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1180,"wires":[["9ce94fe7.f2429"]]},{"id":"564598e3.276bf8","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor2","payload":"20","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1220,"wires":[["9ce94fe7.f2429"]]},{"id":"ad32a8c.244f758","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor3","payload":"13","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1260,"wires":[["9ce94fe7.f2429"]]},{"id":"72d26ae1.fab164","type":"debug","z":"9cd675b0.a84be8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":1220,"wires":[]}]

Every time any of the sensor readings is sent, the join node outputs a payload object, containing the last reading for each topic it received (notice how the payload grows with each newly injected msg).

With a combined payload like this, you just need to update your template code to refer to each value by its property name, something like this:

<div id="planta" style="position: relative; top: 75%; left: 15%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor1 || '?'}} dB
</div>
<div id="planta" style="position: relative; top: 33%; left: 79%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor2 || '?'}} dB
</div>
<div id="planta" style="position: relative; top: 68%; left: 79%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor3 || '?'}} dB
</div>

Since the payload is not guaranteed to have all 3 topics present, you need to test for an undefined value and display something else, which is why I used the syntax:
{{msg.payload.sensor1 || '?'}} meaning to show a question mark if the value is not found (or 0, actually)

1 Like
11

Since the payload is not guaranteed to have all 3 topics present,...

or wait for all three first... by setting the number of parts required to be 3 :slight_smile:

1 Like
12

Right, but he said he wants to show 1 or 2 of the readings, even if the 3rd is not sending (for some reason) -- so I went with count = 1

1 Like
13

This solution is perfect, my project run exactly I want, many thanks @shrickus and @dceejay :smiley::smiley: