IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Commander 2 contacts électrique via requête HTTP


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut 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 sauvgarder au format web, ça marche ! Nickel ! Bonne soirée !!!

    Non plus sérieusement ça fonctionne mais c'est pas joli joli 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	<p>
    	 <a class="btn btn-primary btn-large" href="#">Configuration ESP TEST APM</a>
    	</p>
    par

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

    Bonne soirée !!
    Fichiers attachés Fichiers attachés

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 487
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 487
    Points : 13 151
    Points
    13 151
    Par défaut
    quand vous allez aux url de commande avec un navigateur, qu'est ce que cela génère comme réponse ?

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    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

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 487
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 487
    Points : 13 151
    Points
    13 151
    Par défaut
    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.

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    Bon ben je vais essayer de comprendre tous ça mais j'avoue la pour l'instant que tu m'a complètement perdu
    Cette partie java s’intègre dans le fichier html ou je dois créer un fichier spécifique pour le rappeler ??

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    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.

    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>.

  7. #7
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    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

  8. #8
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    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 !

  9. #9
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    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 :

  11. #11
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    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..

    Nom : TESTAPMHTML.JPG
Affichages : 26
Taille : 105,9 Ko

  12. #12
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    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 ?

  13. #13
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    Citation Envoyé par darkstar123456 Voir le message
    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

  14. #14
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    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 ?

  15. #15
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mai 2012
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2012
    Messages : 42
    Points : 27
    Points
    27
    Par défaut
    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

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

  16. #16
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    Hellow !

    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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

Discussions similaires

  1. [iOS 4.x] Envoi d'image via requête http a un serveur distant
    Par salma.mathlouthi dans le forum Objective-C
    Réponses: 0
    Dernier message: 26/10/2012, 17h28
  2. POST d'un fichier xml via requête HTTP
    Par sofiane_bfm007 dans le forum Développement de jobs
    Réponses: 1
    Dernier message: 16/12/2010, 22h40
  3. Exécuter requête HTTP via PHP
    Par calitom dans le forum Langage
    Réponses: 0
    Dernier message: 15/07/2010, 16h11
  4. requêtes http via openssl
    Par gaelle40 dans le forum Réseau
    Réponses: 2
    Dernier message: 10/07/2009, 18h33
  5. Réponses: 3
    Dernier message: 24/10/2007, 00h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo