# Recommended dashboard widget

**URL:** <https://discourse.nodered.org/t/recommended-dashboard-widget/95524>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [19 February 2025 20:59 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524 "2025-02-19T20:59:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [19 February 2025 20:59 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/1 "2025-02-19T20:59:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 February 2025 01:35 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/2 "2025-02-20T01:35:27Z")

</div>

try here..

> [@Tank level indication inside of ui-template(v2)](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/3):
>
> Or a bit more "tank like" level widget [image] arrow_forward Code is HERE

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [20 February 2025 03:32 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/3 "2025-02-20T03:32:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 February 2025 04:56 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/4 "2025-02-20T04:56:54Z")

</div>

Will this type work ?

> [@Image selection by comparison](https://discourse.nodered.org/t/image-selection-by-comparison/91043/7):
>
> 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 defined image ? sorry I may be misreading your requirement. [opnclose] [{"id":"aa4055d2e729e0fa","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-1","payloadType":"str"…

you can increase number of steps to show more positions.

![opnclose](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed9c1fff351fdb314b14ed176a1b5f6067eb9e44.gif)

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [20 February 2025 12:44 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/5 "2025-02-20T12:44:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 February 2025 15:16 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/6 "2025-02-20T15:16:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 February 2025 16:17 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/7 "2025-02-20T16:17:39Z")

</div>

![blinds](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51717a2de8a6f970c40d0d6808347553b14a47cc.gif)

```auto
[{"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,"y":1860,"wires":[["4b3db270e94c4103","a1ba9e775283db67"]]},{"id":"a1ba9e775283db67","type":"template","z":"24ac9cf336fcf334","name":"","field":"img","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\\test\\b{{payload}}.png","output":"str","x":840,"y":1860,"wires":[["0d4d75c8fa027d3f"]]},{"id":"0d4d75c8fa027d3f","type":"template","z":"24ac9cf336fcf334","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n<img src={{img}} width=\"350\" height=\"300\" style= \"margin: 5px 5px 5px 5px\"; >\n</div>","output":"str","x":1000,"y":1860,"wires":[["602aa9bfc152b5e6"]]},{"id":"602aa9bfc152b5e6","type":"ui_template","z":"24ac9cf336fcf334","group":"03eabb95d5aa08dc","name":"Logo","order":2,"width":"17","height":"12","format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1130,"y":1860,"wires":[[]]},{"id":"03eabb95d5aa08dc","type":"ui_group","name":"MyGroup","tab":"aae86d7a6a09f458","order":1,"disp":false,"width":"20","collapse":false,"className":""},{"id":"aae86d7a6a09f458","type":"ui_tab","name":"MyFlow","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

> **Images**
>
> ![b0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ee4632f32325d94db1bc758994409bbb8dcdebb.png)  
> ![b1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46f85be7631c802d5b728e1d80ec073edcb2c0e1.png)  
> ![b2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e2939c008cda34314e3114d7b44b8744cdf3e250.png)  
> ![b3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/8643b0a05fa7353114fae118e36a28428557109a.png)  
> ![b4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6cfab503337a40f9204a95e2ab9887ba55ca9ca2.png)  
> ![b5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d72345c30e6664178ee7ada42f633290e07d255a.png)  
> ![b6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84b093ce12d7a70c778a11a270901bb1750c42df.png)  
> ![b7](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74b7a6908c1170997753f42ca697b0c0f4944827.png)  
> ![b8](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ea42707836ab6340cad5f3be529831491a331b1.png)  
> ![b9](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7cebfdc81faf332245af7aa2656c7292eaad9003.png)  
> ![b10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/5064df1be806a62a23bfdcc4efae9bad976c2abb.png)  
> ![b11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/53df23fd2b0252b905d2330020ac509250b99225.png)

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [22 February 2025 17:53 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/8 "2025-02-22T17:53:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [22 February 2025 18:00 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/9 "2025-02-22T18:00:32Z")

</div>

After copying your flow, I have a couple of issues:

1. On my dashboard, I see the slider but no images of the blind position
2. 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 their path in the reference node?
3. The images are very large. I have 7 blinds and if I use these images, they would span more than a page. Any problem if I shrink their size?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 February 2025 00:53 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/10 "2025-02-24T00:53:49Z")

</div>

> [@k5map](#):
>
> but no images of the blind position

have you done your httpstatic setting ?

> [@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 to input values.

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [24 February 2025 01:34 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/11 "2025-02-24T01:34:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 February 2025 04:26 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/12 "2025-02-24T04:26:43Z")

</div>

> [@k5map](#):
>
> where can I locate this

`[Changing a Dashboard Image upon boolean MQTT input - #7 by aresh](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/7)

check here, it may help. read the complete thread for clarity.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 May 2025 04:27 UTC](https://discourse.nodered.org/t/recommended-dashboard-widget/95524/13 "2025-05-25T04:27:05Z")

</div>

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