# Display any real time value direcly in front of picture?

**URL:** <https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138>\
**Category:** General\
**Created:** [24 March 2021 18:30 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138 "2021-03-24T18:30:49Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [24 March 2021 18:30 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/1 "2021-03-24T18:30:49Z")

</div>

Hi all,

I have succeeded to insert a picture in background or in a node group.

However, i'm telling me about how can i display any température and other real time values on a hydraulic schema like this one :

![schema-principe-installation-solaire](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/ee1d342aa34ae5bae315223bc3bf773024f73854.jpeg)

I have searched on the forum and on the web but ... no idea ...

Thank you very much for help 🙃

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 March 2021 19:03 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/2 "2021-03-24T19:03:09Z")

</div>

Basics are simple.

```auto
[{"id":"bb3cd614.5df1b8","type":"ui_template","z":"f56ccabd.7567e8","group":"54cac90f.373058","name":"","order":5,"width":"13","height":"10","format":"<div id=\"bgr\">\n <div class=\"txt\" id=\"txt1\">{{msg.payload.first}}</div>\n <div class=\"txt\" id=\"txt2\">{{msg.payload.second}}</div>\n</div>\n\n\n<style>\n#bgr{\n background-image:url(\"/img/pilt.jpeg\");\n background-size: contain;\n background-repeat: no-repeat;\n position:relative;\n width:100%;\n height:100%;\n}\n\n.txt{\n color:green;\n font-weight:bold;\n}\n#txt1{\n position: absolute;\n right: 39px;\n top: 54px;\n}\n#txt2 {\n position: absolute;\n left: 239px;\n top: 30px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":400,"y":1020,"wires":[[]]},{"id":"55d72f27.21e91","type":"inject","z":"f56ccabd.7567e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"first\":\"55deg\",\"second\":\"120deg\"}","payloadType":"json","x":250,"y":1020,"wires":[["bb3cd614.5df1b8"]]},{"id":"54cac90f.373058","type":"ui_group","name":"Image","tab":"c122ecdc.526d7","order":1,"disp":true,"width":"13","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Custom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 March 2021 19:16 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/3 "2021-03-24T19:16:16Z")

</div>

You could probably adapt [this solution](https://discourse.nodered.org/t/noob-node-red-user-connecting-dropdown-item-to-html-value/39818/2)

Alternatively, use [node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg/in/590bc13ff3a5f005c7d2189bbb563976) and have beautiful vector diagrams

Example (not so beautiful but it demonstrates text and colour animations)...

 ![2019-08-29_13-30-09.gif](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3a80af54f901e4ff4700febcdfbe2feb0872a416.gif)

---

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [25 March 2021 08:32 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/4 "2021-03-25T08:32:47Z")

</div>

Oh ! Very nice, exacly what i want. Difficulty is to to find position on each label to display ...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2021 08:37 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/5 "2021-03-25T08:37:09Z")

</div>

it is actually easy enough.  
Make new label with new id and add the css with dummy values.

```auto
#txt_new {
    position: absolute;
    left: 100px;
    top: 100px;
}

```

Then open browser dev tools, inspect that element and you can adjust the position values "live". When you are happy, copy the adjusted values and paste to that element in your CSS.

Done. 🙂

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfbf622f01304ce886fa7ab4902f9402c00e0afa.jpeg "Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools") ](https://www.youtube.com/watch?v=Z3HGJsNLQ1E)

---

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [25 March 2021 08:37 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/6 "2021-03-25T08:37:39Z")

</div>

I just tryed this UI-SVG. It's an amazing software inside nodered !!! But, not easy to learn... You have already used it ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 March 2021 08:47 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/7 "2021-03-25T08:47:21Z")

</div>

> [@corso66](#):
>
> You have already used it ?

um, yeah, I was the co-developer of ui-svg alongside Bart 😃 😃 😃

NOTE: 1. SVG is a beast but there are loads of resources around the web that can better teach you than me or Bart. 2. There are lots of threads on this forum related to ui-svg and a full [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki) of help, demos and info.

If you decide to use it - give it a go, try the demos and examples, then when you get stuck at a particular thing, open a thread and ask away - this forum is amazing - you will get assistance.

---

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [25 March 2021 09:15 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/8 "2021-03-25T09:15:55Z")

</div>

> [@Steve-Mcl](#):
>
> um, yeah, I was the co-developer of ui-svg alongside Bart 😃 😃 😃

Oh sorry, ok i understand now 😅

But about my application, i think classic method is sufficient. However, i have installed and tryed SVG on my node red, and i keep it preciously !

Like you said before, this forum is amazing !

---

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [25 March 2021 17:17 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/9 "2021-03-25T17:17:45Z")

</div>

Whaw !!! You are my guide 🤣

I did exactly that you told me. And you can see my result :

 ![live_schema](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74cb57106e123ec1055ade954725aef381972bc8.jpeg)

Mmmm ... i need to perfect my HTML learning.

For now, i must to insert any small gifs on this schema to animate it, for example, a pump running or not, under condition :  
 ![CJV_pump-rotating_tan-optimized](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed582845591ea9ae7ff71d3b2f1dca574ba57d4c.gif)

Conditions must be in a msg.payload in an fonction node or better direcly in html code ?

This is my actual flow :

```auto
[{"id":"bb3cd614.5df1b8","type":"ui_template","z":"ccd0e9e4.0b8908","group":"54cac90f.373058","name":"","order":5,"width":"13","height":"10","format":"\n<div id=\"bgr\">\n <div class=\"txt\" id=\"TS\">Ts {{msg.payload.TS}}°C</div>\n <div class=\"txt\" id=\"TH\">Th {{msg.payload.TH}}°C</div>\n <div class=\"txt\" id=\"TM\">Tm {{msg.payload.TM}}°C</div>\n <div class=\"txt\" id=\"TL\">Tb {{msg.payload.TL}}°C</div>\n <div class=\"txt\" id=\"T1\">T1 {{msg.payload.T1}}°C</div>\n <div class=\"txt\" id=\"T2\">T2 {{msg.payload.T2}}°C</div>\n <div class=\"txt\" id=\"TF\">Tf {{msg.payload.TF}}°C</div>\n</div>\n\n\n<style>\n#bgr{\n background-image:url(\"/schema.jpg\");\n background-size: contain;\n background-repeat: no-repeat;\n position:relative;\n width:100%;\n height:100%;\n}\n\n.txt{\n color:black;\n font-weight:bold;\n}\n#TS{\n position: absolute;\n right: 480px;\n top: 50px;\n}\n#TH{\n position: absolute;\n right: 410px;\n top: 130px;\n}\n#TM{\n position: absolute;\n right: 410px;\n top: 190px;\n}\n#TL{\n position: absolute;\n right: 410px;\n top: 250px;\n}\n#T1{\n position: absolute;\n right: 310px;\n top: 120px;\n}\n#T2{\n position: absolute;\n right: 310px;\n top: 270px;\n}\n#TF{\n position: absolute;\n right: 150px;\n top: 440px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":200,"wires":[[]]},{"id":"6848f56b.14e65c","type":"debug","z":"ccd0e9e4.0b8908","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":260,"wires":[]},{"id":"4264dea0.077b","type":"function","z":"ccd0e9e4.0b8908","name":"","func":"//Ts is a S16 sent by WB, but IP protocol send bytes only\nvar tsH; //TsH is a High byte of Ts.\nvar tsL; //TsL is a Low byte of Ts.\nvar ts;\nvar th;\nvar tm;\nvar tb;\nvar t1;\nvar t2;\nvar tf;\n\nvar o;\n\n/* test if there is valid raw data */\no = msg.payload;\n\nif(o[0] === 1)\n{ /* Parse real time temperature values */\n o = msg.payload;\n\n tsH = o[1];\n tsL = o[2];\n\n ts = (tsH << 8) + (tsL & 0xFF);\n th = o[3];\n tm = o[4];\n tb = o[5];\n t1 = o[6];\n t2 = o[7];\n tf = o[8];\n \n msg.payload = {\n TS:ts,\n TH:th,\n TM:tm,\n TL:tb,\n T1:t1,\n T2:t2,\n TF:tf\n };\n\n return msg;\n\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":520,"y":200,"wires":[["bb3cd614.5df1b8","6848f56b.14e65c"]]},{"id":"54cac90f.373058","type":"ui_group","name":"Visuel temps réel","tab":"c122ecdc.526d7","order":1,"disp":true,"width":"13","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Live Schéma","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```

Thanks a lot

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2021 18:39 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/10 "2021-03-25T18:39:39Z")

</div>

If to keep same approach, still possible, but if gets more complicated, it probably takes to make it to accept incoming changes properly.

You'll need make static copy of that gif (keep the size)

```auto
[{"id":"bb3cd614.5df1b8","type":"ui_template","z":"f56ccabd.7567e8","group":"54cac90f.373058","name":"","order":5,"width":"13","height":"10","format":"<div id=\"bgr\">\n <div class=\"txt\" id=\"txt1\">{{msg.payload.first}}</div>\n <div class=\"txt\" id=\"txt2\">{{msg.payload.second}}</div>\n <div class=\"pump\" id=\"pumpanim\" style=\"display:{{(msg.payload.pump == 1) ? 'block' : 'none'}}\"></div>\n <div class=\"pump\" id=\"pumpstatic\" style=\"display:{{(msg.payload.pump == 0) ? 'block' : 'none'}}\"></div>\n</div>\n\n\n<style>\n#bgr{\n background-image:url(\"/img/pilt.jpeg\");\n background-size: contain;\n background-repeat: no-repeat;\n position:relative;\n width:100%;\n height:100%;\n}\n\n.txt{\n color:green;\n font-weight:bold;\n border:2px solid green;\n padding:6px;\n background:beige;\n}\n.pump{\n width: 50px;\n height: 50px;\n position: absolute;\n left: 20px;\n top: 10px;\n \n}\n#pumpanim{\n background: url(/img/pumpanim.gif);\n background-size: contain;\n background-repeat: no-repeat; \n}\n#pumpstatic{\n background: url(/img/pumpstatic.gif);\n background-size: contain;\n background-repeat: no-repeat; \n}\n#txt1{\n position: absolute;\n right: 39px;\n top: 54px;\n}\n#txt2 {\n position: absolute;\n left: 239px;\n top: 30px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":1020,"wires":[[]]},{"id":"55d72f27.21e91","type":"inject","z":"f56ccabd.7567e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"first\":\"55deg\",\"second\":\"120deg\",\"pump\":\"1\"}","payloadType":"json","x":190,"y":1000,"wires":[["bb3cd614.5df1b8"]]},{"id":"568ed52c.5a15cc","type":"inject","z":"f56ccabd.7567e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"first\":\"55deg\",\"second\":\"120deg\",\"pump\":\"0\"}","payloadType":"json","x":190,"y":1040,"wires":[["bb3cd614.5df1b8"]]},{"id":"54cac90f.373058","type":"ui_group","name":"Image","tab":"c122ecdc.526d7","order":1,"disp":true,"width":"13","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Custom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![corso66](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/corso66/32/41143_2.png) [@corso66](https://discourse.nodered.org/u/corso66)\
**Post date:** [27 March 2021 15:11 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/11 "2021-03-27T15:11:20Z")

</div>

Hi,

I'm very happy about your help, i understand now better how html code is running, and dev tools in my Edge browser is a gold tool.

I've maked 3 gifs picture, 2 statics right and left, and one animated with Adobe Animate. Like this :  
 ![pump_ani2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20562d4f6b78f373a904afa2f1a21d42c0230950.gif) ![pump_fix_left2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a65116500b33841bccb796d96f6ef40b54a6221.gif) ![pump_fix_right2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c76684d1210a9fa4b970d4084055154dd1f864b3.gif)

All functionning properly.

However, is there a tools that can permit values or gifs positionning on the screen, for example with the mouse, and retourning coordonates ?

---

<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:** [10 April 2021 15:11 UTC](https://discourse.nodered.org/t/display-any-real-time-value-direcly-in-front-of-picture/43138/12 "2021-04-10T15:11:36Z")

</div>

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