Formater du texte dans un widget texte avec Javascript ?

Cartes Ethernet IPX800
1

Bonjour

j’utilise un widget texte et du javascript pour retourner en un seul texte l’état d’une pompe a chaleur a partir de différentes entrées :

comment pourrais je formater le texte, utiliser une couleur différente de caractères en fonction de l’etat ?

j’ai essaye de rajouter .bold() ou .fontcolor("green"), mais le resultat est que les balises html (exemple <B> </B>) sont rajoutées de part et d’autres du texte et sont affichees dans le widget sans affecter le format…

"PAC active".bold() s’affiche en <B>PAC active </B>, mais n’est pas en gras…

Merci d’avance

(datasources["IPX800 Pool"]["response"]["btn1"] == 1 ) ? "PAC en erreur" : ((datasources["IPX800 Pool"]["response"]["led2"] ==1) ? "PAC active" : "PAC à l'arrêt" )
1 « J'aime »
2

Vous devriez essayer un widget HTML pour que <b> soit pris en compte :wink:

3

Bonjour,
Avez-vous réussi à formater un texte dans un widget pour changer la couleur par exemple ?
Merci du retour.
Cordialement.

4

Bonjour,
J aimerais bien aussi pouvoir changer le format du texte dans le widget texte mise en gras ,couleur,grandeur ect …
Mais je ne connais pas quelle formule mettre
Si toutefois une personne connais la procédure ?
Merci

1 « J'aime »
5

Il faut utiliser un widget de type HTML et utiliser un peu de CSS pour changer le style du texte.

@Aspro95 et @fmmomo si vous avez un exemple spécifique en tête je peux vous expliquer comment faire.

3 « J'aime »
6

Bonjour merci @ZogStriP
Par exemple mettre la température plus grand en bleu et en gras avec devant marqué essai en vert ,
Je suis arrivé à mettre du texte devant ou derrière la température c est tout ce que j arrive a faire

7

Pourriez-vous me montrer le code que vous avez utilisé pour faire votre widget ?

8

Voila ce que j ai mis dans le widget texte "essai"+datasources["V4"]["response"]["enoA6"]

1 « J'aime »
9

Bonjour @ZogStriP,
Merci pour votre aide.
En ce qui me concerne, j’utilise pour le moment un widget Pilotage relais/Entrées virtuelles/Sorties virtuelles pour commander l’ouverture d’un portail et visualiser son état. J’aimerais avoir des informations dans une autre couleur que le vert pour mieux attirer l’attention et pourquoi pas, mais là je rêve un peu sans doute, changer la couleur des icônes :wink:
Y a-t-il une autre façon de faire pour obtenir au moins le changement de couleur du texte ?
Cordialement.

ParamWidget.PNG908×441 6.76 KB
ParamWidget_2.PNG906×391 5.86 KB

1 « J'aime »
10

Ajoutez un nouveau widget « HTML » et insérez le code suivant

var temperature = datasources["V4"]["response"]["enoA6"];

return `
<div>
  <span style='color: #0F0'>Essai</span>
  <span style='font-weight: bold; font-size: 1.5em;'>${temperature}</span>
</div>
`;
3 « J'aime »
11

Ajoutez un nouveau widget « HTML » et insérez le code suivant

var isGateOpen = datasources["V4"]["response"]["in"][0] == 0;
var color = `color: #${ isGateOpen ? 'f00' : '0f0' };`;

return `
<div class="widget" style="${color}">
  <div class="tw-display">
    <div class="tw-tr">
      <div class="tw-value-wrapper tw-td">
        <span class="glyphicons glyphicons-home x2"></span>
      </div>
      <div class="tw-value" style="font-size: 20px; margin: 15px 0 0 10px;${color}">
        Portail ${ isGateOpen ? "OUVERT" : "FERME" }
      </div>
    </div>
  </div>
</div>
`;

Pour que ça marche, il faut que vous créez une nouvelle source de données de type XML qui s’appelle « V4 » et qui pointe vers le fichier « /user/io.xml » de votre IPX V4. (ie. vous devrez renseigner une URL qui ressemble à « http://192.168.x.y/user/io.xml »)

Qui plus est, il faut que vous changiez la première ligne pour que l’indice 0 (dans datasources["V4"]["response"]["in"][0]) corresponde au numéro de l’entrée - 1.

4 « J'aime »
12

Super merci beaucoup @ZogStriP je viens d’essayer sa fonctionne je souhaiterais faire pareille avec les autres températures les mettre à la ligne à chaque fois

1 « J'aime »
13

Je ne suis pas sûr de comprendre.

Si vous pouviez me faire un mockup, ça m’aiderai à voir exactement ce que vous voulez :wink:

14

Nickel ! Encore mieux que ce que j’espérais !!!
Un super grand Merci et bravo pour la clarté des explications ainsi que pour votre réactivité.
Cela ne fait que rendre la V4 encore plus attrayante :slight_smile:

1 « J'aime »
15

Tout simplement refaire la même chose mais sur plusieurs lignes exemple
Essai 19,2
Essai 17,5
Essai 24.3
Ainsi de suite

1 « J'aime »
16

Je ferais quelque chose comme ça

return `
<div>
  <span style='color: #0F0'>Essai</span>
  <span style='font-weight: bold; font-size: 1.5em;'>${datasources["V4"]["response"]["enoA6"]}</span>
</div>
<div>
  <span style='color: #0F0'>Essai</span>
  <span style='font-weight: bold; font-size: 1.5em;'>${datasources["V4"]["response"]["enoA7"]}</span>
</div>
<div>
  <span style='color: #0F0'>Essai</span>
  <span style='font-weight: bold; font-size: 1.5em;'>${datasources["V4"]["response"]["enoA8"]}</span>
</div>
`;
3 « J'aime »
17

Bonsoir,

Merci aux spécialistes pour ces petits plus qui personnalisent nos dashboards !

Je me permets une autre petite question : l’icone maison je pense que c’est « home … » [quote=« ZogStriP, post:11, topic:2638 »]
<span class=« glyphicons glyphicons-home x2 »></span
[/quote]
est-il possible d’avoir le nom des autres icones disponibles ?

1 « J'aime »
18

http://glyphicons.com/ :wink:

4 « J'aime »
19

Génial !!!

Encore merci !

20

Bonjour,

merci beaucoup pour votre petit cours, cela permet d’agrémenter les dashboard.
Es ce qu’un widget HTML prend beaucoup de ressources sur l’IPX800V4 ?

Encore merci

1 « J'aime »