How to change background image of a div based on a switch state?

General
1

Hello every one,
is there any way to change background image of a div element based on a variable (like a switch state)?
I want to use this technique to show states of devices on a Scada project, so i really appreciate your help

2

Hello @ayub_anwar.

Here is one way to do it, passing a CSS style as a message property (my example runs on a Raspberry Pi, paths may be different for other platforms):

In settings.js I have the line
httpStatic: '/home/pi/.node-red/static/',
There are two images: ~/.node-red/static/images/smiley-left.png and ~/.node-red/static/images/smiley-right.png.

Untitled 4
Untitled 4784Ă—366 25.1 KB

Untitled 6

[{"id":"6a445b59bdd2762d","type":"ui_template","z":"fe3f87d78808cd82","group":"f76268eaaca5a4a9","name":"","order":10,"width":"4","height":"4","format":"<div class=\"mydiv\" style=\"{{msg.background}}\"></div>\n<style>\n    .mydiv {\n        height: 190px;\n        width: 190px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":60,"wires":[[]]},{"id":"3b2f75a5851a1c9b","type":"ui_switch","z":"fe3f87d78808cd82","name":"","label":"switch","tooltip":"","group":"f76268eaaca5a4a9","order":9,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":370,"y":60,"wires":[["95e399f998ca5cb7"]]},{"id":"95e399f998ca5cb7","type":"change","z":"fe3f87d78808cd82","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"payload","tot":"msg"},{"t":"change","p":"background","pt":"msg","from":"false","fromt":"bool","to":"background-image: url(/images/smiley-left.png);","tot":"str"},{"t":"change","p":"background","pt":"msg","from":"true","fromt":"bool","to":"background-image: url(/images/smiley-right.png);","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":60,"wires":[["6a445b59bdd2762d"]]},{"id":"f76268eaaca5a4a9","type":"ui_group","name":"Demo","tab":"ef7df567c051ee20","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ef7df567c051ee20","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
3

thanks @ jbudd for your replay
I uncommented the httpstatics line and chaged the path to
httpStatic: 'C:/Users/AYUB/.node-red/',

and in the change node i use this
background-image: url(/IMAGES/my pics/dop107bv.png);

the dop107bv.png is the name of the image which i use,
but still not does not work
i replaced the "" /IMAGES/my pics/dop107bv.png "" with a url from web images and it worked
so o you have any idea?

4

I don't use node red on Windows so I don't know how it works. But I'd guess you have to use a subfolder of .Node-red, for example httpStatic: 'C:/Users/AYUB/.node-red/static/'

And put your image in that folder.

I think the path to your image in the CSS should be in quotes and start with /
So unless you have a subfolder static\IMAGES it would be
background-image : URL("/drop107bv.png")

5

You are right, I tested and now it works
Thanks for your help i really appreciate it

1 Like
6

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