Skocz do zawartości
Leoneq

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

Przez Leoneq, w Artykuły użytkowników

Pomocna odpowiedź

Leoneq    101

Leoneq
Napisano

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:

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. 

image.png.7a9538d18adf9c1ecf3274c8c32d3953.png

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:

image.thumb.png.699ac6ca7da6261df98cf9f46e6c2abc.png

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!

image.thumb.png.b96e7921e36edfe740b61e6389aa3870.png

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);

image.thumb.png.ed6c0edf477d0a50bf412b251c1c9afb.png

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:

 image.thumb.png.048e265f7cf16a2cf15fe6e1544a73a1.pngimage.thumb.png.f714b675190274da20cbc71f04fdf85e.png

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:

image.thumb.png.45eb6023ccccaa756d80d6fb90cd45e4.png

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:

image.thumb.png.f3f8d2cbe5bc1650f42f2c7d24ee88d7.png

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:

image.thumb.png.153538a8b986dcffb2f444ae0be88425.png

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:

image.thumb.png.191ec7d1f1541a69ef95ba2b71ecac09.png

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

image.thumb.png.b5e6a75f6f66c42c662b717084ca0447.png

Uzyskany adres IP wpisujemy w przeglądarkę:

image.thumb.png.017cecbfe27bc54bc5344ab0831e0da2.png

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

image.thumb.png.1a44a731a320e9015eb5b248130b5dd9.png

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ć.

image.thumb.png.92357d3e9d145c0e5ffa81169aa3c728.png

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:

image.thumb.png.dbe0abdc12e98462069ded2e4d2180ef.pngimage.thumb.png.e2c1b6f0e077d2d89cbdf520ce7c5d42.png

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:

  • Lubię! 4

Udostępnij ten post

Link to post
Share on other sites

Treker    1907

Treker

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

Udostępnij ten post

Link to post
Share on other sites

Leoneq    101

Leoneq

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ą. 

Udostępnij ten post

Link to post
Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Jeśli masz już konto to zaloguj się teraz, aby opublikować wiadomość jako Ty. Możesz też napisać teraz i zarejestrować się później.
Uwaga: wgrywanie zdjęć i załączników dostępne jest po zalogowaniu!

Gość
Dołącz do dyskusji! Kliknij i zacznij pisać...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.

×
Przejdź do listy tematów
×
×
  • Utwórz nowe...