Recommended dashboard widget

Dashboard
1

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?

2

try here..

3

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

4

Will this type work ?

you can increase number of steps to show more positions.

opnclose

5

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.

6

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.

7

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,"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
b0610×402 1.47 KB

b1
b1611×400 1.5 KB

b2
b2606×400 1.44 KB

b3
b3611×400 1.52 KB

b4
b4609×400 1.51 KB

b5
b5608×400 1.45 KB

b6
b6608×400 1.46 KB

b7
b7610×400 1.52 KB

b8
b8611×400 1.53 KB

b9
b9612×401 1.55 KB

b10
b10610×402 1.55 KB

b11
b11610×401 1.54 KB

2 Likes
8

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

9

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?