Partage Widget V4

Tags: #<Tag:0x00007fc8d66189c8>

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 :
image
image%202
image%204

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_Clair
!Icone_Bleu_Fonce|128x128](upload://xqRWw4vIT1aYxlmTQamoYzXP4UJ.png)
!Icone_Bleu_Moyen|128x128](upload://sgF9JSEh0vOPWvmo2iAR05HnAYs.png) !Icone_Gris|128x128](upload://5HgaO4otTeIQRNoS3dul9AUl2gV.png)
Icone_Jaune
Icone_Noir
!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_Vert_fonce
!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

6 J'aimes

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 :grin:

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" );
1 J'aime

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.

C’est jolie bon boulot.

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

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 quelle est la procédure à suivre pour l’installation de ce widget en V4. Merci

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

++

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

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>

Et voici les icones :

Icone_Bleu_Clair Icone_Bleu_Fonce_2989db Icone_Bleu_Moyen_00beff Icone_Gris_838383 Icone_Jaune Icone_Noir Icone_Orange%20Moyen_ff7300 Icone_Orange_Clair_ff7d27 Icone_Orange_Fonce_ff5a00 Icone_Rouge_da3037 Icone_Vert_fonce Icone_Violet_dd00ff

Je vais les refaires avec ce nuancier 12 couleurs :
Nouvelle%20image%20bitmap

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

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

merci pour les images :slight_smile:

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à

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 :

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

+++

1 J'aime

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

++

J’ai créé ça, si ça t’intéresse en changeant les noms danns le code pour que cela soit plus parlant.
fo_bleu_clair fo_bleu_fonce fo_gris fo_jaune fo_noir fo_orange_clair fo_orange_fonce fo_orange_moyen fo_rouge fo_vert_fonce fo_violet

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.

1 J'aime