Formater du texte dans un widget texte avec Javascript ?

Cartes Ethernet IPX800
68

Voila sa donne ceci:

IMG_2984.PNG1125×2001 129 KB

4 « J'aime »
69

très bonne idée d’envoyer ainsi 2 infos sur 1 widget.

je vois que tu utilises status.xml, d’où la donnée Ledx
si tu avais utilisé io.xml, tu aurais du utiliser RLYx à la place.
Pour conclure, il faut se rapprocher de la doc sur les fichiers XML pour avoir la syntaxe du datasources.

3 « J'aime »
70

Bonjour,

très intéressante votre solution.
Par contre rien ne s’affiche. J’ai pourtant changé la source de données (status.xml).

Merci et cordialement

var isGateOpen = datasources["IPX800 V4"]["response"]["led"][1] == 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>
`;
71

Essayer de mettre comme moi la ligne datasources;
En statut le = ne fonctionnait pas

if (datasources["V4"]["response"]["led1"] < 1) {
  cssColor1 = "#ee82ee";
}
1 « J'aime »
Widget HTML : Avis d'expert javascript demandé
72

bonjour,

il faut remplacer [« led »][1] par [« led1 »]

cdt

1 « J'aime »
73

Bonjour,

Merci à « fgtoul » , « ZogStrip » et « fmmomo », vous êtes très fort, cela fonctionne.

Le widget HTML et javascript ouvre une autre dimension à l’IP800.

Encore merci et cordialement

3 « J'aime »
74

Bonjour @fgtoul
Pouvez vous me dire qu’elle est la différence,entre status.xml et io.xml merci et est ce que l on peut mettre les deux en source dans les Dashboard

Merci

1 « J'aime »
75

bonjour,
voici un extrait de la doc :wink:

status.xml

Ce fichier est disponible dans les dossier admin et user. Il n’est pas interrogé par la V4
et donc à utiliser SANS modération. Il est également protégé par les identifiants de la V4.

io.xml

Ce fichier est disponible dans les dossier admin et user. Il est constamment interrogé par la V4 et donc à utiliser avec modération. Il est également protégé par les identifiants de la V4.

Les 2 fichiers ne contiennent pas les mêmes infos . Il faut donc adapter au cas par cas, selon le widget utilisé. Les 2 datasources peuvent cohabiter sur l’IPX.

sauf erreur de ma part :

pour les entrées/sorties, io.xml renvoie un tableau comportant toutes les valeurs.
exemple : IN renvoie un tableau de toutes les entrées.
En javascript il faut alors utiliser des indices pour récupérer les valeurs individuelles.
=> [« rly »][0] pour récupérer le relai 1 dans le tableau

Status.xml renvoie la valeur de manière unitaire.
Il est alors possible de récupérer directement la valeur de l’entrée dont on a besoin.
javascript : [« led1 »]

cdt

6 « J'aime »
76

Bonjour,

un inconvénient, d’utiliser les sources de données XML, est qu’il y a une inertie pour la mise à jour d’un état ou d’une valeur analogique. On est tributaire du délai de rafraîchissement.

Cordialement

77

Pour compléter les informations de @fgtoul sur les différences entre status.xml et io.xml.

       | status.xml |   io.xml   |
----------------------------------
Taille |    17Ko    |     5Ko    |
----------------------------------
Temps  |    80ms    |    38ms    |
----------------------------------

On voit bien que status.xml est plus lourds et donc plus gourmand en ressources (2X plus) que io.xml:wink:

6 « J'aime »
78

merci pour tous ces renseignements donc selon @fgtoul il vaut mieux faire appel a status.xml lors de la création de plusieurs widgets ?

79

Ca depends entierement des informations dont vous avez besoin dans vos widgets.

Dans la mesure du possible, réutilisez vos sources de données dans plusieurs widgets.

Ce n’est pas le peine de créer une source de donnée par widget si vous avez déjà l’information :wink:

3 « J'aime »
80

Bonsoir,
Si besoin,
1 datasource vers status.XML et un autre vers io.XML devraient suffire à satisfaire tous les besoins.
Cdt

2 « J'aime »
81

Bonjour TRABAC,

Vous m’avez donné l’idée d’utiliser cette possibilité avec la base de données météo, le résultat est plus agréable à regarder :slight_smile:

Cependant j’ai voulu inclure, dans le widget météo, la date et l’heure et rien à faire…

return `
<table width='100%'>
  <tr>
    <td align=right valign=middle width='50%'><span style='color: #DEB887'class="glyphicons glyphicons-calendar x2"></span></td>
<td align=center valign=middle><span style='color: #DEB887;font-size: 20px;'> datasources["XML_V4"]["response"]["date"]}</span></td>
  </tr>
  <tr>
    <td align=right valign=middle width='50%'><span style='color: #DEB887'class="glyphicons glyphicons-clock x2"></span></td>
<td align=center valign=middle><span style='color: #DEB887;font-size: 20px;'> datasources["XML_V4"]["response"]["heure"]}</span></td>
  </tr>
</table>
`;

Je ne trouve pas l’erreur, j’ai essayé avec ${ devant datasources et c’est pareil

Auriez-vous une idée ?

Widget Météo.PNG311×514 24.2 KB

82

Il vous manque le « ${ »

return `
<table width='100%'>
  <tr>
    <td align=right valign=middle width='50%'><span style='color: #DEB887' class="glyphicons glyphicons-calendar x2"></span></td>
<td align=center valign=middle><span style='color: #DEB887;font-size: 20px;'>${datasources["XML_V4"]["response"]["date"]}</span></td>
  </tr>
  <tr>
    <td align=right valign=middle width='50%'><span style='color: #DEB887' class="glyphicons glyphicons-clock x2"></span></td>
<td align=center valign=middle><span style='color: #DEB887;font-size: 20px;'>${datasources["XML_V4"]["response"]["heure"]}</span></td>
  </tr>
</table>
`;

Si ça ne marche pas, alors c’est que votre navigateur n’est pas à jour.

1 « J'aime »
83

Bonjour,

comment est construite la data source XML_V4 ?

cdt

2 « J'aime »
84

bonjour,

attention également à la syntaxe du CSS.
l’attribut « Style » doit se terminer par un point-virgule « ; »
Certains navigateurs sont pointilleux …
cdt

1 « J'aime »
85

Pas besoin si c’est le dernier style :wink:

1 « J'aime »
86

il manque un espace entre le style et la classe

2 « J'aime »
87

Merci pour votre aide @ZogStriP et @fgtoul, je viens de m’apercevoir, comme la buse que je suis, que la source de données [« XML_V4 »] n’était pas déclarée dans le nouveau dashboard que j’utilise avec la météo :rage:.
C’est en voulant répondre à @fgtoul que je m’en suis aperçu.
Correction apportée => ça fonctionne correctement :slight_smile:
Je suis désolé de vous avoir fait perdre votre temps et encore merci à vous !
Bonne journée.

2 « J'aime »