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:

Amica V2

MT3608

Estafette

3V3

IN +

 

GND

IN-

 

 

UIT +

VCC

 

UIT-

GND

D1

 

IN1

D2

 

IN2

 

 

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.

 

Esp-8266Projekte für fortgeschrittene

10 Kommentare

Andreas Wolter

Andreas Wolter

@Thomas Schultz: ab Zeile 60
if (client.available()) {
beginnt die aktualisierung der Webseite. Mein Vorschlag wäre, die Bedingung durch ein ODER zu erweitern, damit auf die Inputs reagiert werden kann. Folglich müsste man vorher die Inputs auslesen und falls sich diese geändert haben, müsste man dann in die Bedingung diese Änderung einbringen. Als Beispiel:
int inputA_new = 0;
int inputA_old = 0;

inputA_new = digitalRead(EINGANG);
if (client.available() || inputA_new != inputA_old) {
….
//zeige Werte aus Input A
}
inputA_old = inputA_new;

für zwei Eingänge wäre das dann wie folgt:
int inputA_new = 0;
int inputA_old = 0;
int inputB_new = 0;
int inputB_old = 0;

inputA_new = digitalRead(EINGANG_A);
inputB_new = digitalRead(EINGANG_B);
if (client.available() || inputA_new != inputA_old || inputB_new != inputB_old) {
….
//zeige Werte aus Input A
//zeige Werte aus Input B
}
inputA_old = inputA_new;
inputB_old = inputB_new;

@Georg: etwas spät, aber: der AsynchWebserver ist anders gelöst. eventuell hilft Ihnen das weiter: https://techtutorialsx.com/2018/01/01/esp8266-arduino-asynchronous-http-web-server/

Thomas Schultz

Thomas Schultz

Hallo und vielen Dank für dieses schöne Beispiel.
Ich habe es mal direkt für mein aktuelles Project benutzt.
Ich habe nur ein kleine Problem, zusätzlich würde ich gerne noch zwei
Kontaktausgänge eines anderen Moduls auslesen. Das auslesen ist kein
Problem, auch das anzeigen nicht… aber die Webseite wird im vorliegenden
ja nur bei Änderungen eines Relais neu aufgebaut.
Wie kann ich das auch mit zwei INPUTS bewerkstelligen?

Für entsprechende Hilfe wäre ich sehr dankbar
Thomas

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

Einen Kommentar hinterlassen

Alle Kommentare werden vor der Veröffentlichung moderiert

Aanbevolen blog berichten

  1. Installeer ESP32 nu van de raad van bestuur
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. OTA - Over the Air - ESP Programmeren via Wi-Fi