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