I need to create a widget on my dashboard to reflect the position of our window blinds. I currently am using the gauge, but not really happy with it. Does anyone have a recommendation on what to use to show the position of a blind?

try here.. [image] Tank level indication inside of ui-template(v2) Dashboard Or a bit more "tank like" level widget [image] arrow_forward Code is HERE

Thanks for the link... unfortunately I haven't migrated to Dashboard v2 just yet.

Will this type work ? [image] Image selection by comparison Dashboard so there are 3 possible conditions and depending on what condition is present at the moment you want 3 different images to show on dashboard. can you just not use a switch node and direct show a define…

Sorta... I would prefer up/down so it reflects the position of the window blind. Not so much concerned about having buttons as showing visually the position.

can you share the different positions of the blind photos. the buttons are there to just show the working. it can be fed with some values from the flow as well.

[blinds] [{"id":"160087720f2fc056","type":"ui_slider","z":"24ac9cf336fcf334","name":"","label":"slider","tooltip":"","group":"03eabb95d5aa08dc","order":1,"width":"1","height":"11","passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"11","max":"0","step":"-1","className":"","x":680,…

Thanks, that's the visual look I was seeking. I'll upload this and give it a try.

After copying your flow, I have a couple of issues: On my dashboard, I see the slider but no images of the blind position In my flow, there is an error on the last node (template). It appears there are no references to the images. Do I need to upload them individually to my RPi and then include …

[image] k5map: but no images of the blind position have you done your httpstatic setting ? [image] k5map: The images are very large create your own images, you can also resize the images in the template as per your requirement. the flow is just diplaying different images with respect…

have you done your httpstatic setting ? I don't see any reference to httpstatic... where can I locate this? Ok, I'll resize the images to reduce their size.

Node-RED

Node-RED Forum

Recommended dashboard widget

Dashboard

smanjunath211 20 February 2025 04:56 4

Will this type work ?

you can increase number of steps to show more positions.

opnclose

Topic		Replies	Views
Image integration in the dashboard Dashboard	35	516	12 July 2024
Image selection by comparison Dashboard	37	659	3 October 2024
How i can change an image in javascript? Dashboard node-red-dashboard , mqtt	1	287	12 November 2022
Changing a Dashboard Image upon boolean MQTT input Dashboard node-red-dashboard , ui-widgets , mqtt , dashboard	6	636	5 June 2023
Dashboard Indicator Dashboard	5	976	4 February 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Recommended dashboard widget

Related topics