HTML un bouton ESP Serveur web

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 :

Amica V2

Mt3608

Relais

3V3

IN

 

Gnd

IN-

 

 

SORTIE

Vcc Vcc

 

OUT-

Gnd

D1 D1

 

EN1

D2 D2

 

EN2

 

 

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.

 

Esp-8266Projets pour avancé

8 commentaires

Phil Phras

Phil Phras

Ich bin bei der IdeenSuche für eins meiner Projekte auf diesen Blog gestoßen und bin begeistert!
Ich habe auch in anderen Blogs hier gestöbert und möchte ein großes Lob aussprechen.

Hier werde ich StammLeser :-) Und wenn ich mal wieder eins meiner Projekte veröffentliche geb ich auf jeden Fall diese Seite hier an als Ideen- und CodeQuelle an.

Vielen Dank

georg

georg

hallo,
das thema ist inzwischen recht alt :-( , für mich aber noch aktuell…
habe versucht den code mit einem asyncwebserver zu kombinieren (die verwendung dieser art des webservers lässt sich aus anderen gründen nicht mehr ändern) – beim compileren wurde die kombination unter anderem mit – ‘class AsyncWebServer’ has no member named ‘available’ – quitiert…
Was kann ich da machen?
gruss

Thmas Nimpsch

Thmas Nimpsch

Hallo ,
Vielen Dank für dieses Beispiel, genau danach hab ich gesucht.
Gruß
Thomas Nimpsch

N1d45

N1d45

Schalter die sich automatisch aktualisieren währen nicht schlecht.

Sprich wenn ich von mehreren Geräten auf die Webseite zugreife. Zum Beispiel schalte ich mit dem Smartphone Kanal 1 ein, wird auf dem PC automatisch angezeigt das der Schalter 1 auch ein ist.

Oder das wenn ich per Taster Kanal 1 ein schalte, das auch auf der Webseite automatisch angezeigt wird das der Kanal 1 eingeschaltet ist.

Bisher muss man immer die Webseite neuladen, z.B. mit F5 um das aktuelle Ergebniss zu sehen.

Tobî

Tobî

an Herbert.

Versuche doch den Taster mal mit einem Interrupt aus.
Ich hoffe ich darf hier einen Link posten, wenn nicht:
Herbert suche mal auf deiner Suchmaschine deines Vertrauens nach: ESP8266 External Interrupt.

https://techtutorialsx.com/2016/12/11/esp8266-external-interrupts/

Herbert

Herbert

Toller Beitrag, soweit funktioniert auch alles.
Mein Problem ist das ich zusätzlich noch einen Hardware Taster einbauen wollte.
Der aber nicht funktioniert wenn der Client mit dem ESP8266 verbunden ist.
Ich vermute das Problem ist die while (client.connected() funktion. Die verhindert das auf die Tastereingabe parrallel zur Verbindung eines Client funktioniert.

Gibt es dafür eine Lösung? Und warum benötigt man eigentlich die while?

Chris

Chris

Hallo Markus,
wäre es möglich noch einen Slider zu integrieren, mit Bsp. Sketch?
LG

K. Dobler

K. Dobler

Hallo Markus,
dein Beispiel hat mir sehr geholfen.
Mit ihm habe ich des geschafft mein Garagentor vom Handy aus zu steuern.
Jetzt geht es nur noch um kleine Anpassungen und Verschönerungen.

Vielen Dank
Kurt Dobler

Laisser un commentaire

Tous les commentaires sont modérés avant d'être publiés

Messages de blogs recommandés

  1. Installez maintenant ESP32 via l'administrateur de la carte
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. OTA-Over the Air-ESP Programmation par WiFi

Produits recommandés