Serveur d'impression

Arduino Web Server et contrôle des voyants de la page Web à l'aide du bouton HTML et du bouton-poussoir physique – Serveur d’impression

Le 12 octobre 2019 - 15 minutes de lecture

Créé le: 13 avril 2015

Ce projet de carte de visite Arduino utilise un blindage Arduino Uno et Arduino Ethernet avec une carte SD en tant que serveur Web. Deux boutons poussoirs et deux DEL sont connectés à l’Arduino.

La page Web hébergée par le serveur Web Arduino permet à une LED d'être contrôlée par une case à cocher et à l'autre par un bouton HTML sur la page Web.

Les deux mêmes DEL sont également contrôlées par deux boutons-poussoirs. Lorsqu'une LED est allumée ou éteinte à partir de la page Web, son état est visible dans la case à cocher ou dans le texte du bouton.

La case à cocher et le texte du bouton sont également mis à jour si vous appuyez sur les boutons physiques pour allumer ou éteindre les voyants. Ajax est utilisé sur la page Web afin que les mises à jour de cette page soient exemptes de tout scintillement.

La vidéo ci-dessous montre le circuit exploité à partir du navigateur Web sur un téléphone Android connecté au réseau via WiFi. Un navigateur sur un PC connecté au réseau via WiFi ou par câble fonctionnera également.

Le schéma de circuit

Les connexions des boutons-poussoirs et des voyants sont indiquées dans le schéma de circuit ci-dessous.

Arduino Web Server Switch et connexions LED

Arduino Web Server Switch et connexions LED

Le matériel se compose de deux boutons-poussoirs tactiles momentanés et de deux voyants connectés à l’Arduino avec Ethernet Shield. Les commutateurs ont des résistances de 10kΩ chacune et les LED ont des résistances de limitation de courant de 470Ω.

Code Arduino et page HTML

Téléchargez le code compressé ici ou copiez et collez ci-dessous.

Esquisse Arduino et page HTML compressée: web_server_hw_button_pg_button.zip (4.8kB)

Arduino Sketch

L'esquisse Arduino consiste en une version modifiée du code de la partie 16 du tutoriel du serveur Web Arduino sur le serveur Web Ajax I / O.

/ * ---------------------------------------------------- --------------
  Programme: web_server_hw_button_pg_button

  Description: serveur Web Arduino permettant à deux voyants
                contrôlée par une case à cocher, un bouton HTML et deux
                boutons-poussoirs matériels.
                La page Web est stockée sur la carte micro SD.
  
  Matériel: Arduino Uno et Arduino Ethernet officiel
                bouclier. Devrait fonctionner avec d’autres Arduinos et
                boucliers Ethernet compatibles.
                Carte micro SD de 2 Go formatée FAT16.
                LED sur les broches 6 et 7.
                Active les broches 2 et 3.
                
  Logiciel: développé à l'aide du logiciel Arduino 1.6.1
                Devrait être compatible avec Arduino 1.0 +
                La carte SD contient une page Web appelée index.htm
  
  Références: - Basé sur l'exemple Ajax I / O de Starting
                  Électronique:
                  http://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-IO/
                  
                - Basculer le mode anti-rebond à partir du code exemple Arduino IDE
                  Fichier -> Exemples -> 02.Digital -> Debounce
                  http://www.arduino.cc/en/Tutorial/Debounce

  Date: 13 avril 2015
 
  Auteur: W.A. Smith, http://startingelectronics.org
-------------------------------------------------- ------------ * /

#include <SPI.h>
#include <Ethernet.h>
#include <Dakota du Sud.h>
// taille de la mémoire tampon utilisée pour capturer les requêtes HTTP
#define REQ_BUF_SZ 60

// adresse MAC de l'autocollant du bouclier Ethernet sous la carte
octet Mac[] = 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED;
Adresse IP ip (192, 168, 0, 20); // adresse IP, il peut être nécessaire de changer en fonction du réseau
EthernetServer serveur (80);  // crée un serveur sur le port 80
Fichier webFile;               // le fichier de page Web sur la carte SD
carboniser HTTP_req[REQ_BUF_SZ] = 0; // requête HTTP en mémoire tampon stockée sous forme de chaîne terminée par un caractère null
carboniser req_index = 0;              // index dans le tampon HTTP_req
booléen LED_state[2] = 0; // stocke les états des LED

vide installer()

    // désactiver la puce Ethernet
    pinMode(dix, SORTIE)
    digitalWrite(dix, HAUTE)
    
    En série.commencer(9600);       // pour le débogage
    
    // initialise la carte SD
    En série.imprimer("Initialisation de la carte SD ...")
    si (!Dakota du Sud.commencer(4)) 
        En série.imprimer("ERREUR - L'initialisation de la carte SD a échoué!")
        revenir;    // l'initialisation a échoué
    
    En série.imprimer("SUCCESS - Carte SD initialisée.")
    // vérifier le fichier index.htm
    si (!Dakota du Sud.existe("index.htm")) 
        En série.imprimer("ERREUR - Impossible de trouver le fichier index.htm!")
        revenir;  // impossible de trouver le fichier d'index
    
    En série.imprimer("SUCCESS - Fichier index.htm trouvé.")
    // commutateurs
    pinMode(2, CONTRIBUTION)
    pinMode(3, CONTRIBUTION)
    // LED
    pinMode(6, SORTIE)
    pinMode(sept, SORTIE)
    
    Ethernet.commencer(mac, ip);  // initialise le périphérique Ethernet
    serveur.commencer();           // commence à écouter les clients


vide boucle()
{
    EthernetClient client = serveur.disponible();  // essaie d'obtenir un client

    si (client) {  // client obtenu?
        booléen currentLineIsBlank = vrai;
        tandis que (client.lié()) {
            si (client.disponible()) {   // données client disponibles à lire
                carboniser c = client.lis(); // lit 1 octet (caractère) du client
                // limite la taille de la requête HTTP reçue stockée
                // tampon la première partie de la requête HTTP dans un tableau HTTP_req (chaîne)
                // laisse le dernier élément du tableau sous la forme 0 à une chaîne de terminaison nulle (REQ_BUF_SZ - 1)
                si (req_index <(REQ_BUF_SZ - 1)) 
HTTP_req[req_index] = C;          // sauvegarde le caractère de la requête HTTP
                    req_index ++;

                // la dernière ligne de la demande du client est vide et se termine par  n
                // répond au client seulement après la dernière ligne reçue
                si (c == ' n' && currentLineIsBlank) 
                    // envoie un en-tête de réponse http standard
                    client.imprimer("HTTP / 1.1 200 OK")
                    // le reste de l'en-tête suit ci-dessous, selon si
                    // une page Web ou une page XML est demandée
                    // demande Ajax - envoi d'un fichier XML
                    si (StrContains (HTTP_req, "ajax_inputs")) 
                        // envoie le reste de l'en-tête HTTP
                        client.imprimer("Content-Type: text / xml")
client.imprimer("Connexion: garder en vie")
client.imprimer();
SetLEDs ();
                        // envoie un fichier XML contenant des états d'entrée
                        Réponse XML (client);

                    autre   // demande de page Web
                        // envoie le reste de l'en-tête HTTP
                        client.imprimer("Content-Type: text / html")
client.imprimer("Connexion: garder en vie")
client.imprimer();
                        // envoyer une page Web
                        webFile = Dakota du Sud.ouvert("index.htm")        // ouvrir un fichier de page Web
                        si (webFile) 
                            tandis que(webFile.disponible()) 
client.écrire(webFile.lis()); // envoyer une page Web au client
                            
webFile.proche();


                    // affiche la requête HTTP reçue sur le port série
                    En série.impression(HTTP_req);
                    // réinitialise l'index du tampon et tous les éléments du tampon à 0
                    req_index = 0;
StrClear (HTTP_req, REQ_BUF_SZ);
                    Pause;

                // chaque ligne de texte reçue du client se termine par  r  n
                si (c == ' n') 
                    // dernier caractère sur la ligne du texte reçu
                    // commence une nouvelle ligne avec le caractère suivant lu
                    currentLineIsBlank = vrai;
 
                autre si (c! = ' r') 
                    // un caractère de texte a été reçu du client
                    currentLineIsBlank = faux;

} // fin si (client.available ())
        } // fin tout le temps (client.connected ())
        retard(1);      // donne le temps au navigateur Web pour recevoir les données
        client.Arrêtez(); // ferme la connexion
    } // fin si (client)
    
    // lire les boutons et les rebonds
    ButtonDebounce ();
}

// la fonction lit les états des commutateurs à bouton-poussoir, les affiche et verrouille les états des voyants
// bascule les états des voyants à chaque cycle push-release
// codé en dur pour faire rebondir deux commutateurs sur les broches 2 et 3; et deux LED sur les broches 6 et 7
// fonction adaptée de l'exemple intégré Arduino IDE:
// Fichier -> Exemples -> 02.Digital -> Debounce
vide ButtonDebounce (vide)
{
    statique octet buttonState[2]     = FAIBLE, FAIBLE;   // la lecture actuelle de la broche d'entrée
    statique octet lastButtonState[2] = FAIBLE, FAIBLE;   // la lecture précédente de la broche d'entrée
    
    // les variables suivantes sont longues car le temps, mesuré en millisecondes,
    // deviendra rapidement un nombre plus grand que ce qui peut être stocké dans un int.
    statique longue lastDebounceTime[2] = 0;  // la dernière fois que la broche de sortie a été basculée
    longue debounceDelay = 50;         // le temps de rebond; augmenter si la sortie scintille
  
    octet en train de lire[2];

en train de lire[0] = numériqueLire(2);
en train de lire[1] = numériqueLire(3);
    
    pour (int i = 0; i <2; i ++) 
        si (en train de lire[i] ! = lastButtonState[i]) 
            // réinitialiser le minuteur anti-rebond
            lastDebounceTime[i] = millis();

      
        si ((millis() - lastDebounceTime[i])> debounceDelay) 
            // peu importe la lecture, ça fait plus longtemps
            // que le délai anti-rebond, considérons-le comme l'état actuel:
        
            // si l'état du bouton a changé:
            si (en train de lire[i] ! = buttonState[i]) 
buttonState[i] = Lecture[i];
          
                // n'inclue la LED que si le nouvel état du bouton est HIGH
                si (buttonState[i] == HAUTE) 
LED_state[i] =! LED_state[i];



 // fin de la boucle ()
    
    // régler les voyants
    digitalWrite(6, LED_state[0])
    digitalWrite(7, LED_state[1])
      
    // sauvegarde la lecture. La prochaine fois dans la boucle,
    // ce sera le lastButtonState:
    lastButtonState[0] = Lecture[0];
lastButtonState[1] = Lecture[1];
}

// vérifie si la requête HTTP reçue allume / éteint les voyants
// enregistre également l'état des voyants
vide SetLEDs (vide)

    // LED 1 (broche 6)
    si (StrContains (HTTP_req, "LED1 = 1")) 
LED_state[0] = 1;  // enregistrer l'état de la LED
        digitalWrite(6, HAUTE)

    autre si (StrContains (HTTP_req, "LED1 = 0")) 
LED_state[0] = 0;  // enregistrer l'état de la LED
        digitalWrite(6, FAIBLE)

    // LED 2 (broche 7)
    si (StrContains (HTTP_req, "LED2 = 1")) 
LED_state[1] = 1;  // enregistrer l'état de la LED
        digitalWrite(sept, HAUTE)

    autre si (StrContains (HTTP_req, "LED2 = 0")) 
LED_state[1] = 0;  // enregistrer l'état de la LED
        digitalWrite(sept, FAIBLE)



// envoie le fichier XML avec des valeurs analogiques, changez le statut
// et statut de la LED
vide XML_response (EthernetClient cl)

    int analog_val;            // stocke la valeur lue des entrées analogiques
    int compter;                 // utilisé par les boucles 'pour'
    int sw_arr[] = 2, 3;  // broches interfacées avec des commutateurs
    
    cl.impression("")
cl.impression("")
    // Etat de la case à cocher
    // LED1
    cl.impression("")
    si (LED_state[0]) 
cl.impression("vérifié")

    autre 
cl.impression("décoché")

cl.imprimer("")
    // états de la LED du bouton
    // LED3
    cl.impression("")
    si (LED_state[1]) 
cl.impression("sur")

    autre 
cl.impression("de")

cl.imprimer("")
cl.impression("")


// met tous les éléments de str à 0 (efface le tableau)
vide StrClear (carboniser * str, carboniser longueur)

    pour (int i = 0; je < longueur; i ++) 
str[i] = 0;



// recherche la chaîne sfind dans la chaîne str
// retourne 1 si une chaîne est trouvée
// retourne 0 si la chaîne est introuvable
carboniser StrContains (carboniser * str, carboniser * sfind)

    carboniser trouvé = 0;
    carboniser indice = 0;
    carboniser len;

len = strlen (str);
    
    si (strlen (sfind)> len) 
        revenir 0;

    tandis que (index <len) 
        si (str[index] == sfind[found]) 
trouvé ++;
            si (strlen (sfind) == trouvé) 
                revenir 1;


        autre 
trouvé = 0;

index ++;


    revenir 0;


Page HTML avec CSS et JavaScript intégrés

Le code ci-dessous doit être copié dans un fichier appelé index.htm et le fichier index.htm doit être copié sur une carte micro SD à insérer dans la fente pour carte du bouclier Arduino.

Le code HTML avec CSS et JavaScript incorporés consiste en une version modifiée du code de la partie 16 du tutoriel du serveur Web Arduino sur le serveur Web Ajax I / O.

    
        Arduino Ajax LED Button Control
        
    
    
    
        

Arduino Ajax LED Button Control

LED utilisant la case à cocher

LED 1 (D6)

LED utilisant le bouton



Comment fonctionne le code

Le code Arduino et la page HTML ont été copiés à partir de la partie 16 du didacticiel du serveur Web Arduino et modifiés.

Le code a été nettoyé

Tous les codes inutiles pour les entrées analogiques, les cases à cocher et les boutons supplémentaires ont été supprimés des codes HTML, JavaScript et Arduino. Le code qui contrôle le voyant 2 a été modifié pour utiliser un bouton HTML.

À ce stade, les deux voyants peuvent être contrôlés à l'aide d'une case à cocher sur la page Web hébergée sur Arduino pour le premier voyant et d'un bouton sur la page HTML pour le deuxième voyant.

Ajout du code de contrôle du bouton physique

Rien de plus ne devait être modifié dans le code HTML / JavaScript pour les commutateurs matériels car les états des voyants étaient déjà renvoyés à la page Web à l'aide de Ajax. L'ajout de deux boutons poussoirs physiques pour contrôler les voyants mettrait à jour les états mémorisés des voyants dans l'Arduino, qui seraient ensuite envoyés à la page Web lors de la prochaine demande Ajax.

Basculer le rebondissement et le verrouillage

Les boutons-poussoirs momentanés ne se verrouillent pas. En appuyant sur le bouton, vous fermez le circuit. Relâchez le bouton. Le circuit s'ouvre à nouveau. Les contacts ne restent jamais fermés, mais restent ouverts lorsque le bouton est relâché.

Les boutons, commutateurs et relais ont tous un rebond de contact. C’est-à-dire que lorsque les contacts du commutateur sont fermés, ils ne se ferment pas proprement et restent fermés, mais rebondissent plutôt pendant un court laps de temps.

Par rebond, nous voulons dire qu’ils se ferment initialement, puis rebondissent, puis se referment, puis s’ouvrent et se referment plusieurs fois avant de s’installer. Ce rebond ne sera pas perçu si le commutateur est utilisé dans un circuit qui allume directement une lumière, mais sera détecté par un microcontrôleur fonctionnant à plusieurs mégahertz.

Les commutateurs peuvent être "traités" à l'aide d'un logiciel qui attend que les contacts du commutateur soient réglés.

Il existe déjà quelques logiciels dans les exemples intégrés Arduino IDE qui permettent de transformer un commutateur à bouton-poussoir momentané en un commutateur à verrouillage et de supprimer simultanément les contacts du commutateur.

L'exemple peut être trouvé dans le menu Arduino IDE: Fichier → Exemples → 02. Numérique → Debounce

Lorsque cet exemple de code est chargé sur l’Arduino, appuyez et relâchez une fois le commutateur à bouton-poussoir pour allumer un voyant. Appuyer et relâcher une seconde fois le bouton-poussoir éteint la DEL.

Dans le code Arduino de ce projet, l’IDE ​​Arduino Debounce exemple de code est utilisé dans la fonction ButtonDebounce () faire rebondir et verrouiller les deux boutons-poussoirs et basculer les états des voyants.

Le code est modifié pour gérer deux boutons poussoirs et deux voyants en convertissant les variables du code en tableaux bidimensionnels et en utilisant un élément du tableau par paire de boutons poussoirs / voyants.

Mise à jour des états des voyants sur la page Web

Le tableau LED_state[] conserve les états actuels des deux voyants et est modifié par le ButtonDebounce () une fonction. Ce même tableau est également modifié par la case à cocher et le bouton HTML de la page Web dans la SetLEDs () une fonction.

Lorsque vous appuyez sur un bouton physique ou que vous cliquez sur la case à cocher ou le bouton HTML sur la page Web, l’état de la DEL est mis à jour dans LED_state[] tableau.

La prochaine fois que la page Web effectue une demande Ajax, le voyant indique LED_state[] sont utilisés pour mettre à jour le fichier XML qui est renvoyé à la page Web lorsque le XML_response () la fonction est appelée.

Ceci met à jour la case à cocher pour cocher ou décocher et le texte du bouton HTML pour ON ou OFF.

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.