Tworzymy strony www do tego urządzenia.
Omówię jak utworzyć strony www dla tego urządzenia.
Zasady tworzenia stron www dla urządzenia ESP8266 omawiałem już we wpisie ESP8266 pierwsza strona www. Tu omówię strony dla tego programu. Utwórz pliki RFSwitch3Web.h i RFSwitch3Web.cpp. Plik pierwszy zawiera wykaz funkcji jakie będą w pliku drugim.
/* * RFSwitch3Web.h * * Created on: 25.02.2017 * Author: Jan Trzciński */ #ifndef RFSWITCH3WEB_H_ #define RFSWITCH3WEB_H_ #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> String HTMLHeader(); String HTMLFooter(); String HTMLPage(); String HTMLPage1(); String HTMLPage2(); void setservers(void);
Jak widać są tu dwie nowe funkcje HTMLPage1() i HTMLPage2(). Utwórz plik RFSwitch3Web.cpp. Zawartość i wpisz jak poniżej.
//RFSwitch3Web.cpp #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> #include "Relay.h" #include "RFSwitch.h" #include "RFSwitch3.h" //obiekty zadeklarowane w innych plikach extern Relay r1; //przekaźnik zwykły 1 extern Relay r2; //przekaźnik zwykły 2 extern Relay r3; //przekaźnik zwykły 3 extern RFSwitch RFrelay1; //przekaźnik sterowany radiem 1 extern RFSwitch RFrelay2; //przekaźnik sterowany radiem 2 extern RFSwitch RFrelay3; //przekaźnik sterowany radiem 3 extern void saveEEProm(void); //funkcja zapisująca dane do EEPROM // login i hasło do sytemu const char* www_login = "admin"; const char* www_pass = "esp8266"; const int port = 80; // port serwera www ESP8266WebServer server(port); ESP8266HTTPUpdateServer httpUpdate; String HTMLHeader() { // nagłówek strony String h = "<!DOCTYPE html>\n"; h += "<html>"; h += "<head>"; h += "<title> RFSwitch</title>"; // h += "<meta http-equiv=\"Refresh\" content=\"30\" />"; //odświerzaj stronę co 30 sek. 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; } //Stopka zawiera dwa przyciski jeden Zapisz zmiany, //który zapisuje stan bieżący do pamięci EEPROM. //Drugi Odśwież stronę, który powoduje odświeżenie strony String HTMLFooter() { // stopka strony www String f = ""; f += "<p><a href = \"/save\"><button class=\"btn btn-info\">Zapisz zmiany</button></a></p>"; f += "<p><a href = \"/\"><button class=\"btn btn-info\">Odświerz stronę</button></a></p>"; f += "<p>Jan Trzciński © 2017</p></td></tr>"; f += "</body>\n"; f += "</html>\n"; return f; } //funkcja ta tworzy na stronie licznik czasu //który upłynął od uruchomienia urzadzenia String HTMLPage1() { // pierwsza część strony www String t; unsigned long sec = millis() / 1000;//oblicza sekundy unsigned long min = (sec / 60); //oblicza minuty unsigned long hour = (min / 60); //oblicza godziny unsigned long days = hour / 24; //oblicza dni sec = sec % 60; //do 60 sek. min = min % 60; //do 60 min. hour = hour % 24; //do 24 godz. t = "<h1>Przekaźniki RF</h1>"; t += "<p> Wersja oprogramowania 1.0 "; t += "</p>"; t += "<p>Czas od uruchomienia dni: "; t += (days); t += " godz:" ; t += ((hour<10) ? "0" : ""); //gdy mniej niż 10 wstaw zero wiodące t += (hour); t += ":"; t += ((min<10) ? "0" : ""); //gdy mniej niż 10 wstaw zero wiodące t += (min); t += ":"; t += ((sec < 10) ? "0" : ""); //gdy mniej niż 10 wstaw zero wiodące t += (sec); t += "</p>"; return t; } //ta strona zawiera wszystkie przyciski załączania i wyłączania przekaźników //oraz przyciski czytania kodów z pilota. //kolor przycisków załączania zależy od jego stanu. czerwony - załączony, zielony - wyłączony //w tej części strony znajduje się też opis połączeń z urządzeniem. String HTMLPage2() { // druga część strony www String p = ""; p += "<p>Uruchomiony na WeMos D1 mini</p>\n"; p += ( (r1.read()) ? "<p><a href = \"/relay1/0\"><button class=\"btn btn-danger\">Przekaźnik 1 ON</button></a></p>\n" : "<p><a href = \"/relay1/1\"><button class=\"btn btn-success\">Przekaźnik 1 OFF</button></a></p>\n"); p += ( (r2.read()) ? "<p><a href = \"/relay2/0\"><button class=\"btn btn-danger\">Przekaźnik 2 ON</button></a></p>\n" : "<p><a href = \"/relay2/1\"><button class=\"btn btn-success\">Przekaźnik 2 OFF</button></a></p>\n"); p += ( (r3.read()) ? "<p><a href = \"/relay3/0\"><button class=\"btn btn-danger\">Przekaźnik 3 ON</button></a></p>\n" : "<p><a href = \"/relay3/1\"><button class=\"btn btn-success\">Przekaźnik 3 OFF</button></a></p>\n"); p += "<p>Połączenia: nadajnik RF DATA na D8, VCC na 5V, odbiornik RF DATA na D5 VCC na D0</p>\n"; p += "<p>Połączenia: przekaźnik 1 na D1, przekaźnik 2 na D2, przekaźnik 3 na D3</p>\n"; p += "<p><a href = \"/setcod1\"><button class=\"btn btn-info\"> KodOn1=" + String(RFrelay1.getCodOn()) + " </button> </a> "; p += "<a href = \"/setcod2\"><button class=\"btn btn-info\"> KodOn2=" + String(RFrelay2.getCodOn()) + "</button></a> "; p += "<a href = \"/setcod3\"><button class=\"btn btn-info\"> KodOn3=" + String(RFrelay3.getCodOn()) + "</button></a></p>\n"; return p; } String WebPage() { // połącz wszystkie części strony www return (HTMLHeader()+HTMLPage1()+ HTMLPage2()+HTMLFooter()); } // funkcja ustawia wszystkie strony www void setservers(){ httpUpdate.setup(&server,"/update", www_login, www_pass); // umożliwia aktualizację poprzez WiFi server.on("/", [](){ server.send(200, "text/html", WebPage()); }); server.on("/relay1/0", [] () // wyłącz przekaźnik 1 { r1.setOff();//wyłącz przekaźnik zwykły RFrelay1.sendOff(); //wyłącz przekaźnik radiowy server.send(200, "text/html", WebPage()); }); server.on("/relay1/1", []() // załącz przekaźnik 1 { r1.setOn(); /załącz przekaźnik zwykły RFrelay1.sendOn(); //załącz przekaźnik radiowy server.send(200, "text/html", WebPage()); }); server.on("/relay2/0", [] () // wyłącz przekaźnik 2 { r2.setOff(); RFrelay2.sendOff(); server.send(200, "text/html", WebPage()); }); server.on("/relay2/1", []() // załącz przekaźnik 2 { r2.setOn(); RFrelay2.sendOn(); server.send(200, "text/html", WebPage()); }); server.on("/relay3/0", [] () // wyłącz przekaźnik 3 { r3.setOff(); RFrelay3.sendOff(); server.send(200, "text/html", WebPage()); }); server.on("/relay3/1", []() // załącz przekaźnik 3 { r3.setOn(); RFrelay3.sendOn(); server.send(200, "text/html", WebPage()); }); server.on("/setcod1", []() // ustaw kod RFrelay1 { RFrelay1.readCod(RFPINRX);//czytaj kod z pilota server.send(200, "text/html", WebPage()); }); server.on("/setcod2", []() // ustaw kod RFrelay2 { RFrelay2.readCod(RFPINRX); //czytaj kod z pilota server.send(200, "text/html", WebPage()); }); server.on("/setcod3", []() // ustaw kod RFrelay3 { RFrelay3.readCod(RFPINRX); //czytaj kod z pilota server.send(200, "text/html", WebPage()); }); server.on("/save", []() // zapisz zmiany ustawień { saveEEProm(); //zapisz do EEPROM server.send(200, "text/html", WebPage()); }); server.begin(); // Start serwera www }
Umieszczenie funkcji tworzących strony www w oddzielnych plikach usprawnia ich edycję i robienie w nich zmian. Pliki te też trzeba umieścić w katalogu głównym programu. Został nam jeszcze plik z głównym programem. Omówię go w części 3.
W nagłówku html jest użyty plik :
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.cs
obecnie nie plik nie jest dostępny.
Przeglądarki z tym problemem sobie poradzą ( będzie trochę inaczej wyglądała ale w działaniu dalej będzie się sprawdzała)
Masz błąd w adresie, na końcu jest .css a nie .cs.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
– ten adres działa prawidłowo.
pozdrawiam
Jan