Bonjour à tous,
J’étais à la recherche d’un affichage d’un binaire gris/rouge.
Pour faire quelque chose de paramétrable, je me suis basé sur le widget Dot de @Tarlak que je me suis permis de modifier pour le rendre paramétrable.
*EDIT : /!\ Version V2.0 sur post suivant… /!*
N’étant pas un expert, le code est certainement optimisable…
quelques exemples :
EDIT : Ajout paramètre Size et effet ‹ 3D › sur bouton.
EDIT : Correctif FullSize.
code du widget :
<!--
Maj: 02/02/2025
Version 0.1 :
@Tarlak :
Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
@Silkarion
Version 1.1 :Adaptation pour ajouter de la flexibilité dans le résultat affiché
Version 1.2 : Ajout parametre Size
Version 1.3 : Correctif FullSize + BorderColorDeg
-->
<template>
<div></div>
<div>** Parametres couleur **</div>
<div>BorderColor0 : Couleur pour valeur bool à 0 (default : vert)</div>
<div>BorderColor1 : Couleur pour valeur bool à 1 (default : rouge)</div>
<div>BorderColorExt0 : Couleur contour exterieur pour valeur bool à 0 (default : BorderColor0)</div>
<div>BorderColorExt1 : Couleur contour exterieur pour valeur bool à 1 (default : BorderColor1)</div>
<div>>> Tips : affecter #00000000 à la couleur pour une transparence !! </div>
<div>BorderColorDeg : Couleur de dégradé (défaut : black)</div>
<div>** Parametres forme **</div>
<div>Radius : gestion du radius => 50% fait un rond, 0% un carré (default : 50%)</div>
<div>FullSize : 1 pour un bouton rempli (default : 0)</div>
<div>Size : Taille du widget (default : 10px)</div>
<div></div>
<div>** Parametres clignottement **</div>
<div>blink0 : si valeur à 1 alors la pastille clignote (default : 0)</div>
<div>blink1 : si valeur à 1 alors la pastille clignote (default : 0)</div>
<div></div>
</template>
<div style="margin:0px; padding:0px; min-width:40px; min-height:40px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div class="led#id#"></div>
<div class="NomCmd #hide_name#">#name_display#</div>
<style>
:root {
--couleuractualisee#id#: #838383;
--couleuractualisee2#id#: #838383;
--couleuractualisee-ext#id#: #838383;
--radius#uid#: 50%;
--rouge: #da3037;
--vert: #30b455;
--gris: #838383;
--noir: #000000;
--transparent: #00000000;
--couleur-degrade#uid#: #353535;
--blanc: #ffffff;
--offset: -5px;
--element-size#uid#: 10px;
--element-int-size#uid#: 3px;
}
@keyframes glowing {
0% {
box-shadow: 0 0 -10px var(--blanc);
}
40% {
box-shadow: 0 0 20px var(--blanc);
}
60% {
box-shadow: 0 0 20px var(--blanc);
}
100% {
box-shadow: 0 0 -10px var(--blanc);
}
}
@-webkit-keyframes blinker {
from {
opacity: 1.0;
}
to {
opacity: 0.1;
}
}
.led#id# {
position: relative;
margin: 1em;
width: var(--element-size#uid#);
height: var(--element-size#uid#);
border-radius: var(--radius#uid#);
color: #fff;
background: var(--couleuractualisee#id#);
line-height: var(--element-size#uid#);
border: var(--element-int-size#uid#) solid var(--couleuractualisee#id#);
text-align: center;
border: 2px solid var(--couleuractualisee#id#);
background: linear-gradient(0deg, var(--couleuractualisee2#id#), var(--couleuractualisee#id#)) !important;
}
.led#id#:after {
content: '';
position: absolute;
top: var(--offset);
bottom: var(--offset);
left: var(--offset);
right: var(--offset);
border-radius: var(--radius#uid#);
border: 2px solid var(--couleuractualisee-ext#id#);
}
div.NomCmd {
font-size: 1em;
font-weight: bold;
position: absolute;
vertical-align: bottom;
top: 65%;
left: 0%;
z-index: 2;
padding: 0px;
margin: 0px;
width: 85px;
height: 25px;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
var blink0#id# = ('#blink0#' !='#'+'blink0#') ? parseInt("#blink0#") :0;
var blink1#id# = ('#blink1#' !='#'+'blink1#') ? parseInt("#blink1#") :0;
var borderColor0#uid# = ('#BorderColor0#' != '#'+'BorderColor0#') ? "#BorderColor0#" : "green";
if (borderColor0#uid# != '') {
document.documentElement.style.setProperty('--borderColor0#uid#', borderColor0#uid#);
} else {
document.documentElement.style.setProperty('--borderColor0#uid#', "green");
}
var borderColor1#uid# = ('#BorderColor1#' != '#'+'BorderColor1#') ? "#BorderColor1#" : "red";
if (borderColor1#uid# != '') {
document.documentElement.style.setProperty('--borderColor1#uid#', borderColor1#uid#);
} else {
document.documentElement.style.setProperty('--borderColor1#uid#', "red");
}
var borderColorDeg#uid# = ('#BorderColorDeg#' != '#'+'BorderColorDeg#') ? "#BorderColorDeg#" : "black";
if (borderColor1#uid# != '') {
document.documentElement.style.setProperty('--couleuractualisee2#id#', borderColorDeg#uid#);
} else {
document.documentElement.style.setProperty('--couleuractualisee2#id#', "black");
}
var borderColorExt0#uid# = ('#BorderColorExt0#' != '#'+'BorderColorExt0#') ? "#BorderColorExt0#" : borderColor0#uid#;
if (borderColorExt0#uid# != '') {
document.documentElement.style.setProperty('--borderColorExt0#uid#', borderColorExt0#uid#);
} else {
document.documentElement.style.setProperty('--borderColorExt0#uid#', borderColor0#uid#);
}
var borderColorExt1#uid# = ('#BorderColorExt1#' != '#'+'BorderColorExt1#') ? "#BorderColorExt1#" : borderColor1#uid#;
if (borderColorExt1#uid# != '') {
document.documentElement.style.setProperty('--borderColorExt1#uid#', borderColorExt1#uid#);
} else {
document.documentElement.style.setProperty('--borderColorExt1#uid#', borderColor1#uid#);
}
var radius#uid# = ('#Radius#' != '#'+'Radius#') ? "#Radius#" : "50%";
if (radius#uid# != '') {
document.documentElement.style.setProperty('--radius#uid#', radius#uid#);
} else {
document.documentElement.style.setProperty('--radius#uid#', "50%");
}
var fullSize#id# = ('#FullSize#' !='#'+'FullSize#') ? parseInt("#FullSize#") :0;
if (fullSize#id# == 1) {
document.documentElement.style.setProperty('--element-int-size#uid#', "8px");
} else {
document.documentElement.style.setProperty('--element-int-size#uid#', "3px");
}
var size#uid# = ('#Size#' != '#'+'Size#') ? "#Size#" : "10px";
if (size#uid# != '') {
document.documentElement.style.setProperty('--element-size#uid#', size#uid#);
} else {
document.documentElement.style.setProperty('--element-size#uid#', "10px");
}
// Récupération des valeurs
var valeur = _options.display_value;
//document.documentElement.style.setProperty('--radius#id#', 'var(--borderColor0#uid#');
if (valeur == 0) {
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--borderColor0#uid#');
if (fullSize#id# == 1) {
document.documentElement.style.setProperty('--couleuractualisee-ext#id#', 'var(--transparent');
} else {
document.documentElement.style.setProperty('--couleuractualisee-ext#id#', 'var(--borderColorExt0#uid#');
}
if (blink0#id#==1)
{
cmd.find('.led#id#').css('animation', 'blinker 0.6s linear infinite');
} else{
cmd.find('.led#id#').css('animation', 'none');
}
} else if (valeur == 1) {
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--borderColor1#uid#');
if (fullSize#id# == 1) {
document.documentElement.style.setProperty('--couleuractualisee-ext#id#', 'var(--transparent');
} else {
document.documentElement.style.setProperty('--couleuractualisee-ext#id#', 'var(--borderColorExt1#uid#');
}
//cmd.find('.led#id#').css('animation', 'none');
if (blink1#id#==1)
{
cmd.find('.led#id#').css('animation', 'blinker 0.6s linear infinite');
} else{
cmd.find('.led#id#').css('animation', 'none');
}
}
$('.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>
</div>
) :
