Partage Widget V4

Almy · Octobre 26, 2019, 6:00

Voici les icones version nuancier 12 couleurs + noir en bonus :
Icone_Bleu_%230247FE Icone_Jaune_Orange_%23FABC02 Icone_Jaune_Verdatre_%23D0EA2B Icone_Noir_%23000000 Icone_Orange_%23FB9902 Icone_Orange_%23FEFE33 Icone_Rouge_%23FE2712 Icone_Rouge_Orange_%23FD5308 Icone_Rouge_Violace_%23A7194B Icone_Vert_%2366B032 Icone_Vert_Bleute_%230392CE Icone_Violet_%238601AF Icone_Violet_bleute_%233D01A4

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>

fabe · Octobre 26, 2019, 6:19

Merci @Almy

nawak86 · Octobre 26, 2019, 7:18

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. ++

benj29 · Octobre 27, 2019, 5:20

Beau boulot, je garde pour mon évolution v4.
Mais pourquoi ne pas mettre l’unité sur la même ligne ?

Almy · Octobre 27, 2019, 9:53

Pour que les digits soient assez gros.
J’avais essayé mais le rendu n’était pas terrible

mich0111 · Octobre 27, 2019, 1:39

Bonjour,

Je vous propose une évolution significative de ce widget.
Les corrections et mises à jour à venir seront systématiquement fournie dans ce même post.
Je pense avoir tout testé mais les cas sont si nombreux que j’ai pu passer à côté de quelques bugs, aussi n’hésitez pas à me remonter les anomalies.
J’ai donc modifié ce widget en scindant l’image de fond et le bandeau, en permettant l’incrustation d’une image logo par-dessus le fond de couleur de façon à visualiser l’équipement en question (grand merci à @Nemeraud sans qui je n’y serais pas parvenu). J’ai aussi permis l’affichage ou non de l’unité de mesure.
Ce widget bascule automatiquement du thème sombre au clair et adapte le fond du widget en conséquence.
J’ai également permis la définition de valeurs min et max de plage de mesure. Le choix du bandeau se fera donc en fonction de ces plages. Le pas de changement de couleur s’adapte automatiquement. Il y a 10 couleurs de bandeau (aqua, blue, lime, yellow, lightsalmon, orange, darkorange, red, darkred, black).
Il y a donc plusieurs paramètres à prendre en compte pour l’utilisation de ce widget.

min = (paramètre obligatoire) valeur minimale à prendre en compte. A partir de cette valeur et en-dessous, fond bleu clair.
max = (paramètre obligatoire) valeur maximale à prendre en compte. A partir de cette valeur et au-dessus, fond noir.
icon = (paramètre optionnel) dossier/image - dossier = dossier où se trouve le l’image, image = nom de l’image avec son suffixe.
unit = (paramètre optionnel) no : si « no » pas d’affichage d’unité, tout autre valeur ou paramètre absent, unité affichée.
theme = (paramètre optionnel) nom : nom du thème de fond à afficher. Les fichiers de fond devront alors s’appeler fo_bkg_nom_dark.png et fo_bkg_nom_light.png. Si le paramètre est absent, les thèmes par défaut seront affichés.
min < max et le pas doit être supérieur à 1. Donc max >= min + 11.

Les fichiers de fond, standards ou optionnels, se trouvent dans le répertoire « data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond ».
Les logos superposées se trouvent dans le répertoire « data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/ » auquel il convient d’ajouter le dossier et l’image spécifique.
Vous l’aurez sans doute compris, cela signifie qu’il faut installer au préalable le widget Multi-action-Defaut de @JAG.
Si les images requises ne s’y trouvent pas, vous devrez les transférer par Jeexplorer.

Voici le résultat.

Mode jour
Capture

Mode nuit:
Capture1

Je compte sur vos remarques pour en permettre l’amélioration.

Bonne journée

Widget téléchargeable sur mon GitHub

mich0111 · Octobre 27, 2019, 2:07

Au fait, @Almy, j’ai constaté 2 bugs d’affichage des valeurs numériques.
Entre 0 et -1, et entre 10 et 100.
J’ai corrigé ces bugs dans le widget que je viens de transférer.
Bonne journée

JAG · Octobre 27, 2019, 3:20

Salut,

j’ai mis à jour le widget pour le core V3 et V4
Bonne soirée

mich0111 · Octobre 27, 2019, 3:51

@JAG
Es-tu sûr de l’avoir poussée.
La mise à jour est effectivement demandée mais après application de celle-ci, je ne vois pas le dossier.

JAG · Octobre 27, 2019, 3:54

Oui
Mais attention tu es sur la v4

mich0111 · Octobre 27, 2019, 3:54

J’ai appliqué le script de la 4.0.3
Normalement il aurait dû être copié ?

JAG · Octobre 27, 2019, 3:58

j’ai repoussé mais chez moi, je les avais
regarde dans le dossier de l’ancien plugin pour savoir si tu as les fichiers

mich0111 · Octobre 27, 2019, 4:07

C’est bon ce coup-ci
Merci.

Myrmex88 · Octobre 27, 2019, 9:17

Bravo tres bon travail je commence a m’y mettre et j’espere pouvoir en faire autant

nawak86 · Octobre 28, 2019, 12:51

Je testerais ça bon le rose j’avoue c’est pas mon délire

fabe · Octobre 28, 2019, 7:06

Juste une petite question peut on virer le fond enfin l’image de fond ? Car je suis sur le thème dark et cela aurait du style sans le fond grisonnant

mich0111 · Octobre 28, 2019, 8:10

Bonjour,
Ça veut dire faire des fonds différents.
Je vais y réfléchir.

mich0111 · Octobre 28, 2019, 8:17

Bonjour,
@nawak86
Ce n’est pas du rose mais du violet. Cette couleur suit le rouge dans la palette.
Elle n’a jamais changé, c’est le même depuis le début.
Maintenant, s’il y a une forte mobilisation générale contre cette couleur, …

mich0111 · Octobre 28, 2019, 8:44

Bonjour,
Désolé, j’ai détecté un bug. @Nemeraud m’a aidé à le corriger, encore du CSS.

Mise à jour dans mon premier post de livraison.

DreamerCG77 · Octobre 28, 2019, 12:02

Il n’y a pas normalement une solution pour importer un widget avec un json ?? Car il y a bien un bouton importer pourquoi personne ne l’exploite ?