Nicer change pour notre projet de relais de serveur web ESP

Bonjour et bienvenue à notre blog aujourd’hui, où nous continuons le sujet des serveurs web sur l’ESP.

Nous avons eu quelques lecteurs qui travaillent dur qui ont essayé les boutons de notre poste précédent au serveur web ESP dans leur code. Malheureusement, en vain.

Pour quelqu’un qui vient de commencer à programmer des microcontrôleurs et a peu ou pas d’expérience avec HTML, et est alors aussi inondé de code CSS, c’est très déroutant.

Lorsque tous les trois sont combinés dans un document texte, il devient rapidement déroutant.

Mais ne vous découragez pas par elle. Je vais vous montrer aujourd’hui à quoi ressemble le code de travail avec les beaux boutons. Je me suis délibérément abstenu de garder le code compact afin qu’il puisse être lu un peu mieux.

Cependant, vous verrez rapidement comment élaborer le code source peut devenir, même si nous voulons seulement changer l’apparence de 2 boutons à la fin.

Notre objectif aujourd’hui est donc de le changer :

Ici pour la comparaison les deux esquisses:

Comme vous pouvez facilement le voir, la conception des boutons à l’aide de CSS seul prend une grande partie de l’ajustement. Cependant, la plupart des lecteurs avaient maîtrisé cette partie.

La partie des boutons qui donne la fonctionnalité s’est avérée difficile. Cela n’a pas été implémenté dans le code HTML sur la page d’échantillon pour les boutons.
C’est probablement avec la plupart des modèles et des exemples que vous trouverez sur les boutons et autres éléments sur le net. D’où une brève explication de la façon de le faire en utilisant notre code d’origine. Comme toujours, il existe de nombreuses solutions qui mènent à l’objectif, et celui que j’ai montré n’est certainement pas le plus simple ou le plus élégant.

Les boutons que nous avons utilisés jusqu’à présent peuvent voir si seulement réduit sur le bouton, comme le code HTML comme suit:

'lt;a href'"/5/on"'lt;lt;button '"button" ''''''on’lt;/button’lt;/a’gt;

Dans l’exemple sur http://jsfiddle.net/tovic/ve8mU/light/est comme code HTML pour un bouton:

La classe de lt;span " bascule "gt;
type d’entrée "checkbox".; 
données d’étiquettes-offs"Stop" data-on-"Play".lt;/label’gt;
Lt;/span’gt;

Il n’y a donc aucune possibilité de définir un lien à l’aide de l’étiquette de lt;a-gt; parce que l’ensemble est une case à cocher, et il change l’état en un seul clic, mais ne communique pas avec le serveur. C’est parce que ces boîtes de sélection sont généralement utilisées pour les formulaires où vous remplissez un formulaire et se terminent en cliquant sur un bouton (par exemple "Soumettre") au serveur.

Pour que quelque chose se produise immédiatement lorsque nous cliquons, nous devons utiliser onclick.'window.location.assign() et spécifier entre les parenthèses l’URL pour appeler :

La classe de lt;span " bascule "gt;
'lt;input type'"checkbox" onclick.'window.location.assign ('/4/EIN')'gt;
données d’étiquettes-offs"OFF" data-on-"ON".'lt;/label’gt;
Lt;/span’gt;

Et au cas où le bouton est sur "ON":

La classe de lt;span " bascule "gt;
"lt;input type" onclick''window.location.assign(/"4/OFF")" vérifiée’gt; 'lt;label data-off'"OFF" data-on'"ON"''lt;/label’gt;
Lt;/span’gt;

Sur la seconde, nous avons encore mis le 'lt;input’gt; objet à "vérifié".

Le code complet et révisé ressemblera à ceci :

/*********
 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     = "YourWLANName";
Const Char Char* mot de passe = "Votre WLANKey";

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("OBTENEZ /5/ON") >= 0) {               Série.println("GPIO 5 SUR");               output5State = "SUR";               digitalWrite (en)(sortie5, Haute);             } Autre Si (En-tête.Indexof("OBTENEZ /5/OFF") >= 0) {               Série.println("GPIO 5 OFF");               output5State = "OFF";               digitalWrite (en)(sortie5, Faible);             } Autre Si (En-tête.Indexof("OBTENEZ /4/ON") >= 0) {               Série.println("GPIO 4 SUR");               output4State = "SUR";               digitalWrite (en)(sortie4, Haute);             } Autre Si (En-tête.Indexof("OBTENEZ /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’device-largeur, initial-scale'1"'gt; 'lt;title’gt;Amica WebServer’lt;/title’gt;");             Client.println("Lt;link rel"icon"" href"data:,");                          Suivez le code CSS pour concevoir les boutons on/off                          Client.println("Lt;style’gt; corps ");             Client.println(" police-famille:Helvetica;");             Client.println(" fond-couleur:#eee;");             Client.println(" texte-align:centre;");             Client.println(" rembourrage:85px 0;");             Client.println("}");             Client.println("");             Client.println(".toggle ");             Client.println(" position:relative;");             Client.println(" affichage:inline-bloc;");             Client.println(" largeur:80px;");             Client.println(" hauteur:120px;");             Client.println(" fond-couleur:#bbb;");             Client.println(" -webkit-border-radius:4px;");             Client.println(" -moz-border-radius:4px;");             Client.println(" border-radius:4px;");             Client.Println Println("text-align:centre;");             Client.Println Println("}");             Client.Println Println("");             Client.Println Println(".toggle entrée");             Client.Println Println("largeur:100%;");             Client.Println Println("Hauteur:100%;");             Client.Println Println(" marge:0 0;");             Client.Println Println(" rembourrage:0 0;");             Client.Println Println("position:absolue;");             Client.Println Println("top:0;");             Client.Println Println("droit:0;");             Client.Println Println("bottom:0;");             Client.Println Println("gauche:0;");             Client.Println Println("z-index:2;");             Client.Println Println("cursor:pointer;");             Client.Println Println("opacité:0;");             Client.Println Println("filtre:alpha(opacité 0);");             Client.Println Println("}");             Client.Println Println("");             Client.Println Println(".étiquette de bascule "");             Client.Println Println("display:block;");             Client.Println Println("position:absolue;");             Client.Println Println("top:1px;");             Client.Println Println("droit:1px;");             Client.Println Println("bottom:1px;");             Client.Println Println("gauche:1px;");             Client.Println Println(" background-image:-webkit-linear-gradient (top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println Println(" background-image:-moz-linear-gradient (top,#fff 0%,#ddd 50%,#fff50%,#eee 100%);");             Client.Println Println(" image de fond:-ms-linear-gradient (top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println Println(" image de fond:-o-linear-gradient (haut,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println Println(" image de fond : gradient linéaire (haut,#fff 0%, #ddd 50%, #fff 50%,#eee 100%);");             Client.Println Println(" -webkit-box-shadow:0 2px 3px rgba (0,0,0,4),");             Client.Println Println("encart 0 -1px 1px #888,");             Client.Println Println("encart 0 -5px 1px #bbb,");             Client.Println Println(" encart 0 -6px 0 blanc;");             Client.Println Println(" -moz-box-ombre:0 2px 3px rgba (0,0,0,4),");             Client.Println Println("encart 0 -1px 1px #888,");             Client.Println Println("encart 0 -5px 1px #bbb,");             Client.Println Println(" encart 0 -6px 0 blanc;");             Client.Println Println(" box-shadow:0 2px 3px rgba (0,0,0,4),");             Client.Println Println("encart 0 -1px 1px #888,");             Client.Println Println("encart 0 -5px 1px #bbb,");             Client.Println Println(" encart 0 -6px 0 blanc;");             Client.Println Println(" -webkit-border-radius:3px;");             Client.Println Println("moz-border-radius:3px;");             Client.Println Println("border-radius:3px;");             Client.Println Println("font:normal 11px Arial,Sans-Serif;");             Client.Println Println("couleur:#666;");             Client.Println Println(" texte-ombre:0 1px 0 blanc;");             Client.Println Println("cursor:texte;");             Client.Println Println("}");             Client.Println Println("");             Client.Println Println(".étiquette de bascule:avant "");             Client.Println Println("contenu:attr(data-off);");             Client.Println Println("position:absolue;");             Client.Println Println("top:6px;");             Client.Println Println("droit:0;");             Client.Println Println("gauche:0;");             Client.Println Println("z-index:4;");             Client.Println Println("}");             Client.Println Println("");             Client.Println Println(".étiquette de bascule:après "");             Client.Println Println("contenu:attr(data-on);");             Client.Println Println("position:absolue;");             Client.Println Println("droit:0;");             Client.Println Println("bottom:11px;");             Client.Println Println("gauche:0;");             Client.Println Println("couleur:#666;");             Client.Println Println("text-shadow:0 -1px 0 #eee;");             Client.Println Println("}");             Client.Println Println("");             Client.Println Println(".toggle input:checked 'label'");             Client.Println Println(" background-image:-webkit-linear-gradient (top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println Println(" background-image:-moz-linear-gradient (top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println Println(" image de fond:-ms-linear-gradient (top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println Println(" image de fond:-o-linear-gradient (top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println Println(" image de fond : gradient linéaire (haut,#eee 0%, #ccc 50%,#fff 50%,#eee 100%);");             Client.Println Println(" -webkit-box-shadow:0 0 1px rgba (0,0,0,4),");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println(" -moz-box-ombre:0 0 1px rgba (0,0,0,0,4)");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println(" box-shadow:0 0 1px rgba (0,0,0,0,4)");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked:hover 'label");             Client.println(" -webkit-box-shadow:0 1px 3px rgba (0,0,0,4),");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println(" -moz-box-ombre:0 1px 3px rgba (0,0,0,4),");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println(" box-shadow:0 1px 3px rgba (0,0,0,4),");             Client.println(" encart 0 1px 7px -1px #ccc,");             Client.println(" encart 0 5px 1px #fafafa,");             Client.println(" encart 0 6px 0 blanc;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked 'label:before");             Client.println(" z-index:1;");             Client.println(" top:11px;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked 'label:after");             Client.println(" en bas:9px;");             Client.println(" couleur:#aaa;");             Client.println(" texte-ombre:none;");             Client.println(" z-index:4;");             Client.println("}");             Client.println("Lt;/style 'gt;'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 ON/OFF pour GPIO 5               Client.println("Lt;p’gt;Light Garage: " + output5State + "Lt;/p’gt;");             si sortie5State -OFF, afficher le bouton ON                    Si (output5State=="OFF") {               Client.println(" 'lt;p’gt;'lt;lt;span class'"toggle"'''lt;lt;'"checkbox" onclick''window.location.assign('/5/EIN")''gt;'lt;data-off""OFF" data-on""On"'gt;lt;/label’gt;'lt;/_span);             } Autre {               Client.println(" 'lt;p’gt;'lt;lt;span class'"toggle"'''lt;''''checkbox"" onclick''window.location.assign ('/5/OFF)' checked''lt;lt;label data-off""OFF" data-on""On"");             }                             La même chose pour GPIO 4             Client.println("Lt;p’gt;Light Cellar: " + output4State + "Lt;/p’gt;");             Si la sortie4State - off, afficher le bouton ON                    Si (output4State=="OFF") {               Client.println("Lt;p’gt;'lt;lt;span class"toggle"'''lt;lt;input type'"checkbox" onclick''window.location.assign ('/4/EIN)''gt;'lt;data-off""OFF" data-on"On"'lt;/label’gt;/_span);             } Autre {               Client.println(" 'lt;p’gt;'lt;lt;span class'"toggle"'''lt;''''checkbox"" onclick''window.location.assign ('/4/OFF)' checked''lt;lt;label data-off""OFF" data-on""On"");             }             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("");   }
}

Maintenant, une question reste sans réponse: pourquoi utilisons-nous /4/EIN ou /5/AUS dans notre code pour changer les GPIOs?

Sur cette façon, il est possible pour nous de placer un relais souhaité dans l’état souhaité dans un navigateur en entrant l’IP suivie par /"numéro pin"/"Status".

Mais la demande n’a pas nécessairement à venir d’un navigateur web. Si vous avez un autre appareil dans votre WLAN, comme un autre ESP, il pourrait changer le relais souhaité avec une simple demande HTTP. Vous pouvez attacher un interrupteur de lumière à ce deuxième ESP. Ou un détecteur de mouvement. 

Ou vous pouvez écrire une APPLICATION pour votre smartphone, avec des boutons qui ne font rien de plus que d’appeler l’URL désirée. 

Bien sûr, je ne dois pas laisser la question de la sécurité non dite à ce stade.

Le serveur ESP est accessible à chaque abonné de son réseau Wi-Fi, et il n’y a pas de requête de sécurité. Donc, le tout est seulement aussi sécurisé que votre Wi-Fi. Si vous donnez à vos amis ou à vos proches leur clé, ou si votre routeur Wi-Fi est mal configuré ou avez une vulnérabilité de sécurité, en théorie n’importe qui peut changer les relais.

Pour un interrupteur de lumière ou quelque chose comme ça, cela ne devrait pas être le gros problème, mais avant de commencer à contrôler les serrures de porte et les portes de garage, je recommande fortement de regarder le sujet de la sécurité du réseau.

J’espère que vous avez aimé la contribution d’aujourd’hui et souligné que, avec un peu d’intuition, il n’est pas si compliqué d’inclure l’ESP dans vos projets, même si la mise en œuvre semble très compliquée au début.

Je dis au revoir jusqu’à la prochaine contribution, et je suis ravi de l’éloge et de la critique.

Le vôtre Markus Neumann