HTML-knoppen voor de ESP-webserver

Hallo en welkom bij onze post vandaag.

Na gisteren over HTML en vierkante haken, willen we vandaag een klein circuit gebruiken om te kijken wat je kunt doen met een beetje HTML en een klein script.

Hiervoor hebben we de volgende componenten nodig:

Een microcontroller met ESP8266-chip zoals datAmica V2
Een relaismodule zoals de onzeModule met 2 relais
Een DC-DC step-up module, omdat de Amica alleen 3,3V levert, maar ons relais 5V nodig heeft
Een broodplank met startkabels, zoals onze favorietInstellen

Natuurlijk kunt u de relaismodule ook rechtstreeks van een 5V voorzien en de step-up module opslaan. Dit is logischer voor een afgewerkt project in één behuizing, omdat de Amica ook met dezelfde voeding kan worden geleverd.

Hoe de step-up module te gebruiken en in te stellen, hebben we al in onze blogpost "MT3608 step-up DC-DC spanningsregelaar"beschreven.

We verbinden de componenten als volgt:

In het laatste bericht hebben we besproken hoe we de ESP verbinden met een bestaand WLAN en hoe we een vraag vanuit de browser beantwoorden, inclusief de uitvoer van een klein HTML-bestand.

Ik heb met enkele HTML-tags gezegd dat ze sinds HTML5 niet meer mogen worden gebruikt. In moderne websites wordt het ontwerp vaak geïmplementeerd met behulp van cascading style sheets (CSS).

Voordat iedereen wegloopt met de angst dat er een CSS-cursus komt, moet worden vermeld dat het mogelijk is om prachtige knoppen, teksten, schuifregelaars en formulieren te ontwerpen met behulp van CSS.

Als u zoekt naar 'css-knoppen' in de Google-afbeeldingzoekactie, worden enkele voorbeelden weergegeven.

Nu gaat het om de implementatie - welke code uploaden we naar onze ESP?

We nemen de code uit de tutorial als basishttps://randomnerdtutorials.com/esp8266-web-server/en pas de code aan:

/*********
  Rui Santos
  Vul projectdetails in op http://randomnerdtutorials.com  
*********/

// We laden de WiFi-bibliotheek die we al kennen
# opnemen <ESP8266WiFi.h>

// Hier voeren we de WLAN-naam (SSID) en de toegangssleutel in
const char* ssid     = "MeineFritzBox";
const char* wachtwoord = "Mijn wifi-sleutel";

// We hebben de webserver ingesteld op poort 80
WiFi-server server(80);

// Een variabele om het HTTP-verzoek op te slaan
String koptekst;

// De huidige status van het relais wordt hier vastgelegd
String output5State = "uit";
String output4State = "uit";

// De gebruikte GPIO-pinnen
// D1 = GPIO5 en D2 = GPIO4 - zoek gewoon naar "Amica Pinout" op Google
const int output5 = 5;
const int output4 = 4;

nietig instellen() {   Serie.beginnen(115200);   // Definieer de gedefinieerde GPIO-pinnen als uitvoer ...   pinMode(output5, UITGANG);   pinMode(output4, UITGANG);   // ... en stel deze eerst in op LOW   digitalWrite(output5, LAAG);   digitalWrite(output4, LAAG);   // Maak verbinding met het netwerk via wifi   Serie.afdrukken("Verbinden met");   Serie.println(ssid);   WiFi.beginnen(ssid, wachtwoord);   terwijl (WiFi.status() != WL_CONNECTED) {     vertraging(500);     Serie.afdrukken(".");   }   // Voer het IP-adres uit van de webserver op de seriële monitor   Serie.println("");   Serie.println("WiFi verbonden.");   Serie.println("IP-adres:");   Serie.println(WiFi.localIP());   server.beginnen();
}

nietig lus(){   WiFiClient klant = server.beschikbaar();   // luistert naar verzoeken van klanten   als (klant) {                             // Als een nieuwe client verbinding maakt,     Serie.println("Nieuwe klant.");          // uitvoer naar seriële monitor     String currentLine = "";                // maak een string met de inkomende gegevens van de client     terwijl (client.verbonden()) {            /Herhaal zolang de klant verbonden is       indien (client.beschikbaar()) {             Als er een byte te te lezen is,         char c = client.lezen();             Lees de byte, en dan         Serie.schrijven(c);                    // tonen op de seriële monitor         header += c;         indien (c == ») {                    // als de byte een nieuwe regel is Char           Wanneer de huidige regel leeg is, volgen er twee.           // dit is het einde van het HTTP-verzoek van de klant, dus sturen we een antwoord:           indien (huidige.lengte() == 0) {             //HTTP headers beginnen altijd met een responscode (bv. HTTP/1.1 200 OK)             // gevolgd door het type inhoud zodat de klant weet wat er volgt, gevolgd door een lege regel:             client.Afdrukken("HTTP/1.1 200 OK");             client.Afdrukken("Content-type:text/html");             client.Afdrukken(Verbinding: dichtbij);             client.Afdrukken();                          // Hier worden de GPIO-pinnen aan of uit gezet             indien (header.index("GET/5/on") >= 0) {               Serie.Afdrukken("GPIO 5 on");               output5State = "hij";               digitalisWriteName(output5, HOGE);             } sm indien (header.index("Get/5/off") >= 0) {               Serie.Afdrukken("GPIO 5 uit");               output5State = "uit";               digitalisWriteName(output5, LOW);             } sm indien (header.index("GET/4/on") >= 0) {               Serie.Afdrukken("GPIO 4 on");               output4State = "hij";               digitalisWriteName(output4, HOGE);             } sm indien (header.index("Ga weg") >= 0) {               Serie.Afdrukken("GPIO 4 uitgeschakeld");               output4State = "uit";               digitalisWriteName(output4, LOW);             }                          // Hier is de HTML pagina:             client.Afdrukken(Goed?DOCTYPE html><html>");             client.Afdrukken("<head><meta name="viewport"content=width=device-width, initial-scale=1">");             client.Afdrukken("<link rel=\"icon"f337;" data:");             // Volg de CSS-code om de aan/uit-knoppen in te stellen             // Hier kunt u de achtergrondkleur en tekengrootte aanpassen             client.Afdrukken("<style>html {font-familie: Helvetica; display: inline-block; margine: 0px auto; text-align: centre;}");             client.Afdrukken("button {achtergrondkleur: 35; 333344; rand: geen; kleur: wit; vulling: 16px 40px;");             client.Afdrukken("tekst-decoratie: geen; lettergrootte: 30px; marge: 2px; cursor: pointer;}");             client.Afdrukken("butn2 {achtergrondkleur: 35; 8888899;}lt;/style>/head>");                          // Websites             client.Afdrukken("<body><h1>ESP8266 Web Server</h1>");                          // Toon de huidige status, en AN/AUS knoppen voor GPIO 5             client.Afdrukken("<p>GPIO 5-State" + output5State + "</p>");             // als u = uit moet, toon dan de ONE-knop             indien (output5State=="uit") {               client.Afdrukken("<button class="button"></button class;/button;/button>/button</button>/a>/a</p>");             } sm {               client.Afdrukken("<button class="button button button button button button 2">/button>/button>/button;/a>");             }                              // Hetzelfde voor GPIO 4             client.Afdrukken("<p>GPIO 4-State" + output4State + "</p>");             // Wanneer u = uitgaut4State af laat dan de ONE-knop zien             indien (output4State=="uit") {               client.Afdrukken("<button class=</button>/button class;/button"button>EIN</button>/a>/a</p>");             } sm {               client.Afdrukken("<button class="button 2>/button class;/button class=button 2>AUS</button>/a>");             }             client.Afdrukken("</body></html>");                          // De HTTP-respons eindigt met een lege regel             client.Afdrukken();             En we verlaten de lus met een pauze             breuk;           } sm { // als er een nieuwe regel komt, verwijder de huidige regel             huidige = "";           }         } sm indien (c != ») {  Als er iets komt dat geen lijnbreker is,           huidige += c;      // voeg het toe aan het einde van de currentLine         }       }     }     // Verwijder de header variabele voor de volgende pass     header = "";     // Sluit de verbinding     client.stop();     Serie.println("Client verbroken.");     Serie.println("");   }
}

We laden de code op onze Amica en openen de seriële monitor in de Arduino IDE:

Vervolgens typen we in de browser, b.v. op de mobiele telefoon, het IP-adres van de server. (Let op, de pc of smartphone moet verbonden zijn met hetzelfde netwerk als de ESP).

Nu kunnen we eenvoudig de relais schakelen vanaf de smartphone (of pc).

En als u op internet rondkijkt, vindt u ook mooiere knoppen, zoals deze:

De HTML-code en de CSS-code voor deze knoppen zijn beschikbaar ophttp://jsfiddle.net/tovic/ve8mU/light/

Ik hoop dat dit artikel je inzicht heeft gegeven in de mogelijkheden van de ESP-webserver.

Als je dit bericht leuk vond, zou ik een korte feedback op prijs stellen. Schrijf ons gewoon als u geïnteresseerd bent in het onderwerp SVG voor het weergeven van balken en kleine vectorafbeeldingen met de ESP-webserver.

Ik hoop dat je het leuk vindt om het te bouwen en afscheid te nemen van het volgende artikel.