Partage Widget V4

[Almy]

Bonjour,

Voici le résultat de la production de mon premier widget. C’est un widget numéric Dynamique, qui change de couleur en fonction des valeurs.

Voici le rendu :

et voici le code :

<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_Bleu_Clair.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 < 5) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Bleu_Fonce.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 >= 5 && valeur < 10) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Vert_fonce.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 >= 10 && valeur < 15) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Jaune.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 >= 15 && valeur < 20) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_Clair.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 >= 20 && valeur < 25) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_Moyen.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 >= 25 && valeur < 30) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_Fonce_ff5a00.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 >= 30 && valeur < 35) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Rouge.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 >= 35 && valeur < 40) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Violet.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 >= 40 && valeur < 45) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Gris.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 >= 45) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Noire.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>

Voici les icones :

!Icone_Bleu_Fonce|128x128](upload://xqRWw4vIT1aYxlmTQamoYzXP4UJ.png)
!Icone_Bleu_Moyen|128x128](upload://sgF9JSEh0vOPWvmo2iAR05HnAYs.png) !Icone_Gris|128x128](upload://5HgaO4otTeIQRNoS3dul9AUl2gV.png)


!Icone_Orange_Clair|128x128](upload://zt3zLPVfXBzinirvAhTIUkqdo4x.png)
!Icone_Orange_Fonce|128x128](upload://sfOZU6Ndpl8xmQiaEeUeziijrop.png) !Icone_Orange_Moyen|128x128](upload://t5F9rVy4qnuaonIyatn1O6dD9pL.png) !Icone_Rouge|128x128](upload://wH4FzPpasMhiRV9nuiWIofv3Bm4.png)

!Icone_Violet|128x128](upload://vbrL1BkW5r4lfnOFvRxmKGNZ3yX.png)

Etant débutant il reste quelques points a vérifier et optimiser. Mais a ce jour, je ne sais pas encore faire :

• Pb affichage pour les valeurs entre -0 et -1. Je ne trouve pas d’ou vient le pb
• Valider la compatibilité complète avec la V4. Chez moi tout a l’air de fonctionner mais je préfèrerai qu’un pro me le confirme en relisant le code.
• Optimiser le code (avis aux spécialistes)
• rendre plus souple le widget en permettant d’avoir des options type taille icone, extension icones, choix des plages… et tout autres idées.

Bref ceci est une mise de départ et merci à ceux qui contribueront à sont amélioration.

@Salviaf : ce code remplace celui ci : Widget numerique V4 type edomus - #2 par Salvialf

[Salvialf]

Salut @Almy,

Je n’avais pas vu ta réponse sur l’autre sujet, je n’étais donc pas revenu dessus.

J’essayes d’y regarder de plus près ce soir

[ajja17orange]

pour allégee

$(".value-entier#id#").css( "color", "#000000" );  
          	$(".value-decimal#id#").css( "color", "#000000" );  
          	$(".unite#id#").css( "color", "#000000" );

a remplacer par

$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#000000" );

[Almy]

Merci,

je prends note et publierai mardi ou mercredi la mise à jour du code avec toutes les modifs conseillées par tout le monde d’ici la.

[BroLee]

C’est jolie bon boulot.

[nawak86]

Salut
@Almy super boulot !
Je ne vois pas toutes les images c’est possible de corriger le premier post ?
Merci
++

[mich0111]

Salut,
@Almy, bon boulot.
Une petite suggestion, plutôt que de figer les valeurs de bornage, il serait intéressant de pouvoir les paramétrer.
Je veux dire par là que si, par exemple, tu affiches des températures, la valeur chaude ou froide n’est pas la même pour une piscine que un radiateur de voiture.
Je vais essayer de travailler là-dessus, mais l’essentiel est là.
Bonne journée.

[fabe]

Salut quelle est la procédure à suivre pour l’installation de ce widget en V4. Merci

[nawak86]

@mich0111 je suis le seul a voir que 4 images ?

++

[mich0111]

Bonjour,
Non moi aussi mais je les ai refaites.
Si tu en as besoin, je te les envoie.
Bonne journée

[Almy]

Bonjour,

Voici pour la mise a jour du code :

<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_Bleu_Clair_00ffff.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#00ffff" );
                $(".NomCmd#id#").css( "color", "black" );   
			}
			else if (valeur >= 0 && valeur < 5) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Bleu_Fonce_2989db.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#2989db" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 5 && valeur < 10) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Vert_foncé_839f25.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#839f25" );
                $(".NomCmd#id#").css( "color", "white" );  
            }
			else if (valeur >= 10 && valeur < 15) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Jaune_f6ff00.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#f6ff00" );
                $(".NomCmd#id#").css( "color", "black" );  
			}
			else if (valeur >= 15 && valeur < 20) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_Clair_ff7d27.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#ff7d27" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 20 && valeur < 25) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange Moyen_ff7300.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#ff7300" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 25 && valeur < 30) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Orange_Fonce_ff5a00.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#ff5a00" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 30 && valeur < 35) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Rouge_da3037.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#da3037" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 35 && valeur < 40) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Violet_dd00ff.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#dd00ff" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 40 && valeur < 45) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Gris_838383.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.unite#id#").css( "color", "#838383" );
                $(".NomCmd#id#").css( "color", "white" );  
			}
			else if (valeur >= 45) {
        		$('.icone#uid#').empty().append('<img src="'+srcImg+'Icone_Noire_000000.png" width="85px">');
				$(".value-entier#id#,.value-decimal#id#,.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>

[Almy]

Et voici les icones :

Je vais les refaires avec ce nuancier 12 couleurs :

[Almy]

Salut,
@Almy, bon boulot.
Une petite suggestion, plutôt que de figer les valeurs de bornage, il serait intéressant de pouvoir les paramétrer.
Je veux dire par là que si, par exemple, tu affiches des températures, la valeur chaude ou froide n’est pas la même pour une piscine que un radiateur de voiture.
Je vais essayer de travailler là-dessus, mais l’essentiel est là.
Bonne journée.

Salut @mich0111,

J’y avais pensé, et commencé à chercher, mais je ne suis encore assez calé pour le faire

[fabe]

@Almy peux tu m’indiquer la procédure à suivre pour l’ajout de ce widget en V4
merci

[nawak86]

merci pour les images

[mich0111]

Bonsoir,
Il te faut créer un nouveau widget. Tu vas ensuite dans « code » et tu copies/colles le code indiqué.
Tu dois également coller les images fournies en utilisant Jeexplorer.
Voilà

[nawak86]

avec Jeexplorer (plugin) tu vas déposer le widget dans :
data/customTemplates/dashboard/

J’ai fais le dossier du widget avec les images nommés avec le bon nom je pense que le forum change les noms des images uploadés :

Core 4

PS : c’est mon dossier dropbox avec les widgets que j’aime bien ils sont corrigé pour le core 4.

+++

[nawak86]

@Almy je n’ai pas trouvé ton image :
https://community.jeedom.com/uploads/default/original/2X/8/88a7ca22d2c84860f25202be7c3e80cd1013a42c.png
dans le code.

++

[mich0111]

J’ai créé ça, si ça t’intéresse en changeant les noms dans le code pour que cela soit plus parlant.

[Almy]

En fait il n’y a pas besoin de passer par jeExplorer.
Les icones sont a mettre dans le répertoire ou sont stockés tous les icones que tu ajoutes lorsque tu fais un widget perso (data/img)
Tu passes par outil/widget, tu ouvres un widget créé précédemment dans mes widgets, tu cliques sur « choisir » comme si tu allais mettre un widget, puis tu cliques sur l’onglet image, puis sur envoyer et tu vas rechercher l’icone.