Commander 2 contacts électrique via requête HTTP

Bonjour le forum !!

Etant technicien en automation j'ai quelques notions de programmation mais en python et... ça s'arrêt la.. je n'ai aucune compétence pour le langage HTML..
La je suis sur un petit projet perso qui consiste simplement à actionner 2 contacts électrique avec un bouton dédié pour chaqu'uns de ces contacts.
Alors sur Word j'ai créer 2 boutons avec qui redirige vers un lien URL car pour commander ces contact j'envoi une requête http genre https://192.etc,control? bla bla bla :roll: sauvgarder au format web, ça marche ! Nickel ! Bonne soirée !!!

Non plus sérieusement ça fonctionne mais c'est pas joli joli :aie: Donc j'ai fouillé un peu sur le net et j'ai trouver le site layoutit qui m'a permis de faire un visuel qui me conviens par contre aucune idée de comment faire pour que ça fonctionne.
Ce que j'aurai voulu c'est que quand j'appui sur un des boutons test que ça enclenche la progressbar pour 7 secondes (durer de mon impulsion électrique) qui est en dessous du bouton Test et à la fin de ces 7 secondes un texte qui dit que le test a réussi..

Voilà.. donc si quelqu'un pourrai m'aider ce serai vraiment super !!

Je vais commencer..
Donc je suppose que je dois remplacer "#" par mon URL ??

Code:

---

1 2 3

<p> <a class="btn btn-primary btn-large" href="#">Configuration ESP TEST APM</a> </p>

---

par

Code:

---

1 2 3

<p> <a class="btn btn-primary btn-large" href="http://192.168.etc...">Configuration ESP TEST APM</a> </p>

---

??


Pour les images..

Code:

---

<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg">

---

est ce que je peux récupérer une image local genre

Code:

---

<img alt="Bootstrap Image Preview" src="file://n'importe ou.jpg">

---

Et c'est la que je sais pas comment faire.. Comment je rentre mon url ???

Code:

---

1 2 3

<button type="button" class="btn btn-success btn-block"> TEST_APM_N0 </button>

---

Et pour les progressbar comment je mets un timer de 7 secondes ?? et qui rend visible les texte du dessous ??

Code:

---

1 2 3

<div class="progress"> <div class="progress-bar w-75 progress-bar-animated progress-bar-striped"> </div>

---

En tous cas merci pour le temps que vous consacré à mon soucis :D

Bonne soirée !!

quand vous allez aux url de commande avec un navigateur, qu'est ce que cela génère comme réponse ?

Tous ce que je fais c'est que j’envoie une commande comme celle-ci http://<monip>/control?cmd=LongPulse,15,1,7 qui en commande une carte de développement avec plusieurs GPIO (dans cette exemple je demande à la carte de mettre le GPIO15 en position fermé pour 7 secondes mais je n'ai pas de réponse en retour..

Mais c'est n'est pas grave pour moi de savoir si réellement cela à fonctionner pour déclencher le texte en dessous de la progressbar car je reçois un sms si cela marche donc c'est pour ça que je voulais juste lié la progressbar à 7 secondes..
Je voudrais juste rester au plus simple.. J’appuie sur un des boutons TEST -> Déclenche la progressbar pour 7 secondes -> Rend visible le Texte "Test réussi !" -> Réinitialisation de tous si je appui à nouveau

si les requêtes ne génèrent rien, vous pouvez utiliser ajax pour lancer les requêtes et rester sur la page en cours :
https://javascript.developpez.com/fa...ipt/?page=Ajax

et ensuite vous aurez aussi besoin de javascript pour faire des effets comme l'affichage d'un texte pendant quelques secondes.

Bon ben je vais essayer de comprendre tous ça mais j'avoue la pour l'instant que tu m'a complètement perdu :aie:
Cette partie java s’intègre dans le fichier html ou je dois créer un fichier spécifique pour le rappeler ??

Bonjour,
ton problème reste des plus trivial attendu que justement tu n'attends pas de réponse, Ajax est effectivement tout indiqué avec un objet XMLHttpRequest ou avec l'API Fetch.
Concerant l'animation de ta « progress bar » tu pourrais te contenter de l'utilisation de CSS avec les transition ou les animation.

Citation:

---

Cette partie java s’intègre dans le fichier html ou je dois créer un fichier spécifique pour le rappeler ??

---

Si tu n'as que cela tu peux mettre ton script en fin de document avant la balise </body>.

Bonjour,

En repartant des fichiers sources en pièce jointe, j'ai développé un exemple qui reprend ce que vous souhaitez faire : https://codepen.io/DarkStar123456/pen/JjyeaBm

Je suis pas très doué en Javascript natif (j'utilise plutôt jQuery ^^) j'ai donc fait l'animation en CSS parce que c'était plus facile pour moi
Néanmoins, on peut y voir ce qu'on appelle l'appel AJAX en JS (représenté par xhttp dans le code)
J'ai essayé de commenter un max le code mais n'hésitez pas à poser des questions (niveau visuel, je suis parti de Bootstrap comme vous, j'ai juste utilisé la dernière version (Bootstrap v5))

Pour ce qui est des réponses aux questions individuelles :

Donc je suppose que je dois remplacer "#" par mon URL ??
Pas forcément. Dans l'exemple que j'ai réalisé, l'URL est directement dans le Javascript. Cependant, s'il y avait plusieurs URL à appeler, à ce moment-là il faudrait réfléchir à ce qui est le plus pratique de faire

est ce que je peux récupérer une image local genre :
Il est possible d'utiliser des images dites "locales" mais cela signifie habituellement qu'on parle d'un endroit quelconque sur le PC. Sinon, on parlera plutôt d'images "relatives"
Donc dans le dossier que vous avez partagé, si on imaginait q'un dossier images s'y trouvait, l'url de l'image serait : <img src="images/mon-image.jpg" alt="" /> tout simplement ;-)

Et c'est la que je sais pas comment faire.. Comment je rentre mon url ???
Le code que vous partagez est celui d'un bouton. Ce n'est pas forcément intuitif mais seuls les tags a possèdent un attribut href qui leur permet d'être utilisés en tant que lien.
Par défaut, un bouton ne peut pas agir comme un lien.


EDIT : J'ai fait une deuxième version basée sur l'utilisation de la balise <form> afin de demander l'adresse IP à appeler dans l'AJAX car j'imagine qu'il est possible que cette IP ne soit pas toujours la même (si on imagine que vous avez plusieurs clients avec le même dispositif)
Voici ce que ça donne : https://codepen.io/DarkStar123456/pen/JjyemZj

Merci pour ton temps darkstar123456 et aussi pour toutes t'est réponses c'est nickel ! Je vais essayer de réadapter ton code car mes 2 boutons TEST_APM_N0 et TEST_APM_N3 seulement comme texte et j'aurai voulu que chaucun d'eux déclenche sa propre progress bar. Mais franchement MERCI pour l'aide car franchement j'aurai jamais réussi !

Hello Youpsy,

Il faudrait connaître les besoins précis pour répondre précisément à ce que tu souhaites mais si je pouvais donner un élément de réponse (et de la façon la plus simple pour moi) je dirais ceci :

Au lieu de boucler sur toutes les progress-bar au click, il suffirait de choisir la numéro N-1 (vu que les tableaux vont toujours de 0 à n-1 et qu'un ensemble d'éléments est un tableau) et donc n'appliquer la class et le setTimeout() qui affiche le texte qu'à cet élément précis uniquement

EDIT : J'ai refait une exemple avec chacun des tests clickables : https://codepen.io/DarkStar123456/pen/oNeOPMW

Comme on peut le voir, l'URL est définie au sein du bouton (grâce à data-url) et l'événement click est basé sur la classe start-single-test.

Code:

---

1 2 3

<button class="btn btn-primary start-single-test" data-url="/control?cmd=LongPulse,15,1,7" data-index="1"> TEST_APM_N3 </button>

---

Je rebondis sur ce qui a été dit et proposé par darkstar123456 qui répond tout à fait à la demande.

J'avais en cours, depuis un petit moment, une page traitant de l'animation d'une « progress-bar » et à cette occasion je l'ai plus ou moins finalisée.

Elle ne traite pas de toute la problématique rencontrée dans cette discussion, juste la partie animation comme je le laissais entendre dans ma précédente réponse.

La page en ligne :

• Animation d'une progress-bar

Salut darkstar123456,

Je sais que je me repète mais vraiment MERCI ! y a juste un soucis ces que les deux bouton (TEST_APM_0 et 3) active la même sortie la 15 en l’occurrence et à chaque fois j'aurai 2 sortie différentes a activer..
Est ce que ce serai difficile d'ajouter 2 input pour le choix des sorties ? car la j'ai mis la 4 et 15 mais je peux me brancher sur n'importe quel GPIO

Et voilà une petite image qui en dit plus sur mes besoins et qui je 'espère pourra aider à la compréhension..

Pièce jointe 609232

Bonjour,

Bien sûr c'est faisable !

Soit de manière statique, en changeant simplement l'attribut data-url du bouton en question (data-url="/control?cmd=LongPulse,15,1,7")
Soit de la même façon qu'on demande et récupère l'adresse IP, on peut mettre autant de champs que nécessaire.

Dans mon exemple, je suis juste parti du postulat de base qui était de pouvoir interroger 2 URLs distinctes ^^
En réalité, j'appelle réellement 2 URLs sauf que dans l'attribut data-url j'ai mis la même URL dans chacun des boutons ^^

Mais du coup, au lieu de réaliser un nouvel exemple, je vais essayer d'anticiper en essayant de comprendre ce que signifie la commande LongPulse,X,Y,Z.
En effet, si on souhaite pouvoir mettre à jour X (ça j'ai compris, il s'agit du n° de GPIO), le reste doit-il être statique ? Y = 1, Z = 7 ?

Citation:

---

Envoyé par darkstar123456

Bonjour,

Mais du coup, au lieu de réaliser un nouvel exemple, je vais essayer d'anticiper en essayant de comprendre ce que signifie la commande LongPulse,X,Y,Z.
En effet, si on souhaite pouvoir mettre à jour X (ça j'ai compris, il s'agit du n° de GPIO), le reste doit-il être statique ? Y = 1, Z = 7 ?

---

Alors pour que tu puissent comprendre de ou ça viens : https://www.letscontrolit.com/wiki/index.php/ESPEasy

qui est un petit programme que on peut téléverser sur une ESP8266 type nodeMCU v3 qui va permettre de piloter des petits moteurs, relais électrique et tu peux même y ajouter quelques capteurs de toutes sortes.

La références des commandes que l'on peut utiliser se trouve la : https://www.letscontrolit.com/wiki/i...mand_Reference

Et moi je me suis intéressé plus spécifiquement au GPIO : https://www.letscontrolit.com/wiki/index.php?title=GPIO

Donc pour répondra à ta question, Y peut être à 1 (5v) ou à 0 (0V) dépend de ce que l'on veut faire.. donc mon cas je veux faire tirer la bobine d'un relais électrique en l'alimentant avec du 5V donc pour ça que dans mon cas Y serai = 1

et Z c'est juste le temps de l'impulsion en secondes

Hello,

Merci pour toutes ces informations ! C'est bien documenté, ça fait plaisir ^^

Du coup, pour revenir à la seconde question (pouvoir choisir le GPIO), est-ce qu'il doit y avoir un historique de chaque test ?
Sinon, au lieu d'avoir tout en double (double bouton, double nom de test, double texte de succès), est-ce qu'on ne pourrait pas simplement prendre un formulaire simple (1 input pour l'up, 1 input pour le GPIO) et que chaque fois qu'on lance un test, ça réinitialise l'affichage ?

Salut !

Je suis pas sur de comprend pour l'historique.. tu veux dire un fichier log ou champs avec sur lequel on verrai les dernier tests ?
Si c'est bien ça je dirai que c'est inutile mais dans beaucoup de cas.. mais dans mon cas cela pourrai être super intéressant !! Car ça pourrai prouver en plus que le test à distance à bien été lancer manuellement.

Le fait d'avoir tout en double comme tu dit me sert juste a identifier ce que je test (ma centrale au niveau 0 ou celle du niveau 3) et vu que je ne serai pas le seul à lancer ces test ce serai plus claire pour les autres
mais comme tu dit on pourrai simplement avoir 2 input (IP, GPIO) et un bouton pour tester les différents GPIO sur lesquel on est branché ! Mais faut juste se rappeler de qui est sur quoi :ptdr:

Quand à réinitialiser l'affichage oui ce serai une bonne idée

Hellow !

Citation:

---

Le fait d'avoir tout en double comme tu dit me sert juste a identifier ce que je test (ma centrale au niveau 0 ou celle du niveau 3)

---

C'est déjà ce que j'ai mis dans mon exemple plus haut mais actuellement j'ai mis 2 fois la même URL ne connaissant pas les différences au moment de ce message ^^ ;)

J'ai mis à jour mon exemple en mettant directement 2 URLs différentes dans le code : https://codepen.io/DarkStar123456/pen/oNeOPMW

Comme je l'expliquais dans un message précédent, il suffit de changer la valeur de data-url dans le bouton (ici on en a 2 : TEST_APM_N0 et TEST_APMN3)
Ça nous donne :

Code:

---

1 2 3 4 5 6 7

<button class="btn btn-primary start-single-test" data-url="/control?cmd=LongPulse,4,1,7" data-index="0"> TEST_APM_N0 </button> <!-- et plus loin, on a : --> <button class="btn btn-primary start-single-test" data-url="/control?cmd=LongPulse,15,1,7" data-index="1"> TEST_APM_N3 </button>

---

Au niveau de l'historique, le terme était très mal choisi de ma part.
Ce que je voulais dire par là est qu'on puisse avoir un nombre infini de tests qui seraient par exemple les un en dessous des autres et pour chaque test on demanderait manuellement la valeur du GPIO à appeler
A l'inverse des boutons actuellement qui ne peuvent appeler que les GPIO 4 et 15