Widget fil pilote

seraphinou · Mars 7, 2018, 5:21

Bonsoir,

Sur mon edrt, j’ai un module x4fp de brancher.
Sur mon ipx800 v4, j’ai ajouté une source de donnée qui récupère les valeurs xml de mon edrt.

J’aimerais créer sur mon ipx un widget avec les mêmes icones que le widget x4fp mais via la source de données.

Je n’arrive pas a trouver.

Pouvez-vous m’aider ?

Merci à vous

seraphinou · Mars 8, 2018, 4:43

Personne ne trouve la solution ?

ZogStriP · Mars 8, 2018, 5:04

Pourquoi ne pas brancher directement le X-4FP sur votre IPXV4 ?

seraphinou · Mars 8, 2018, 6:03

Pas possible trop loin
J avais penser à cette solution

PatLeHibou · Mars 8, 2018, 10:08

Bonsoir,

Vous voulez juste remonter les états du X-4FP dans l’interface de l’IPX ou vous voulez aussi pouvoir commander le X-4FP ?

Dans le premier cas ce sera assez simple, mais bien moins dans le second…

Bien cdlt

seraphinou · Mars 9, 2018, 4:48

Bonjour à vous
Juste remonter les états
Merci

PatLeHibou · Mars 9, 2018, 9:57

Bonsoir,

Voici un bout de code qui devrait vous aider à faire ce que vous souhaitez :

var color0 = '#3FB740';
var color1 = '#C9C5C5';
var color2 = '#C9C5C5';
var color3 = '#C9C5C5';
var color4 = '#C9C5C5';
var color5 = '#C9C5C5';

return`
<br>
<p>Fil pilote distant</p>
<br>
<div id="fp_d3" class="police-switch" style="font-size: 25px; width: 40px; color: ${color0}';"></div>
<div id="fp_d2" class="police-snowflake-alt2" style="font-size: 30px; position: relative; top: -27.5px; left: 40px; width: 40px; color: ${color2};"></div>
<div id="fp_d1" class="police-moon_fill" style="font-size: 25px; width: 40px; position: relative; top: -55px; left: 90px; color: ${color1};"></div>
<div id="fp_d0" class="pol-sunny18" style="font-size: 35px; width: 40px; position: relative; top: -85.5px; left: 130px; color: ${color0}"></div>
<div id="fp_d4" class="pol-brightness-contrast" style="font-size: 35px; position: relative; top: -120.5px; left: 175px; width: 40px; color: ${color4};"></div>
<div id="fp_d5" class="pol-sun" style="font-size: 35px; position: relative; top: -155.5px; left: 220px; width: 40px; color: ${color5};"></div>
`

Le code est à affiner. Il reste à faire changer les couleurs en fonction de la remontée de votre datasource…

J’espère que ça vous aidera à faire ce que vous voulez.

Bien cdlt

PatLeHibou · Mars 10, 2018, 11:18

Bonjour @seraphinou,

Voici le code modifié que vous devriez pouvoir utiliser :

let fp_zone1 = datasources["Status.xml"]["response"]["x4fp11"];
let fp_zone2 = datasources["Status.xml"]["response"]["x4fp12"];
let fp_zone3 = datasources["Status.xml"]["response"]["x4fp13"];
let fp_zone4 = datasources["Status.xml"]["response"]["x4fp14"];

let colorfp1 = ['#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5'];
colorfp1[fp_zone1] = '#3FB740';

return`
<div id="fp_d1">
    <br>
    <p>Fil pilote distant 1</p>
    <br>
    <div id="fp_d13" class="police-switch" style="font-size: 25px; width: 40px; color: ${colorfp1[3]};"></div>
    <div id="fp_d12" class="police-snowflake-alt2" style="font-size: 30px; position: relative; top: -27.5px; left: 40px; width: 40px; color: ${colorfp1[2]};"></div>
    <div id="fp_d11" class="police-moon_fill" style="font-size: 25px; width: 40px; position: relative; top: -55px; left: 90px; color: ${colorfp1[1]};"></div>
    <div id="fp_d10" class="pol-sunny18" style="font-size: 35px; width: 40px; position: relative; top: -85.5px; left: 130px; color: ${colorfp1[0]}"></div>
    <div id="fp_d14" class="pol-brightness-contrast" style="font-size: 35px; position: relative; top: -120.5px; left: 175px; width: 40px; color: ${colorfp1[4]};"></div>
    <div id="fp_d15" class="pol-sun" style="font-size: 35px; position: relative; top: -155.5px; left: 220px; width: 40px; color: ${colorfp1[5]};"></div>
</div>`

Pour l’adapter, il doit juste falloir :

remplacer « Status.xml » qui est le nom que j’ai donné à ma source de données pour tester par celui que vous avez donné
et pour l’étendre aux 3 autres fils pilote il faut :
- dupliquer la partie var colorfp1… (2 lignes avant le return`) pour créer colorfp2, 3 et 4
- répliquer toute la <div> « fp_d1 » 3 fois
  et transformer le « 1 » en « 2 », « 3 » ou « 4 » partout où c’est nécessaire

Je vous laisse le faire, mon dashboard de test est trop chargé maintenant pour que je puisse l’enregistrer et tester jusqu’au bout.

Bon courage.

Bien cdlt

seraphinou · Mars 10, 2018, 2:09

re
ma source s’appelle STATUS_ERDT

voila le code que j’ai mis

let fp_zone1 = datasources["STATUS_ERDT"]["response"]["x4fp11"];
let fp_zone2 = datasources["STATUS_ERDT"]["response"]["x4fp12"];
let fp_zone3 = datasources["STATUS_ERDT"]["response"]["x4fp13"];
let fp_zone4 = datasources["STATUS_ERDT"]["response"]["x4fp14"];

let colorfp1 = ['#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5','#C9C5C5'];
colorfp1[fp_zone1] = '#3FB740';

return`
<div id="fp_d1">
    <br>
    <p>Fil pilote distant 1</p>
    <br>
    <div id="fp_d13" class="police-switch" style="font-size: 25px; width: 40px; color: ${colorfp1[3]};"></div>
    <div id="fp_d12" class="police-snowflake-alt2" style="font-size: 30px; position: relative; top: -27.5px; left: 40px; width: 40px; color: ${colorfp1[2]};"></div>
    <div id="fp_d11" class="police-moon_fill" style="font-size: 25px; width: 40px; position: relative; top: -55px; left: 90px; color: ${colorfp1[1]};"></div>
    <div id="fp_d10" class="pol-sunny18" style="font-size: 35px; width: 40px; position: relative; top: -85.5px; left: 130px; color: ${colorfp1[0]}"></div>
    <div id="fp_d14" class="pol-brightness-contrast" style="font-size: 35px; position: relative; top: -120.5px; left: 175px; width: 40px; color: ${colorfp1[4]};"></div>
    <div id="fp_d15" class="pol-sun" style="font-size: 35px; position: relative; top: -155.5px; left: 220px; width: 40px; color: ${colorfp1[5]};"></div>
`;

voila le resultat

il doit y avoir une petite erreur qq part
cdt

PatLeHibou · Mars 10, 2018, 4:14

Bonjour,

A priori ce sont les guillemets et les apostrophes qui se sont transformées en guillemets et apostrophes typographiques (inclinées) et qui posent pb car quand je copie/colle votre texte voilà ce que j’ai :

au lieu de :

Donc vérifiez que vous avez bien des doubles quotes " dans les lignes datasources et des simples quotes ' autour des valeurs hexadécimales des couleurs et qu’au niveau couleur des textes dans l’interface vous avez bien quelque chose ressemblant à moi.

Bien cdlt

fgtoul · Mars 11, 2018, 11:09

Bonjour

est-ce que la base STATUS_EDRT est bien enregistrée sur le même dashboard que le widget ?
il manque `; à la fin du code

cdt

seraphinou · Mars 11, 2018, 11:15

Bonjour
Oui elle est bien enregistrée sur le Dashboard
Il manque une apostrophes ?
J essaie
Merci

fgtoul · Mars 11, 2018, 11:36

ce n’est pas une apostrophe.
C’est un « backquote » (qui termine la commande Return du script), suivi d’un point-virgule.
Fais un copier coller de ceci :
`;

je l’ai également rajouté dans ton code au dessus.

seraphinou · Mars 11, 2018, 11:46

ca ne change rien toujours pas d’affichage
cdt

fgtoul · Mars 11, 2018, 11:53

j’ai fait un copier/coller de ton code après l’ajout de `;
ça fonctionne.

j’ai juste dû adapter le nom de la datasource chez moi.

es-tu sûr que ta source de données s’appelle STATUS_EDRT sur le dashboard ? en respectant majuscules/minuscules dans le code ?
est-ce que ta source de données se met bien à jour ?

seraphinou · Mars 11, 2018, 12:30

voila les captures

fgtoul · Mars 11, 2018, 1:08

le widget est bien de type HTML ?

seraphinou · Mars 11, 2018, 1:09

oui bien sur c’est pour ca que je ne comprend pas

PatLeHibou · Mars 11, 2018, 1:10

Une suggestion stupide mais qui repose sur du vécu : n’y aurait-il pas, par hasard, un caractère invisible qui se serait glissé dans le nom STATUS_EDRT de ta datasource ?

D’où la proposition que je t’ai faite en MP d’essayer déjà d’afficher la valeur du paramètre x4fp11 en créant un widget HMTL qui ne remonte que ce paramètre de la datasource.

seraphinou · Mars 11, 2018, 1:12

je vais creer une 2 eme sources erdt au cas ou

Attention
dans ma source de donnee j’ai rajoute login et mdp car sinon l’erdt ne se mettais pas a jour