@mich0111 un ptit zip ? 
hih hi
Merci pour vos réponses
Je fais ça et vous tiens au courant.
J’aime beaucoup ces échanges merci… Si c’était ainsi dans la vraie vie 
Volontiers, le voici:
super merci
finalement manque plus que la possibilité de paramétrer le widget avec Paramètres optionnels widget
genre dossier du thème ou les conditions pour les images. 
+++
Merci à @Almy @nawak86 @mich0111
J’ai fait l’installation du widget et ça rend bien, une petite modification dans les codes pour les fonds était nécessaire car j’ai pris celui de @nawak86 avec les fonds de @mich0111
Merci mille fois
1 « J'aime »
En fait comme j’apprends en faisant et en me posant des questions, il y aura peut être une version mobile pour apprendre mais je ne sais pas encore quand car je ne me suis encore jamais penché sur la question et je dois comprendre pourquoi il y a une différence puis quelles sont les différences entre une version pc et une version mobile. Bref face a l’inconnu je ne sais m’engager sur un délai mais ta question @fabe éveille ma curiosité
Bonjour a tous
depuis un An sur jeedom je decouvre la V4 mais je suis débutant dans le code et je souhaite utiliser vos widgets , j’ai bien déposer l’ensemble des répertoires du dossier Core 4 grace a @mich0111 sous : data/customTemplates/dashboard/ mais je ne les retrouve pas
pouvez vous m’aider
bonsoir,
dans : data/customTemplates/dashboard/
tu dois avoir le répertoire du widget et le fichier .html
core4 c’est mon dossier de rangement dans ma dropbox.
++
Pour compléter la réponse de @nawak86, le widget créé doit un info numérique et les images doivent être déposées dans le répertoire data/img.
Ensuite, pour utiliser ton widget, tu vas dans l’onglet affichage de l’information numérique de l’équipement que tu veux visualiser. Tu trouveras là, dans la liste des widgets, celui que tu viens de créer et que tu souhaites appliquer.
Bonne continuation
Le chemin est data/img pour que ceux qui n’utilisent pas Jeexplorer puissent quand meme utiliser le widget (cf explication avant) et la centralisation de toutes les icones au meme endroit me parait pas mal
1 « J'aime »
c’est vrai mais pour le coup moi j’aime bien avoir les images dans un dossier par widget ça évite d’avoir des restes lors de suppressions de widgets.
++
Peut-être s’inspirer de @JAG et centraliser les images dans différents dossiers en fonction de leurs utilisations.
je me sers d’un dossier dans le widget de Jag pour une grande partie de mes images
Moi pareil
Voici les icones version nuancier 12 couleurs + noir en bonus :
et le code correspondant :
<div style="padding:0px; width:85px; height:85px;" 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="icone#uid#" style="z-index:1">
</div>
<div style="z-index:2; background-color:#cmdColor#!important; ">
<div class="NomCmd#id#">#name_display#</div>
<div class="unite#id#">#unite#</div>
<div class="value-entier#id#"></div>
<div class="value-decimal#id#"></div>
</div>
<style>
div.value-entier#id# {
font-size:38px;
font-weight:bold;
position:absolute;
top:23px;
right:10px;
width:85px;
height:85px;
z-index:2;
letter-spacing:0px;
}
div.value-decimal#id# {
font-size:25px;
font-weight:bold;
position:absolute;
top:26px;
right:-22px;
width:85px;
height:85px;
z-index:2;
letter-spacing:0px;
}
div.unite#id# {
font-size:13px;
font-weight:bold;
position:absolute;
top:50px;
width:85px;
height:85px;
z-index:2;
letter-spacing:0px;
}
div.NomCmd#id# {
font-size:1em;
font-weight:bold;
position:absolute;
vertical-align:middle;
top:82%;
left:0%;
width:85px;
height:85px;
z-index:2;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// Récupération des valeurs
var valeur = _options.display_value;
// Séparation des entier et décimal
var entier = Math.trunc(valeur);
var decimal = Math.abs(Math.round(valeur*10-entier*10));
// Regle d'affichage des decimaux suivant le valeur a afficher
if ( entier == 1 ) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:8px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-10px;');
} else if ( entier == -1 ) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:12px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-15px;');
} else if ( valeur < 0 && valeur > -10 ) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:14px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-16px;');
} else if ( valeur <= -10 && valeur > -100 ) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:10px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-30px;');
} else if ( valeur >= 0 && valeur < 10 ) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:13px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-10px;');
} else if ( valeur >= 100) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:0px;');
} else if ( valeur <= -100) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:0px; font-size:35px;');
} else {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("."+decimal);
}
// Gestion des icones et couleurs
var srcImg = 'data/img/';
if (valeur < 0) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Violet_bleute_#3D01A4.png" width="85px">');
$(".value-entier#id#").css( "color", "#00ffff" );
$(".value-decimal#id#").css( "color", "#00ffff" );
$(".unite#id#").css( "color", "#00ffff" );
$(".NomCmd#id#").css( "color", "black" );
}
else if (valeur >= 0 && valeur < 10) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Bleu_#0247FE.png" width="85px">');
$(".value-entier#id#").css( "color", "#2989db" );
$(".value-decimal#id#").css( "color", "#2989db" );
$(".unite#id#").css( "color", "#2989db" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 10 && valeur < 20) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Vert_Bleute_#0392CE.png" width="85px">');
$(".value-entier#id#").css( "color", "#839f25" );
$(".value-entier#id#").css( "color", "#839f25" );
$(".value-decimal#id#").css( "color", "#839f25" );
$(".unite#id#").css( "color", "#839f25" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 20 && valeur < 30) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Vert_#66B032.png" width="85px">');
$(".value-entier#id#").css( "color", "#f6ff00" );
$(".value-entier#id#").css( "color", "#f6ff00" );
$(".value-decimal#id#").css( "color", "#f6ff00" );
$(".unite#id#").css( "color", "#f6ff00" );
$(".NomCmd#id#").css( "color", "black" );
}
else if (valeur >= 30 && valeur < 40) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Jaune_Verdatre_#D0EA2B.png" width="85px">');
$(".value-entier#id#").css( "color", "#ff7d27" );
$(".value-entier#id#").css( "color", "#ff7d27" );
$(".value-decimal#id#").css( "color", "#ff7d27" );
$(".unite#id#").css( "color", "#ff7d27" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 40 && valeur < 50) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Jaune_Orange_#FABC02.png" width="85px">');
$(".value-entier#id#").css( "color", "#ff7300" );
$(".value-entier#id#").css( "color", "#ff7300" );
$(".value-decimal#id#").css( "color", "#ff7300" );
$(".unite#id#").css( "color", "#ff7300" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 50 && valeur < 60) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_#FB9902.png" width="85px">');
$(".value-entier#id#").css( "color", "#ff5a00" );
$(".value-entier#id#").css( "color", "#ff5a00" );
$(".value-decimal#id#").css( "color", "#ff5a00" );
$(".unite#id#").css( "color", "#ff5a00" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 60 && valeur < 70) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Rouge_Orange_#FD5308.png" width="85px">');
$(".value-entier#id#").css( "color", "#da3037" );
$(".value-entier#id#").css( "color", "#da3037" );
$(".value-decimal#id#").css( "color", "#da3037" );
$(".unite#id#").css( "color", "#da3037" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 70 && valeur < 80) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Rouge_#FE2712.png" width="85px">');
$(".value-entier#id#").css( "color", "#dd00ff" );
$(".value-entier#id#").css( "color", "#dd00ff" );
$(".value-decimal#id#").css( "color", "#dd00ff" );
$(".unite#id#").css( "color", "#dd00ff" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 80 && valeur < 90) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Rouge_Violace_#A7194B.png" width="85px">');
$(".value-entier#id#").css( "color", "#838383" );
$(".value-entier#id#").css( "color", "#838383" );
$(".value-decimal#id#").css( "color", "#838383" );
$(".unite#id#").css( "color", "#838383" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 90 && valeur < 100) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Violet_#8601AF.png" width="85px">');
$(".value-entier#id#").css( "color", "#838383" );
$(".value-entier#id#").css( "color", "#838383" );
$(".value-decimal#id#").css( "color", "#838383" );
$(".unite#id#").css( "color", "#838383" );
$(".NomCmd#id#").css( "color", "white" );
}
else if (valeur >= 100) {
$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Noir_#000000.png" width="85px">');
$(".value-entier#id#").css( "color", "#000000" );
$(".value-entier#id#").css( "color", "#000000" );
$(".value-decimal#id#").css( "color", "#000000" );
$(".unite#id#").css( "color", "#000000" );
$(".NomCmd#id#").css( "color", "white" );
}
$('.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>
1 « J'aime »
Je vais essayer ça, j’ai peut-être trouvé un petit bug j’ai un bouton en dessous de ton widget et quand je clique dessus ca devrait libérer la ram d’un de mes RPI mais ca m’affiche l’historique de la température. Je suis pas sur mon pc je teste ça au plus vite. ++
Beau boulot, je garde pour mon évolution v4.
Mais pourquoi ne pas mettre l’unité sur la même ligne ?
Pour que les digits soient assez gros.
J’avais essayé mais le rendu n’était pas terrible