Formater du texte dans un widget texte avec Javascript ?

Encore un grand merci à @ZogStriP pour le temps passé à la mise en forme et au nettoyage de nos posts .:slight_smile:

1 « J'aime »

Je ferais un post dans la soirée pour vous expliquer comment partager du code afin qu’il soit colorié syntaxiquement :wink:

4 « J'aime »

C’est magique :slight_smile:
Super ! Merci à vous @ZogStriP et @fgtoul pour votre aide, et tout le temps que vous consacrez à mettre sur la bonne voie, les rameurs de mon genre :wink:

1 « J'aime »

Dans le même ordre d’idée, est-il possible de rassembler 3 visualisations de sorties virtuelles en une seule en utilisant du code et le widget HTML ?

Je m’explique :
Je suis en tarif tempo ( 3 couleurs Bleu, Blanc Rouge ) et pour visualiser la couleur du jour j’ai créé 3 widgets ( 1 par couleur, ça marche mais ce n’est pas très élégant ! ).
J’aimerai pouvoir afficher un texte indiquant la couleur du jour en fonction des 3 sorties virtuelles dans un seul widget, est-ce possible ?

Merci d’avance

1 « J'aime »

Tout est possible :wink:

Pourriez-vous me donner votre code actuel pour que je me base dessus ?

1 « J'aime »

Je n’ai pas de code, ce sont 3 widgets « Pilotage relais/Entrées virtuelles/Sorties virtuelles » utilisés pour visualiser la couleur du jour.

1 « J'aime »

Merci à @ZogStriP @Aspro95 @fgtoul qui m ont permis de faire une présentation à mon goût j ai repris la présentation d @Aspro95 et agrandi mise à gras et changer un peu les couleurs

5 « J'aime »

Par curiosité, ces températures proviennent toutes de X-THL ?

Non extérieure c est une tc4012,
Tableau et humidité un xthl
Et les autres sondes enocean

3 « J'aime »

Ok, sans prétention graphique, je ferais quelque chose comme ça

let cssColor = "#005bbb"
let colorOfDay = "Bleue";

if (datasources["V4"]["response"]["vout"][0] == 1) {
    cssColor = "#ebebeb";
    colorOfDay = "Blanc";
} else if (datasources["V4"]["response"]["vout"][1] == 1) {
	cssColor = "#ff001f";
    colorOfDay = "Rouge";
}

return `
<div style="color: ${cssColor}">
	<span class="glyphicons glyphicons-clock x2"></span> ${colorOfDay}
</div>
`;

Il vous faut créer une source de donnée qui s’appelle « V4 » avec pour URL /user/io.xml de votre IPX.

Par défaut, c’est une journée bleu.
Si la sortie virtuelle 1 est allumée, alors ça sera blanc.
Si la sortie virtuelle 2 est allumée, alors ça sera rouge.

4 « J'aime »

C’ est exactement ce que je voulais, ça donne envie de se plonger dans le html, css et autres …

Je vais essayer d’améliorer la mise en forme.

Encore merci pour le temps passé et la réactivité !

Patrice

3 « J'aime »

Voila ce que sa donne ma version définitive,mais j’aimerais faire changer la couleur des gliphoticones automatiquement selon l êtas des relais chauffages (exp : lorsque le chauffage du couloir est en marche gliphoticones rouge ) mais je ne connais rien en formule html voila ?

2 « J'aime »

Bonjour,

voici un exemple avec des capteurs Enocean, XTHL et le service météo.

Cordialement

bonjour @TRABAC
beau travail,
il y a erreur d’unité sur l’humidité extérieure. :slight_smile:

1 « J'aime »

bonjour @fmmomo

Voici un petit code repris de mon exemple précédent.
Il n’est pas optimisé ni joli, mais il est écrit de façon à être simplement réadaptable.
dans mon exemple je mets les couleurs par défaut en blanc, puis si température de sonde inférieure à 16, je passe l’icône en rouge. A toi de mettre tes propres valeurs.

let cssColor1 = "#ebebeb";
if (datasources["V4"]["response"]["enoA6"] < 16) {
    cssColor1 = "#ff0000";
}
let cssColor2 = "#ebebeb";
if (datasources["V4"]["response"]["enoA7"] < 16) {
    cssColor2 = "#ff0000";
}
let cssColor3 = "#ebebeb";
if (datasources["V4"]["response"]["enoA8"] < 16) {
    cssColor3 = "#ff0000";
}



return `
<table width='100%'>
  <tr>
    <td align=left valign=middle width='10%'><span style='color: ${cssColor1}'class="glyphicons glyphicons-temperature x2"></span></td>
    <td align=left valign=middle width='50%'><span style='color: #ffff00'>Ambiante</span></td>
    <td align=right valign=middle><span style='color: #ffff00;font-size: 20px;'>${([((datasources["XML_V4"]["response"]["analog0"])*0.0050354)-49]/1).toFixed(1)} °C</span></td>
  </tr>
  <tr>
    <td align=left valign=middle width='10%'><span style='color: ${cssColor2}'class="glyphicons glyphicons-temperature x2"></span></td>
    <td align=left valign=middle width='50%'><span style='color: #00ffff'>Extérieure</span></td>
    <td align=right valign=middle><span style='color: #00ffff;font-size: 20px;'>${([((datasources["XML_V4"]["response"]["analog1"])*0.0050354)-51]/1).toFixed(1)} °C</span></td>
  </tr>
   <tr>
    <td align=left valign=middle width='10%'><span style='color: ${cssColor3}'class="glyphicons glyphicons-temperature x2"></span></td>
    <td align=left valign=middle width='50%'><span style='color: #ff00ff'>Départ plancher</span></td>
    <td align=right valign=middle><span style='color: #ff00ff;font-size: 20px;'>${([((datasources["XML_V4"]["response"]["analog3"])*0.0050354)-49]/1).toFixed(1)} °C</span></td>
  </tr>
</table>
5 « J'aime »

Merci beaucoup @fgtoul
À quel endroit dois je mettre cela dans le code source ?
Mes sondes affichées en violets gèrent le chauffage de chaque pièce,j aurais souhaitez que le gliphicone correspondant a chaque pièce se mette en rouge lorsque le relais correspondant est activé

Merci beaucoup pour ton aide

1 « J'aime »

regarde mon script :slight_smile:le petit code javascript se place au dessus du return
ensuite dans ton code existant sous la balise <table> tu modifies le style de l’icone style='color: "par celui que je donne en exemple aujourd’hui style='color: ${cssColor1}

pour conditionner selon le relai et non par rapport à la température, il faut changer les lignes avec datasources’ en t’inspirant du code donné par ZogStriP à Pat49700
si tu n’y arrives pas, envoie moi ton code en MP.

4 « J'aime »

merci @fgtoul avec la température sa fonctionne très bien,mais avec les relais je n’y parvient pas voila ce que j’ai mis a la deuxième ligne:

datasources["V4"]["response"]["out"][0] == 1

mais sa donne rien

merci

1 « J'aime »

fais bien attention aux accolades et parenthèses,
puis remplace l’indice [0] par le numéro de ta sortie -1
les points-virgules sont importants aussi. :wink:

1 « J'aime »

merci pour tout @fgtoul cela fonctionne super bien l icone passe en rouge lorsque la zone concernée est en chauffe j’ai du mettre cela au debut:

let cssColor1 = "#ff0000";
if (datasources["V4"]["response"]["led1"] < 1) {
    cssColor1 = "#ee82ee";
}

cela permet d’avoir un retour d’êtas des relais sympas sans prendre d’espace supplémentaire merci encore

4 « J'aime »