Jak na urządzeniu ESP8266 zrobić stronę www i z niej sterować wmontowanym LED.
No to zaczynamy pisać program. Poszczególne fragmenty kodu wpisuj kolejno od początku pliku.
Uruchom Android IDE. Wciśnij klawisze Ctrl-N. Utworzy się nowy szkic, który będzie wyglądał jak poniżej:
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}
Następnie wciśnij Ctrl-Shift-S i zapisz nowy szkic pod nazwą Strona-www. Ułatwi Ci to zapisywanie zmian w szkicu oraz jego kompilacje.
Na początku dopisz potrzebne biblioteki.
#include <ESP8266WiFi.h> #include <ESP8266WebServer.h>
Zadeklaruj do którego pinu jest podłączony LED. Tu jest podłączony do pinu D4 i dlatego dopisz linijkę jak poniżej.
#define pinLED D4
Potrzebne Ci będą dane twojej sieci WiFi. Te dane umieść w stałych jak poniżej. Wpisz prawidłowe dane twojej sieci WiFi.
const char* ssid = "nazwa_twojej_sieci"; // SSID sieci WiFi const char* password = "haslo_twojes_sieci"; // hasło do WiFi
Teraz ustal na jakim porcie ma pracować serwer www i przydziel ten port serwerowi. Standardowo podaje się port 80.
//numer portu serwera www const unsigned int port = 80; // ustaw port serwera ESP8266WebServer server(port);
Następnie utwórz funkcje, które pomogą zbudować dynamiczną stronę www. Proponuję rozdzielić funkcje tworzące nagłówek strony, stopkę strony i treść strony. taka koncepcja ułatwi Ci późniejsze zmiany na stronie www. Pierwsza funkcja HTTPHeader(), tworzy nagłówek naszej strony. Zawiera całą treść html nagłówka i otwiera znaczniki html. Do tworzenia strony wykorzystuje style bootstrapa, dlatego jest tu link do strony bootstrapa. Nie będę opisywał poszczególnych znaczników html. Te dane są łatwo dostępne. Poniżej cała funkcja HTMLHeader();
String HTMLHeader(){ //nagłówek strony
String h = "<!DOCTYPE html>\n";
h += "<html>";
h += "<head>";
h += "<title>Nasza strona wwww</title>";
h += "<meta charset=\"utf-8\">";
h += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
h += "<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\" >";
h += "</head>";
h += "<body style=\"text-align: center;color: white; background: black;font-size: 1.5em;\">\n";
return h;
}
Funkcja HTMLFooter() zawiera cały kod html tworzący stopkę strony i zamyka otwarte znaczniki html. Zawiera też dane twórcy i rok utworzenia strony.
String HTMLFooter() { // stopka strony www
String f = "";
f += "<p>Jan Trzciński © 2017</p></td></tr>";
f += "</body>\n";
f += "</html>\n";
return f;
}
Funkcja HTMLPage() zawiera kod html do utworzenia treści całej strony www. W tym przypadku zawiera przycisk załączający i wyłączający LED. Zależnie od stanu LED przycisk ma kolor czerwony (gdy załączony) lub zielony, gdy LED wyłączony. Funkcja ta bada stan pinu (digitalRead(pinLED)==0), do którego podłączony jest LED i wyświetla rzeczywisty stan LED oraz gdy przyciśniesz przycisk to uruchamia link załączenia lub wyłączenia LED..
String HTMLPage(){
String p = "";
p += "<p><h3>Nasza pierwsza strona www</h3></p>\n";
p += ( (digitalRead(pinLED)==0) ? "<p><a href = \"/led/0\"><button class=\"btn btn-danger\">LED ON</button></a></p>\n" : "<p><a href = \"/led/1\"><button class=\"btn btn-success\">LED OFF</button></a></p>\n");
return p;
}
Funkcja WebPage() łączy te wszystkie funkcje i tworzy całą stronę www.
String WebPage(){
return HTMLHeader()+HTMLPage()+HTMLFooter();
}
Utwórz teraz funkcję setservers(). Ustala linki i co te linki mają robić. Jest tu link do strony głównej „/”, do strony „/led/1” załączający LED i link „/led/0” wyłączający LED. Na koniec funkcja uruchamia serwer www.
//funkcja ustala adresy poszczególnych działań serwera www
void setservers(void){
//adres główny
server.on("/", [](){
server.send(200, "text/html", WebPage());
});
//adres załączajacy LED
server.on("/led/1", [](){
digitalWrite(pinLED, LOW); //stan niski załacza LED wewnętrzny
server.send(200, "text/html", WebPage());
});
//adres wyłączajacy LED
server.on("/led/0", [](){
digitalWrite(pinLED, HIGH); //stan wysoki wyłącza LED wewnętrzny
server.send(200, "text/html", WebPage());
});
server.begin(); // Start serwera www
}
Nadszedł czas na uzupełnienie pustej funkcji start(). Uzupełnij ją poniższym kodem. Każda linijka ma swój opis. Wszystkie Serial.print() są wypisywanie w monitorze szeregowym Arduino IDE. Podczas czekania na połączenie z WiFi wypisuje kropkę co pół sekundy, tak długo aż uzyska połączenie z siecią. Jeśli po kilkudziesięciu sekundach nie uzyska połączenia z siecią, to znaczy że popełniłeś jakiś błąd w programie. Sprawdź nazwę sieci i hasło.
void setup() {
//ustaw szybkość portu szeregowego
Serial.begin(115200);
//ustaw pin z LED na OUTPUT
pinMode(pinLED, OUTPUT);
//wyłącz LED
digitalWrite(pinLED,HIGH);
//włącz WiFi
WiFi.mode(WIFI_STA); //tryb STATION
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { // czekaj na połączenie z WiFi
delay(500);
Serial.print(".");
}
//wypisz przydzioleny IP i MAC dla tego urządzenia
Serial.println("");
Serial.println("WiFi połączone");
Serial.println(WiFi.localIP());
Serial.println(WiFi.macAddress());
//uruchom serwery www
setservers();
}
Na koniec uzupełnij funkcję loop().
void loop() {
server.handleClient();
}
To jest cały program. Wpisz go kolejno do pliku. Skompiluj i wgraj do urządzenia. W monitorze szeregowym odczytaj adres IP. Wpisz go do przeglądarki w komputerze lub telefonie. Ciesz się, że wszystko działa. Program ten był testowany na WeMos D1 mini. Powinien działać również na innych podobnych urządzeniach ESP8266, po zmianie płytki w Arduino IDE.