Bonjour,
Si je comprends bien, tu veux pouvoir appliquer plusieurs thèmes de fond de widget. On pourrait imaginer un thème par défaut et des thèmes personnels.
Je veux bien mais ça veut dire que tu te les fabriques et que tu les stockes dans le répertoire fond de Multi-action sans demander à @JAG.
Sinon, il va passer sa vie à ne faire que des transferts.
Si une majorité est d’accord, je fais la modif, sinon, autant ne pas surcharger le code.
Donc: vote.
Bonne journée.
Mise à jour du widget.
Cette mise à jour comprend 2 modifications; d’une part le centrage de l’image par de-dessus le fond, d’autre part la possibilité de sélectionner les thème de fond de votre choix que vous devrez copier dans le répertoire fond de Multi-action de @JAG.
Cette modification n’était pas suffisamment importante pour s’en priver.
Bonne journée.
Salut
merci pour la maj 
çà fonctionne bien
Je partage mes fonds : Dropbox - cmd.info.numeric.TempDynaV2 - Simplify your life
++++
Yep je fais tout avec les images que j’avais récupéré chez toi je me suis fais un photoshop pour les boutons on/off si ça t’intéresse : Dropbox - IconInfo - Simplify your life avec les fonts.
++
Je vais regarder ça demain sur le Pc 
Perso j’utilise photofiltre comme logiciel photo. Je dois avoir d’autres fonds sympa je vais les mettre de côté pour les ajouter au partage d’icônes
Ça me rappelle également mon ancienne box Eedomus 
Bonsoir,
Il me semble que tu n’as pas la dernière version de ce que je t’avais envoyé, à savoir les fonds standards sombre et clair, on voit du blanc en mode sombre sur tes ON/OFF.
Mise à jour du widget
Positionnement des classes en pourcentage plutôt qu’en pixel ===> Allègement du code.
pas trop le temps ce soir je regarderais les coins et la transparence sinon j’ai mis à jour le code et j’ai une zone image vide :
ça fait çà quand tu n’utilises pas la variable icon.
et l’icone passe sur le bandeau de couleur j’ai fait un test avec : voyant/vo_carre_bk.png
+++ bonne nuit
Salut,
Tu n’as pas joint ton image.
Peux-tu me préciser les valeurs pour lesquelles le phénomène se produit afin de cibler le problème.?
Je ne constate rien de mon côté.
A bientôt
Mise à jour du code de widget.
Je n’ai pas constaté ton problème.
Ceci étant, en utilisant l’image que tu as évoquée, je me suis rendu compte qu’elle dépassait sur le bandeau et donc que je n’avais pas pris assez de marge entre le bandeau et le logo.
J’en ai profité également, sur les conseils de @Nemeraud, pour allèger encore l’écriture de certaines expressions du code.
Bonne journée
@nawak86 bonjour, une question, que fait le widget cmd.info.numeric.TempDynaV2.html
J’ai regardé dedans, je ne vois pas comment il fonctionne et sur quoi tu le met.
Puis je ne vois pas ou tu met les fonds dans jeedom, je n’ai pas trouvé dans le widget (html) un appel vers ce dossier (fonds) avec s
Merci
Pour avoir les fonds tu dois installer le widget Multi-action-defaut de @JAG.
Pour le reste, tu devras attendre la réponse de @nawak86.
Bonne soirée
Ok mais il est ou le widget multi action defaut de jag ? Je ne l’ai pas vu sur le post, ou alors je suis miro complet
Relis le post 41, tout y est expliqué
Bonsoir,
Je n’avais pas compris ton message.
J’ai effectivement constaté le problème.
J’ai vu d’où ça venait mais je ne comprends pas pourquoi.
C’est la ligne :
var srcIcon = ('#icon#'!='#'+'icon#') ? 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/' + "#icon#" : "";qui ne marche pas, la variable n’est jamais initialisée à « », même si #icon# est vide.
A moins que je ne me trompte, c’est pourtant comme ça qu’il faut l’écrire.
Si quelqu’un voit l’erreur, qu’il n’hésite pas à me la corriger.
J’ai d’ailleurs remarqué que c’est pareil pour « srcTheme ».
En attendant, j’ai mis des solutions de contournement.
Mise à jour du widget pour correction de bug
cmd.info.numeric.TempDynaV2.html C’est le fichier ou je mets le code du widget de @mich0111
@mich0111 aucune idée comment corriger le code faudrait regarde le code d’un widget de @Salvialf ou @JAG pour voir comment il gère un paramètre non renseigné.
Je viens de tester j’ai toujours le même soucis malgré ta modif.
+++
indice si je rajoute le paramètre icon et que je ne mets rien ça fonctionne peut être initialiser dans ton code la variable #icon# = « » ainsi que srcTheme avec un nom de thème par défaut.
+++
j’ai pas pu m’empêcher j’ai regardé ton code sauf erreur de ma part je suis pas dév
<div style="padding:0px; width:85px; height:85px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
<img class="fond#uid#"/>
<img class="bandeau#uid#"/>
<img class="icon#uid#" style="transform:translate(-50%,-50%);" />
<div class="partieentiere#uid#"style=""></div>
<div class="partiedecimale#uid#"style=""></div>
<div class="unite#uid#">#unite#</div>
<div class="nomcmd#uid#">#name_display#</div>
<style>
div.nomcmd#uid# {
font-size:1em;
font-weight:bold;
position:absolute;
vertical-align:middle;
top:82%;
left:0%;
width:85px;
height:85px;
z-index:4;
}
div.unite#uid# {
font-size:1.2em;
font-weight:bold;
position:absolute;
top:60%;
width:85px;
height:85px;
z-index:4;
letter-spacing:0px;
}
div.partieentiere#uid# {
font-size:3em;
font-weight:bold;
position:absolute;
top:30%;
right:0%;
width:85px;
height:85px;
z-index:4;
letter-spacing:0px;
}
div.partiedecimale#uid# {
font-size:2em;
font-weight:bold;
position:absolute;
top:34%;
right:0%;
width:85px;
height:85px;
z-index:4;
letter-spacing:0px;
}
img.fond#uid# {
position:absolute;
top:0%;
left:0%;
width:85px;
height:85px;
z-index:1;
}
img.bandeau#uid# {
position:absolute;
top:0%;
left:0%;
width:85px;
height:85px;
z-index:2;
}
img.icon#uid# {
position:absolute;
margin:0;
top:45%;
left:50%;
height:55px;
width:55px;
z-index:2;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// Récupération des srcStates
var srcState = _options.display_value;
// Séparation des entier et décimal
var srcEntier = Math.trunc(srcState);
var srcDecimal = Math.abs(Math.round(srcState*10-srcEntier*10));
// Regle d'affichage des decimaux suivant le srcState a afficher
if ( srcEntier == 1 ) {
$('.partieentiere#uid#').empty().text(srcEntier);
$('.partieentiere#uid#').attr('style', 'right:5%;');
$('.partiedecimale#uid#').empty().text("."+srcDecimal);
$('.partiedecimale#uid#').attr('style', 'right:-20%;');
} else if ( ( srcEntier == -1 ) || ( srcState >= 0 && srcState < 10 ) ){
$('.partieentiere#uid#').empty().text(srcEntier);
$('.partieentiere#uid#').attr('style', 'right:12%;');
$('.partiedecimale#uid#').empty().text("."+srcDecimal);
$('.partiedecimale#uid#').attr('style', 'right:-20%;');
} else if ( srcState < 0 && srcState > -1 ) {
$('.partieentiere#uid#').empty().text("-"+srcEntier);
$('.partieentiere#uid#').attr('style', 'right:15%;');
$('.partiedecimale#uid#').empty().text("."+srcDecimal);
$('.partiedecimale#uid#').attr('style', 'right:-20%;');
} else if ( srcState < 0 && srcState > -10 ) {
$('.partieentiere#uid#').empty().text(srcEntier);
$('.partieentiere#uid#').attr('style', 'right:15%;');
$('.partiedecimale#uid#').empty().text("."+srcDecimal);
$('.partiedecimale#uid#').attr('style', 'right:-20%;');
} else if ( ( srcState <= -10 && srcState > -100 ) || ( srcState >= 10 && srcState < 100 ) ) {
$('.partieentiere#uid#').empty().text(srcEntier);
$('.partieentiere#uid#').attr('style', 'right:15%;');
$('.partiedecimale#uid#').empty().text("."+srcDecimal);
$('.partiedecimale#uid#').attr('style', 'right:-30%;');
} else if ( ( srcState >= 100) || ( srcState <= -100) ) {
$('.partieentiere#uid#').empty().text(srcEntier);
$('.partieentiere#uid#').attr('style', 'right:0%;');
}
// Gestion des icones et couleurs
var srcBkg = 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond/';
// Dossier des images de fond
var srcIcon = ('#icon#' !='#'+'icon#') ? "#icon#":"";
var srcFolder = ('#foldern#' !='#'+'folder#') ? "#folder#":"";
var iconPath = "data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/"+srcFolder+"/"+srcIcon+".png";
// Image superposée
var srcTheme = ('#theme#'!='#'+'theme#') ? '#theme#': "";
// Theme du fond s'il y a lieu
var srcUnit = ('#unit#'!='#'+'unit#') ? '#unit#' : "";
// Affichage ou non de l'unité
var srcMin = (is_numeric('#min#')) ? parseFloat('#min#') : null;
// Valeur image de fond min
var srcMax = (is_numeric('#max#')) ? parseFloat('#max#') : null;
// Valeur image de fond max
var srcField = srcMax - srcMin;
// Plage totale de calcul de l'image de fond
var srcStep = srcField/9; // Intervalle entre 2 fonds différents, 9 correspond au nombre d'intervalle pour 11 fonds
var srcMinLevel = 1; // Niveau min du bandeau (les images de fond vont de 1 à 11
var srcMaxLevel = 11; // Niveau max du bandeau
var srcLevel = 0; // Niveau du bandeau calculé
var srcStateShift = srcState - srcMin; // State décalé en fonction du Min pour calculer l'image du fond
var srcTxtVal = ""; // Couleur des caractères de la valeur de la commande
var srcValBanner = ""; // Couleur des caractère du bandeau
var srcMode = "light" // Mode du fond (dark ou light)
var srcTxtBanner = "black" // Couleur des caractères du bandeau
// Calcul du logo à afficher
if (srcMin == null || srcMax == null || srcMax <= srcMin || srcStep < 1) {
// Cas où les paramètres passés ne permettre pas de choisir le fond
srcValBanner = "error";
}
else {
// Cas où les paramètres permettent le calcul
srcLevel = Math.round(Math.abs(srcStateShift/srcStep))+1;
if (srcState <= srcMin){
srcValBanner = srcMinLevel.toString();
} else if (srcState >= srcMax){
srcValBanner = srcMaxLevel.toString();
}
else {
srcValBanner = srcLevel.toString();
}
}
// Calcul de la couleur des caractères de la valeur de la commande et du bandeau
switch (srcValBanner) {
case "1":
srcTxtVal = "#00ffff";
srcTxtBanner = "black"
break;
case "2":
srcTxtVal = "#2989db";
srcTxtBanner = "white"
break;
case "3":
srcTxtVal = "#839f25";
srcTxtBanner = "white"
break;
case "4":
srcTxtVal = "#f6ff00";
srcTxtBanner = "black"
break;
case "5":
srcTxtVal = "#ff7d27";
srcTxtBanner = "black"
break;
case "6":
srcTxtVal = "#ff7300";
srcTxtBanner = "black"
break;
case "7":
srcTxtVal = "#ff5a00";
srcTxtBanner = "white"
break;
case "8":
srcTxtVal = "#da3037";
srcTxtBanner = "white"
break;
case "9":
srcTxtVal = "#993333";
srcTxtBanner = "white"
break;
case "10":
srcTxtVal = "#838383";
srcTxtBanner = "white"
break;
case "11":
srcTxtVal = "#000000";
srcTxtBanner = "white"
break;
default:
srcValBanner = "error";
}
// Sélection du mode clair ou sombre
if ($('body')[0].hasAttribute('data-theme')) {
if ($('body').attr('data-theme').endsWith('Light')) {
srcMode = "light";
} else {
srcMode = "dark"
}
}
//Affichage du fond et du nom de la commande
if (srcTheme != "") {
srcTheme = srcTheme + "_";}
if (srcValBanner == "error") {
$('.fond#uid#').empty().attr("src", srcBkg + "fo_oups1.png");
} else {
$('.fond#uid#').empty().attr("src", srcBkg + "fo_bkg_" + srcTheme + srcMode + ".png");
$('.bandeau#uid#').empty().attr("src", srcBkg + "fo_banner_" + srcValBanner + ".png");
}
$(".nomcmd#uid#").css( "color",srcTxtBanner);
// Affichage de l'unité sauf si pas si demandé
if (srcUnit != "no") {
$(".partieentiere#uid#,.partiedecimale#uid#,.unite#uid#").css("color",srcTxtVal);
} else {
$(".partieentiere#uid#,.partiedecimale#uid#").css("color",srcTxtVal);
$(".unite#uid#").hide();
}
// Affichage de l'icone si demandé
if (srcIcon != "") {
$('.icon#uid#').empty().attr('src', iconPath);
} else {
$(".icon#uid#").hide();
}
$('.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>
en fait j’ai modifié ça :
var srcIcon = ('#icon#' !='#'+'icon#') ? "#icon#":"";
var srcFolder = ('#foldern#' !='#'+'folder#') ? "#folder#":"";
var iconPath = "data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/"+srcFolder+"/"+srcIcon+".png";
et en bas :
// Affichage de l'icone si demandé
if (srcIcon != "") {
$('.icon#uid#').empty().attr('src', iconPath);
et j’ai pour le coup rajouté le folder pour le dossier de l’image et le png n’est plus obligatoire.
j’ai pas corrigé pour le theme je dois allé dormir lol
j’ai fais le test et ça fonctionne +++
PS : Dropbox - cmd.info.numeric.TempDynaV2 - Simplify your life
les 2 fonds : fo_bkg_reflet_light et fo_bkg_reflet_dark transparence corrigé j’avais du oublié de désactiver un calque en arrière plan.
+++++