04/05/2020
Ajout de la possibilité de changer le nom de la commande (NomCom)
Exemple : Par —> Important :
Si l’on met un caractère spécial dans la variable « NomCom», il faut préfixer ce caractère avec un.\
Exemple : « puissance d’entrée » écrire « puissance d\’entrée ». Sinon, perte de l’affichage de la commande.
Changer la couleur du texte en fonction d’une valeur mini et max.
De choisir la taille de la police.
D’afficher le nom de la commande ou pas.
D’afficher le max, le mini et la tendance ou pas.
Tous les paramètres sont dans le fichier html.
Pour les valeur du type taille il ne faut pas mettre le « px »
Les expression de couleurs sont soit du type red,green,blue,black… soit sous la forme : #000000
Un grand merci à @olive pour les info que j’ai pu voir dans son script.
Installation :
Outils / Widgets dans le menu puis clic sur
Clic sur Nouveau en haut à droite
Renseignement
Bonjour, et merci pour ce widget qui fonctionne bien. Une petite question : qiuelle le nom de la (ou des) police(s) utilisée(s) et est-il possible de les modifier ? Merci
Bonjour, super pour le code qui fonctionne parfaitement BRAVO !!
Petite amélioration, comment mettre les seuils de température en dynamique c’est-à-dire faire appel à une variable dans jeedom, c’est possible ?
Bonjour Graouilly,
Merci pour ce superbe Widget bien utile.
Est ce qu’il y a la possibilité d’avoir la valeur a droite du nom plutôt que de l’avoir dessous ? je n’ai pas trouvé dans les paramètres.
Je te pose cette question car je vais mettre dans un virtuelle un certain nombre d’info les unes sous les autres.
Au plaisir.
T.
Bonjour et merci beaucoup pour ce widget !
Je l’ai modifié pour ajouter d’une part le memo des paramètres directement dans la vue « paramètres optionnels », ça évite de switcher entre le code et les paramètres. Et dune autre part pour ajouter la couleur orang d’une valeur comprise entre le min et max pour être plus adapté à mes besoins et attentes
<!--
**********************************************************************
********** Version 2.0.0 **********
********** Modif by Retnuh Mai 2024 **********
**********************************************************************
********** Variables pour configurer le NOM **********
**********************************************************************
NomCom // Nom de la commande (défaut Nom de la commande)
TailNom // Taille (défaut 20)
EpPolNom // Epaisseur (défaut bold) autre choix(normal)
CoulNom // Couleur (défaut black)
MargeHNom // Espace Haut (défaut 10)
TextAlignNom // Alignement (défaut center) autre choix(right;left)
EpBordNom // Epaisseur du contour du texte (défaut 1) peux etre utiliser avec un point exemple :(0.4)
CoulBordNom // Couleur du contour du texte (défaut white ou #ffffff)
**********************************************************************
********** Variables pour configurer la VALEUR **********
**********************************************************************
TailVal // Taille (défaut 20)
EpPolVal // Epaisseur (défaut bold) autre choix(normal)
CoulVal // Couleur (défaut green)
CoulValInter // Couleur de la valeur intermédiaire (défaut orange)
CoulValMax // Couleur de la valeur > de l’unité (défaut red)
CoulValMin // Couleur de la valeur < de l’unité (défaut blue)
MaxVal // Valeur > de l’unité (défaut 22)
MinVal // Valeur < de l’unité (défaut 15)
InterVal // Valeur intermédiaire de l’unité (défaut 18)
MargeHVal // Espace Haut (défaut 10)
TextAlignVal // Alignement (défaut center) autre choix(right;left)
EpBordVal // Epaisseur du contour du texte (défaut 0)
CoulBordVal // Couleur du contour du texte (défaut #ffffff = Blanc)
**********************************************************************
********** Variables pour configurer le MIN/MAX/TENDANCE **********
**********************************************************************
TailMMT // Taille (défaut 10)
EpPolMMT // Epaisseur (défaut bold) autre choix(normal)
CoulMMT // Couleur (défaut white)
MargeHMMT // Espace Haut (défaut 10)
TextAlignMMT // Alignement (défaut center) autre choix(right;left)
EpBordMMT // Epaisseur du contour du texte (défaut 0.4)
CoulBordMMT // Couleur du contour du texte (défaut black)
**********************************************************************
********** Variables pour configurer la Durée **********
**********************************************************************
TailDur // Taille (défaut 15)
EpPolDur // Epaisseur (défaut bold) autre choix(normal)
CoulDur // Couleur (défaut white)
MargeHDur // Espace Haut (défaut 10)
TextAlignDur // Alignement (défaut center)
EpBordDur // Epaisseur du contour du texte (défaut 0.4)
CoulBordDur // Couleur du contour du texte (white ou #ffffff)
AffDuree // Afficher la durée oui / non
**********************************************************************
**********************************************************************
********** CREATION GRAOUILLY / Modif by Retnuh Mai 2024 **********
**********************************************************************
**********************************************************************
-->
<template>
<div style="text-decoration: underline;">Paramètres liés au Nom :</div>
<div style="margin-bottom: 5px;"></div>
<div>NomCom : Nom de la commande (défaut Nom de la commande)</div>
<div>TailNom : Taille (défaut 20)</div>
<div>CoulNom : Couleur (défaut black)</div>
<div>CoulNom : Couleur (défaut black)</div>
<div>MargeHNom : Espace Haut (défaut 10)</div>
<div>TextAlignNom : Alignement (défaut center) autre choix(right;left)</div>
<div>EpBordNom : Epaisseur du contour du texte (défaut 1) peux etre utiliser avec un point exemple :(0.4)</div>
<div>CoulBordNom : Couleur du contour du texte (défaut white ou #ffffff)</div>
<div style="margin-bottom: 5px;"></div>
<div style="text-decoration: underline;">Paramètres liés à la Valeur :</div>
<div style="margin-bottom: 5px;"></div>
<div>TailVal : Taille (défaut 20)</div>
<div>EpPolVal : Epaisseur (défaut bold) autre choix(normal)</div>
<div>CoulVal : Couleur (défaut green)</div>
<div>CoulValInter : Couleur de la valeur intermédiaire (défaut orange)</div>
<div>CoulValMax : Couleur de la valeur max de l’unité (défaut red)</div>
<div>CoulValMin : Couleur de la valeur min de l’unité (défaut blue)</div>
<div>MaxVal : Valeur max de l’unité (défaut 22)</div>
<div>MinVal : Valeur min de l’unité (défaut 15)</div>
<div>InterVal : Valeur intermédiaire de l’unité (défaut 18)</div>
<div>MargeHVal : Espace Haut (défaut 10)</div>
<div>TextAlignVal : Alignement (défaut center) autre choix(right;left)</div>
<div>EpBordVal : Epaisseur du contour du texte (défaut 0)</div>
<div>CoulBordVal : Couleur du contour du texte (défaut #ffffff = Blanc)</div>
<div style="margin-bottom: 5px;"></div>
<div style="text-decoration: underline;">Paramètres liés aux MIN,MAXet Tendance :</div>
<div style="margin-bottom: 5px;"></div>
<div>TailMMT : Taille (défaut 10)</div>
<div>EpPolMMT : Epaisseur (défaut bold) autre choix(normal)</div>
<div>CoulMMT : Couleur (défaut white)</div>
<div>MargeHMMT : Espace Haut (défaut 10)</div>
<div>TextAlignMMT : Alignement (défaut center) autre choix(right;left)</div>
<div>EpBordMMT : Epaisseur du contour du texte (défaut 0.4)</div>
<div>CoulBordMMT : Couleur du contour du texte (défaut black)</div>
<div>TailDur : Taille (défaut 15)</div>
<div>EpPolDur : Epaisseur (défaut bold) autre choix(normal)</div>
<div>CoulDur : Couleur (défaut white)</div>
<div>MargeHDur : Espace Haut (défaut 10)</div>
<div>TextAlignDur : Alignement (défaut center)</div>
<div>EpBordDur : Epaisseur du contour du texte (défaut 0.4)</div>
<div>CoulBordDur : Couleur du contour du texte (white ou #ffffff)</div>
<div style="margin-bottom: 10px;"></div>
<div>AffDuree Afficher la durée oui / non</div>
</template>
<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<div class="title #hide_name#">
<div class="name#id#"></div>
</div>
<div class="state#id#"></div>
<div class="title cmdStats #hide_history#">
<div class="Histo#id#">Min : #minHistoryValue# | Max : #maxHistoryValue# <span class="#tendance#"></span></div>
</div>
<div class="AffDuree#id#">
<div class="timeCmd#id#"></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value+' '+'#unite#');
// $('.cmd[data-cmd_id=#id#] .name#id#').empty().append('#name#');
var NomCom = ('#NomCom#' !='#'+'NomCom#') ? "#NomCom#":"#name#"; // remplace le nom de la commande par celui de votre choix
var TailNom = ('#TailNom#' !='#'+'TailNom#') ? "#TailNom#" :'20'; // Taille du NOM
var EpPolNom = ('#EpPolNom#' !='#'+'EpPolNom#') ? "#EpPolNom#" :'bold'; // Epaisseure du texte NOM "bold" autre choix "normal"
var CoulNom = ('#CoulNom#' !='#'+'CoulNom#') ? "#CoulNom#" :"black"; // couleur texte NOM
var MargeHNom = ('#MargeHNom#' !='#'+'MargeHNom#') ? "#MargeHNom#":'10'; // Marge haute NOM
var TextAlignNom = ('#textAlignNom#' !='#'+'textAlignNom#') ? "#textAlignNom#":'center'; // Mage gauche et droite Valeur
var EpBordNom = ('#EpBordNom#' !='#'+'EpBordNom#') ? "#EpBordNom#":'1'; // Epaisseur contour Valeur
var CoulBordNom = ('#CoulBordNom#' !='#'+'CoulBordNom#') ? "#CoulBordNom#":'white'; // Couleur contour Valeur
//
var TailVal = ('#TailVal#' !='#'+'TailVal#') ? "#TailVal#" :'20'; // Taille du texte VALEUR
var EpPolVal = ('#EpPolVal#' !='#'+'EpPolVal#') ? "#EpPolVal#" :'bold'; // Epaisseure du texte VALEUR autre choix "normal"
var CoulVal = ('#CoulVal#' !='#'+'CoulVal#') ? "#CoulVal#" :'green'; // couleur texte VALEUR
var CoulValInter = ('#CoulValInter#' !='#'+'CoulValInter#') ? "#CoulValInter#" :'orange'; // couleur texte VALEUR intermédiaire
var CoulValMax = ('#CoulValMax#' !='#'+'CoulValMax#') ? "#CoulValMax#" :'red'; // couleur texte VALEUR
var CoulValMin = ('#CoulValMin#' !='#'+'CoulValMin#') ? "#CoulValMin#" :'blue'; // couleur texte VALEUR
var MaxVal = ('#MaxVal#' !='#'+'MaxVal#') ? "#MaxVal#" :'22'; // Max VALEUR
var MinVal = ('#MinVal#' !='#'+'MinVal#') ? "#MinVal#" :'15'; // Min VALEUR
var InterVal = ('#InterVal#' !='#'+'InterVal#') ? "#InterVal#" :'18'; // Valeur intermédiaire VALEUR
var MargeHVal = ('#MargeHVal#' !='#'+'MargeHVal#') ? "#MargeHVal#":'10'; // Marge haute Valeur
var TextAlignVal = ('#textAlignVal#' !='#'+'textAlignVal#') ? "#textAlignVal#":'center'; // Mage gauche et droite Valeur
var EpBordVal = ('#EpBordVal#' !='#'+'EpBordVal#') ? "#EpBordVal#":'0'; // Epaisseur contour Valeur
var CoulBordVal = ('#CoulBordVal#' !='#'+'CoulBordVal#') ? "#CoulBordVal#":'#ffffff'; // Couleur contour Valeur
var TailMMT = ('#TailMMT#' !='#'+'TailMMT#') ? "#TailMMT#" :'10'; // Taille du NOM
var EpPolMMT = ('#EpPolMMT#' !='#'+'EpPolMMT#') ? "#EpPolMMT#" :'bold'; // Epaisseure du texte NOM "bold" autre choix "normal"
var CoulMMT = ('#CoulMMT#' !='#'+'CoulMMT#') ? "#CoulMMT#" :'white'; // couleur texte NOM
var MargeHMMT = ('#MargeHMMT#' !='#'+'MargeHMMT#') ? "#MargeHMMT#":'10'; // Marge haute NOM
var TextAlignMMT = ('#textAlignNom#' !='#'+'textAlignNom#') ? "#textAlignNom#":'center'; // Mage gauche et droite Valeur
var EpBordMMT = ('#EpBordMMT#' !='#'+'EpBordMMT#') ? "#EpBordMMT#":'0.4'; // Epaisseur contour Valeur
var CoulBordMMT = ('#CoulBordMMT#' !='#'+'CoulBordMMT#') ? "#CoulBordMMT#":'black'; // Couleur contour Valeur
var TailDur = ('#TailDur#' !='#'+'TailDur#') ? "#TailDur#" :'15'; // Taille du NOM
var EpPolDur = ('#EpPolDur#' !='#'+'EpPolDur#') ? "#EpPolDur#" :'bold'; // Epaisseure du texte NOM "bold" autre choix "normal"
var CoulDur = ('#CoulDur#' !='#'+'CoulDur#') ? "#CoulDur#" :'white'; // couleur texte NOM
var MargeHDur = ('#MargeHDur#' !='#'+'MargeHDur#') ? "#MargeHDur#":'10'; // Marge haute NOM
var TextAlignDur = ('#textAlignDur#' !='#'+'textAlignDur#') ? "#textAlignDur#":'center'; // Mage gauche et droite Valeur
var EpBordDur = ('#EpBordDur#' !='#'+'EpBordDur#') ? "#EpBordDur#":'0.4'; // Epaisseur contour Valeur
var CoulBordDur = ('#CoulBordDur#' !='#'+'CoulBordDur#') ? "#CoulBordDur#":'white'; // Couleur contour Valeur
var AffDuree = ('#AffDuree#' !='#'+'AffDuree#') ? "#AffDuree#":'oui';
$('.cmd[data-cmd_id=#id#] .name#id#').empty().append(NomCom);
$(".name#id#").css('font-size', TailNom+'px');
$(".name#id#").css('font-weight', EpPolNom);
$(".name#id#").css('color', CoulNom);
$(".name#id#").css('margin-top', MargeHNom+'px' );
$(".name#id#").css('text-align', TextAlignNom);
$(".name#id#").css('-webkit-text-stroke', EpBordNom+'px' );
$(".name#id#").css('-webkit-text-stroke-color', CoulBordNom );
$(".state#id#").css('font-size', TailVal+'px');
$(".state#id#").css('font-weight', EpPolVal);
$(".state#id#").css('color', CoulVal );
$(".state#id#").css('margin-top', MargeHVal+'px' );
$(".state#id#").css('text-align', TextAlignVal );
$(".state#id#").css('-webkit-text-stroke' , EpBordVal+'px' );
$(".state#id#").css('-webkit-text-stroke-color', CoulBordVal );
$(".Histo#id#").css('font-size', TailMMT+'px');
$(".Histo#id#").css('font-weight', EpPolMMT);
$(".Histo#id#").css('color', CoulMMT );
$(".Histo#id#").css('margin-top', MargeHMMT+'px');
$(".Histo#id#").css('text-align', TextAlignMMT);
$(".Histo#id#").css('-webkit-text-stroke', EpBordMMT+'px' );
$(".Histo#id#").css('-webkit-text-stroke-color', CoulBordMMT );
$(".AffDuree#id#").css('font-size', TailDur+'px');
$(".AffDuree#id#").css('font-weight', EpPolDur);
$(".AffDuree#id#").css('color', CoulDur);
$(".AffDuree#id#").css('margin-top', MargeHDur+'px');
$(".AffDuree#id#").css('text-align', TextAlignDur);
$(".AffDuree#id#").css('-webkit-text-stroke', EpBordDur+'px' );
$(".AffDuree#id#").css('-webkit-text-stroke-color', CoulBordDur );
//
var valeur = parseFloat(_options.display_value);
if (valeur > MaxVal ) {
$(".state#id#").css('color', CoulValMax);
} else if (valeur < MinVal ) {
$(".state#id#").css('color', CoulValMin);
} else if (valeur >= InterVal && valeur <= MaxVal) {
$(".state#id#").css('color', CoulValInter);
}
if( AffDuree == 'oui'){
jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',
valueDate:'#valueDate#',
collectDate:'#collectDate#',
alertLevel:'#alertLevel#'});
</script>
</div>
Par —> 
