Je le fais deja dans le virtuel.
ça fonctionne si mon widget est celui par « Default », dans ce cas j’ai un compteur qui s’incrémente.
Par contre quand je met mon widget perso qui est juste une image, le compteur disparait.
Il faut dans la configuration avancée du virtuel appliquer un widget de type line par exemple sur les commandes info colis et info lettre
Ben oui mais si je fais ça je perd mes image d’enveloppe et de colis
Alors tu peux aussi ajouter une info au dessus ou dessous tes images ou tu mets ta variable
Ex
Nbre de colis :. Variable (nbcolis)
Bonjour,
Si j’ai bien compris, il suffit de rajouter un #value# à coté de tes balises <img> dans les champs « Résultat » de ton widget perso. :
<img src='data/img/XXXXXXXXXXXXXXXX.png'> #value#
Effectivement ça marche en mettant #value# aores kes balises img.
Par contre je n’ai pas réussi avec la variable pour l’avoir au dessus ou en dessous 
Il n’y a pas du tout de doc sur tout ça ? car quand on ne sais pas coder, je ne vois pas comment on peut deviner
<img src='data/img/XXXXXXXXXXXXXXXX.png'><br>#value#
Pour l’avoir en dessous et l’inverse pour l’avoir au dessus.
Pour le #value# c’est indiqué dans la doc. Jeedom :
https://doc.jeedom.com/fr_FR/core/4.0/widgets?theme=dark
Pour le <br> c’est du code HTML qui n’est pas propre à Jeedom mais la plus part des cas dont celui-ci ont déjà été abordé sur le forum.
javais vu effectivement le #value#, mais ne codant pas, c’était plus compliqué pour le
.
Du coup c’est bon, merci !
Sachant que le code entré dans les cases « choisir » est du html, par conséquent les propriétés css s’appliquent.
Ainsi pour faire encore plus customisé tu peux après la balise < img src … > ajouter une balise div comme ceci :
<div style="color:rgba(32, 32, 32, 0.8)!important; background-color : rgba (255,0,0,1) !important; margin : -25px 0 0 0!important ; transform: scale(0.7)!important; text-align: center!important;"> "Texte avant" #value# "Texte Après" </div>
color:rgba(r, v, b , t) : la couleur du texte souhaitée avec les composantes rouge r (entier de 0 à 255) , vert v (entier de 0 à 255), bleu b (entier de 0 à 255) et la transparence t (décimal) de 0 (complètement transparent) à 1 (opaque)
color-background:rgba(r,v, b , t) : la couleur de fond du texte
margin : haut , droite, bas, gauche : les marges (en pixel ou en em ou en % mixable à souhait) pour le positionnement du « div » dans le widget (ça permet de placer ton texte là où tu le souhaites sans faire de saut de paragraphe avant ou après le widget)
Transform scale (x) : pour le fun ça permet de mettre une échelle à ton texte et de le grossir (x >1) ou de le réduire (x<1)
text-align : center : alignement du texte dans sa « boite » div. Ici centré. On peut aligner à gauche , à droite, …
Tu peux bien sur ajouter d’autres propriété de style css pour satisfaire ton besoin en piochant dans le standard W3 CSS (par exemple si tu veux appliquer une fonte particulière, faire une animation, un dégradé de couleur, …). Tu peux aussi en enlever si tu ne veux pas customiser autant.
(Par exemple moi j’ai ajouté sur l’image (pour des besoins de test uniquement ) … une iframe qui contient une vidéo format timbre poste . Bon c’est sûr que sur un RPI ça le met à genoux mais sur un NUC intel ca roule plein pot.)
"Texte Avant/Après " : écris ici le texte que tu souhaites voir précéder/suivre la valeur numérique, pas besoin de mettre des " autour de ton texte (ça va sans le dire mais c’est mieux en l’écrivant).
En pratiquant ainsi on conserve les widgets core sans avoir à écrire du code qui pourrait être incompatible ou non maintenu dans les prochaines releases de Jeedom.
Il y a quelques limites , notamment le fait que l’on ne peut pas utiliser de variables autres que celles prédéfinies par Jeedom (value, name, …). Donc c’est bien pour du custom d’affichage mais pas plus. Au delà il faut créer ses propre widgets avec l’excellent plugin tools
1 « J'aime »
Bonsoir @Yves19,
Si je veux réduire ou agrandir la taille du texte de la valeur de fin "Texte avant" #value# "Texte Après"
car j la trouve trop grosse ou trop petite c’est possible?
Merci d’avance pour ta réponse
Oui si tu veux ajuster la taille du texte il suffit d’ajouter
transform: scale(x)!important;
dans la liste des éléments de style que tu veux y appliquer. Avec scale tu peux l’appliquer à du texte comme à des images ou tout autre objet html
x est un décimal. Au dessus de 1 tu augmentes la taille, en dessous tu la diminues
sinon tu peux aussi utiliser
font-size: x px ou x em ou x%
mais cette dernière customisation ne s’applique qu’à du texte
cf exemples « illustratifs » ci dessous pour ma gestion des visu de l’état de piles de télécommandes ou inter sur piles :
Merci pour ta réponse rapide, Voilà mon exemple
<img src='data/img/image.png'><br> #value# °C
Donc j’ai mon image, puis un retour à la ligne avec ma valeur dessous mon image, ce que je voudrais c’est soit afficher plus gros ou plus petit ma valeur.
je te préconise ceci pour afficher avec un facteur d’échelle (choisis le facteur d’échelle qui va bien ici j’ai mis 0.7) et ajuste la valeur de marge haute pour que ton texte soit à la hauteur voulue au dessus ou au dessous de ton image (j’ai mis ici 10px mais tu peux mettre des valeurs négatives) , ainsi que son positionnement horizontal
<img src='data/img/image.png'> <div style=" margin : 10px 0 0 0!important ; transform: scale(0.7)!important; text-align: center!important;"> #value# °C </div>`
pour la compatibilité de la propriété transform avec les différents navigateurs (selon Mozilla.org):
1 « J'aime »
Les propriétés css qui s’appliquent à un div sont hyper vastes .
Expérimente et tu verras que c’est top.
Le gros avantage de cette méthode comme je l’ai écris plus haut c’est que c’est maintenable puisque l’on ne touche pas au code des widgets. On utilise les widgets core.
Et question mise en forme les combinaisons que l’on peut faire sont quasi infinies, juste avec du html et du css, même des animations si on veut
Dernière question @Yves19 si c’est possible 
En reprenant ce que tu m’as donner
<img src='data/img/image.png'> <div style=" margin : 10px 0 0 0!important ; transform: scale(0.7)!important; text-align: center!important;"> #value# °C </div>
Si je veux mettre du coup ma valeur a coté au lieu d’en dessous et si je veux un couleur rouge par exemple?
<img src='data/img/image.png'> <div style=" color : rgba(255,0,0,1)!important; margin : H D B G!important ; transform: scale(0.7)!important; text-align: center!important;"> #value# °C </div>
H
B
D
G
à remplacer par des valeur en px (positive ou négatives) par exemple pour positionner ton texte ou tu veux par rapport à ton image. Ces valeurs sont les marges qui positionnent le div relativement à l’objet html qui le contient (et qui est le diviv global du widget en général.
