Creer un widget affichant une couleur Hex

Tags: #<Tag:0x00007f3f2e552f48> #<Tag:0x00007f3f2e552e58>

Bonjour,
Je cherche à faire un widget qui permettrai sur une tuile d’afficher une variable numérique autre sous forme d’un carré ou rectangle peu importe ayant la couleur la valeur hex par ex: #4dfe01
Ne sachant pas coder j’ai utilisé un template multistate qui affiche des images en fonction de la valeur hex de la variable « autre ». Ça marche sauf que si un seul digit de la couleur change, plus rien ce qui est normal. Un peu ce que l’on a sur le widget des Gateway Xiaomi. sauf que sur ce widget le carré à la couleur de l’anneau est une commande.
Si quelqu’un à une idée je suis preneur.
Je suis bien sur en V4.

Salut,

J’ai 2 widgets de roues chromatiques disponibles ça ne fait pas l’affaire ? Tu dois absolument utiliser une commande info/numérique, pas de commande action/couleur ?

Bonjour @Salvialf,
j’ai tourné sur tes widget mais j’ai besoin pour une info couleur donc « autre » C’est un scénario qui décide de la couleur.
edit c’est un problème waf donc je file doux :smiley:
Pour une cde action j’utilise tes roues chromatiques qui sont top :+1:

Bonsoir @Kerdale, un simple widget code devrait faire l’affaire :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!-- 2022-06-22 - @Phpvarious  -->
  <template>
    <div>showColorText : Affiche la couleur en texte [1 = Afficher, 0 = Cacher | défaut : cacher]</div>
    <div>widthDiv : Taille en largeur de la div [ex : 50, 60 ... | défaut : 75]</div>
    <div>heightDiv : Taille en hauteur de la div [ex : 10, 20 ... | défaut : 28]</div>
  </template>
  
  <div class="content-xs">
    <span id="couleur#id#"></span>
    <div class="couleur#id#"></div>
  </div>
  <script type="text/javascript">
    jeedom.cmd.update['#id#'] = function(_options)
    {
      var cmd = $('.cmd[data-cmd_id=#id#]')
      document.documentElement.style.setProperty('--color#id#', _options.display_value);
      if ('#showColorText#' == 1) cmd.find('#couleur#id#').html(_options.display_value).show();
      else cmd.find('#couleur#id#').html(_options.display_value).hide();
      if ('#widthDiv#' != '#'+'widthDiv#'){
        document.documentElement.style.setProperty('--widthDiv#id#', '#widthDiv#px');
      } else document.documentElement.style.setProperty('--widthDiv#id#', '75px');
      if ('#heightDiv#' != '#'+'heightDiv#'){
        document.documentElement.style.setProperty('--heightDiv#id#', '#heightDiv#px');
      } else document.documentElement.style.setProperty('--heightDiv#id#', '28px');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#',no_animate:true});
  </script>
  <style>
    :root {
    --color#id#: #state#;
    --widthDiv#id#: 75px;
    --heightDiv#id#: 28px;
    }
    .couleur#id# {
      margin-top: 2px;
      height: var(--heightDiv#id#);
      border-radius: var(--border-radius);
      width: var(--widthDiv#id#);
      background: var(--color#id#);
      padding: 6px 0px;
    }
  </style>
</div>

Bonne soirée.

Bonsoir @Phpvarious
Absolument super , c’est exactement ce que je cherchais :+1:
J’ai gagné un sacré paquet de points WAF, :grinning: bon j’ai tout de même dit que je n’en n’était pas l’auteur.

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!-- 2022-06-22 - @Phpvarious  -->
  <template>
    <div>showColorText : Affiche la couleur en texte [1 = Afficher, 0 = Cacher | défaut : cacher]</div>
    <div>widthDiv : Taille en largeur de la div [ex : 50, 60 ... | défaut : 75]</div>
    <div>heightDiv : Taille en hauteur de la div [ex : 10, 20 ... | défaut : 28]</div>
  </template>
  
  <div class="content-xs">
    <span id="couleur#id#"></span>
    <div class="couleur#id#"></div>
  </div>
  <script type="text/javascript">
    jeedom.cmd.update['#id#'] = function(_options)
    {
      var cmd = $('.cmd[data-cmd_id=#id#]')
      document.documentElement.style.setProperty('--color#id#', _options.display_value);
      if ('#showColorText#' == 1) cmd.find('#couleur#id#').html(_options.display_value).show();
      else cmd.find('#couleur#id#').html(_options.display_value).hide();
      if ('#widthDiv#' != '#'+'widthDiv#'){
        document.documentElement.style.setProperty('--widthDiv#id#', '#widthDiv#px');
      } else document.documentElement.style.setProperty('--widthDiv#id#', '75px');
      if ('#heightDiv#' != '#'+'heightDiv#'){
        document.documentElement.style.setProperty('--heightDiv#id#', '#heightDiv#px');
      } else document.documentElement.style.setProperty('--heightDiv#id#', '28px');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#',no_animate:true});
  </script>
  <style>
    :root {
    --color#id#: #state#;
    --widthDiv#id#: 75px;
    --heightDiv#id#: 28px;
    }
    .couleur#id# {
      margin-top: 2px;
      height: var(--heightDiv#id#);
      border-radius: var(--border-radius);
      width: var(--widthDiv#id#);
      background: var(--color#id#);
      padding: 6px 0px;
    }
  </style>
</div>
1 J'aime

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.