Kurs ESP8266 - #5 - odbiór danych z przeglądarki, stałe IP, łączenie ESP

[Leoneq 264]

statnio zrobiliśmy sobie smartdom z kilkoma czujnikami i obsługą przez przeglądarkę. Dzisiaj zajmiemy się bardziej frontendem, aby strona była bardziej przyjazna użytkownikom, oraz dodamy małego szpiega, który będzie nam przekazywał temperaturę do dużego ESP.

Spis treści serii artykułów:

• 1. Omówienie, i przygotowanie środowiska
• 2. Zapoznanie z nowym środowiskiem, praca jako Arduino, prosty serwer WWW
• 3. Przyspieszony kurs na webmastera
• 4. Wykresy, zapis do SPIFFS, mini smart-dom
• 5. Odbiór danych z przeglądarki, stałe IP, łączenie modułów ESP

Ten wpis brał udział konkursie na najlepszy artykuł o elektronice lub programowaniu. Sprawdź wyniki oraz listę wszystkich prac »
Partnerem tej edycji konkursu (marzec 2020) był popularny producent obwodów drukowanych, firma PCBWay.

Przekazywanie danych do ESP

Teraz zadanie mamy takie, żeby stworzyć pole tekstowe i koło do wyboru kolorów. Tekst z textboxa wyświetlimy na LCD, a na wybrany kolor zaświecimy WS2812. Zacznijmy od tego prostszego, czyli tzw. textboxa (text field, pole tekstowe). W HTMLu mamy na to gotowy znacznik:

<input type="textbox" value="koronaferie 2020" id="text"></input>

Znacznik <input> to wejście ze strony użytkownika. Możemy także mieć wejście typu checkbox, radius, itd. Textbox to nasze pole tekstowe, a "value" to domyślny tekst naszego textboxa. 

No dobra, to było dość proste. Dane będziemy wysyłać do ESP dzięki metodzie get. Polega ona na wysyłaniu argumentów przy wywołaniu podstrony - u nas /set. Najlepiej będzie zrobić zmienną z całą stroną, i dopiero potem ją wysłać:

 var set = '/set?' + 'txt=' + $('#text').val();
 $.post(set);

Po wpisaniu "ip/set" dajemy znak zapytania - czyli wysyłamy już argumenty. Argumenty wysyłamy w formie "nazwa=dane". Tutaj będzie to "txt=", a dane to odczytanie wartości z textboxa o id #text. Kolejne argumenty zaraz dodamy - będziemy je oddzielać znakiem "&". Po przygotowaniu zmiennej wysyłamy żądanie. Najlepiej to umieścić w setInterval.

Zostało nam zrobić kolejną podstronę.

  server.on("/set", setParams);

void setParams()
{
   String text = server.arg("txt");
   lcd.print(text);
   server.send(200, "text/html", ""); //Send web page
}

Tworzymy zmienną "text" w której przechowujemy argument dla "txt". Wysyłamy jak zwykle kod 200, strony nie trzeba wysyłać - więc pozostawiamy pustą stronę.

Spróbuj teraz załadować kod, i zmienić tekst w textboxie. Powinien się zmieniać także na wyświetlaczu, z niewielkim opóźnieniem.

Czas na odrobinę magii 

Dodanie kolejnych argumentów nie będzie problemem. Dlatego to sobie zostawimy na później, a teraz zajmiemy się problemem "skąd wziąć argumenty". Dodamy sobie plugin "Spectrum" - dzięki niemu, będziemy mogli w łatwy i przyjemny sposób wybrać kolor naszych ledów. Szczegóły znajdziecie tutaj. Dodajemy zatem plik css na górze i js na dole strony:

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2@2.0.0/dist/spectrum.min.css">

    <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2@2.0.0/dist/spectrum.min.js"></script>

W lewej kolumnie dodajemy tekst "LED:" oraz znacznik input - tam będziemy wprowadzać kolory. Argument "value" to początkowy kolor - podany heksadecymalnie.

<p>LED: <input id="kolorki" value='#276cb8'/></p>

W kodowaniu na razie tyle co nic. Dodajemy jedynie informację (w document.ready, nie w setInterval), jaki ma być typ naszego wybieracza kolorów.

$('#kolorki').spectrum({
  type: "color"
});

Po otworzeniu i wgraniu strony, ujrzymy takie cudo:

Ale to dopiero połowa magii! Druga połowa będzie fizyczna. Wyjście naszego pola z kolorkami to tekst, dosłownie:

rgba(r,g,b,a)

Dlatego musimy sobie zrobić funkcję, która nam to rozbije na poszczególne komponenty. Kanał alpha będzie sterował jasnością WS. 

function spliceRGB(input)
{
var color = input.slice(input.indexOf('(') + 1, input.indexOf(')')); // "r, g, b, a"
var colors = color.split(',');

return {
    r: colors[0],
    g: colors[1],
    b: colors[2],
    a: colors[3]
}
}

Jest to dość prosta funkcja. Na początku usuwamy "rgba(" oraz ")", potem rozbijamy tekst na kawałki oddzielone ",". Zwracamy 4 wartości: r, g, b i a.

             var r = spliceRGB($("#kolorki").val()).r;
             var g = spliceRGB($("#kolorki").val()).g;
             var b = spliceRGB($("#kolorki").val()).b;
             var i = (spliceRGB($("#kolorki").val()).a * 255);

Tak będą wyglądały zmienne, które przekażemy ESP. Do funkcji podajemy wartość którą wybraliśmy, i dajemy zmiennej tylko dany kolor. Z racji tego, że kanał alpha ma wartości od 0 do 1, mnożymy go x255 aby uzyskać liczbę przyjazną ESP.

             var set = '/set?txt=' + txt + '&r=' + r + '&g=' + g + '&b=' + b + '&i=' + i;
             $.post(set);

Tworzymy dość długą zmienną, która po kolei zawiera wszystkie te wartości. Na końcu najzwyczajniej je wysyłamy. Jako zadanie dodatkowe spróbuj zrobić przycisk do włączania i wyłączania wbudowanego LEDa, ale już nie przez podstrony a get.

void setParams()
{
   int r = server.arg("r").toInt(); 
   int g = server.arg("g").toInt(); 
   int b = server.arg("b").toInt(); 
   int i = server.arg("i").toInt();
   String text = server.arg("txt");
   
 
   cls();
   lcd.print(text);

   for(int index=0; index<3; index++)
  {
    leds.setPixelColor(index, r, g, b);
    leds.setBrightness(i);
    leds.show();
  }
   server.send(200, "text/html", "");
}

Tak wygląda cała funkcja odczytująca dane. Odzyskujemy wartości kolorów, oraz tekst. Piszemy tekst na wyświetlaczu, po czym dla każdej diody ustawiamy wybrane kolory i jasność. Na końcu informujemy, że wszystko poszło sprawnie. Spróbuj teraz to wszystko odpalić na telefonie, i wygodnie z łóżka pobawić się LEDami - bardzo fajna zabawa, polecam :3

Suwak alpha nie dajemy na max. wartość - inaczej wyjście dostaniemy w postaci heksadecymalnej, z której nie wyciągniemy kolorów tak łatwo. Ustaw alpha na mniejszą od 1!

ESP01

Na początku napisałem, że układy ESP01 są fajne dla dedykowanych rozwiązań. Zrobimy sobie w takim razie małego ESP odczytującego temperaturę z drugiego pokoju, przekazujące dane do "dużego" ESP. W związku z tym, "usuwamy" wykres z DS:

void handleData()
{ 
  //ds.requestTemperatures(); 
  //String strona = (String)ds.getTempCByIndex(0);
  String strona = "0";
  strona += "\n";
  strona += analogRead(PIN_FRES);

Temperatura 1 z "wyłączonym" DS18B20.

Żeby zaprogramować teraz małe ESP, proponuję zrobić sobie do tego programator ze schematu. Tak wygląda mój:

 

Dzięki niemu nie trzeba kombinować z kablami - wystarczy wsadzić ESP i wrzucić program. Jeżeli mowa o programie, warto sobie powiedzieć znowu, co chcemy napisać. Najlepiej będzie, jeżeli małe ESP w ten sam sposób co przeglądarka, wyśle nam temperaturę. Robimy nowy projekcik:

Otwieramy plik main.cpp. Zacznijmy od dołączenia podstawowych bibliotek:

#include <Arduino.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

Z racji tego, że poprzedni projekt był konwertowany z projektu Arduino, biblioteki tym razem zainstalowałem przez platformio:

Następnie definiujemy piny. Przyjmijmy, że zrobimy kilka małych ESP i wsadzimy je do gniazdek - każde będzie miało czujnik i przekaźnik (tutaj LED).

#define PIN_LED 2
#define PIN_DS 0

Następnie tworzymy obiekty: klienta, DS, serwera. Stworzyliśmy także 4 adresy: IP, bramy, maski, i DNS. Dzięki nich będziemy mogli ustawić stałe IP naszemu ESP - w przeciwnym razie, jeżeli się zmieni, będziemy musieli zmieniać program i przepisywać wszystko. Pierwszy adres ustalamy sami - najlepiej zmienić po prostu ostatnią liczbę. DNSy zostawiamy, ponieważ z nich nie korzystamy - ale bramę i maskę możemy uzyskać z konsoli windowsowej CMD:

Default gateway to nasza brama, którą przepisujemy. Podobnie z maską - prawdopodobnie będziesz miał taką samą.

WiFiClient client;
OneWire ow(PIN_DS);
DallasTemperature ds(&ow);
ESP8266WebServer server(80);
IPAddress staleIP(192, 168, 43, 90);
IPAddress gateway(192, 168, 43, 1); 
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(8, 8, 8, 8);

Pamiętajmy o SSID i haśle naszego wifi - podaj tam wartości Twojego Wifi.

const char* ssid = ""; //nazwa
const char* pass = ""; //hasło

Teraz zrobimy funkcję setup. Nic tajemniczego chyba tu nie ma - IP będzie takie, jakie ustawiliśmy. Obsługujemy potem dwie strony: główną i /set.

void setup()
{
  pinMode(PIN_LED, OUTPUT);
  Serial.begin(115200);
  Serial.print("Lacze z wifi");
  ds.begin();
  WiFi.begin(ssid, pass);
  WiFi.config(staticIP, gateway, subnet, dns);
  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print('.');
    delay(400);
  }
  delay(500);
  Serial.println("Polaczono! IP:");
  Serial.println(client.localIP());
  server.on("/set", setParam);
  server.on("/", mainPage);
  server.begin();
}

W loopie nic nie musimy robić poza obsługą serwera.

void loop()
{
  server.handleClient();
}

Na stronie głównej będziemy wysyłać dane w tej samej formie co "duże" ESP. Dzięki temu bez problemu będziemy mogli pobrać temperaturę. Dodaliśmy także nagłówek "Access control allow origin", który pozwoli nam na łączenie się dużemu ESP.

void mainPage()
{
  ds.requestTemperatures();
  server.sendHeader("Access-Control-Allow-Origin", "*");
  server.send(200, "text/html", (String)ds.getTempCByIndex(0));
}

Z kolei funkcja obsługująca LEDa zawiera prostego ifa - jeżeli wysłaliśmy "led=on" to włączy, "led=off" to wyłączy, a cokolwiek innego ominie.

void setParam()
{
  String led = server.arg("led");
  if(led == "on") digitalWrite(PIN_LED, LOW);
  if(led == "off") digitalWrite(PIN_LED, HIGH);
  server.sendHeader("Access-Control-Allow-Origin", "*");
  server.send(200, "text/html", "");
}

Cały kod zatem będzie wyglądał tak:

#include <Arduino.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#define PIN_LED 2
#define PIN_DS 0

WiFiClient client;
OneWire ow(PIN_DS);
DallasTemperature ds(&ow);
ESP8266WebServer server(80);
IPAddress staleIP(192, 168, 43, 90);
IPAddress gateway(192, 168, 43, 1); 
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(8, 8, 8, 8);

const char* ssid = "dobre pomaranczowe"; //nazwa
const char* pass = "smerfysmerfy"; //hasło

void setParam()
{
  String led = server.arg("led");
  if(led == "on") digitalWrite(PIN_LED, LOW);
  if(led == "off") digitalWrite(PIN_LED, HIGH);
  server.sendHeader("Access-Control-Allow-Origin", "*");
  server.send(200, "text/html", "");
}

void mainPage()
{
  ds.requestTemperatures();
  server.sendHeader("Access-Control-Allow-Origin", "*");
  server.send(200, "text/html", (String)ds.getTempCByIndex(0));
}

void setup()
{
  pinMode(PIN_LED, OUTPUT);
  Serial.begin(115200);
  Serial.print("Lacze z wifi");
  ds.begin();
  WiFi.begin(ssid, pass);
  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print('.');
    delay(400);
  }
  delay(500);
  Serial.println("Polaczono! IP:");
  Serial.println(client.localIP());
  server.on("/set", setParam);
  server.on("/", mainPage);
  server.begin();
}

void loop()
{
  server.handleClient();
}

Wgrywamy kod do "małego" esp, podłączamy wszystko, i uruchamiamy Serial Monitor. Niestety, moje ESP się zbuntowało:

Na to wystarczy pobrać "Advanced IP Scanner", który był wspomniany w malinkowym kursie.

Uzyskany adres IP wpisujemy w przeglądarkę:

No, to teraz małe ESP ukrywamy w innym pokoju. Pamiętajmy jedynie, żeby dalej miało zasięg naszego routera. 

Przechodzimy do kodu dużego ESP:

    var temp = new XMLHttpRequest();
    temp.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
             var temperatura = this.responseText;
             document.getElementById('temp1').innerHTML = temperatura;
             addData(wykres, temperatura, 0);
        }
    };
    temp.open("GET", "http://192.168.43.75", true);
    temp.send();

Obok całego kodu dla "strony" dodajemy praktycznie taki sam kod dla "temp". Pamiętaj, żeby w "temp.open()" wpisać IP małego ESP. Zostało nam z "dużej" funkcji usunąć stary kod (tutaj macie całą funkcję):

if (this.readyState == 4 && this.status == 200)
          {
               var zawartosc = this.responseText;
               var dane = zawartosc.split("\n");
               var temp1 = dane[0];
               var fres = dane[1] / 4;
               var temp2 = dane[2];
               var cis = dane[3] / 100;
               var odl = dane[4];
               var btn = dane[5];
               var color = 'rgba('+fres +','+(fres - 20)+','+(fres - 20)+','+'1)';
               var r = spliceRGB($("#kolorki").val()).r;
               var g = spliceRGB($("#kolorki").val()).g;
               var b = spliceRGB($("#kolorki").val()).b;
               var i = (spliceRGB($("#kolorki").val()).a * 255);
               var txt = $('#text').val();
               var set = '/set?txt=' + txt + '&r=' + r + '&g=' + g + '&b=' + b + '&i=' + i;

               document.getElementById('temp1').innerHTML = temp1;
               document.getElementById('temp2').innerHTML = temp2;
               document.getElementById('light').style.color = color;
               document.getElementById('cis').innerHTML = cis;
               document.getElementById('odl').innerHTML = odl;
               $.post(set);
               if(!btn) document.getElementById('drzwi').innerHTML = 'otwarte';
               else document.getElementById('drzwi').innerHTML = 'zamknięte';
               addLabel(wykres, etykieta);
               addData(wykres, temp2, 1);
               popData(wykres, 0);
             
          }
      };

Wgrywamy kod. Uruchamiamy oba ESP, patrzymy czy IP się nie zmieniło (jeżeli jednak nie dałeś stałego IP), i wszystko powinno działać.

Jeżeli chodzi o kurs ESP - to chyba tyle.

Myślę, że dzięki temu kursowi teraz będziesz mógł postawić swój własny smartdom (lub jakiekolwiek inne urządzenie IoT). Nauczyliśmy się stawiać dynamiczne i responsywne strony WWW, odczytywać i zapisywać dane zarówno przez przeglądarkę, i FS, i ogólnie udało nam się z ESP zrobić "arduino". Możemy nawet zrobić całą sieć ESP01, gdzie każde ESP może sterować chociażby przekaźnikiem - i komunikować się do dużego ESP, lub malinki. Tak wygląda mój setup:

W razie jakichkolwiek pytań - śmiało pisz na dole. Zostawiam Ci jeszcze zipa z projektami do platformio, i bibliotekami - w razie gdybyś miał problemy z posklejaniem kodów w całość. Pamiętajcie - bądźcie kreatywni, i pochwalcie się poniżej swoimi projektami!

kurs esp.zip

Spis treści serii artykułów:

• 1. Omówienie, i przygotowanie środowiska
• 2. Zapoznanie z nowym środowiskiem, praca jako Arduino, prosty serwer WWW
• 3. Przyspieszony kurs na webmastera
• 4. Wykresy, zapis do SPIFFS, mini smart-dom
• 5. Odbiór danych z przeglądarki, stałe IP, łączenie modułów ESP

[Treker 2983]

Artykuł został opublikowany, więc podbijam, aby wszyscy widzieli go jako nowy temat

[rziomber 67]

Czy tam nie powinno być String(ds.getTempCByIndex(0))

zamiast rzutowania (String)ds.getTempCByIndex(0)?

https://www.arduino.cc/en/Reference.StringConstructor

Edytowano Marzec 15, 2020 przez rziomber

[Leoneq 264]

Ekspertem programowania nie jestem. (String)x napisałem, ponieważ podobnie konwertowałem zmienne do inta: (int)x - kwestia przyzwyczajenia. Sprawdziłem obie wersje kodu, twoją i moją, i obie poprawnie się kompilują, i działają. 

[Polecacz 101]

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

[MarcinU 0]

Cześć,
Mam problem z działaniem color pickera. Co bym nie robił to co prawda jest wyświetlany na stronie, ale jest martwy.. nie reaguje na klikanie, nie da się zmienić koloru oraz nie wysyła wybranej wartości do inputa. Sprawdziłem resztę kodu czyli spliceRGB i sterowanie WS2812 i ta część działa dobrze. Zrobiłem tak, że do spliceRGB wysyłam input '#text' zamiast '#kolorki' i w polu tekstowym wklejam ręcznie wartość jaką powinien wysyłać color picker.

Kiedy natomiast podglądam co bezpośrednio wysyła color picker przed pocięciem przez spliceRGB to wygląda na to, że nic nie wysyła. Println drukuje pustą linię w serial monitor.

Macie może pomysł co może być nie tak z color pickerem?

 

Edytowano Sierpień 14, 2020 przez MarcinU

[Leoneq 264]

Sprawdź konsolę, czy może skrypt palety kolorów nie wywala. Jeżeli w ogóle nie działa, spróbuj uruchomić go na komputerze - będziemy już coś wiedzieli. Jak na komputerze się nie uruchomi, to albo kombinujesz dalej co masz źle, albo szukasz innego skryptu na paletę.

[daneil737 3]

Cześć! Orientujesz się może jak zrobić kod z textinput ale bez jQuery?

Edit. Zrobiłem to (na ESP32), jeszcze raz piszę, że świetny tutorial.

Co do ESP01: czy taki programator będzie ok?

https://kamami.pl/konwertery-usb-uart-rs232/582371-konwerter-usb-uart-dla-esp-01esp-01s.html

Edytowano 20 września przez daneil737

[Leoneq 264]

Dobrze wiedzieć że Ci się udało (nie wiem czemu powiadomienie dostałem dopiero teraz..)

Myślę że taki programator mógłby zadziałać, trzeba tylko pamiętać o sterownikach do CH340G.