Serwer na ESP8266

[Rak_Rakoski]

Witam, chcę zrobić prostą stronkę na esp ale nie wiem jak wysłać do klienta tło strony i odczyt z czujników Arduino. Esp pracuje jako serwer bez dostępu do internetu. Jestem zielony w temacie prosiłbym też o jakiś poradnik dotyczący wspomnianego układu. (Arduino i ESP8266 są na jednej płytce https://abc-rc.pl/product-pol-9905-UNO-WiFi-R3-CH340-z-modulem-WIFI-ESP8266-8Mb-flash-zgodny-z-Arduino.html )

[kaczakat]

Na Youtube jest seria poradników HTML, JavaScript i CSS na tym kanale: https://www.youtube.com/user/MiroslawZelent/playlists. Nie potrzebujesz mieć dla "serwera" UNO + ESP. W tym układzie UNO byłby trzecią nogą, chyba że potrzebujesz więcej pinów, wtedy może być doklejką. Ale całość serwer lepiej wgrać do ESP - więcej MHz, flash i ram, jak to uruchomić na Arduino jako niezależny mikro-kontroler poradników jest mnóstwo.  Jak już umiesz zrobić swoją stronę to instalujesz definicje płytek do ESP na Arduino IDE, bierzesz pierwszy z brzegu ESP, do pierwszych testów polecam Witty, NodeMCU, Wemos MINI. Od raz  z przykładów możesz wgrać jakiś serwer, ale do responsywnej strony polecam wykorzystanie websockets. Pliki strony można mieć w kodzie szkicu lub wgrane na dysk flash ESP - spiffs i przykład FSBrowser. Prosty przykład z wyświetlaniem 4 informacji z ESP: link . Zaletą websockets jest natychmiastowa aktualizacja wszystkich podłączonych klientów - klikasz sobie w komputerze w przeglądarce przycisk ON to od razu widzi to kolega na przeglądarce w telefonie. ESP obsługuje jednocześnie 5 klientów, ale to zwykle wystarcza do prostych rzeczy. Trzeba coś tam programować z obu stron, ESP wysyła dane do strony, tu musisz sobie to funkcjami JS obrobić i wrzucić do odpowiednich pól, jak użytkownik zrobi coś na stronie to znowu musisz wysłać funkcjami JS to do ESP i znowu coś z tym zrobić na ESP. Niestety trzeba dobrać też wersje zainstalowanych płytek i bibliotek, np. ESP8266 mam w wersji 2.4.2, na razie nie wszystkie biblioteki działają z 2.5. Wersje json też muszę trzymać 5.13.2 bo znowu inne biblioteki się burzą. 

[Rak_Rakoski]

Czytałem trochę więcej od ostatniego razu o esp i html'u i wydaje mi się że powinienem użyć procedur get i post, ale nie wiem jak je wykorzystać. Po drugie w podesłanym przez Ciebie przykładzie są polecenia których nie rozumiem, np

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)

IPAddress ip = webSocket.remoteIP(num);

Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\r\n", num, ip[0], ip[1], ip[2], ip[3], payload);

Dodatkowo w innym przykładzie widziałem jeszcze jakieś e.serialprint czy coś takiego.

[kaczakat]

Zrobiłem ten serwerek dwa lata temu modyfikując gotowca i dalej tego nie rozumiem, także to nie jest konieczne do działania ;D. Do tego funkcje tam zrobione są bardzo prymitywne jak patrzę z perspektywy tego czasu, ale generalnie to są funkcje i argumenty. 

Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\r\n", num, ip[0], ip[1], ip[2], ip[3], payload); - to jest wydruk sformatowany, w miejsce %d wstawia inty z talibcy ip. Tak jest przechowywany numer IP najwyraźniej. Metoda printf nie jest dostępna w AVR, np. w UNO. 

webSocketEven to jest funkcja wywoływana gdy biblioteka uzna za stosowne, ma zareagować gdy ktoś kliknie np. załączenie leda (czy tam przekaźnik, ale po prostu przycisk) tak by wszyscy podpięci w tym czasie do serwera dostali aktualizację. Biblioteka wie, że to TA funkcja bo setup jest webSocket.onEvent(webSocketEvent);. Potem w loop jest tylko webSocket.loop();.

A generalnie to musisz patrzeć na to przy dwóch ekranach, jak coś się wydarzy na stronie to wysyłany jest komunikat, to jest ten "payload". 

Funkcje biblioteki  informują co to było za zdarzenie (event) i jest to przekazywane w zmiennej WStype_t type, to jakieś liczby, typ porządkowy by działał z case. Masz instrukcje switch, która reaguje na połączenie nowego użytkownika (dostaje pełen zestaw danych), na rozłączenie, na odebranie tekstu, na nieznane zdarzenie.

To czego tu brakuje to gdy np. stan led zmieni się po działaniu np. przycisku. Bo jest co prawda również komunikat cyklicznie wysyłany tu webSocket.broadcastTXT("start"+token+String(VAR1)+token+String(VAR2)+token+String(VAR3)+token+String(VAR4)); - nad tym długo myślałem, ale nie zawiera stanów led. Generalnie to było do cyklicznego przesyłania czterech temperatur, a w początkowych testach uptime, bo zwykła strona odświeżana co 1s padała po kilku godzinach.

Na pewno siedziałem wewnątrz biblioteki i rozkminiałem co do czego jest w funkcjach, jakie zdarzenia mogą się pojawić i być obsłużone. A potem to samo od strony JS w kodzie strony - parsowanie komunikatów od ESP, wydobywanie zmiennych, napełnianie pól, obsługa kliknięć w przyciski i przesyłanie komunikatu do ESP.

e.serialprint to nie wiem, ale JS to program odpalony na stronie WWW i może po prostu wysyła jakieś informacje na serial PC.  Zresztą to może być cokolwiek, zależy czy to było w kodzie ESP czy na stronie, jak w ESP to ktoś mógł napisać swoją klasę, stworzyć obiekt e zamiast Serial, metodę serialprint zamiast print i działa tak samo.

GET i POST są użyte w przykładowym serwerze AdvancedWebServer, wgraj i zobacz czy Ci pasuje...

 

[Rak_Rakoski]

W takim razie jak składać ten payload i skąd strona u klienta wie gdzie go umieścić?

[kaczakat]

Do tego piszesz program w kodzie strony, zmienne, funkcje, parsowanie, itp., po prostu Java Script i od tego masz ten link do kursu. Nie wszystko tam jest, część co mi było potrzebne wyszukiwałem w opisie języka JS, wszystko jest w google, opisujesz problem, wchodzisz w link, jest funkcja i przykłady użycia. C,C++,C#, JS i JAVA są wszystkie do siebie podobne. Robiąc to na stronie WWW program wykonuje się na PC klienta i nie musisz dziubdziać zmiennymi 8-bitowymi. Polecam gierkę w wisielca z kursu, też świetnie działa na ESP8266, wgrałem do kodu strony chyba  wszystkie przysłowia i powiedzenia z Wikipedii :D.