Roller shutter en node-red, je ne comprends pas comment l'utiliser

Salut,

J’ai récupéré ce code sur un forum node-red et il est question de que le msg.payload peut être entre 0 et 100.

J’ai créé un widget sous Jeedom et coller ce code mais même en changeant la valeur à la main de {msg.payload}, l’image du volet reste en bas.

Je me doutais bien que ça ne fonctionnerait pas mais je vois juste pas comment tenter de faire.

Est-ce qu’il faudrait un plugin node-red ? J’ai vu qu’il en existait un en privé.

Merci aux spécialistes :grinning:.

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

Lien du sujet : https://discourse.nodered.org/t/roller-shutter-template/23399

Salut tu peut essayer ceci dans un widget info numeric :

<div style="padding:10px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">	
  	<div class="rollade__container#id#">
      
        <svg class="rollade__fenster#id#" 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#id# rollade_valeur#id#" style="" 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>
<script>
  var valueTaille = is_numeric('#taille#') ? parseFloat('#taille#'):50;
  document.documentElement.style.setProperty('--rollade-width#id#', valueTaille+'%');
  jeedom.cmd.update['#id#'] = function(_options) {
    var valeur = _options.display_value;
    document.documentElement.style.setProperty('--rollade-valeur#id#', valeur+'%');
    $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);    	
  }
  jeedom.cmd.update['#id#']({
      display_value: '#state#',
      valueDate: '#valueDate#',
      collectDate: '#collectDate#',
      alertLevel: '#alertLevel#'
  });    
</script>
<style>
  :root {
    --rollade-color#id#: #097479;
    --rollade-width#id#: 90px;
    --rollade-valeur#id#: #state#%;
  }
  
        .rollade__container#id# {
            width: var(--rollade-width#id#);
            overflow: hidden;
            position: relative;
        }
  
        .rollade__fenster#id# {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .rollade__fenster#id# path {
            stroke: var(--rollade-color#id#);
            fill:none!important;
            stroke-width:6px;
        }
        .rollade__rollade#id# {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0px;
            z-index: 10;
            transition: all 1s;
        }
        .rollade__rollade#id# path.line {
            stroke: white;
            fill: none;
            stroke-width: 1.5px;
        }
        .rollade__rollade#id# path.bg {
            fill: var(--rollade-color#id#);
        }
  		.rollade_valeur#id# {
          top: calc((-1) * var(--rollade-valeur#id#));
          
  		}
</style>

Parametres optionnels pour la taille (exemple 50%)
image

1 J'aime

Excellent !!!

Un grand merci ça marche super bien sur un virtuel basique. Je vais voir à partir de là comment mettre un paramétrage optionnel pour le délais de transition que j’ai vu dans le style. Ça devrait être similaires à ce que tu as fait pour la taille.

Et puis reste à voir sur un vrai module et donc un vrai retour d’état.