# Roller Shutter Template

**URL:** <https://discourse.nodered.org/t/roller-shutter-template/23399>\
**Category:** Dashboard\
**Created:** [21 March 2020 09:49 UTC](https://discourse.nodered.org/t/roller-shutter-template/23399 "2020-03-21T09:49:54Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [21 March 2020 09:49 UTC](https://discourse.nodered.org/t/roller-shutter-template/23399/1 "2020-03-21T09:49:54Z")

</div>

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 🙂  
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/464b8df94209bf25bd06742ff313390f87c3797e.png)

The svg is created by me and can used as you want. The title / headline for the Roller Shutter has to be set directly in the html.

Simply create an Dashboard template and paste the code below.

```auto
<style>
        :root {
            --rollade-color: #097479;
            --rollade-width: 90px;
        }
        .rollade__container {
            width: var(--rollade-width);
            overflow: hidden;
            position: relative;
        }
        .rollade__fenster {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .rollade__fenster path {
            stroke: var(--rollade-color);
            fill:none!important;
            stroke-width:6px;
        }
        .rollade__rollade {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0px;
            z-index: 10;
            transition: all 1s;
        }
        .rollade__rollade path.line {
            stroke: white;
            fill: none;
            stroke-width: 1.5px;
        }
        .rollade__rollade path.bg {
            fill: var(--rollade-color);
        }
        
    </style>

    <h3>TITLE</h3>
    <div class="rollade__container">
        <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;">
            <g transform="matrix(1,0,0,1,-15.909,-45.6212)">
                <g transform="matrix(0.989904,0,0,0.992491,4.03539,0.837446)">
                    <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" />
                </g>
                <g transform="matrix(1,0,0,1.38253,3.04599,-37.9811)">
                    <path d="M97.589,64.432L97.589,191.286" />
                </g>
                <g transform="matrix(1,0,0,1,2.84135,56.1777)">
                    <path d="M18.74,83.189L177.463,84.189" />
                </g>
            </g>
        </svg>
        <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;">
            <g transform="matrix(1.35281,0,0,1.35281,-45.3041,-102.109)">
                <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"/>
                <g transform="matrix(1.69574,0,0,1,18.3547,-9)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,1)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,11)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,21)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,31)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,41)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,51)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,61)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,71)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,81)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,91)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,101)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
                <g transform="matrix(1.69574,0,0,1,18.3547,111)">
                    <path class="line" d="M13.383,95.652L84.46,95.652" />
                </g>
            </g>
        </svg>
    </div>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 March 2020 10:34 UTC](https://discourse.nodered.org/t/roller-shutter-template/23399/2 "2020-03-21T10:34:04Z")

</div>

Nice 🙂.  
Noticed that `svg class="rollade__rollade"` has `style` defined twice.

---

<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:** [20 April 2020 10:40 UTC](https://discourse.nodered.org/t/roller-shutter-template/23399/3 "2020-04-20T10:40:02Z")

</div>

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