Boutons HTML pour le serveur web ESP

Bonjour et bienvenue à notre contribution d’aujourd’hui.

Après hier, il s’agissait de HTML et les parenthèses carrées, aujourd’hui, nous voulons regarder ce que vous pouvez mettre en œuvre avec un peu de HTML et un petit script.

Pour cela, nous avons besoin des composants suivants :

Un microcontrôleur avec une puce ESP8266 Amica V2
Un module relais tel que notre Module à 2 relais
Un Module d’étape-up DC-DC, comme l’Amica ne délivre que 3.3V, mais notre relais nécessite 5V
Une planche à pain avec câble de cavalier, comme notre populaire Ensemble

Bien sûr, vous pouvez également fournir le module de relais directement avec un 5V, et enregistrer le module step-up. Cela est plus logique pour un projet terminé dans un logement, car l’Amica peut également être fourni avec la même alimentation.

Comment utiliser et définir le module step-up que nous avons déjà dans notre blog "MT3608 Step-Up DC-DC Voltage Regulator" décrit.

Nous connectons les composants comme suit :

Le dernier message a discuté de la façon dont nous connectons l’ESP à un réseau Wi-Fi existant, et comment nous répondons à une demande du navigateur, y compris la sortie d’un petit fichier HTML.

J’ai mentionné dans certaines balises HTML que ceux-ci depuis HTML5 ne devrait plus être utilisé. Dans les sites Web modernes, le design est souvent réalisé au moyen de feuilles de style en cascade (CSS).

Avant que tout le monde ne s’enfuie avec la crainte qu’un cours CSS soit à venir, il convient de mentionner qu’il est possible de concevoir de beaux boutons, textes, curseurs et formes à l’aide de CSS.

Si vous recherchez des « boutons css » dans la recherche d’images Google, certains exemples apparaîtront.

Maintenant, il s’agit de la mise en œuvre - quel code téléchargeons-nous sur notre ESP?

En tant que base, nous prenons le code du tutoriel de https://randomnerdtutorials.com/esp8266-web-server/et ajuster le code :

/*********
 Rui Santos
 Détails complets du projet à http://randomnerdtutorials.com  
*********/

Nous téléchargeons la bibliothèque WiFi déjà connue de nous
#include <ESP8266WiFi.H (en)>

Ici, nous entrons dans le nom WLAN (SSID) et la clé zugans
Const Char Char* Ssid     = "MyFritzBox";
Const Char Char* mot de passe = "MyWIWlanKey";

Nous avons mis le serveur web au port 80
WiFiServer (en) Serveur(80);

Une variable pour stocker la demande HTTP
String En-tête;

Ici, l’état actuel du relais est enregistré
String output5State = "off";
String output4State = "off";

Les broches gPIO utilisées
D1 - GPIO5 et D2 GPIO4 - il suffit de rechercher google pour "Amica Pinout"  
Const Int sortie5 = 5;
Const Int sortie4 = 4;

Vide Configuration() {   Série.Commencer(115200);   Définir les broches GPIO définies comme sortie ...   pinMode(sortie5, Sortie);   pinMode(sortie4, Sortie);   // ... et d’abord mis à LOW   digitalWrite (en)(sortie5, Faible);   digitalWrite (en)(sortie4, Faible);   Connectez-vous au réseau via Wi-Fi   Série.Imprimer("Connexion à ");   Série.println(Ssid);   Wifi.Commencer(Ssid, mot de passe);   Tandis que (Wifi.Statut() != WL_CONNECTED) {     Retard(500);     Série.Imprimer(".");   }   Sortie de l’IP du serveur web au moniteur de série   Série.println("");   Série.println("Wi-Fi connecté.");   Série.println("Adresse IP: ");   Série.println(Wifi.localIP());   Serveur.Commencer();
}

Vide Boucle(){   WiFiClient (WiFiClient) Client = Serveur.Disponible();   Écoute les demandes des clients   Si (Client) {                             Si un nouveau client se connecte,     Série.println("Nouveau client.");          Sortie au moniteur de série     String currentLine (en anglais) = "";                créer une chaîne avec les données entrantes du client     Tandis que (Client.Connecté()) {            répéter tant que le client est connecté       Si (Client.Disponible()) {             Cas un byte pour la lecture est là,         Char Char C = Client.Lire();             lire le byte, puis         Série.Écrire(C);                    sur le moniteur de série.         En-tête += C;         Si (C == 'n') {                    si le byte est une nouvelle ligne Char           si la ligne actuelle est vide, 2 sont venus dans l’ordre.           c’est la fin de la demande HTTP du client, donc nous allons envoyer une réponse:           Si (currentLine (en anglais).Longueur() == 0) {             Les en-têtes HTTP commencent toujours par un code de réponse (p. ex. HTTP/1.1 200 OK)             suivi par le type de contenu afin que le client sache ce qui suit, suivi d’une ligne blanche:             Client.println("HTTP/1.1 200 OK");             Client.println("Type de contenu:texte/html");             Client.println("Connexion: fermer");             Client.println();                          Ici, les broches GPIO sont allumées ou désactivées             Si (En-tête.Indexof("GET /5/on") >= 0) {               Série.println("GPIO 5 sur");               output5State = "sur";               digitalWrite (en)(sortie5, Haute);             } Autre Si (En-tête.Indexof("GET /5/off") >= 0) {               Série.println("GPIO 5 off");               output5State = "off";               digitalWrite (en)(sortie5, Faible);             } Autre Si (En-tête.Indexof("GET /4/on") >= 0) {               Série.println("GPIO 4 sur");               output4State = "sur";               digitalWrite (en)(sortie4, Haute);             } Autre Si (En-tête.Indexof("GET /4/off") >= 0) {               Série.println("GPIO 4 off");               output4State = "off";               digitalWrite (en)(sortie4, Faible);             }                          La page HTML est maintenant affichée ici :             Client.println("Lt;! DOCTYPE html-gt;lt;html-gt;");             Client.println("Lt;head’gt;lt;meta name"viewport"" content ''largeur’largeur de l’appareil, échelle initiale'1"gt;");             Client.println("Lt;link rel"icon"" href"data:,");             Suivez le code CSS pour concevoir les boutons on/off             Ici, vous pouvez ajuster la couleur de fond (couleur de fond) et la taille de police (font-taille)             Client.println("Lt;style’gt;html - police-famille: Helvetica; affichage: bloc en ligne; marge: 0px auto; text-align: centre;");             Client.println(".button - couleur de fond: #333344; frontière: aucun; couleur: blanc; rembourrage: 16px 40px;");             Client.println("texte-décoration: aucun; fonte: 30px; marge: 2px; curseur: pointeur;");             Client.println(".button2 "couleur de fond: #888899; Lt;/style 'lt;/head’gt;");                          Titre du site Web             Client.println("Lt;body’lt;lt;ht;h1'gt;ESP8266 Web Server’lt;/h1'gt;");                          Afficher l’état actuel, et les boutons AN/OFF pour GPIO 5               Client.println("Lt;p’gt;GPIO 5 - Etat " + output5State + "Lt;/p’gt;");             si la sortie5State - off, afficher le bouton ON                    Si (output5State=="off") {               Client.println("lt;p’gt;lt;a href'"/5/on"'lt;lt;button class'"button"''''on’lt;/button’lt;/a’lt;/a’lt;/p’gt;");             } Autre {               Client.println("lt;p’gt;lt;a href'"/5/off"'gt;lt;button class'"button button2"'gt;OFF’lt;/button’lt;/a’lt;/a’gt;/p’gt;");             }                              La même chose pour GPIO 4             Client.println("Lt;p’gt;GPIO 4 - Etat " + output4State + "Lt;/p’gt;");             Si la sortie4State - off, afficher le bouton ON                    Si (output4State=="off") {               Client.println("lt;p’gt;lt;a href'"/4/on"'lt;lt;button class'"button"''''on’lt;/button’lt;/a’lt;/a’lt;/p’gt;");             } Autre {               Client.println("lt;p’gt;lt;a href'"/4/off"'gt;lt;button class'"button button2"'gt;OFF’lt;/button’lt;/a’lt;/a’gt;/p’gt;");             }             Client.println("Lt;/corps 'lt;/html’gt;");                          La réponse HTTP se termine par une ligne blanche             Client.println();             et nous quittons la boucle avec une pause             Pause;           } Autre { si une nouvelle ligne vient, supprimez la ligne actuelle             currentLine (en anglais) = "";           }         } Autre Si (C != 'A’r') {  si quelque chose vient qui n’est pas un bris de ligne,           currentLine (en anglais) += C;      l’attacher à la fin de currentLine         }       }     }     Supprimer la variable d’en-tête pour la prochaine passe     En-tête = "";     Fermeture de la connexion     Client.Arrêter();     Série.println("Client déconnecté.");     Série.println("");   }
}

Nous chargeons le code sur notre Amica, et ouvrons le moniteur de série dans l’IDE Arduino:

Ensuite, nous entrons l’adresse IP du serveur dans le navigateur, par exemple sur le téléphone mobile. (Attention, le PC ou le smartphone doit être connecté au même réseau que l’ESP).

Maintenant, nous pouvons facilement passer les relais à partir du smartphone (ou PC).

Et si vous regardez autour de l’Internet, vous pouvez également trouver des boutons plus agréables, tels que ceux-ci:

Le code HTML et le code CSS pour ces boutons sont disponibles à http://jsfiddle.net/tovic/ve8mU/light/

J’espère que cet article vous a donné un aperçu des possibilités du serveur web ESP.

Si vous avez aimé ce post, je serais heureux de recevoir un bref retour. Il suffit de nous écrire si vous seriez intéressé par le sujet SVG pour afficher des barres et de petits graphiques vectoriels avec le serveur web ESP.

Je vous souhaite beaucoup de plaisir à recréer et dire au revoir à l’article suivant.