Show and unshow picture on the dashboard

[f5swb]

Hello guys, I need some help here, I'm trying to do something when i get a message in the msg.payload (for example:

1. I want to display an image in the dashboard, but when it is something else on the msg.payload (for
   example:
2. i want the image to disappear.

the question is quite simple : how to make visible or unvisible picture ?

Many thanks in advance

Dimitri.

[E1cid]

There are many posts about this Search results for 'show image in dashboard' - Node-RED Forum. If you try some of the many examples, if you have issues post back with example of what you have tried, then members here will be pleased to offer assistance as to what the issue may be.

[f5swb]

Many thanks E1cid,
before I send my question I searched it and I didn't found how to unvisible / unshow a picture which has been launched on the dashboard

[hotNipi]

There is of course many ways to do it, but here's one example of basics how it can be done.

[{"id":"c10bda71353ded21","type":"ui_template","z":"d418230481b87e35","group":"55888982bdd0637f","name":"TEST","order":5,"width":0,"height":0,"format":"<style>\n    .change-visibilitiy-with-message.show .element-to-hide{\n        display:block;\n    }\n    .change-visibilitiy-with-message.hide .element-to-hide{\n        display:none;\n    }\n</style>\n<div class=\"element-to-hide\">\n    <!--your content here-->\n    \n    <!--remove TEST-->\n    TEST\n    <!--remove TEST-->\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"change-visibilitiy-with-message","x":530,"y":2100,"wires":[[]]},{"id":"2c9e9c26e5733809","type":"inject","z":"d418230481b87e35","name":"visible","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"change-visibilitiy-with-message show","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":390,"y":2080,"wires":[["c10bda71353ded21"]]},{"id":"a9e54987ff08d948","type":"inject","z":"d418230481b87e35","name":"hidden","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"change-visibilitiy-with-message hide","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":390,"y":2120,"wires":[["c10bda71353ded21"]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]