Afficher une info et une image à côté

Bonjour à tous,

Je fais face à une problématique de configuration de Widget type info. Je veux simplement afficher la température renvoyé par un module Sonoff dans une tuile en affichant une image de thermomètre à côté qui changerai en fonction de la valeur renvoyée.
Jusque la rien de compliqué me direz vous.
Sauf que … (je vous met les captures d’écran des différentes étapes effectuées pour espérer arriver au résultat)

.1 Création du virtuel

CreaVirtu_3

Jusque la tout va bien la température s’affiche.

.2 Création du widget

.3 Je lie le widget à mon virtuel

.4 Et la, la temperature ne s’affiche plus !!! avec en prime une erreur JavaScript

CreaVirtu_6

.5 Pourtant, les tests sur la valeur de la température fonctionnent correctement !

C’est mon premier essai de création de widget lié à un virtuel info, j’en ai déjà fait quelques un sur des virtuel action sans rencontrer de problémes.

Je précise aussi que j’ai tenté de lié ce widget directement à l’équipement? Par contre, même en le liant sur la valeur température uniquement, il m’affiche toutes les valeurs que peut renvoyer l’équipement (humidite, puissance du signal…) sauf la température !!!

J’ai certainement du rater un truc !

Hello, n’es-tu pas en theme dark ? Je vois que tu n’as rien renseigné dans le champs dédié à ce thème.

Si effectivement, je suis en théme Dark, mais ca ne change rien malheureusement,

Seule l’image s’affiche et pas la valeur…

C’est surtout l’erreur javaScript qui m’intrigue…

Il me semble que c’est le fonctionnement attendu du widget multistate tel que tu l’as paramétré: si la valeur est > 15 alors il remplace l’affichage de cette valeur par l’image définie. Je ne crois pas que le widget puisse à la fois afficher la valeur ET l’image.

En fait, en affichant l’image, je montrai juste que la valeur était bien renvoyée. Si je supprime le test, rien n’est affiché non plus.

J’aimerai simplement obtenir un résultat dans ce genre la…

objectif

avec juste la température…

Bonjour,

Il faut ajouter les informations désirées (#value# #unite#) dans la ligne faisant appel à l’image.
Exemple de mon widget

<img src='data/img/thermometer00.png'> <span style="font-size:24px!important;">#value# #unite# </span>

image

2 « J'aime »

Effectivement, il y a du mieux…

image

Mais pas possible de mettre le texte a côté de l’image même en passant par le menu édition du dashboard.

De plus, avec cette méthode, on est obligé de mettre un test, (ca tombe bien c’est ce que je voulais faire), mais si tu ne veux afficher que la valeur, tu te retrouve coincé. J’ai l’impression que ca reste une solution de contournement. Le comportement ne me parait pas normal ou logique !
En tout cas, merci pour le tuyaux ! :blush:

J’avoue ne pas bien suivre ton cheminement, tu veux afficher une image ou pas ? Si tu n’en veux pas, pas besoin de widget. Si tu en veux une qui change selon la valeur tu as la solution ci-dessus.
Après pour l’alignement du texte et de l’image il y a sûrement de la syntaxe CSS à trouver mais je ne saurais t’aider là-dessus.

Hello,

<i class='icon animal-chicken2 icon_red'>#value#</i>

image

Mon but est bien d’avoir l’image et le texte.
Ce que je veux dire, c’est qu’on a pas besoin de jouer avec le CSS pour un widget action par exemple. l’ampoule est allumé, le bouton est vert, elle est éteinte le bouton est rouge. c’est tout simple et ca m’a pris 3mn à le faire.
De plus, si pour une raison ou une autre, je veux tout le temps la même image quelque soit la température, je suis obligé de faire un test bidon genre #value# > -20 …(chose qui n’arrivera jamais dans mon salon).
Ce paramétrage m’intrigue un peu quand même, mais je vais tenter de rejouer du CSS pour obtenir un resultat correct.

Merci encore pour le coup de main.

Oui ca fonctionne pour une icone, mais pas avec une image…
On progresse… :slightly_smiling_face:

Si vous le dites, je vous crois :slight_smile:
image

<img class='img-responsive' src='data/img/contact.png'>#value##unite#</img>

Effectivement, mais pour avoir le texte a cote, jai du enlever le class=image-responsive.
Ya peut etre plus propre ?

oui certainement

1 « J'aime »

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.