Widget code cmd.info.numeric.gifCM

cminssie · Mars 17, 2021, 12:20

Bonjour,
J’ai créé un petit widget nommé gifCM que je rapporte ici pour ceux que cela peut intéresser. Voici une petite description et qq images pour la mise en œuvre, ainsi que le code et le dossier zippés. C’est une première version et je suis débutant en programmation, alors les améliorations, optimisations et corrections, n’hésitez pas à en proposer !

Ce widget permet d’afficher une image gif sur une trame particulière en fonction d’une valeur numérique d’une commande info.

Fort utile pour représenter des objets variables tels que des volets roulant, porte, fenêtres, rideaux, instruments de mesure etc… avec un seul fichier image à gérer, évitant de multiplier les icones comme on peut le voir ça et là.

L’application de ce widget sur une commande info nécessite à minima le paramètre de widget « gif » spécifiant le fichier gif à afficher.
Un parametre optionnel permet de réduire la taille de l’image : « largeur maximum » avec une valeur contraignant le nombre de pixels en largeur.

Je conseille de créer le fichier gif à partir de l’url public et gratuit « Animated GIF Maker ».

Exemples (fournis dans le dossier associé au widget) : volet-roulant.gif ou rideau.gif… formés à partir d’icones représentant les différentes positions de l’objet. J’ai ajouté aussi 2 compteurs. Tous réalisés à partir des icones que divers bienfaiteurs ont pu partager précédemment (merci à eux).

Note: la commande info Jeedom doit être numérique et bornée (min et max). A défaut de bornes on retient min =1 et max=10. Les bornes peuvent être négatives (exemple : de -10 à 10)

Le widget effectue un mapping entre les bornes min et max de la commande avec le nombre de trames présentes dans le fichier gif.
L’adéquation de l’image avec la valeur sera donc d’autant plus fine que le nombre d’images sera grand, l’Ideal étant une trame par valeur pour des commandes à valeur entière. Le widget est dynamique et son aspect changera en même temps que la valeur info associée.

L’installation est classique pour un widget code. Il suffit de dézipper le package dans ‹ data/customTemplates/dashboard/ › (utiliser jeeexplorer).
Vous aurez le fichier html ainsi que le dossier contenant les exemples de gif et la bibliothèque javascript utilisée par le widget pour la manipulation des gifs.

j’ai testé avec un virtuel contenant un slider et une info associée :

test desktop

Configuré ainsi :

Il faut aussi configurer la commande (ici « ouverture rideau ») pour l’utilisation du widget :

Le paramètre « gif » est obligatoire, le 2eme est facultatif et permet de réduire la taille de l’image au besoin.

le widget est ici

Merci de vos commentaires !

nak · Mars 18, 2021, 5:57

Bonjour,
très sympa j’ai essayé entre 2 impression 3D
mais quand je met une valeur ca indique une erreur

Très Cordialement

cminssie · Mars 19, 2021, 9:03

@nak
Bonjour.
Je vois que ta commande slider n’est pas bornée.
Il me semble que par défaut les bornes slider sont entre 1 et 100. D’où probablement le 65 si ton slider est proche du centre.

La valeur reçue par le widget n’est donc pas dans les bornes 1 à 10 spécifiées sur la commande info qui sont celles qui servent de référence pour le mapping avec le nb d’images du GIF.

Le plus simple est de borner aussi ta commande slider entre 1 et 10.
(ou de mettre les deux entre 1 et 100 !)

Quelque soit la source modifiant la valeur de la commande info (slider, scénario, agenda, script ou autre…), il faut s’assurer que la valeur reste dans les bornes valides définies sur l’info elle-même. La logique voudrait que si tu utilises ce widget, tu mettes les bornes de la commande info identiques à la plage de valeur de ta source d’information. Par exemple si la valeur numérique que tu veux représenter varie entre [min<->max], tu mets min et max comme bornes à ta commande info.

A ta dispo si besoin de plus d’info ou pas clair…

nak · Mars 20, 2021, 5:12

Bonjour,
Le plus simple à savoir mettre les deux entre 1 et 100 fonctionne parfaitement bien, je me permet de te féliciter de la qualité de ton travail et de l’élégance avec laquel tu répond au interrogation des débutant comme moi, reçois mon très cher ami l’expression de mon respect et d’amitié et merci encore pour ce très jolie widget

cminssie · Mars 21, 2021, 8:35

Merci @nak pour ton commentaire sympa.
C’est un plaisir de partager ici avec la communauté!

noodom · Mars 21, 2021, 2:40

Salut,

Merci pour le partage.

Je te propose quelques modifications de code :

optimisation de la taille de la librairie js en minimifiant le fichier (fichier libgif-min.js)
simplification de la saisie du paramétre gif de l’image en ne renseignant que le nom de l’image (le path et l’extension sont ajoutés dans le code)
suppression de l’alerte du paramètre gif non renseigné en chargeant la gif volet-roulant.gif par défaut, si absent (à voir si besoin de créer une gif spécifique affichant l’erreur, moins intrusif qu’une alerte et n’empêchant pas le bon fonctionnement du widget)

=> Fichier .txt à renommer en .zip contenant la librairie minimifiée et le widget modifié. Il faut ensuite ajouter le fichier volet-roulant.gif dans le dossier /cmd.info.numeric.gifCM.
gifCM.txt (6,0 Ko)

cminssie · Mars 23, 2021, 8:04

@noodom
Bonsoir,
je ne connaissais pas cette possibilité de « minification » de librairie!
Merci à toi!

Concernant le gif par défaut et le répertoire c’est une question de goût !
Je serais plus pour un répertoire par défaut seulement si aucun répertoire n’est entré, cela laisserait la possibilité de mettre le gif ailleurs (par exemple dans le répertoire où on peut uploader les images user dans les widget basiques (pas besoin de jeexplorer dans ce cas, peut être plus simple pour un débutant?) :

Ton idée de GIF « erreur » me plait bien, car l’user risque de ne pas comprendre pourquoi ce volet-roulant apparait.

Je ferais une v2 synthèse de tout cela.
Merci encore de tes conseils avisés.

cminssie · Mars 23, 2021, 8:09

PS: ya-t-il un moyen de passer des messages à l’utilisateur sans bloquer la page ? j’ai utilisé « alert » mais ya peut être moins intrusif/mieux intégré à Jeedom ?
Par exemple un message directement à la sauvegarde de la commande si parametre gif inexistant ou si l’image demandée n’existe pas ?