Widget Html et Javascript

pat49700 · Janvier 30, 2019, 12:33

Bonjour,
Je souhaiterais réaliser un widget « Pilotage sortie virtuelle » double ( 2 sorties virtuelles, plus du texte dans un widget de largeur 1 ) comme ceci :

Capture%20du%202019-01-30%2012-00-10

Est-ce réalisable ?

Merci d’avance aux spécialistes !

fgtoul · Janvier 30, 2019, 6:01

Bonjour
voici le code

var SVa="5"; 
var SVb="6";
var titre="Zone 2";

return `
<span style="margin-left:5px;color:red;">${titre}</span>
<input type="button" id="bouton2" class="bouton2 vout${SVa} btnV4vout${SVa}" style="margin-left:25px;margin-top: 15px;width: 90px;" name="Absence|Absence" onclick="newAJAXCommand('io.cgi?vout=${SVa}');" value="off">
<input type="button" id="bouton2" class="bouton2 vout${SVb} btnV4vout${SVb}" style="margin-left:5px;margin-top: 15px;width: 90px;" name="Forçage|Forçage" onclick="newAJAXCommand('io.cgi?vout=${SVb}');" value="off">
`;

Dans le code les numérotations des SV commencent à 0
Dans le code, j’ai mis l’exemple pour les SV n°6 et SV n°7

cdt

pat49700 · Janvier 30, 2019, 8:13

Merci beaucoup @fgtoul !
C’est maintenant beaucoup plus lisible sur mon dashboard.

Est-ce que ça « charge » davantage le dashboard par rapport à deux widgets pilotage SV séparés ?

fgtoul · Janvier 30, 2019, 9:50

Non, le code est presque identique au code original, donc pas de surpoids

pat49700 · Janvier 31, 2019, 8:28

Compris ! je vais pouvoir alléger mes dashboards !

Merci encore @fgtoul pour ta disponibilité sur ce forum.

Cdlt

fgtoul · Janvier 31, 2019, 8:31

il n’y a que les 3 premières lignes à adapter avec les bonnes valeurs. Le reste du code est universel.

pat49700 · Janvier 31, 2019, 9:52

Je pense que ça va servir à d’autres !!
On doit pouvoir adapter pour 3 SV (ou plus…) assez facilement, même sans être un pro du « code » !

fgtoul · Janvier 31, 2019, 9:58

voilà pour 3. En effet c’est très simple, mais encore faut-il redimensionner les éléments (attribut width:), voire à les passer sur plusieurs lignes (avec la balise <br>), raccourcir les textes, diminuer les marges (attribut margin-left:)… car la place est comptée

var SVa="5"; 
var SVb="6";
var SVc="7";
var titre="Salon";

return `
<span style="margin-left:5px;color:red;">${titre}</span><br>
<input type="button" id="bouton2" class="bouton2 vout${SVa} btnV4vout${SVa}" style="margin-left:5px ;margin-top: 8px;width: 80px;" name="Z1|Z1" onclick="newAJAXCommand('io.cgi?vout=${SVa}');" value="off">
<input type="button" id="bouton2" class="bouton2 vout${SVb} btnV4vout${SVb}" style="margin-left:10px;margin-top: 8px;width: 80px;" name="Z2|Z2" onclick="newAJAXCommand('io.cgi?vout=${SVb}');" value="off">
<input type="button" id="bouton2" class="bouton2 vout${SVc} btnV4vout${SVc}" style="margin-left:10px;margin-top: 8px;width: 80px;" name="Z3|Z3" onclick="newAJAXCommand('io.cgi?vout=${SVc}');" value="off">
`;

pat49700 · Janvier 31, 2019, 11:15

@fgtoul Pas mieux !

micou211187 · Janvier 11, 2020, 10:11

Merci pour ce code fgtoul. Trop pratique.

Je ne sais pas si c’est possible, mais je cherche à faire quelques chose dans le même esprit.

Si je prend la version avec :

1 nom,
1 sortie virtuelle,
1 sortie virtuelle

Je souhaiterai l’adapter en :

1 logo,
1 sortie virtuelle,
1 entrée physique (aucun bouton) => retour d’état.

J’ai plusieurs télérupteur. Sur mon dashboard, 1 éclairage par télérupteur se traduit par 2 lignes :

1 avec un retour d’état depuis le TL,
1 pour la commande du TL

Je souhaiterai tout simplement mettre cela sur une seule et même ligne.

Merci pour votre aide.

fgtoul · Janvier 12, 2020, 9:25

Bonjour,
voici un petit widget.

Dans le code, il faut paramétrer

SVb le numéro de la sortie virtuelle en faisant -1 (l’exemple est avec la SV7)
ED le numéro de l’entrée digitale en faisant -1 (l’exemple est avec ED1)
le nom de l’icone

var SVb="6";
var ED="0";
var icon="home";
return `
<span class="glyphicons glyphicons-${icon} x2" style="margin-left:5px;margin-top:12px"></span>
<input type="button" id="bouton2" class="bouton2 vout${SVb} btnV4vout${SVb}" style="margin-left:10px;margin-top:12px;width: 130px;" name="Sortie virtuelle 7|Sortie virtuelle 7" onclick="newAJAXCommand('io.cgi?vout=${SVb}');" value="off">
<div class="indicator-light2 btn${ED}" style="float:right;margin-right:18px;"></div>
`;

Vous pourrez trouver les noms des icones ici :

En positionnant votre souris sur l’icone choisie

cdt

micou211187 · Janvier 12, 2020, 2:49

Merci pour ton implication. C est super sympa.

Je ne sais pas si c est possible, mais croyez vous qu’il est faisable de supprimer le retour d état que vous avez mis à droite et que le logo de gauche change de couleur en fonction de cette variable retour d état (entrée TOR de l iPad)?

Je ne sais pas si je suis assez clair dans ma demande.

Je vous remercie.

fgtoul · Janvier 12, 2020, 3:08

oui, c’est faisable, mais du coup il faut créer une source de données qui pointe vers le fichier status.xml. Le retour d’état ne sera donc pas instantané, le délai dépendra de la fréquence de rafraichissement paramétrée .

micou211187 · Janvier 12, 2020, 7:42

Merci beaucoup pour l’info. Je vais essayer.

micou211187 · Janvier 12, 2020, 8:32

Re-bonjour,

J’ai essayé d’adapter votre code en remplaçant la sortie virtuelle par une sortie TOR. Pour cela j’ai remplacé le terme « vout » en « led ».

Problème : le bouton ne fonctionne plus. lorsque j’appuie dessus, rien ne se passe. (aucune commutation de mon relais). Une idée??

Merci à vous

fgtoul · Janvier 13, 2020, 9:04

Bonjour,

les commandes Ajax sont différentes en fonction du périphérique piloté.

Ajoutez un widget de type « Bouton ON/OFF »
puis, sur le bouton du widget, faites un clic avec le bouton droit de la souris. Prenez l’option « inspecter l’élément »
de cette manière, vous pourrez récupérer tous les bouts de codes que vous souhaitez.
cdt

Yakov_TOPRAK · Janvier 14, 2020, 7:44

Bonjour @fgtoul,
y a t’il un endroit pour apprendre à créer ses propres widgets ?
j’ai beau avoir chercher il y a quelque temps, mais on ne trouve que des choses déjà toutes faites par toi ou d’autres.
Et sans explication c’est difficile de pouvoir reproduire ou d’adapter.
Par exemple j’aimerai créer un pavé numérique pour entrée un code.
Bien à toi

fgtoul · Janvier 14, 2020, 10:08

Bonjour
Les widgets sont écrits en javascript.
C’est donc le langage à apprendre, en plus du html et éventuellement CSS.

A mon sens il n’y a pas besoin de créer un clavier virtuel.
Si un widget contient une zone de saisie <input type="text" >, alors une tablette ou un smartphone affichent automatiquement un clavier lorsque le curseur y est positionné.

pour un code à 4 chiffres, voici la balise et ses attributs :
<input type="text" pattern="[0-9]" maxlength=4 placeholder="Saisissez le code">

cdt

Yakov_TOPRAK · Janvier 16, 2020, 10:11

Ok pour une tablette mais j’avais l’intention de mettre un petit écran tactile sans clavier en fixe.
Mais peut être qu’une tablette serait mieux.
Je me pose la question.
Merci pour toutes ces réponses très précises.

Aspro95 · Janvier 23, 2020, 9:04

Bonjour,
Je galère, sans succès, pour essayer d’afficher convenablement des mesures de température (enoA8) et d’humidité (enoA7) dans un seul widget Block 4:
double ENO
Pour cela il m’a fallu passer la taille du block à 2, contre 1 pour les autres.
Etape 1 : Est-il possible de réaliser ça en gardant une taille de 1 en jouant sur les marges et/ou les alignements ? Je vous joins le code, trouvé auparavant sur le forum, adapté à mon besoin de l’époque, et réadapté pour le nouveau mais en vain.

var celsius = ((datasources["XML_V4"]["response"]["enoA8"])*1).toFixed(1);
var humidity = ((datasources["XML_V4"]["response"]["enoA7"])*1).toFixed(1);
return `
<style>
.temp_ext {
   		/* On réinitialise l'apparence par défaut */
  	appearance: none;
  	-webkit-appearance: none;
  	-moz-appearance: meterbar;
	background-image: linear-gradient(
    90deg, 
    #0000ff,		/* 0°C */
    #00ff00 25%,	/* 20°C */
    #ff0000 75%		/* 30°C */
  	);
  	background-size: 100% 100%;
	width: 90px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.temp_ext::-moz-meter-bar  {
    background: transparent;
	border-style: solid;
	border-color: black;
	border-width: 0px 3px 0px 0px;
}
</style>

<table width='100%'>
  <tr>
	<td align=right rowspan=2 style='padding-top: 5px;'><span style='margin-right:-8px;' class="glyphicons glyphicons-temperature x2"></span></td>
	<td align=left valign=middle width='50%'><span style='color: #E0CDA9'> Cellier (EnoA8)</span></td>
	<td align=right valign=middle colspan=3 width='35%' style='padding:2px 2px 0 0;'><span style='color: #FFFFFF;font-size: 28px;'>${celsius}<sup>°C</sup></span></td>
  </tr>
     <tr>
	<td align=left valign=middle><span style='padding-right: 2px; font-size:12px;'>5</span><meter class='temp_ext' min="5" max="30" value="${celsius}"></meter><span style='padding-left: 2px; font-size:12px;'>30</span></td>
    <td align=center valign=top><div style='font-size:12px;line-height: 1.1;'><br></div></td>
  </tr>
     <tr>
    <td align=right valign=top colspan=3 width='10%' style='padding:0 4px 0 0;'><span style='color: #FFFFFF;font-size: large;'>${humidity}<sup> %HR</sup></span></td>
  </tr>
</table>

Etape 2 : si c’est possible, j’aimerais passer le thermomètre devant la température et mettre une goutte d’eau devant l’humidité.
Merci pour votre aide