Display any real time value direcly in front of picture?

[corso66]

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

[hotNipi]

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}]

[Steve-Mcl]

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

[corso66]

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

[hotNipi]

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.

Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools

[corso66]

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

[Steve-Mcl]

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

[corso66]

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

[corso66]

Whaw !!! You are my guide

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

[hotNipi]

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}]

[corso66]

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 :

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 ?