Créé le: 5 avril 2013\nPartie 16 du didacticiel du serveur Web Arduino Ethernet Shield\nDans cette partie du didacticiel, tout ce qui a été traité jusqu'à présent est réuni. HTML, JavaScript, CSS, HTTP, Ajax et la carte SD sont utilisés pour créer une page Web qui affiche les entrées analogiques et numériques Arduino et permet de contrôler les sorties numériques.\nLe serveur Web Arduino héberge une page Web qui affiche quatre valeurs d'entrée analogique et l'état de trois commutateurs. La page Web permet de contrôler quatre LED – deux LED sont contrôlées à l'aide de cases à cocher et deux LED sont contrôlées à l'aide de boutons.\nLorsque plusieurs ordinateurs (navigateur Web) sont connectés au serveur Web Arduino, les sorties (LED) allumées à l'aide d'un ordinateur seront mises à jour sur l'autre ordinateur – c'est-à-dire lorsqu'une case à cocher est activée pour allumer une LED à partir d'un ordinateur, la case sera également cochée automatiquement sur l'autre ordinateur.\nLa vidéo suivante montre deux ordinateurs connectés au serveur Web Arduino et lorsque des modifications sont apportées sur la page Web sur un ordinateur, elles sont mises à jour sur l'autre.\nSchéma du circuit d'E / S du serveur Web\nLe schéma de circuit de cette partie du didacticiel est illustré ici:\n\t\nDans la vidéo, A3 était connecté à un diviseur de tension, A4 était connecté via une résistance à GND et A5 était connecté via une résistance à + 5V – non représenté sur le schéma de circuit.\nPrésentation du fonctionnement du serveur Web\nAprès qu'un navigateur Web a demandé et chargé la page Web à partir du serveur Web Arduino, le JavaScript de la page Web enverra une demande Ajax de données de l'Arduino chaque seconde.\nLa page Web hébergée par le serveur Web Arduino est affichée ici:\n\t\nPage Web hébergée par le serveur Web Arduino\nL'Arduino répondra à chaque demande Ajax en renvoyant un fichier XML au navigateur Web. Le fichier XML contient les valeurs des quatre entrées analogiques de l'Arduino (A2 à A5), l'état de trois broches (commutateurs sur les broches 2, 3 et 5) et l'état des quatre LED.\n\t\nFichier XML envoyé par Arduino\nLorsqu'une LED est allumée à partir de la page Web en cochant une case, le JavaScript enverra l'état de la case à cocher (envoyer une instruction pour allumer la LED) avec la prochaine demande Ajax. La même chose se produira si la LED est éteinte ou si l'un des boutons est utilisé pour allumer ou éteindre une LED.\nCode source\nLe code source de l'esquisse Arduino et de la page Web est un peu gros à inclure sur cette page. Il est suggéré de télécharger ces fichiers ci-dessous et de les ouvrir dans votre éditeur préféré en suivant les explications ci-dessous.\nCroquis et page Web Arduino:\n\tweb_server_IO.zip (4,7 ko)\nExécuter l'exemple\nPour exécuter cet exemple, copiez d'abord la page Web (index.htm) du téléchargement ci-dessus sur une carte micro SD. Insérez la carte micro SD dans la fente pour carte du blindage Ethernet. Le blindage Ethernet doit être branché sur une carte Arduino, connecté à votre réseau et alimenté par USB ou une alimentation externe.\nConstruisez autant de circuits que vous le souhaitez. Si vous ne connectez rien aux broches d'entrée, elles peuvent simplement basculer au hasard pendant qu'elles captent du bruit. Les entrées peuvent toujours être tirées vers le haut ou le bas via une résistance si vous ne souhaitez pas les connecter à des commutateurs ou à un potentiomètre.\nChargez l'esquisse Arduino (eth_websrv_SD_Ajax_in_out) à partir du téléchargement ci-dessus sur l'Arduino.\nNaviguez jusqu'à l'adresse IP définie dans l'esquisse à l'aide d'un navigateur Web – vous devriez voir la page Web chargée et les valeurs analogiques et les valeurs de commutation mises à jour chaque seconde.\nComment fonctionne l'exemple\nL'esquisse Arduino et la page Web sont essentiellement des versions modifiées du code des exemples précédents de ce tutoriel en plusieurs parties. Les fichiers sont des versions modifiées des exemples qui utilisent Ajax avec XML (partie 14 et partie 15).\nEntrées analogiques et numériques\nLes entrées analogiques (valeurs analogiques) et numériques (états de commutation) sont demandées et reçues de la même manière que celle expliquée dans la partie 14 de ce didacticiel, sauf que les valeurs analogiques sont toutes incluses dans les balises et les états de commutation sont tous inclus dans tags – c'est-à-dire qu'ils n'utilisent pas de noms de tag uniques pour chaque entrée.\nLorsque le JavaScript de la page Web reçoit le fichier XML de l'Arduino, il en utilise un pour boucle pour extraire les valeurs analogiques et une seconde pour boucle pour extraire les états de commutation.\nLe code JavaScript pour extraire les valeurs analogiques du fichier XML est affiché ici:
"},{"id":"text-2","type":"text","heading":"","plain_text":"var num_an = this.responseXML.getElementsByTagName ('analog'). length;\npour (count = 0; count <num_an; count ++) \n document.getElementsByClassName ("analogique")[count].innerHTML =\n this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;","html":"var num_an = this.responseXML.getElementsByTagName ('analog'). length;\npour (count = 0; count <num_an; count ++) \n document.getElementsByClassName ("analogique")[count].innerHTML =\n this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;
"},{"id":"text-3","type":"text","heading":"","plain_text":"La première ligne du code ci-dessus obtient le nombre d'éléments du fichier XML inclus dans les balise et les stocke dans la variable num_an qui est ensuite utilisé dans le pour boucle pour obtenir le nombre correct de valeurs analogiques.\ndans le pour boucle, le code suivant s'empare de chaque HTML envergure qui a la classe analogique:","html":"La première ligne du code ci-dessus obtient le nombre d'éléments du fichier XML inclus dans les balise et les stocke dans la variable num_an qui est ensuite utilisé dans le pour boucle pour obtenir le nombre correct de valeurs analogiques.\ndans le pour boucle, le code suivant s'empare de chaque HTML envergure qui a la classe analogique:
"},{"id":"text-4","type":"text","heading":"","plain_text":"document.getElementsByClassName ("analogique")[count].innerHTML","html":"document.getElementsByClassName ("analogique")[count].innerHTML
"},{"id":"text-5","type":"text","heading":"","plain_text":"Qui s'empare de chacun envergure élément dans le code HTML suivant:","html":"Qui s'empare de chacun envergure élément dans le code HTML suivant:
"},{"id":"text-6","type":"text","heading":"","plain_text":"A2: ...\nA3: ...\nA4: ...\nA5: ...","html":"A2: ...\nA3: ...\nA4: ...\nA5: ...
"},{"id":"text-7","type":"text","heading":"","plain_text":"Cette ligne de code obtient ensuite tour à tour chaque valeur analogique du fichier XML:","html":"Cette ligne de code obtient ensuite tour à tour chaque valeur analogique du fichier XML:
"},{"id":"text-8","type":"text","heading":"","plain_text":"this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;","html":"this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;
"},{"id":"text-9","type":"text","heading":"","plain_text":"Ainsi, les deux lignes de code JavaScript ci-dessus travaillant ensemble récupèrent chaque valeur analogique du fichier XML dans l'ordre dans lequel elles apparaissent dans le fichier et insèrent ces valeurs dans chaque envergure dans l'ordre où ils apparaissent dans le HTML.\nLes valeurs de commutateur fonctionnent de la même manière, mais chaque code HTML envergure avec le nom de la classe interrupteurs a une valeur du fichier XML avec la balise commutateur inséré dans l'ordre dans lequel ils apparaissent.\nLEDs\nL'Arduino garde la trace des LED allumées et des LED éteintes. Ces informations sont renvoyées dans le cadre du fichier XML en réponse à la demande Ajax qui se produit toutes les secondes.\nDans l'esquisse Arduino, le tableau suivant stocke les états des LED (stocke 1 pour la LED « allumée '' et 0 pour la LED « éteinte ''):","html":"Ainsi, les deux lignes de code JavaScript ci-dessus travaillant ensemble récupèrent chaque valeur analogique du fichier XML dans l'ordre dans lequel elles apparaissent dans le fichier et insèrent ces valeurs dans chaque envergure dans l'ordre où ils apparaissent dans le HTML.\nLes valeurs de commutateur fonctionnent de la même manière, mais chaque code HTML envergure avec le nom de la classe interrupteurs a une valeur du fichier XML avec la balise commutateur inséré dans l'ordre dans lequel ils apparaissent.\nLEDs\nL'Arduino garde la trace des LED allumées et des LED éteintes. Ces informations sont renvoyées dans le cadre du fichier XML en réponse à la demande Ajax qui se produit toutes les secondes.\nDans l'esquisse Arduino, le tableau suivant stocke les états des LED (stocke 1 pour la LED « allumée '' et 0 pour la LED « éteinte ''):
"},{"id":"text-10","type":"text","heading":"","plain_text":"boolean LED_state[4] = 0; // stocke les états des LED","html":"boolean LED_state[4] = 0; // stocke les états des LED
"},{"id":"text-11","type":"text","heading":"","plain_text":"Ce tableau est initialisé avec des zéros – toutes les LED éteintes. Chaque élément du réseau correspond à une LED dans l'ordre de LED1 à LED4, c'est-à-dire LED_state[0] stocke l'état de la LED 1, LED_state[1] stocke l'état de la LED 2, etc.\nLED utilisant des cases à cocher\nDans le code JavaScript, les lignes de code suivantes montrent comment l'état de la LED 1 est extrait du fichier XML reçu et utilisé pour mettre à jour la case à cocher – c'est-à-dire pour la marquer comme cochée ou décochée, selon l'état de la LED.","html":"Ce tableau est initialisé avec des zéros – toutes les LED éteintes. Chaque élément du réseau correspond à une LED dans l'ordre de LED1 à LED4, c'est-à-dire LED_state[0] stocke l'état de la LED 1, LED_state[1] stocke l'état de la LED 2, etc.\nLED utilisant des cases à cocher\nDans le code JavaScript, les lignes de code suivantes montrent comment l'état de la LED 1 est extrait du fichier XML reçu et utilisé pour mettre à jour la case à cocher – c'est-à-dire pour la marquer comme cochée ou décochée, selon l'état de la LED.
"},{"id":"text-12","type":"text","heading":"","plain_text":"// LED 1\nif (this.responseXML.getElementsByTagName ('LED')[0].childNodes[0].nodeValue\n === "vérifié") \n document.LED_form.LED1.checked = true;","html":"// LED 1\nif (this.responseXML.getElementsByTagName ('LED')[0].childNodes[0].nodeValue\n === "vérifié") \n document.LED_form.LED1.checked = true;
"},{"id":"text-13","type":"text","heading":"","plain_text":"autre \n document.LED_form.LED1.checked = false;","html":"autre \n document.LED_form.LED1.checked = false;
"},{"id":"text-14","type":"text","heading":"","plain_text":"Dans le code ci-dessus, si la première valeur (c'est-à-dire pour la LED 1) du fichier XML dans un la balise contient le texte vérifié alors la case correspondante est cochée en utilisant cette ligne de JavaScript:","html":"Dans le code ci-dessus, si la première valeur (c'est-à-dire pour la LED 1) du fichier XML dans un la balise contient le texte vérifié alors la case correspondante est cochée en utilisant cette ligne de JavaScript:
"},{"id":"text-15","type":"text","heading":"","plain_text":"document.LED_form.LED1.checked = true;","html":"document.LED_form.LED1.checked = true;
"},{"id":"text-16","type":"text","heading":"","plain_text":"Sinon, la case n'est pas cochée.\nCela garantit que chaque navigateur qui se connecte au serveur Web Arduino affiche les états corrects des LED car ils reçoivent les états des LED chaque seconde.\nLorsqu'un utilisateur coche ou décoche une case à cocher, la prochaine demande Ajax inclura le nom et l'état de la LED avec la prochaine demande HTTP GET.\nLa fonction JavaScript GetCheck () est exécuté chaque fois qu'une case est cochée. Si la case à cocher pour la LED 1 est cochée, la valeur d'une chaîne pour la LED 1 est définie:","html":"Sinon, la case n'est pas cochée.\nCela garantit que chaque navigateur qui se connecte au serveur Web Arduino affiche les états corrects des LED car ils reçoivent les états des LED chaque seconde.\nLorsqu'un utilisateur coche ou décoche une case à cocher, la prochaine demande Ajax inclura le nom et l'état de la LED avec la prochaine demande HTTP GET.\nLa fonction JavaScript GetCheck () est exécuté chaque fois qu'une case est cochée. Si la case à cocher pour la LED 1 est cochée, la valeur d'une chaîne pour la LED 1 est définie:
"},{"id":"text-17","type":"text","heading":"","plain_text":"strLED1 = "& LED1 = 1";","html":"strLED1 = "& LED1 = 1";
"},{"id":"text-18","type":"text","heading":"","plain_text":"Si la case n'est pas cochée, la chaîne est définie comme suit:","html":"Si la case n'est pas cochée, la chaîne est définie comme suit:
"},{"id":"text-19","type":"text","heading":"","plain_text":"strLED1 = "& LED1 = 0";","html":"strLED1 = "& LED1 = 0";
"},{"id":"text-20","type":"text","heading":"","plain_text":"La prochaine fois que GetArduinoIO () la fonction est appelée, qui se produit chaque seconde, la strLED1 la chaîne ne sera plus vide. Cette chaîne sera désormais incluse dans la requête GET:","html":"La prochaine fois que GetArduinoIO () la fonction est appelée, qui se produit chaque seconde, la strLED1 la chaîne ne sera plus vide. Cette chaîne sera désormais incluse dans la requête GET:
"},{"id":"text-21","type":"text","heading":"","plain_text":"request.open ("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4\n + nocache, vrai);","html":"request.open ("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4\n + nocache, vrai);
"},{"id":"text-22","type":"text","heading":"","plain_text":"Toutes les autres chaînes de LED seront vides si une case à cocher ou un bouton n'a pas été cliqué, donc ne seront pas inclus avec la demande GET.\nAprès que la demande get se soit produite, toutes les chaînes de LED sont remises à vide:","html":"Toutes les autres chaînes de LED seront vides si une case à cocher ou un bouton n'a pas été cliqué, donc ne seront pas inclus avec la demande GET.\nAprès que la demande get se soit produite, toutes les chaînes de LED sont remises à vide:
"},{"id":"text-23","type":"text","heading":"","plain_text":"strLED1 = "";\nstrLED2 = "";\nstrLED3 = "";\nstrLED4 = "";","html":"strLED1 = "";\nstrLED2 = "";\nstrLED3 = "";\nstrLED4 = "";
"},{"id":"text-24","type":"text","heading":"","plain_text":"Lorsque l'Arduino reçoit la demande Ajax GET, le SetLEDs () La fonction dans l'esquisse Arduino vérifie un changement d'état de la LED dans la demande GET reçue et s'il en trouve une, allumera ou éteindra la LED correspondante, puis enregistrera l'état de la LED dans le LED_state[] tableau.\nLED utilisant des boutons\nLes boutons qui contrôlent les LED fonctionnent de la même manière que les cases à cocher, sauf que chaque bouton a sa propre fonction JavaScript qui s'exécute lorsqu'un bouton est cliqué.\nLe texte sur les boutons est mis à jour pour montrer l'état des LED qu'ils contrôlent.\nLes boutons n'ont pas de propriété "vérifiée", donc l'état actuel de la LED de chaque bouton est stocké dans une variable:","html":"Lorsque l'Arduino reçoit la demande Ajax GET, le SetLEDs () La fonction dans l'esquisse Arduino vérifie un changement d'état de la LED dans la demande GET reçue et s'il en trouve une, allumera ou éteindra la LED correspondante, puis enregistrera l'état de la LED dans le LED_state[] tableau.\nLED utilisant des boutons\nLes boutons qui contrôlent les LED fonctionnent de la même manière que les cases à cocher, sauf que chaque bouton a sa propre fonction JavaScript qui s'exécute lorsqu'un bouton est cliqué.\nLe texte sur les boutons est mis à jour pour montrer l'état des LED qu'ils contrôlent.\nLes boutons n'ont pas de propriété "vérifiée", donc l'état actuel de la LED de chaque bouton est stocké dans une variable:
"},{"id":"text-25","type":"text","heading":"","plain_text":"var LED3_state = 0;\nvar LED4_state = 0;","html":"var LED3_state = 0;\nvar LED4_state = 0;
"},{"id":"text-26","type":"text","heading":"","plain_text":"Le stockage de l'état du bouton est nécessaire pour que lorsque vous cliquez à nouveau sur le bouton, il sache s'il faut mettre à jour la chaîne envoyée avec la demande GET pour allumer ou éteindre la LED.\nLorsque l'Arduino envoie l'état des LED dans le fichier XML qui sont contrôlées par les boutons, il insère "on" ou "off" entre les balises au lieu de "coché" ou "non coché" comme pour les cases à cocher.\nCSS\nLe CSS utilisé dans cet exemple place chaque ensemble d'entrées ou de sorties dans leurs propres cases avec une bordure bleue. Il positionne également les boîtes les unes à côté des autres. Si la fenêtre du navigateur est redimensionnée sur sa largeur, les cases de droite se déplaceront sous les cases de gauche.\nLe CSS dans cette partie du tutoriel ne sera pas expliqué ici, mais sera expliqué dans les prochaines parties de ce tutoriel où nous regardons plus de CSS.","html":"Le stockage de l'état du bouton est nécessaire pour que lorsque vous cliquez à nouveau sur le bouton, il sache s'il faut mettre à jour la chaîne envoyée avec la demande GET pour allumer ou éteindre la LED.\nLorsque l'Arduino envoie l'état des LED dans le fichier XML qui sont contrôlées par les boutons, il insère "on" ou "off" entre les balises au lieu de "coché" ou "non coché" comme pour les cases à cocher.\nCSS\nLe CSS utilisé dans cet exemple place chaque ensemble d'entrées ou de sorties dans leurs propres cases avec une bordure bleue. Il positionne également les boîtes les unes à côté des autres. Si la fenêtre du navigateur est redimensionnée sur sa largeur, les cases de droite se déplaceront sous les cases de gauche.\nLe CSS dans cette partie du tutoriel ne sera pas expliqué ici, mais sera expliqué dans les prochaines parties de ce tutoriel où nous regardons plus de CSS.
"},{"id":"text-27","type":"text","heading":"","plain_text":"Veuillez activer JavaScript pour afficher les commentaires fournis par Disqus.","html":"Veuillez activer JavaScript pour afficher les commentaires fournis par Disqus.
"},{"id":"text-28","type":"text","heading":"","plain_text":"Click to rate this post!\n \n [Total: 0 Average: 0]","html":"Click to rate this post!\n \n [Total: 0 Average: 0]
"}],"sections":[{"id":"text-1","heading":"Text","content":"Créé le: 5 avril 2013\nPartie 16 du didacticiel du serveur Web Arduino Ethernet Shield\nDans cette partie du didacticiel, tout ce qui a été traité jusqu'à présent est réuni. HTML, JavaScript, CSS, HTTP, Ajax et la carte SD sont utilisés pour créer une page Web qui affiche les entrées analogiques et numériques Arduino et permet de contrôler les sorties numériques.\nLe serveur Web Arduino héberge une page Web qui affiche quatre valeurs d'entrée analogique et l'état de trois commutateurs. La page Web permet de contrôler quatre LED – deux LED sont contrôlées à l'aide de cases à cocher et deux LED sont contrôlées à l'aide de boutons.\nLorsque plusieurs ordinateurs (navigateur Web) sont connectés au serveur Web Arduino, les sorties (LED) allumées à l'aide d'un ordinateur seront mises à jour sur l'autre ordinateur – c'est-à-dire lorsqu'une case à cocher est activée pour allumer une LED à partir d'un ordinateur, la case sera également cochée automatiquement sur l'autre ordinateur.\nLa vidéo suivante montre deux ordinateurs connectés au serveur Web Arduino et lorsque des modifications sont apportées sur la page Web sur un ordinateur, elles sont mises à jour sur l'autre.\nSchéma du circuit d'E / S du serveur Web\nLe schéma de circuit de cette partie du didacticiel est illustré ici:\n\t\nDans la vidéo, A3 était connecté à un diviseur de tension, A4 était connecté via une résistance à GND et A5 était connecté via une résistance à + 5V – non représenté sur le schéma de circuit.\nPrésentation du fonctionnement du serveur Web\nAprès qu'un navigateur Web a demandé et chargé la page Web à partir du serveur Web Arduino, le JavaScript de la page Web enverra une demande Ajax de données de l'Arduino chaque seconde.\nLa page Web hébergée par le serveur Web Arduino est affichée ici:\n\t\nPage Web hébergée par le serveur Web Arduino\nL'Arduino répondra à chaque demande Ajax en renvoyant un fichier XML au navigateur Web. Le fichier XML contient les valeurs des quatre entrées analogiques de l'Arduino (A2 à A5), l'état de trois broches (commutateurs sur les broches 2, 3 et 5) et l'état des quatre LED.\n\t\nFichier XML envoyé par Arduino\nLorsqu'une LED est allumée à partir de la page Web en cochant une case, le JavaScript enverra l'état de la case à cocher (envoyer une instruction pour allumer la LED) avec la prochaine demande Ajax. La même chose se produira si la LED est éteinte ou si l'un des boutons est utilisé pour allumer ou éteindre une LED.\nCode source\nLe code source de l'esquisse Arduino et de la page Web est un peu gros à inclure sur cette page. Il est suggéré de télécharger ces fichiers ci-dessous et de les ouvrir dans votre éditeur préféré en suivant les explications ci-dessous.\nCroquis et page Web Arduino:\n\tweb_server_IO.zip (4,7 ko)\nExécuter l'exemple\nPour exécuter cet exemple, copiez d'abord la page Web (index.htm) du téléchargement ci-dessus sur une carte micro SD. Insérez la carte micro SD dans la fente pour carte du blindage Ethernet. Le blindage Ethernet doit être branché sur une carte Arduino, connecté à votre réseau et alimenté par USB ou une alimentation externe.\nConstruisez autant de circuits que vous le souhaitez. Si vous ne connectez rien aux broches d'entrée, elles peuvent simplement basculer au hasard pendant qu'elles captent du bruit. Les entrées peuvent toujours être tirées vers le haut ou le bas via une résistance si vous ne souhaitez pas les connecter à des commutateurs ou à un potentiomètre.\nChargez l'esquisse Arduino (eth_websrv_SD_Ajax_in_out) à partir du téléchargement ci-dessus sur l'Arduino.\nNaviguez jusqu'à l'adresse IP définie dans l'esquisse à l'aide d'un navigateur Web – vous devriez voir la page Web chargée et les valeurs analogiques et les valeurs de commutation mises à jour chaque seconde.\nComment fonctionne l'exemple\nL'esquisse Arduino et la page Web sont essentiellement des versions modifiées du code des exemples précédents de ce tutoriel en plusieurs parties. Les fichiers sont des versions modifiées des exemples qui utilisent Ajax avec XML (partie 14 et partie 15).\nEntrées analogiques et numériques\nLes entrées analogiques (valeurs analogiques) et numériques (états de commutation) sont demandées et reçues de la même manière que celle expliquée dans la partie 14 de ce didacticiel, sauf que les valeurs analogiques sont toutes incluses dans les balises et les états de commutation sont tous inclus dans tags – c'est-à-dire qu'ils n'utilisent pas de noms de tag uniques pour chaque entrée.\nLorsque le JavaScript de la page Web reçoit le fichier XML de l'Arduino, il en utilise un pour boucle pour extraire les valeurs analogiques et une seconde pour boucle pour extraire les états de commutation.\nLe code JavaScript pour extraire les valeurs analogiques du fichier XML est affiché ici:"},{"id":"text-2","heading":"Text","content":"var num_an = this.responseXML.getElementsByTagName ('analog'). length;\npour (count = 0; count <num_an; count ++) \n document.getElementsByClassName ("analogique")[count].innerHTML =\n this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;"},{"id":"text-3","heading":"Text","content":"La première ligne du code ci-dessus obtient le nombre d'éléments du fichier XML inclus dans les balise et les stocke dans la variable num_an qui est ensuite utilisé dans le pour boucle pour obtenir le nombre correct de valeurs analogiques.\ndans le pour boucle, le code suivant s'empare de chaque HTML envergure qui a la classe analogique:"},{"id":"text-4","heading":"Text","content":"document.getElementsByClassName ("analogique")[count].innerHTML"},{"id":"text-5","heading":"Text","content":"Qui s'empare de chacun envergure élément dans le code HTML suivant:"},{"id":"text-6","heading":"Text","content":"A2: ...\nA3: ...\nA4: ...\nA5: ..."},{"id":"text-7","heading":"Text","content":"Cette ligne de code obtient ensuite tour à tour chaque valeur analogique du fichier XML:"},{"id":"text-8","heading":"Text","content":"this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;"},{"id":"text-9","heading":"Text","content":"Ainsi, les deux lignes de code JavaScript ci-dessus travaillant ensemble récupèrent chaque valeur analogique du fichier XML dans l'ordre dans lequel elles apparaissent dans le fichier et insèrent ces valeurs dans chaque envergure dans l'ordre où ils apparaissent dans le HTML.\nLes valeurs de commutateur fonctionnent de la même manière, mais chaque code HTML envergure avec le nom de la classe interrupteurs a une valeur du fichier XML avec la balise commutateur inséré dans l'ordre dans lequel ils apparaissent.\nLEDs\nL'Arduino garde la trace des LED allumées et des LED éteintes. Ces informations sont renvoyées dans le cadre du fichier XML en réponse à la demande Ajax qui se produit toutes les secondes.\nDans l'esquisse Arduino, le tableau suivant stocke les états des LED (stocke 1 pour la LED « allumée '' et 0 pour la LED « éteinte ''):"},{"id":"text-10","heading":"Text","content":"boolean LED_state[4] = 0; // stocke les états des LED"},{"id":"text-11","heading":"Text","content":"Ce tableau est initialisé avec des zéros – toutes les LED éteintes. Chaque élément du réseau correspond à une LED dans l'ordre de LED1 à LED4, c'est-à-dire LED_state[0] stocke l'état de la LED 1, LED_state[1] stocke l'état de la LED 2, etc.\nLED utilisant des cases à cocher\nDans le code JavaScript, les lignes de code suivantes montrent comment l'état de la LED 1 est extrait du fichier XML reçu et utilisé pour mettre à jour la case à cocher – c'est-à-dire pour la marquer comme cochée ou décochée, selon l'état de la LED."},{"id":"text-12","heading":"Text","content":"// LED 1\nif (this.responseXML.getElementsByTagName ('LED')[0].childNodes[0].nodeValue\n === "vérifié") \n document.LED_form.LED1.checked = true;"},{"id":"text-13","heading":"Text","content":"autre \n document.LED_form.LED1.checked = false;"},{"id":"text-14","heading":"Text","content":"Dans le code ci-dessus, si la première valeur (c'est-à-dire pour la LED 1) du fichier XML dans un la balise contient le texte vérifié alors la case correspondante est cochée en utilisant cette ligne de JavaScript:"},{"id":"text-15","heading":"Text","content":"document.LED_form.LED1.checked = true;"},{"id":"text-16","heading":"Text","content":"Sinon, la case n'est pas cochée.\nCela garantit que chaque navigateur qui se connecte au serveur Web Arduino affiche les états corrects des LED car ils reçoivent les états des LED chaque seconde.\nLorsqu'un utilisateur coche ou décoche une case à cocher, la prochaine demande Ajax inclura le nom et l'état de la LED avec la prochaine demande HTTP GET.\nLa fonction JavaScript GetCheck () est exécuté chaque fois qu'une case est cochée. Si la case à cocher pour la LED 1 est cochée, la valeur d'une chaîne pour la LED 1 est définie:"},{"id":"text-17","heading":"Text","content":"strLED1 = "& LED1 = 1";"},{"id":"text-18","heading":"Text","content":"Si la case n'est pas cochée, la chaîne est définie comme suit:"},{"id":"text-19","heading":"Text","content":"strLED1 = "& LED1 = 0";"},{"id":"text-20","heading":"Text","content":"La prochaine fois que GetArduinoIO () la fonction est appelée, qui se produit chaque seconde, la strLED1 la chaîne ne sera plus vide. Cette chaîne sera désormais incluse dans la requête GET:"},{"id":"text-21","heading":"Text","content":"request.open ("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4\n + nocache, vrai);"},{"id":"text-22","heading":"Text","content":"Toutes les autres chaînes de LED seront vides si une case à cocher ou un bouton n'a pas été cliqué, donc ne seront pas inclus avec la demande GET.\nAprès que la demande get se soit produite, toutes les chaînes de LED sont remises à vide:"},{"id":"text-23","heading":"Text","content":"strLED1 = "";\nstrLED2 = "";\nstrLED3 = "";\nstrLED4 = "";"},{"id":"text-24","heading":"Text","content":"Lorsque l'Arduino reçoit la demande Ajax GET, le SetLEDs () La fonction dans l'esquisse Arduino vérifie un changement d'état de la LED dans la demande GET reçue et s'il en trouve une, allumera ou éteindra la LED correspondante, puis enregistrera l'état de la LED dans le LED_state[] tableau.\nLED utilisant des boutons\nLes boutons qui contrôlent les LED fonctionnent de la même manière que les cases à cocher, sauf que chaque bouton a sa propre fonction JavaScript qui s'exécute lorsqu'un bouton est cliqué.\nLe texte sur les boutons est mis à jour pour montrer l'état des LED qu'ils contrôlent.\nLes boutons n'ont pas de propriété "vérifiée", donc l'état actuel de la LED de chaque bouton est stocké dans une variable:"},{"id":"text-25","heading":"Text","content":"var LED3_state = 0;\nvar LED4_state = 0;"},{"id":"text-26","heading":"Text","content":"Le stockage de l'état du bouton est nécessaire pour que lorsque vous cliquez à nouveau sur le bouton, il sache s'il faut mettre à jour la chaîne envoyée avec la demande GET pour allumer ou éteindre la LED.\nLorsque l'Arduino envoie l'état des LED dans le fichier XML qui sont contrôlées par les boutons, il insère "on" ou "off" entre les balises au lieu de "coché" ou "non coché" comme pour les cases à cocher.\nCSS\nLe CSS utilisé dans cet exemple place chaque ensemble d'entrées ou de sorties dans leurs propres cases avec une bordure bleue. Il positionne également les boîtes les unes à côté des autres. Si la fenêtre du navigateur est redimensionnée sur sa largeur, les cases de droite se déplaceront sous les cases de gauche.\nLe CSS dans cette partie du tutoriel ne sera pas expliqué ici, mais sera expliqué dans les prochaines parties de ce tutoriel où nous regardons plus de CSS."},{"id":"text-27","heading":"Text","content":"Veuillez activer JavaScript pour afficher les commentaires fournis par Disqus."},{"id":"text-28","heading":"Text","content":"Click to rate this post!\n \n [Total: 0 Average: 0]"}],"media":{"primary_image":""},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2020/04/20/entree-et-sortie-du-serveur-web-arduino-serveur-dimpression/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/04/20/entree-et-sortie-du-serveur-web-arduino-serveur-dimpression/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/04/20/entree-et-sortie-du-serveur-web-arduino-serveur-dimpression/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://tutos-gameserver.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}