[WIDGET] num-multipictures - Info Numérique à mages variables (boussole, manche à air, ...)

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.

num-multipictures

Widget pour info numériques à images variables.

Widget permettant l’affichage d’info numérique avec images variables superposées au fond pour boussole, manche à air, baromètre, …

Le fond et les images superposées sont paramétrables.

Le bandeau de bas de vignette évolue également en fonction de la valeur et des paramètres saisis, il y a 3 couleurs différentes paramétrables en fonction de la valeur de la commande. Pour changer les paramétres par défaut de ces bandeaux et couleurs de texte des bandeaux, vous devrez utiliser les standards HTML de nommage de couleur.

L’installation préalable du widget Multi-action-Defaut de @JAG est un prérequis.

Les images de fond, standards ou optionnels, doivent se trouver dans le répertoire “data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond” .
Les images superposées doivent se trouver dans le répertoire “data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/” auquel il convient d’ajouter le nom du dossier 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 nombre d’images “picture” à définir.

Ce widget bascule automatiquement du thème sombre au clair et adapte le fond du widget en conséquence.

Deux types d’info numériques 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.png où x=1 à n, avec n=picture.

Voici les paramètres à prendre en compte pour l’utilisation de ce widget.

  • numtype : (obligatoire), définit le type de valeurs à prendre en compte. Valeurs non bornées “opened”, valeurs bornées “closed”.
  • picture : (obligatoire) nombre d’images potentielles à afficher. Si picture=1 l’image sera la même quelque soit la valeur affichée, si picture=2 le changement d’image se fera en fonction de la valeur médiane entre min et max, si picture > 2 la répartition se fait en fonction de la plage min-max.
  • min : (obligatoire), valeur minimale à prendre en compte (affichage icon_1.png).
  • max : (obligatoire) > min, valeur maximale à prendre en compte (affichage image_n.png (n=picture)).
  • icon : (obligatoire), nom de l’image, pour “image_2.png”, passer “image”).
  • folder : (obligatoire), nom du dossier de l’image (vent, eau, …).
  • colbanmin : (optionnel), couleur du bandeau si la valeur de la commande <= min - Par défaut « aqua ».
  • colbanmax : (optionnel), couleur du bandeau si la valeur de la commande >= max - Par défaut « red ».
  • colbanin : (optionnel), couleur du bandeau si la valeur de la commande entre min et max - Par défaut « lime ».
  • coltxtbnmin : (optionnel), couleur du texte du bandeau si la valeur de la commande <= min - Par défaut « black ».
  • coltxtbnmax : (optionnel), couleur du texte du bandeau si la valeur de la commande >= max - Par défaut « black ».
  • coltxtbnin : (optionnel), couleur du texte du bandeau si la valeur de la commande entre min et max - Par défaut « black ».
  • blinkmin : (optionnel), clignotement du bandeau si opened et <= min.
  • blinkmax : (optionnel), clignotement du bandeau si opened et >= max.
  • theme : (optionnel), 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.

Si l’un des paramètres obligatoires est manquant ou erroné, le widget vous indiquera celui à corriger sauf dans le cas d’une image manquante. Dans ce cas l’image sera vide.

Exemple d’affichage de ce widget:
multipictures

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

Bonne journée

Widget téléchargeable sur GitHub.

3 « J'aime »

Mise à jour du widget

Refonte totale du widget

Hello @mich0111
Pourquoi tu ne fais pas un fichier zip cela facilitera l’installation de ton widget sous la V4. Non ? Comme le fait @Salvialf c’est vraiment plus simple…

Je ne vois pas comment envoyer un fichier zip dans ce forum, je n’ai pas vu ce format accepté.
Ça veut dire qu’il faut que je réactive mon Github.
Je verrais ça la semaine prochain
.
Bon dimanche.

1 « J'aime »

Exactement il faut activer ton Github ou un drive…

Je suis dessus et ce n’est pas gagné.
Mon drive est trop plein, pas la place de stocker du versionning aussi je configure le git.
Je verrais ça dans la semaine.
Bonne soirée.

Bonjour @mich0111 ,

je suis super interessé par ce widget, mais je suis pas trop qualifié en code.

Si j’ai bien compris, dans la partie widget de la V4, je clique sur code, puis sur nouveau, et dans le cadre edition je colle le code.
Comme tu dit, il faut definir des paramètres, mais on fait comment? Je change les criteres en dur dans le code? et si oui je capte pas quel partie du code, je pense que c’est ces ligne la

// Récupération des valeurs des paramètres du widget
			var srcNumType = "#numtype#";			// Type de valeur à représenter (closed, opened, single) (obligatoire)
 			var fldIcon = ('#folder#'!='#'+'folder#') ? '#folder#' : "";
													// Dossier de l'image à superposer (obligatoire)
 			var srcIcon = ('#icon#'!='#'+'icon#') ? '#icon#' : "";
													// Image à superposer (obligatoire)
			var srcTheme = ('#theme#'!='#'+'theme#') ? '#theme#': "";
													// Thème du background s'il y a lieu (optionnel)
			var srcPicture = (is_numeric('#picture#')) ? parseFloat('#picture#') : null;
													// Nombre d'images à afficher (obligatoire)
			var srcMinVal = (is_numeric('#min#')) ? parseFloat('#min#') : null;
													// Valeur minimale de la plage de mesure à prendre en compte (obligatoire)
			var srcMaxVal = (is_numeric('#max#')) ? parseFloat('#max#') : null;       
													// Valeur maximale de la plage de mesure à prendre en compte (obligatoire)


mais quel partie exactement?

Bonsoir,
Non pas du tout, c’est beaucoup plus simple.
Quand tu as téléchargé et enregistré le code tu vas ensuite dans l’équipement, puis sur la commande sur lequel tu veux appliquer le widget.
Tu cliques sur la configuration de l’équipement, tu vas dans l’onglet affichage, puis tu choisis le widget dans la liste et ensuite tu ajoutes les paramètres que tu initialises comme il faut, tu enregistres et c’est tout.
Si tu as tout bien fait, quand tu iras sur ton dashboard tu dois voir ton équipement représenté par ce widget.
Sinon, envoie un message.
Bonne soirée

nikel

juste j’ai pas capter comment il gere la couleur du bandeau et du texte, du coup la couleur est zarb

image

Il y a 10 bandeaux de couleurs différentes.
Comme tu as choisi le type opened, le bleu c’est pour min et moins, le noir pour max et plus et les autres couleurs soit 8 se répartissent uniformément entre min et max.
La couleur du texte est la même que celle du bandeau, c’est un rappel.
Pour les images, c’est le même principe mais c’est toi qui choisi le nombre.
Je te conseille d’utiliser des images à fond transparent, ça te permettra de ne pas avoir le carré blanc entourant ton thermomètre.
Sinon, ravi que ça te plaise.
Au fait, l’ordre de couleur des bandeaux est le suivant:
bleu clair, bleu foncé, vert foncé, jaune, orange clair, orange moyen, orange foncé, rouge, rouge foncé, noir.
Autre chose, quand tu enregistres au format png, je ne sais pas quel logiciel tu uses mais n’enregistre que la sélection correspondant aux limites du dessin, ça te permettra de centrer l’image sur la vignette

Merci pour l’explication.
En fait mon dessin ici va avec deux autre qui ont un logo a gauche et du coup j’ai enregistrer cette taille pour pas le decaler. Pour le fond transparent c’est regler.

Alors je mettrais le thermomètre au milieu centré et les légendes à droite ou à gauche, ça equilibrerait la vignette.
Mais, c’est affaire de goût et une simple suggestion.

Correction de bug, widget à retélécharger

Mise à jour du widget

Ajustement taille de la vignette

Mise à jour du widget

A la demande insistante, et somme toute justifiée, de certains utilisateurs, la présentation du widget évolue.
Désormais la valeur numérique sera affichée systématiquement en noir, certaines couleurs n’étant pas suffisamment lisibles, et sous l’icone.

Bonsoir,
Je souhaiterais savoir si l’affichage de bandeaux de couleurs différentes en fonction de la valeur doit être maintenue.
Je ne suis pas sûr de l’utilité de cette fonction.
Si vous pouviez me faire part de vos commentaires, ce serait sympa.
Merci

Bonsoir @mich0111,

Pour moi la couleur des bandeaux n’est pas très importante car je n’arrive pas à retrouver une certaine logique comme pour les alertes météos par exemple (vert,jaune,orange,rouge) si tu vois ce que je veux dire, après tu fais comme tu veux, attends d’autres retours peut-être.
Sinon ton widget est super!

Bonne soirée. :wink:

Oui c’est exactement ce que je pense.
En fait, j’envisageais d’avoir 2 couleurs, une dans les bornes et l’autre hors bornes (pour le cas opened)
Je pourrais également faire clignoter les bandeaux lorsque la valeur dépasse ces bornes sur paramètres optionnels
.

Salut,

Les 2 couleurs me paraissent être un bon compromis car les images sont déjà bien bien parlantes.

Mise à jour du widget

Le widget évolue dans le sens indiqué précédemment.
Les bandeaux n’auront plus que 3 couleurs paramétrables, une pour min et en-dessous, par défaut aqua, une pour max et au-dessus, par défaut red, une dans les marges, par défaut lime.
Les couleurs des caractères du bandeau sont également paramétrables; par défaut black.
Dans le cas de typenum closed, il ne peut y avoir qu’une couleur, par défaut lime.
Les couleurs devront respecter la norme de notation HTML que l’on peut trouver facilement sur le net.
Il est également possible de faire clignoter le bandeau lorsque la valeur atteint la valeur min ou max, par défaut pas de clignotement.

1 « J'aime »