Display any real time value direcly in front of picture?

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 :


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

Thank you very much for help :upside_down_face:

Basics are simple.

[{"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}]
1 Like

You could probably adapt this solution

Alternatively, use node-red-contrib-ui-svg and have beautiful vector diagrams

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

1 Like

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

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

#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. :slight_smile:

1 Like

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

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

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

Oh sorry, ok i understand now :sweat_smile:

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 !

1 Like

Whaw !!! You are my guide :rofl:

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

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 :

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

This is my actual flow :

[{"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

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)

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


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 pump_fix_left2 pump_fix_right2

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 ?

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