Roller Shutter Template

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

<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>
6 Likes

Nice :slight_smile:.
Noticed that svg class="rollade__rollade" has style defined twice.