Partage Widgtet V4 - Info Numérique - Images variables

Tags: #<Tag:0x00007fc8d6a83e90>

Bonjour,

Je vous propose un widget permettant l’affichage d’info numérique avec images variables superposées au fond pour boussole, manche à air, baromètre, …
Les corrections et mises à jour à venir seront fournies 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.
Le fond et les images superposées sont paramétrables.
L’installation préalable du widget Multi-action-Defaut de @JAG est un prérequis.
Les images de fond, standards ou optionnels, se trouvent dans le répertoire “data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond” .
Les images 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.

Si les images requises ne s’y trouvent pas, vous devrez les transférer par Jeexplorer.
Dans ce widget, le choix de l’image qui se superpose au fond se fait en fonction d’un calcul dépendant de valeurs “min” et “max” et d’un “step” à définir.
Ce widget bascule automatiquement du thème sombre au clair et adapte le fond du widget en conséquence.
2 types d’image lié à l’info num sont possibles, les valeurs bornées (mesure angulaire d’une boussole par exemple), les valeurs non bornées (vitesse du vent ou autres).
Les images à afficher devront s’appeler icon_x où x =1 à X. N’oubliez pas que plus l’intervalle est grand et le step petit, plus vous aurez d’images à créer.

Plusieurs paramètres sont donc à prendre en compte pour l’utilisation de ce widget.

  • typenum = (obligatoire) définit le type d’images à afficher: Images variables “opened” (valeurs non bornées) ou “closed” (valeurs bornées), image fixe “single”.
  • min = (obligatoire sauf pour “single”) >= 0, valeur minimale à prendre en compte (image_1).
  • max = (obligatoire sauf pour “single”) > min, valeur maximale à prendre en compte (image_X).
  • step = (obligatoire sauf pour “single”) intervalle mesuré entre 2 images successives.
  • icon = (optionnel) dossier/image - dossier = dossier où se trouve le l’image, image = nom de l’image sans son suffixe ni sa valeur (si une des images s’appelle “image_2.png”, passer “image”). Pour les images fixes, passez le nom de l’image complet sans suffixe.
  • theme = (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.

Voici le résultat.

Mode jour
Capture
Screenshot_20191109_020710

Mode nuit:
Capture1

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

Bonne journée

<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="icon#uid#" style="transform:translate(-50%,-50%);" />
		<div class="value#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.value#uid# {
			font-size:1.3em;
			font-weight:bold;
			position:absolute;
			top:68%;
			left:32%;
			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.icon#uid# {
			position:absolute;
			margin:0;
			top:35%;
			left:52%;
			height:55px;
			width:52px;
			z-index:2;
		}
 	</style>

	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			// Récupération de srcState
			var srcState = _options.display_value;	// Valeur de l'info numérique
			
			var srcTypeNum = "#typenum#";
        
			// Options de personnalisation des images avec valeur par defaut
			var fldBkg = 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond/';
													// Dossier des images de fond
			var fldIcon = 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/';
													// Dossier racine de l'image superposée
			var srcIcon = ('#icon#'!='#'+'icon#') ? '#icon#' : "";
													// 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 srcMode = "light"					// Mode du fond (dark ou light)
 
			// Initialisation des variables de calcul
			var srcStep = (is_numeric('#step#')) ? parseFloat('#step#') : null;
													// Intervalle entre 2 images différentes
			var srcMinVal = (is_numeric('#min#')) ? parseFloat('#min#') : null;
													// Valeur maximale à prendre en compte
			var srcMaxVal = (is_numeric('#max#')) ? parseFloat('#max#') : null;
													// Valeur maximale à prendre en compte
			var srcIconID = "";						// Rang de l'image à afficher
			var srcLevel = 1;						// Niveau de l'image à afficher après calcul
			var srcMinLevel = 1;					// Niveau min de l'image (forcément 1)
			var srcMaxLevel = 1;					// Niveau max de l'image à afficher
		
			// Calcul du logo à afficher
			if (srcTypeNum != "single") {
				if (srcStep == 0 || srcStep == null || srcMinVal == null || srcMaxVal == null || srcMinVal >= srcMaxVal) {
					srcIcon = "error";
				}
				else {
					srcLevel = Math.round(srcState/srcStep)+1;
					srcMaxLevel = Math.round(srcMaxVal/srcStep);
					// Calcul en fonction du type de variable numerique "opened"-"closed"-single"
					switch (srcTypeNum) {
						case "opened":
							if (srcState <= srcMinVal){
								srcIconID = '_' + srcMinLevel.toString();
							}
							else if (srcState >= srcMaxVal){
								srcIconID = '_' + srcMaxLevel.toString();
							}
							else {
								srcIconID = '_' + srcLevel.toString();
							}
							break;
						case "closed":
							if (srcState <= srcMinVal || srcState >= srcMaxVal){
								srcIconID = '_' + srcMinLevel.toString();
							}
							else {
								srcIconID = '_' + srcLevel.toString();
							}
							break;
						default:
							srcIcon = "error";
					}
				}
			}

			// Sélection du mode clair ou sombre
			if ($('body')[0].hasAttribute('data-theme')) {
				if ($('body').attr('data-theme').endsWith('Light')) {
					srcMode = "light";
					$(".nomcmd#uid#").css( "color",'white');
					$(".value#uid#").css( "color",'white');
					$('.value#uid#').empty().text(srcState);
				} else {
					srcMode = "dark"
					$(".nomcmd#uid#").css( "color",'black');
					$(".value#uid#").css( "color",'black');
					$('.value#uid#').empty().text(srcState);
				}
			}

			//Affichage du fond et du nom de la commande
			if (srcTheme != "") {
				srcTheme = srcTheme + '_';}
			if (srcIcon == "error") {
				$('.fond#uid#').empty().attr("src", fldBkg + 'fo_oups1.png');
			} else {
				$('.fond#uid#').empty().attr("src", fldBkg + 'fo_bkg_' + srcTheme + srcMode + '.png');
				if (srcIcon != "") {
					$('.icon#uid#').empty().attr('src', fldIcon+srcIcon+srcIconID+'.png');
				} else {
					$(".icon#uid#").hide();
				}
			}

			$('.cmd[data-cmd_uid=#uid#]').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>
2 J'aimes