# Roller Shutter GUI on Dashboard (Up-Half..-STOP-Half...-Down)

**URL:** <https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414>\
**Category:** Dashboard\
**Created:** [27 March 2022 16:08 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414 "2022-03-27T16:08:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [27 March 2022 16:08 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/1 "2022-03-27T16:08:49Z")

</div>

I've searched through all the topics but did not find any roller shutter (= blind) Dashboard Widget.  
The only thing I've found is this:

> [@Roller Shutter Template](https://discourse.nodered.org/t/roller-shutter-template/23399):
>
> Hi there, i am new to Node-RED. Yesterday i tried my first flow and was missing a "Roller Shutter Template". So i made one slight_smile It is a CSS animated SVG Image, which shows you the position of the Roller Shutter. You can define the size and color of the Widget. The msg.payload can be 0 to 100 (100 = 100% opened). If you want 100% = Closed than you can search for style="top: calc((-1) \* {{msg.payload}}%);" and remove the (-1). [Bildschirmfoto 2020-03-21 um 10.36.43] The svg is creat…

But that one does not seems to be "pushable" to control this way:

- UP (full)
- Up 50%
- STOP -
- Down 50%
- DOWN

Is it possible I've missed something like this on a dashboard?  
 ![kép](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/ea3992ff18b643b671c7e6ba50ca55517288f1e6.png)

_There are thousands of NR users around the globe and 70% of us using it for home-automatisation._  
_It just seems for me impossible nobody ever needed a thing like that?_

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 March 2022 17:34 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/2 "2022-03-27T17:34:37Z")

</div>

Not sure what you are asking - Have you tried sending a payload ?

_**msg.payload can be 0 to 100 (100 = 100% opened)**_

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 March 2022 17:42 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/3 "2022-03-27T17:42:20Z")

</div>

If this is not what you want you could look at this thread also - [Dashboard tips. Let the ui\_text act as level gauge ... DIY gauge examples](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878)

---

<div class="post-metadata">

**Author:** ![c4yolli](https://avatars.discourse-cdn.com/v4/letter/c/85e7bf/32.png) [@c4yolli](https://discourse.nodered.org/u/c4yolli)\
**Post date:** [27 March 2022 18:02 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/4 "2022-03-27T18:02:16Z")

</div>

As smcgann99 said, you can set every position with this shutter template (its from me). See Screenshot 1.

a) (Screenshot 2)  
I have multipe buttons =\> MQTT Out Node (Set Position)  
e.g. Button 1, Payload 100  
to MQTT Out Node, Topic "shellies/wz-rollade-1/roller/0/command/pos"

b) (Screenshot 3)  
MQTT In Node =\> Shutter Template (Show Position)  
e.g. Topic "shellies/wz-rollade-1/roller/0/pos" to Shutter Template

 ![Bildschirmfoto 2022-03-27 um 19.55.42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e3c49e5abd17aeca35d4014214db3971c782cfd0.png)  
 ![Bildschirmfoto 2022-03-27 um 19.57.54](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d08aa202f34c6840d2831c1463979323d5d2d01.png)  
 ![Bildschirmfoto 2022-03-27 um 19.57.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/28fffc901b1a587ca0eecb4562ac5991d31e6532.png)

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [27 March 2022 19:08 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/5 "2022-03-27T19:08:11Z")

</div>

Thank your for the detailed post! 🙂

So I was right: That nice widget is only able to SHOW a status, not to control anything.

I'm more interested at those 3 blue buttons [^] [stop] [v].  
Is it possible to create 5 of them as a template and use it 8x for all roller shutters?  
_(I don't think that placing 40 buttons one by one is an ideal solution.)_

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [27 March 2022 19:22 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/6 "2022-03-27T19:22:49Z")

</div>

Here's my roller door simulation - which is part of the flow I used to control my garage door via Alexa.

 ![Screen Shot 03-27-22 at 08.19 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c22ed7998925dd7d695d4f0792a57f26308ef60c.png)  
In the function node I use a counter that increments from 0 to 100 or decrements from 100 to 0.

![Screen Shot 03-27-22 at 08.24 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae6c50aa850ec9ee63c94594a34e72c4f1f6237a.png)

You might be able to modify it to suit your needs.

```auto
[{"id":"a47754ee.cc9948","type":"ui_template","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","group":"273505a6.34ddaa","name":"Roller door simulation","order":1,"width":"0","height":"0","format":"<style>\n :root {\n --rollade-color: #097479;\n --rollade-width: 90px;\n }\n .rollade__container {\n width: var(--rollade-width);\n overflow: hidden;\n position: relative;\n }\n .rollade__fenster {\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n .rollade__fenster path {\n stroke: var(--rollade-color);\n fill:none!important;\n stroke-width:6px;\n }\n .rollade__rollade {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n z-index: 10;\n transition: all 1s;\n }\n .rollade __rollade path.line {\n stroke: white;\n fill: none;\n stroke-width: 1.5px;\n }\n .rollade__ rollade path.bg {\n fill: var(--rollade-color);\n }\n \n </style>\n\n <h3>Door position</h3>\n <div class=\"rollade __container\">\n <svg class=\"rollade__ fenster\" width=\"100%\" height=\"100%\" viewBox=\"0 0 170 188\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n <g transform=\"matrix(1,0,0,1,-15.909,-45.6212)\">\n <g transform=\"matrix(0.989904,0,0,0.992491,4.03539,0.837446)\">\n <path d=\"M180.329,56.389C180.329,51.839 176.626,48.145 172.064,48.145L23.291,48.145C18.729,48.145 15.025,51.839 15.025,56.389L15.025,222.454C15.025,227.004 18.729,230.698 23.291,230.698L172.064,230.698C176.626,230.698 180.329,227.004 180.329,222.454L180.329,56.389Z\" />\n </g>\n <g transform=\"matrix(1,0,0,1.38253,3.04599,-37.9811)\">\n <path d=\"M97.589,64.432L97.589,191.286\" />\n </g>\n <g transform=\"matrix(1,0,0,1,2.84135,56.1777)\">\n <path d=\"M18.74,83.189L177.463,84.189\" />\n </g>\n </g>\n </svg>\n <svg class=\"rollade__rollade\" style=\"top: calc((-1) * {{msg.payload}}%);\" width=\"100%\" height=\"100%\" viewBox=\"0 0 181 190\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n <g transform=\"matrix(1.35281,0,0,1.35281,-45.3041,-102.109)\">\n <path class=\"bg\" d=\"M167.134,82.161C167.134,78.473 164.14,75.479 160.452,75.479L40.171,75.479C36.483,75.479 33.489,78.473 33.489,82.161L33.489,208.93C33.489,212.618 36.483,215.612 40.171,215.612L160.452,215.612C164.14,215.612 167.134,212.618 167.134,208.93L167.134,82.161Z\"/>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,-9)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,1)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,11)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,21)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,31)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,41)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,51)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,61)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,71)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,81)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,91)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,101)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,111)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n </g>\n </svg>\n </div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1460,"y":200,"wires":[[]]},{"id":"8c54390f2bb17c9b","type":"inject","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":1030,"y":140,"wires":[["bb3c87874a48df16"]]},{"id":"bb3c87874a48df16","type":"trigger","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":1040,"y":200,"wires":[["c77fdce872c5e850","2c9ca19a07baabd2"]]},{"id":"c77fdce872c5e850","type":"debug","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1250,"y":260,"wires":[]},{"id":"6441625a23250da7","type":"link out","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","mode":"link","links":["825f1f9b12488582"],"x":995,"y":280,"wires":[]},{"id":"825f1f9b12488582","type":"link in","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","links":["6441625a23250da7"],"x":1095,"y":280,"wires":[["bb3c87874a48df16"]]},{"id":"2c9ca19a07baabd2","type":"function","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"","func":"var roller_pos = flow.get(\"roller_pos\");\n\nvar state_register = flow.get(\"state_register\") || \"S0\";\n\nif (state_register == \"S0\") {\n flow.set(\"roller_pos\",0);\n node.send( [{payload: 0}] );\n}\nelse if (state_register == \"S1\") {\n if (roller_pos < 100){\n roller_pos++;\n flow.set(\"roller_pos\", roller_pos);\n }\n node.send( [{payload: roller_pos}] );\n}\n\nelse if (state_register == \"S2\") {\n flow.set(\"roller_pos\", 100);\n node.send( [{payload: 100}] );\n }\n\nelse if (state_register == \"S3\") {\n if (roller_pos > 1){\n roller_pos--;\n flow.set(\"roller_pos\", roller_pos);\n }\n node.send( [{payload: roller_pos}] );\n}\n\nreturn null;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1240,"y":200,"wires":[["a47754ee.cc9948"]]},{"id":"1e034ec8bb4788f4","type":"comment","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"Roller door simulation - nothing to do with controlling the door","info":"","x":1160,"y":60,"wires":[]},{"id":"eb17e5b36d1b92f5","type":"comment","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"Dave's garage door takes 25-second to open or close","info":"","x":1140,"y":100,"wires":[]},{"id":"bbbccb50d0c6ccb6","type":"comment","z":"fc2ffed5c7a37e1d","g":"3f33ed654be29500","name":"Roller door simulation has 100 steps, so each step is 250ms","info":"","x":1360,"y":140,"wires":[]},{"id":"273505a6.34ddaa","type":"ui_group","name":"Garage roller door","tab":"fc0f45ae.d6066","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fc0f45ae.d6066","type":"ui_tab","name":"Garage roller door","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![c4yolli](https://avatars.discourse-cdn.com/v4/letter/c/85e7bf/32.png) [@c4yolli](https://discourse.nodered.org/u/c4yolli)\
**Post date:** [27 March 2022 19:48 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/7 "2022-03-27T19:48:55Z")

</div>

In my flow, i have one button for all (down) and one button for all (up).  
If you want to control every shutter separately, you have to create those five buttons and then copy them 8 times (all at once).

```auto
[{"id":"6ec428cc.625f98","type":"ui_button","z":"b566dad5.172ad8","name":"WZ-R1-Runter","group":"99499a30.68b918","order":4,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-down","payload":"close","payloadType":"str","topic":"","x":300,"y":340,"wires":[["e1dace16.8417e"]]},{"id":"5ad9a11f.6af31","type":"ui_button","z":"b566dad5.172ad8","name":"WZ-R1-Stop","group":"99499a30.68b918","order":3,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":290,"y":300,"wires":[["e1dace16.8417e"]]},{"id":"b031e308.a8afa","type":"ui_button","z":"b566dad5.172ad8","name":"WZ-R1-Hoch","group":"99499a30.68b918","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-up","payload":"open","payloadType":"str","topic":"","x":290,"y":260,"wires":[["e1dace16.8417e"]]},{"id":"e1dace16.8417e","type":"mqtt out","z":"b566dad5.172ad8","name":"WZ Rollade 1 Command","topic":"shellies/wz-rollade-1/roller/0/command","qos":"","retain":"","broker":"b54780ef.cea3","x":550,"y":280,"wires":[]},{"id":"eeaea17e.9c9ab","type":"ui_text","z":"b566dad5.172ad8","group":"99499a30.68b918","order":1,"width":"3","height":"1","name":"","label":"WZ Rollade 1","format":"","layout":"row-spread","x":116,"y":301,"wires":[]},{"id":"b072a3bb.44cc2","type":"mqtt out","z":"b566dad5.172ad8","name":"WZ Rollade 1 Pos","topic":"shellies/wz-rollade-1/roller/0/command/pos","qos":"","retain":"","broker":"b54780ef.cea3","x":530,"y":220,"wires":[]},{"id":"99499a30.68b918","type":"ui_group","name":"Rolladen-Steuerung","tab":"6e5a41e7.83815","order":1,"disp":true,"width":"6","collapse":false},{"id":"b54780ef.cea3","type":"mqtt-broker","name":"NAS-Mosca","broker":"192.168.1.11","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"6e5a41e7.83815","type":"ui_tab","name":"Wohnzimmer","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<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:** [26 April 2022 19:49 UTC](https://discourse.nodered.org/t/roller-shutter-gui-on-dashboard-up-half-stop-half-down/60414/8 "2022-04-26T19:49:10Z")

</div>

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