Mooier schakelaar voor onze ESP web server Relais project,

hi, en welkom op vandaag Blog post, waarin we het onderwerp van de web server in het ESP om verder te gaan.

Er zijn enkele ijverige lezer meldde ons dat een poging om de Knoppen uit onze vorige post over de ESP web server in uw Code te integreren. Helaas, zonder succes.

Voor iemand die net begonnen om te gaan met het programmeren van microcontrollers, en hebben weinig tot geen ervaring met HTML, en dan CSS-Code zal worden overspoeld, dit is allemaal erg verwarrend.

Als ze alle drie in een tekst document worden gecombineerd, is het ook erg rommelig zeer snel.

Je kan echter niet worden ontmoedigd. Ik zal je laten zien vandaag hoe de werkende Code, met de mooie Knoppen eruit ziet. Ik heb bewust afgezien van de Code compact, zodat het een stuk makkelijker om te lezen.

Echter, u zult snel zien hoe complex de broncode, zelfs als we dat willen veranderen in het einde, alleen de vormgeving van 2 Knoppen.

Ons doel vandaag is daarom het volgende Wijzigen:

Hier, ter vergelijking, de twee schetsen:

Zoals u kunt eenvoudig zien kunt, neem alleen het ontwerp van de Toetsen door middel van CSS een groot deel in de hardware. Dit deel, echter, had beheerst het merendeel van de lezers.

Als een moeilijk onderdeel van de toets, de functionaliteit is dan. Dit is niet geïmplementeerd in de HTML-Code van de pagina voorbeeld voor de Knoppen nl.
Dit is waarschijnlijk de meest sjablonen en voorbeelden kunt u vinden van de Knoppen en andere elementen in het netwerk. Daarom een korte uitleg van hoe je het kunt implementeren op basis van onze oorspronkelijke Codes. Het zal leiden zijn zoals altijd veel oplossingen voor het doel, en de afbeelding is niet de eenvoudigste en meest elegante voldoet aan veiligheid en beveiliging.

De Knoppen die we gebruikt om te zien, als alleen op de Knop is verminderd, omdat de HTML-Code is als volgt:

<a href="/nl/5/on"><button class="knop">A</button></a>

In het voorbeeldhttp://jsfiddle.net/tovic/ve8mU/light/is de HTML Code voor een Button:

<span class="toggle">
<input type="checkbox">
<label gegevens-off="Stop" data-over=""Spelen "" ></label>
</span>

Het ontbreekt dus de mogelijkheid van het gebruik van de Tag <a> een Link te definiëren, omdat het geheel wordt een Selectievakje, en wanneer er op geklikt wordt de status verandert, maar niet met de Server communiceren. Dit is te wijten aan het feit dat deze selectie velden worden doorgaans gebruikt voor het vormen, waar je een formulier invult, en op het einde door op een Knop te klikken (bijvoorbeeld "Submit") naar de Server stuurt.

Dus onmiddellijk, wanneer u Klikt op iets wat gaat gebeuren, moeten we onclick=' - venster.ligging.toewijzen()' te gebruiken, en tussen haakjes, de URL genoemd is:

<span class=\"toggle\">
<input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/4/\")'>
<label gegevens-uit=\"UIT\" data-op=\"A\ \ "></label>
</span>

En voor het geval dat de Knop "A" is:

<span class=\"toggle\">
<input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/4/\")' gecontroleerd> <label gegevens-uit=\"UIT\" data-op=\"A\ \ "></label>
</span>

in De tweede, zetten wij de <input> - object is nog steeds ingesteld op "gecontroleerd".

De compleet herziene Code ziet er als volgt uit:

/*********
 Rui Santos
 Volledige project details op http://randomnerdtutorials.com  
*********/

// bewaren Wij de reeds bekende WiFi-bibliotheek
#include <ESP8266WiFi.h>

// Hier geven we de Wi-Fi-naam (SSID) en de Zugansschlüssel een
const char* ssid     = "IhrWLANName";
const char* wachtwoord = "IhrWLANSchlüssel";

// We zetten de webserver op Poort 80
wifi-server server(80);

// Een Variabele voor de HTTP-Aanvraag voor het opslaan van de
String koptekst;

// Hier wordt de huidige Status van de Relais-opgenomen
String output5State = "VAN";
String output4State = "OFF";

// De verwendeted GPIO-Pinnen
// D1 = GPIO5 en D2 = GPIO4 - gewoon Google voor "Amica Pinout" zoeken
const int output5 = 5;
const int output4 = 4;

void setup() {   Seriële.beginnen met(115200);   // De gedefinieerde GPIO-Pinnen als output definiëren ...   pinMode(output5, OUTPUT);   pinMode(output4, OUTPUT);   // ... en de eerste, te LAAG ingesteld   digitalWrite(output5, LAGE);   digitalWrite(output4, LAGE);   // Via Wi-Fi verbinding te maken met het netwerk   Serieel.afdrukken("Aansluiten op ");   Seriële.println(ssid);   WiFi.beginnen(ssid, wachtwoord);   terwijl de (WiFi -.status() != WL_CONNECTED) {     de vertraging en(500);     Serieel.afdrukken(".");   }   // het IP adres van De webserver op de serial Monitor   Serial.. println("");   Serial.. println("Wi-Fi-verbinding hebt.");   Seriële.println("IP address: ");   Seriële.println(WiFi.localIP());   server.beginnen();
}

void loop(){   wifi-client client = - server.beschikbaar();   // Luisteren naar verzoeken van Cliënten   als (de cliënt) {                             // Als er een nieuwe Client verbinding,     de Seriële.. println(van"Nieuwe Klant".);          // Uitgang op de serial Monitor     String van de huidige regel, = "";                // maak een String met de binnenkomende gegevens van de Klant     terwijl de (opdrachtgever.verbonden()) {            // herhalen zolang de Opdrachtgever is aangesloten       als (client is.beschikbaar -()) {             // geval Byte te lezen is,         char c = client.lees();             / lees/ het Byte, en dan         het Seriële.schrijven(c);                    // geef het aan de serial Monitor van de         kop - += c;         als (c == '\n')) {                    // als de Byte is een newline Char           // als de huidige regel is leeg, kwam 2 op een rij.           // dit is het einde van de HTTP-aanvraag van de Opdrachtgever, zodat we sturen een antwoord:           wanneer (de huidige regel.de lengte() == 0) {             // HTTP-headers begin altijd met een Response Code (bijvoorbeeld HTTP/1.1 200 OK)             // gevolgd door de 'Content-Type', zodat de Cliënt weet wat het is om te volgen, gevolgd door een lege regel:             cliënt.. println("HTTP/1.1 200 OK");             client.. println("Content-type:text/html");             client.. println("Connection: close");             client.. println();                          // Hier worden de GPIO-Pinnen aan of uit             als (de kop.indexOf("GET /5/EEN") >= 0) {               Serial.. println("GPIO 5");               output5State = "Een";               digitalWrite(output5, HOGE);             } anders als (kop.indexOf("GET /5/VAN de") >= 0) {               Serial.. println("GPIO 5");               output5State = "UIT";               digitalWrite(output5, LAGE);             } anders als (kop.indexOf("GET /4/EEN") >= 0) {               Serial.. println("GPIO 4");               output4State = "Een";               digitalWrite(output4, HOGE);             } anders als (kop.indexOf("GET /4/UIT de") >= 0) {               Serial.. println("GPIO 4");               output4State = "OFF";               digitalWrite(output4, LAGE);             }                          // Hier is de HTML-pagina wordt weergegeven:             cliënt.. println("<!DOCTYPE html><html>");             client.. println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <title>Amica web server</title>");             - client.. println("<link rel=\"pictogram\" href=\"data:,\">");                          // het volgt de CSS-Code om het in/Uit-Knoppen om                          de klant.println("<style> body {");             client.. println(" font-family:Helvetica;");             client.. println(" background-color:#eee;");             client.. println(" text-align:center;");             client.. println(" padding:85px 0;");             client.. println("}");             opdrachtgever.. println("");             opdrachtgever.. println(".schakelen {");             client.. println(" position:relative;");             client.. println(" display:inline-block;");             client.. println(" width:80px;");             client.. println(" height:120px;");             client.. println(" background-color:#bbb;");             client.. println(" -webkit-border-radius:4px;");             client.. println(" -moz-border-radius:4px;");             client.. println(" border-radius:4px;");             client.. println(" text-align:center;");             client.. println("}");             opdrachtgever.. println("");             opdrachtgever.. println(".schakelen input {");             client.. println(" width:100%;");             client.. println(" height:100%;");             client.. println(" margin:0 0;");             client.. println(" padding:0 0;");             client.. println(" position:absolute;");             client.. println(" top:0;");             client.. println(" right:0;");             client.. println(("bottom:0;");             client.. println(" left:0;");             client.. println(" z-index:2;");             client.. println(" cursor:pointer;");             client.. println(" opacity:0;");             client.. println(" filter:alpha(opacity=0);");             client.. println("}");             opdrachtgever.. println("");             opdrachtgever.. println(".schakelen label {");             client.. println(" display:block;");             client.. println(" position:absolute;");             client.. println(" top:1px;");             client.. println(" right:1px;");             client.. println(("bottom:1px;");             opdrachtgever.println(" left:1px;");             opdrachtgever.println(" background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),");             client.println(" inset 0 -1px 1px #888,");             client.println(" inset 0 -5px 1px #bbb,");             client.println(" inset 0 -0 6px white;");             opdrachtgever.println(" -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),");             client.println(" inset 0 -1px 1px #888,");             client.println(" inset 0 -5px 1px #bbb,");             client.println(" inset 0 -0 6px white;");             opdrachtgever.println(" box-shadow:0 2px 3px rgba(0,0,0,0.4),");             client.println(" inset 0 -1px 1px #888,");             client.println(" inset 0 -5px 1px #bbb,");             client.println(" inset 0 -0 6px white;");             opdrachtgever.println(" -webkit-border-radius:3px;");             opdrachtgever.println(" -moz-border-radius:3px;");             opdrachtgever.println(" border-radius:3px;");             opdrachtgever.println(" font:normal 11px Arial,Sans-Serif;");             opdrachtgever.println(" color:#666;");             opdrachtgever.println(" text-shadow:0 1px 0 wit;");             opdrachtgever.println(" cursor:text;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen label:before {");             client.println(" inhoud:attr(gegevens uit);");             opdrachtgever.println(" position:absolute;");             opdrachtgever.println(" top:6px;");             opdrachtgever.println(" right:0;");             opdrachtgever.println(" left:0;");             opdrachtgever.println(" z-index:4;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen label:after {");             client.println(" inhoud:attr(gegevens op);");             opdrachtgever.println(" position:absolute;");             opdrachtgever.println(" right:0;");             opdrachtgever.println(("bottom:11px;");             opdrachtgever.println(" left:0;");             opdrachtgever.println(" color:#666;");             opdrachtgever.println(" text-shadow:0 -1px 0 #eee;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen ingang:gecontroleerd + label {");             client.println(" background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             opdrachtgever.println(" -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),");             client.println(" inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println(" -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),");             client.println(" inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println(" box-shadow:0 0 1px rgba(0,0,0,0.4),");             client.println(" inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen ingang:gecontroleerd:hover + label {");             client.println(" -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),");             client.println(" inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println(" -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),");             client.println(" inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println(" box-shadow:0 1px 3px rgba(0,0,0,0.4),");             client.println("inset 0 1px 7px -1px #ccc,");             client.println(" inset 0 5px 1px #fafafa,");             client.println(" inset 0 0 6px white;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen ingang:gecontroleerd + label:before {");             client.println(" z-index:1;");             opdrachtgever.println(" top:11px;");             opdrachtgever.println("}");             opdrachtgever.println("");             opdrachtgever.println(".schakelen ingang:gecontroleerd + label:after {");             client.println(("bottom:9px;");             opdrachtgever.println(" color:#aaa;");             opdrachtgever.println(" text-shadow:none;");             opdrachtgever.println(" z-index:4;");             opdrachtgever.println("}");             opdrachtgever.println("</style></head>");                                      // Websites-Überschrift             opdrachtgever.println("<body><h1>ESP8266 Web Server</h1>");                                                       // Zeige den aktuellen Status, und EIN/AUS Knoppen voor GPIO 5             client.println("<p>Licht in de Garage: " + output5State + "</p>");             // wenn output5State = AUS, zeige den EIN Knop             als (output5State=="AUS") {               client.println("<p><span class=\"toggle\"><input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/5/EIN\")'><label gegevens-uit=\"AUS\" data-op=\"EIN\"></label></span></p>");             } anders {               client.println("<p><span class=\"toggle\"><input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/5/AUS\")' aangevinkt><label gegevens-uit=\"AUS\" data-op=\"EIN\"></label></span></p>");             }                             // Das gleiche für GPIO 4             client.println("<p>Licht Keller: " + output4State + "</p>");             // Wenn output4State = uit, zeige den EIN Knop             als (output4State=="AUS") {               client.println("<p><span class=\"toggle\"><input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/4/EIN\")'><label gegevens-uit=\"AUS\" data-op=\"EIN\"></label></span></p>");             } anders {               client.println("<p><span class=\"toggle\"><input type=\"checkbox\" onclick=' - venster.ligging.toewijzen(\"/4/AUS\")'checked><label gegevens-uit=\"AUS\" data-op=\"EIN\"></label></span></p>");             }             client.println("</body></html>");                          // Die HTTP-Antwoord wird mit einer Leerzeile beendet             opdrachtgever.println();             // und wir verlassen mit einem breken sterven Schleife             breken;           } anders { // valt eine neue Zeile kommt, lösche sterven aktuelle Zeile             currentLine = "";           }         } anders als (c != '\r') {  // wenn etwas kommt was kein Zeilenumbruch ist,           currentLine += c;      // füge es am Ende von currentLine een         }       }     }     // Die Kop-Variabele für den nächsten Durchlauf löschen     koptekst = "";     // Die Verbindung schließen     opdrachtgever.stoppen();     Seriële.println("Client getrennt.");     Seriële.println("");   }
}

Nun bleibt noch eine Frage offen: warum nutzen wir in unserem Code /4/oder EIN /5/AUS um die GPIOs zu schalten?

Auf diesem weg ist es uns möglich, in einem Browser über die Eingabe der der IP gefolgt von /"Pin-Nummer"/"Status" ein gewünschtes Relais in den gewünschten Zustand zu versetzen.

Aber sterven Anfrage muss nicht zwangsläufig von einem Webbrowser kommen. Wenn Sie in ihrem WLAN-ein anderes Gerät haben, wie z.B. einen anderen, ESP, dus kan dieser mit einem einfachen HTTP-Verzoek van das de gewünschte Relais schalten. Een diesen zweiten ESP könnten Sie einen Lichtschalter hängen. Oder einen Bewegungsmelder.

Oder Sie könnten eine APP für Ihr Smartphone schreiben, mit Knoppen, die nichts wieter machen als sterven gewünschte URL auf zu rufen.

Natürlich darf ich an dieser Stelle das Thema Sicherheit nicht unerwähnt lassen.

Der ESP-Server ist für jeden Teilnehmer in ihrem WLAN erreichbar, und es gibt keinerlei Sicherheitsabfrage. Das ganze ist ook nur so sicher, wie Ihr WLAN. Wenn Sie freunde oder Verwandte ihren Schlüssel geben, oder Ihr WLAN-Router falsch konfiguriert ist oder eine Sicherheitslücke aufweist, kann theoretisch jeder sterven Relais schalten.

Für einen Lichtschalter oder ähnliches dürfte sterft nicht das große Probleem darstellen, aber bevor Sie anfangen Türschlösser und Garagentore zu steuern, empfehle ich Dringend sich mit dem Thema Netzwerksicherheit auseinanderzusetzen.

Hoffentlich hat der heutige Beitrag Ihnen gefallen, und aufgezeigt dass es, mit ein wenig Einarbeitung, gar nicht so kompliziert ist den ESP in Ihre Projekte einzubinden, auch wenn sterven Umsetzung anfangs sehr kompliziert erscheint.

Ich verabschiede mich bis zum nächsten Beitrag, und freue mich über Lob und Kritik.

Ihr Markus Neumann