Bonjour,
Widget permettant de changer la couleur de fond d’une tuile et de la faire clignoter.
Celui ci est fonctionnel sur un jeedom de test. Je suis plus « bidouilleur » que développeur. Est il en accord avec « les bonnes manières de faire sous jeedom » ?
Toutes critiques seront bienvenues
- Créer un widget « Code »
- Remplir les options :
Version : Dashboard / Mobile
Type : info
Sous-type : Binaire
Nom : ce que vous voulez dans mon cas TuileCouleurCligne - Copier/coller le code ci dessous :
<!-- Liste des paramètres a passer par l'équipement:
couleur_1 couleur souhaitée pour valeur info = 1, format r, g, b
couleur_0 couleur souhaitée pour valeur info = 0, format r, g, b
clignote 1 (fait clignoter tuile pour valeur info = 1) 0(fait clignoter tuile pour valeur info = 0) -->
<div class="cmd cmd-widget #history# colorTuile-#uid#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="min-width:0px; min-height:0px; margin-right:0px; margin-left:0px; padding:0px !important;">
<script>
jeedom.cmd.update['#id#'] = function(_options){
if (_options.display_value == 1) {
$('.colorTuile-#uid#').closest('.eqLogic-widget').css('--eq-bg-color', '#couleur_1#');
if(#clignote# == 1) {
$('.colorTuile-#uid#').closest('.eqLogic-widget').addClass("clignoteElement");
}else {
$('.colorTuile-#uid#').closest('.eqLogic-widget').removeClass("clignoteElement");
}
}else {
$('.colorTuile-#uid#').closest('.eqLogic-widget').css('--eq-bg-color', '#couleur_0#');
if(#clignote# == 0) {
$('.colorTuile-#uid#').closest('.eqLogic-widget').addClass("clignoteElement");
}else {
$('.colorTuile-#uid#').closest('.eqLogic-widget').removeClass("clignoteElement");
}
}
}
</script>
</div>
Nous avons donc un nouveau widget nommé TuileCouleurCligne il s’applique sur une commande info binaire (valeur 1 ou 0)
Il y a 3 paramètres optionnels à passer au widget :
couleur_1 → couleur souhaitée pour valeur info = 1, format r, g, b (ex pour du rouge : 255, 0, 0 )
couleur_0 → couleur souhaitée pour valeur info = 0, format r, g, b
clignote → 1 (fait clignoter tuile pour valeur info = 1) 0(fait clignoter tuile pour valeur info = 0)
Principe de fonctionnement :
Dans un virtuel on duplique une commande info binaire sur laquelle on applique ce widget.
- Celui-ci va modifier la variable css de la tuile —eq-bg-color suivant la valeur de l’info (1 ou 0) et donc modifier la couleur de fond de la tuile.
- Il va ajouter ou retirer la class clignoteElement à la tuile. Cette classe va être défini dans la personnalisation css de jeedom
Ajouter le code suivant dans custom.css accessible par le menu Réglages > Système > Configuration puis
L’onglet Interface et Personnalisation avancée.
/* class clignoteElement */
.clignoteElement {
animation-duration: 1.2s;
animation-name: cligne;
animation-iteration-count: infinite;
transition: none;
}
@keyframes cligne {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
Remarque :
– Je pense que cette class clignoteElement peut être utilisée par d’autre widget, pour faire clignoter du texte par exemple .
– Si on désire seulement changer la couleur de fond le code du widget sera
<!-- Liste des paramètres a passer par l'équipement:
couleur_1 couleur souhaitée pour valeur info = 1, format r, g, b
couleur_0 couleur souhaitée pour valeur info = 0, format r, g, b -->
<div class="cmd cmd-widget #history# colorTuile-#uid#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="min-width:0px; min-height:0px; margin-right:0px; margin-left:0px; padding:0px !important;">
<script>
jeedom.cmd.update['#id#'] = function(_options){
if (_options.display_value == 1) {
$('.colorTuile-#uid#').closest('.eqLogic-widget').css('--eq-bg-color', '#couleur_1#');
}else {
$('.colorTuile-#uid#').closest('.eqLogic-widget').css('--eq-bg-color', '#couleur_0#');
}
}
</script>
</div>
Et on ne s’occupera pas de custom.css.
Il doit pouvoir se modifier pour des infos numériques sans trop de difficultés.
Cordialement
