Voyant etat capteur entrée serveur

Bonjour,

Il y a plusieurs manière de faire votre modification. Les Modifications proposé ci-dessous concerne la version WES v0_83H B03 exclusivement.

La plus part des graphiques, relais, bouton, led etc .. sont des icones, des images qui sont découpées depuis le fichier ./WEBPROG/icons/icones.png.

C’est le fichier ./WEBPROG/CSS/icons.css qui détermine le découpages et l’indexation des divers images (icones) à afficher et qui détermine
le nom de la Class du symbole à afficher. L’image équivalente à découper est déterminé par la propriété CSS background-position: X Y.
qui correspond à l’index de l’image (Icone) en relatif dans le fichier icones.png

exemple pour les relais : class .ICO-REL_OFF  .ICO-REL_ON
exemple pour les Imputs : class .ico-led_OFF  .ico-led_ON

Si vous regardez l’image ./WEBPROG/icons/icones.png. vous reconnaîtrez les 2 LEDs des inputs (gris et vert) mais le ROUGE n’existe pas. Donc il faut créer cette nouvelle image. Je l’ais fait pour vous, voir en pièce jointe.

Donc il faut remplacer le fichier ./WEBPROG/icons/icones.png par celui que je vous envoie et rajouter l’adressage et le nom des nouvelles Class de cette nouvelle LED rouge en état OFF et ON. J’ai donné les Noms de ces Class « LED ROUGE » = .ico-ledR_OFF et .ico-ledR_ON

/* MODIF A FAIRE , ajouter en continuité en fin de ./WEBPROG/icons/icon.css >> IMPORTANT SANS SAUT de page NI Espace */
.ico-ledR_OFF{width:16px;height:16px;background-position:-47px -171px}.ico-ledR_ON{width:16px;height:16px;background-position:-99px -171px}

Il faut maintenant affecter le nouveau nom de la Class des imput « Rouge » dans le fichier relais.HTM

<!– MODIF A FAIRE dans relais.htm ligne 52 pour le input 1 et ligne 57 pourle input 2 >> remplace ico-led_OFF par ico-ledR_OFF–>

<table class= »table table-condensed »>
<colgroup><col class= »col-md-6″><col class= »col-md-2″><col class= »col-md-2″><col class= »col-md-2″></colgroup>
<tr>
<th id= »INP1″></th><td><span id= »sicon14″ /></td>
<td><span id= »IN1_etat » class= »ico-ledR_OFF » /></td>
<td><span id= »IN1_tempj »></span>&nbsp;s</td>
</tr>
<tr>
<th id= »INP2″></th><td><span id= »sicon15″ /></td>
<td><span id= »IN2_etat » class= »ico-ledR_OFF » /></td>
<td><span id= »IN2_tempj »></span>&nbsp;s</td>
</tr>

Maintenant il y a deux manières de modifier la Class de ces nouveaux input « ROUGE ». en fonction des Etats ON ou OFF

C’est dans le fichier ./WEBPROG/JS/XMLHTTP2.JS que l’on trouve la fonction processResponse(xmlDoc) qui détermine l’ID et la Class et l’état d’un bouton ou led à afficher : ON ou OFF, suivant la requête CGX reçue.

Pour la Page RELAIS.HTM, c’est la requête REL.CGX qui est lancée cycliquement et le serveur renvoi les divers états pour chaque ID.
C’est la fonction processResponse(xmlDoc) qui construit la Class à modifier en fonction de la réponse à la requête REL.CGX.

Voici le résultat de la reqête REL.CGX pour mon INPUT 1
<ONOFF>
<id>IN1_etat</id>
<value>0</value>
led_</img>
</ONOFF>

Voici la Zone concernée dans la fonction processResponse(xmlDoc) qui lit le résultat de la requête CGX et construit le NOM des Class des Icones des Inputs et des Relais (boutons)

$(xmlDoc).find(‘ONOFF’).each(function(){
var LOGO = $(this).find(‘img’).text();
var cgxname = $(this).find(‘id’).text();
var cgxvalue = $(this).find(‘value’).text();
var ONOFF;
if((cgxvalue == « checked »)||(cgxvalue == 1)) ONOFF = ‘ON’;
else ONOFF = ‘OFF’;
if(!$(‘#’+cgxname).hasClass(« ico-« +LOGO+ONOFF)) $(‘#’+cgxname).removeClass().addClass(« ico-« +LOGO+ONOFF);
});

on récupère depuis la requête RL.CGX
– le nom (LOGO) de l’icone dans la balise   soit « led_ »
– le ID du Input dans la balise <Id> soit « IN1_etat »
– l’etat du Input dans la balise <value>  soit « 0 » ou « 1 » transformé en OFF ou ON

La Class pour l’input 1 est donc Crée en fonction de l’état de la led soit : « ico-led_OFF » ou « ico-led_ON »
Au lieu de ico-led_OFF ou ico-led_ON, NOUS VOULONS Changer les CLASS par ico-ledR_OFF et ico-ledR_ON. La fontion JS recontruit le Nom de la Class par .addClass(« ico-« +LOGO+ONOFF); soit ico- + led_ + OFF

Pour faire reconnaître les deux nouvelles CLASS .ico-ledR_OFF et .ico-ledR_OFF on peut rajouter une discrie sur l’ID correspondant aux inputs à modifier. Mais ce n’est pas le meilleurs moyen car la fonction processResponse(xmlDoc) génére le résultat des Identifiants pour toutes les pages WEB du WES et peux être modifié dans de future Release.

On sait maintenant que c’est VIA la Balise lue en résultat de la requête RL.CGX que l’on récupère une partie du NOM de la CLASS des Inputs pour construire le NOM de la CLASS complète des inputs soit « led_ », et nous on veut « ledR_ ».

La meilleure solution est d’indiquer simplement dans le fichier ./WEBPROG/CGX/RL.CGX le nouveau NOM de la Class pour ces IMPUT à créer

# Fichier ./WEBPROG/CGX/RL.CGX d’Origine
# ENTREE
c l E1 <ONOFF><id>IN1_etat</id><value>%d</value>led_</img></ONOFF>
c l E2 <ONOFF><id>IN2_etat</id><value>%d</value>led_</img></ONOFF>
c lt1 <html><id>IN1_tempj</id><value>%d</value></html>
c lt2 <html><id>IN2_tempj</id><value>%d</value></html>

# MODIF A FAIRE > Fichier ./WEBPROG/CGX/RL.CGX >> modif dans la balise
# ENTREE
c l E1 <ONOFF><id>IN1_etat</id><value>%d</value>ledR_</img></ONOFF>
c l E2 <ONOFF><id>IN2_etat</id><value>%d</value>ledR_</img></ONOFF>
c lt1 <html><id>IN1_tempj</id><value>%d</value></html>
c lt2 <html><id>IN2_tempj</id><value>%d</value></html>

Donc pour faire votre modif.

 – remplacer le fichier ./WEBPROG/icons/icones.png
 – rajouter la référence des images led Rouge dans ./WEBPROG/CSS/icons.css comme indiqué ci-dessus
 – modifier le fichier relais.htm comme indiqué ci-dessus
 – modifier le fichier ./WEBPROG/CGX/REL.cgx comme indiqué ci-dessus.
 
Ces modifs concerne la version WES v0_83H B03. Modif testé et fonctionnelle

Cdt

re:

Je vous envoie un petit correctif concernant le fichier RL.CGX à modifier. La balise n’est pas complète dans la modif proposé ci-dessus. Je pense que vous l’auriez vue, mais je vous renvoie la modif complète sans erreur

Voici la correction :

# MODIF A FAIRE > Fichier ./WEBPROG/CGX/RL.CGX >> modif dans la balise

# ENTREE
c l E1 <ONOFF><id>IN1_etat</id><value>%d</value>ledR_</img></ONOFF>
c l E2 <ONOFF><id>IN2_etat</id><value>%d</value>ledR_</img></ONOFF>
c lt1 <html><id>IN1_tempj</id><value>%d</value></html>
c lt2 <html><id>IN2_tempj</id><value>%d</value></html>

cdt

RE: En fait c’est à l’enregistrement du post que le Blog interprète ces balises IMG et modifie le texte en supprimant le début de la balise IMG

Donc pour être simple > il faut modifier le Nom de la Class  led_ par ledR_ qui se trouve entre les balises  img pour les Inputs #ENTREE

RE: J’ai oublié de vous communiquer les modifs à faire si vous souhaitez visualiser les Inputs « ROUGE » dans les ENTREE pour les WIDGETs

<!–MODIF A FAIRE  Remplacer à la ligne 288 et 289 du fichier INDEX.HTM >>  class= »ico-led_OFF » par class= »ico-ledR_OFF » –>

AD+='<tr><th id= »IN1_name »></th><td><span id= »sicon14″ /></td><td><span id= »IN1″ class= »ico-ledR_OFF » /></td></tr>’;
AD+='<tr><th id= »IN2_name »></th><td><span id= »sicon15″ /></td><td><span id= »IN2″ class= »ico-ledR_OFF » /></td></tr></tbody></table>

Il faut aussi modifier le fichier ./WEBPROG/CGX/HOMEVAL.CGX aux lignes 116 et 117 correspondant aux Inputs #ENTREE

#./WEBPROG/CGX/HOMEVAL.CGX fichier d’ORIGINE
# ENTREE
c l E1 <ONOFF><id>IN1</id><value>%d</value><imj>led_</img></ONOFF>
c l E2 <ONOFF><id>IN2</id><value>%d</value><imJ>led_</img></ONOFF>

# MODIF A FAIRE ./WEBPROG/CGX/HOMEVAL.CGX remplacement de led_ par LedR_  pour les inputs 1 et 2
# ENTREE
c l E1 <ONOFF><id>IN1</id><value>%d</value><imj>ledR_</img></ONOFF>
c l E2 <ONOFF><id>IN2</id><value>%d</value><imj>ledR_</img></ONOFF>

Comme le Blog me fait des farces en supprimant le texte pour les balises <.IMG.> lors de l’enregistrement du post, j’ai remplacer IMG par IMJ pour garder un aspect plus réaliste Mais c’est seulement le contenu entre ces balises IMG qu’il faut modifier soit led_ par ledR_

cdt

Un complément d’info.

Comme vous l’avez certainement compris, vous pouvez modifier uniquement un seul des 2 inputs en Led « Rouge » et garder l’autre input avec la Led « Verte ». Il suffit pour cela de modifier seulement la Class de l’input concerné 1 ou 2 par « ico-ledR_OFF » dans les fichiers RELAIS.HTM et INDEX.HTM et modifier seulement l’ENTREE de ce même input 1 ou 2 en « ledR_ » dans les fichiers RL.CGX et HOMEVAL.CGX.

Une autre solution beaucoup plus simple (mais plus radicale) et pour éviter de modifier tous ces fichiers HTM et CGX, consiste à déplacer seulement l’index de découpage de l’image de la LED VERTE vers l’index de l’image de la LED ROUGE en gardant la Class d’origine « .ico-led_ON » qui se trouve en fin du fichier ./WEBPROG/CSS/icons.css

/* indexation d’origine de l’image de la led verte en etat ON = -73px -171px de la Class .ico-led_ON */
.ico-led_ON{width:16px;height:16px;background-position:-73px -171px}

/* indexation modifié vers l’image de la led rouge en etat ON = -99px -71px de la Class .ico-led_ON */
.ico-led_ON{width:16px;height:16px;background-position:-99px -171px}

En modifiant ainsi l’index de l’image dans le fichier icons.css pour la Class « .ico-led_ON » vous aurez vos LED ROUGE pour les deux Inputs et sans devoir modifier les fichiers HTM et CGX mentionnés plus haut, vue que vous ne changez pas le nom de la Class, Seul l’index sur l’image change.

Mais si cette modif est beaucoup plus simple à réaliser, cela enlève toute possibilité d’utiliser la LED VERTE pour tout autre symbole dans d’autre Page WEB. En effet, cela supprime définitivement l’usage de la LED VERTE et je ne sais pas si cette LED verte n’est pas aussi utilisée en complément pour visualiser un autre état dans d’autres Pages HTM différent de ceux des LED des Inputs.

Si vous choisissez néanmoins cette dernière option qui consiste à supprimer le LED VERTE en la remplaçant par une LED ROUGE Alors il y a encore plus simple, modifier directement la couleur de l’ICON LED VERTE en ROUGE à l’aide d’un Editeur d’IMAGE comme Photoshp directement dans le fichier image ./WEBPROG/icons/icones.png. Vous n’aurez pas dans ces conditions aucune autre modification à faire,  C’est radical ! Mais Adieu à la LED Verte !.

A vous de voir !

Cdt

Parfait. Juste pour info, vous avez optez pour qu’elle modification ?

Celle qui consiste à générer une 2eme Class « ico-ledR_ON et ico-ledR_OFF pour la Led Rouge en gardant la Class de la led Verte intacte ou bien la méthode plus simple qui consiste à déplacer l’index de l’image LED Verte vers l’image LED « ROUGE » depuis le fichier icons.css ou enfin la simple modification de la couleur de la LED dans le fichier icones.png