[TUTO noodom] Widget nooImgProgress

[noodom]

Helloo,

Je vous propose un nouveau widget qui permet d’afficher une partie d’une image en fonction de la valeur d’une commande info. La partie affichée de l’image sera calculée à partir de la valeur et des minimum et maximum précisés en paramètre du widget.

Différents paramètres précisés ci-dessous permettent de personnaliser cet affichage (direction, taille, etc…)

De façon plus concrète en image

Les paramètres sont les suivants :

animation (inactif) : affichage progressif sur changement de valeur (par défaut 1)
type : type d’affichage (‹ fill › : affichage par défaut 'fill', autre affichage possible, bulles : 'bubble'),
image : url de l’image à afficher au format png (par défaut 'data/customTemplates/dashboard/cmd.info.numeric.nooImgProgress/default.png'). Si l’image est chargée depuis le plugin Pimp my Jeedom (bouton 'Ajouter des fichiers'), seul le nom de l’image est nécessaire (sinon, mettre le path complet)
size : taille de l’image au format 'largeur,hauteur', ex : '200,100' (par défaut, taille de l’image avec la valeur '')
direction : direction de remplissage de l’image ('btt' : bas vers haut, 'ttb' : haut vers bas, 'ltr' : gauche vers droite, 'rtl' : droite vers gauche), par défaut 'btt'
precision : chiffres après la virgule : 0, 0.1, 0.01, … (par défaut 0),
backgroundColor : couleur de fond de l’image (par défaut '#ddd')
backgroundExtrude : largeur de dépassement du fond autour de l’image (par défaut 3)
unit : unité à ajouter à la valeur affichée, ex : '%' (par défaut '')
min : valeur minimum autorisée (0 par défaut)
max : valeur maximum autorisée (100 par défaut)
duration : durée de l’animation sur changement de valeur en secondes (par défaut 1 / 0 : pas d’animation)
labelTop : positionnement vertical du libellé de la valeur, ex : '-20px', '120%' (par défaut '50%')
labelLeft : positionnement horizontal du libellé de la valeur, ex : '-20px', '120%' (par défaut '50%')
labelColor : couleur du libellé de la valeur (par défaut '#fff')
labelFontsize : taille du libellé de la valeur (par défaut '14px')

Gestion des bulles (avec type : bubble) :
bubbleBackGroundColor : couleur de fond des bulles (par défaut '#248')
bubbleColor : couleur des bulles (par défaut '#fff')
bubbleCount : nombre de bulles affichées sur la durée bubbleDuration (par défaut 50)
bubbleDuration : durée d’affichage des bulles (par défaut 0 : pas de bulles)
bubblePath : Format du conteneur des bulles (valeurs possibles : square : carré sans bordure, squareBorder : carré avec bordure, round/roundBorder : rond avec une bordure, par défaut : rond avec bordure)

Le code et les explications d’installation sont accessibles ici :

Pour compléter :
chaque paramètre peut être modifié dynamiquement en passant par l’utilisation de mon scénario proposé sur mon github :

[TUTO noodom] Modification dynamique de paramètres de commande associée à un widget

Bonjour à tous, Je vous propose un scénario permettant de modifier simplement et dynamiquement les paramètres d’une commande associée à un widget. Il suffit de copier le code du fichier blocCodeModificationParametre.php dans un bloc code de scénario et d’appeler ce scénario en passant comme paramètres la commande (id ou nom) et le paramètre à modifier (nom et valeur). Le code et la documentation sont à récupérer ici : Les exemples décrits dans la documentation concernent les paramètres de …

[SWR]

Très bel effet sur les volets

[noodom]

Petite optimisation pour le paramètre image :

• valeur par défaut (si paramètre non présent) : 'data/customTemplates/dashboard/cmd.info.numeric.nooImgProgress/default.png'
• si l’image est chargée depuis le plugin Pimp my Jeedom (bouton 'Ajouter des fichiers'), seul le nom de l’image est nécessaire (ex : 'portail.png')
• si l’image est chargée manuellement, il faut mettre le path complet (ex : data/img/nooImgProgress/portail.png)

[Benjamin]

Hello,

Super idée et réalisation. J’imaginais un truc du genre pour un éclairage variateur, pouvoir afficher une ampoule et une image jaune qui remplirait plus ou moins cette ampoule en fonction de la luminosité

[noodom]

Merci il reste en effet à chacun d’imaginer les images sympas à intégrer avec le widget.
Faut surtout pas hésiter avec les partages d’images qui pourraient être utiles pour nos designs😉

[Benjamin]

Mon problème étant que je n’y connais vraiment rien je peux pas trop montrer ou mettre en place ce à quoi je pense, mais dans l’idée, ce serait une image d’ampoule transparente et un fond jaune qui monterait et descendrait

Pour prendre l’exemple des iPhones, le noir serait l’ampoule et l’image serait le jaune qui « monte » ou « descend » en fonction du % de l’intensité lumineuse

J’essaierais de creuser un peu le truc ^^

[noodom]

Ajout de la gestion d’affichage de bulles à l’aide des paramètres suivants :

Mettre type : bubble

bubbleBackGroundColor : couleur de fond des bulles (par défaut '#248')
bubbleColor : couleur des bulles (par défaut '#fff')
bubbleCount : nombre de bulles affichées sur la durée bubbleDuration (par défaut 50)
bubbleDuration : durée d’affichage des bulles (par défaut 0 : pas de bulles)
bubblePath : Format du conteneur des bulles (valeurs possibles : square : carré sans bordure, squareBorder : carré avec bordure, round/roundBorder : rond avec une bordure, par défaut : rond avec bordure)

Quelques exemples de paramétrages :

[noodom]

Pour le type bubble, ajout de la possibilité de personnaliser la forme du conteneur avec le paramètre bubblePath :

bubblepath : 'M50 10A90 90 0 0 1 50 90A20 20 0 0 1 50 10'

Un tuto ici sur le path svg : https://la-cascade.io/svg-la-syntaxe-path/