Entrée et sortie du serveur Web Arduino – Serveur d’impression

Créé le: 5 avril 2013

Partie 16 du didacticiel du serveur Web Arduino Ethernet Shield

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

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

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

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

Schéma du circuit d'E / S du serveur Web

Le schéma de circuit de cette partie du didacticiel est illustré ici:

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

Présentation du fonctionnement du serveur Web

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

La page Web hébergée par le serveur Web Arduino est affichée ici:

Page Web hébergée par le serveur Web Arduino

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

Fichier XML envoyé par Arduino

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

Code source

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

Croquis et page Web Arduino:

web_server_IO.zip (4,7 ko)

Exécuter l'exemple

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

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

Chargez l'esquisse Arduino (eth_websrv_SD_Ajax_in_out) à partir du téléchargement ci-dessus sur l'Arduino.

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

Comment fonctionne l'exemple

L'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).

Entrées analogiques et numériques

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

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

Le code JavaScript pour extraire les valeurs analogiques du fichier XML est affiché ici:

var num_an = this.responseXML.getElementsByTagName ('analog'). length;
pour (count = 0; count <num_an; count ++) 
    document.getElementsByClassName ("analogique")[count].innerHTML =
        this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;

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.

dans le pour boucle, le code suivant s'empare de chaque HTML envergure qui a la classe analogique:

document.getElementsByClassName ("analogique")[count].innerHTML

Qui s'empare de chacun envergure élément dans le code HTML suivant:

A2: ...
A3: ...
A4: ...
A5: ...

Cette ligne de code obtient ensuite tour à tour chaque valeur analogique du fichier XML:

this.responseXML.getElementsByTagName ('analogique')[count].childNodes[0].nodeValue;

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.

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

LEDs

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

Dans l'esquisse Arduino, le tableau suivant stocke les états des LED (stocke 1 pour la LED «  allumée '' et 0 pour la LED «  éteinte ''):

boolean LED_state[4] = 0; // stocke les états des LED

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.

LED utilisant des cases à cocher

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

// LED 1
if (this.responseXML.getElementsByTagName ('LED')[0].childNodes[0].nodeValue
                                                             === "vérifié") 
    document.LED_form.LED1.checked = true;

autre 
    document.LED_form.LED1.checked = false;

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:

document.LED_form.LED1.checked = true;

Sinon, la case n'est pas cochée.

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

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

La 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:

strLED1 = "& LED1 = 1";

Si la case n'est pas cochée, la chaîne est définie comme suit:

strLED1 = "& LED1 = 0";

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:

request.open ("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4
                                                                + nocache, vrai);

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.

Après que la demande get se soit produite, toutes les chaînes de LED sont remises à vide:

strLED1 = "";
strLED2 = "";
strLED3 = "";
strLED4 = "";

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.

LED utilisant des boutons

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

Le texte sur les boutons est mis à jour pour montrer l'état des LED qu'ils contrôlent.

Les 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:

var LED3_state = 0;
var LED4_state = 0;

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.

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

CSS

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

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