ESP8266 Remote Controller part. 2

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 &copy; 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.

 

 

2 odpowiedzi do “ESP8266 Remote Controller part. 2”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *