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