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
Pour une cde action j’utilise tes roues chromatiques qui sont top
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
J’ai gagné un sacré paquet de points WAF, 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>
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.