Modyfikacja przykładu WebInterface Arduino

[klew]

A czy można jakoś w sekcji Additional Settings ukrywać pole tekstowe w zależności od stanu zmiennej np. gdy dana opcja jest wyłączona to brak widocznego pola. Mam na myśli tutaj kod realizowany w Loop-pie

To co widać na www urządzenia jest generowane przez urządzenie w momencie wejścia na stronę. To co się dzieje w "loop" nie ma wpływu na to co widzisz na www i nie da się tego w prosty sposób połączyć.

Strona www musiałaby mieć dodany jakiś kod w javascript, który będzie cyklicznie odpytywał serwer (urządzenie) aby odczytać ten stan i na tej podstawie mógłby modyfikować swój kod strony.

Ogólnie to jest skomplikowany temat. Polecam najpierw zaznajomić się z tworzeniem stron od strony HTML i Javascript, oraz z tym jak takie strony są zbudowane i jak działają (frontend / backend). Następnie zrobić sobie tego typu stronę (zarówno od strony frontu, jak i backendu) i dopiero potem wrócić ewentualnie z pytaniem, jak to zrobić na ESP.

[petione]

A czy można jakoś w sekcji Additional Settings ukrywać pole tekstowe w zależności od stanu zmiennej np. gdy dana opcja jest wyłączona to brak widocznego pola. Mam na myśli tutaj kod realizowany w Loop-pie

To co widać na www urządzenia jest generowane przez urządzenie w momencie wejścia na stronę. To co się dzieje w "loop" nie ma wpływu na to co widzisz na www i nie da się tego w prosty sposób połączyć.

Strona www musiałaby mieć dodany jakiś kod w javascript, który będzie cyklicznie odpytywał serwer (urządzenie) aby odczytać ten stan i na tej podstawie mógłby modyfikować swój kod strony.

Ogólnie to jest skomplikowany temat. Polecam najpierw zaznajomić się z tworzeniem stron od strony HTML i Javascript, oraz z tym jak takie strony są zbudowane i jak działają (frontend / backend). Następnie zrobić sobie tego typu stronę (zarówno od strony frontu, jak i backendu) i dopiero potem wrócić ewentualnie z pytaniem, jak to zrobić na ESP.

Tak domyślam się, aczkolwiek nie oczekiwałem aż tak dużej funkcjonalności. Wystarcza mi generalnie zmiana po odświeżeniu strony. Myślałem że jak gdzieś tam się inicjuje w kodzie jakieś pole to potem można by je po prostu wyłączyć i przeładować stronę.

1.A tak przy okazji. w nowej wersji SD 25.01.03 (2025-01-30) dodałeś Supla Autodiscovery: automatyczne wykrywanie adresu serwera na podstawie adresu e-mail konta.
Czy jeśli w przykładzie WebInterface nie wpiszę w ustawieniach konfiguracyjnych adresu serwera(zostawię pole puste) to urządzenie się poprawnie połączy z Cloud? (czyli w efekcie mogę ukryć to pole).
2. VirtualBinary: możliwość zachowania stanu w pamięci - czyli możliwość zapamiętywanie własnych zmiennych? Jeśli tak to mógłby podać przykład użycia?

[klew]

Tak domyślam się, aczkolwiek nie oczekiwałem aż tak dużej funkcjonalności. Wystarcza mi generalnie zmiana po odświeżeniu strony. Myślałem że jak gdzieś tam się inicjuje w kodzie jakieś pole to potem można by je po prostu wyłączyć i przeładować stronę.

Te instancje klasy "html element" mają w sobie kod, który generuje HTML i go wysyła. Możesz utowrzyć własną implementację i do niej przekazywać ustawienie jakimś parametrem.

1.A tak przy okazji. w nowej wersji SD 25.01.03 (2025-01-30) dodałeś Supla Autodiscovery: automatyczne wykrywanie adresu serwera na podstawie adresu e-mail konta.
Czy jeśli w przykładzie WebInterface nie wpiszę w ustawieniach konfiguracyjnych adresu serwera(zostawię pole puste) to urządzenie się poprawnie połączy z Cloud? (czyli w efekcie mogę ukryć to pole).

Autodiscovery działa tylko z kontami na oficjalnych serwerach (z prywatnymi nie działa). Także nie jest dobrą praktyką ukrywanie pola od serwera, bo nie podłączysz takiego urządzenia do prywatnej instancji.
W gotowych "html elementach" nie ma opcji ukrycia serwera i nie planuję tego dodawać. Ale jak zawsze - skopiuj sobie plik, zmień nazwę, zmień co potrzebujesz i dodaj go sobie do projektu, zamiast "html elementu" z biblioteki.

2. VirtualBinary: możliwość zachowania stanu w pamięci - czyli możliwość zapamiętywanie własnych zmiennych? Jeśli tak to mógłby podać przykład użycia?

VB może zapamiętać stan między resetami. Nic więcej tam nie ma.
Jeśli chcesz jakieś parametry zapisać, to użyj Config'a do tego.

[petione]

Doprowadzilem swój projekt prawie do konca i... pojawił sie problem.
Jeśli w Operze lub Chrome odświeżam strone WWW to pojawia mi sie akcja i komunikat równoznaczny z przyciśnięciem przycisku Save. Gdy pisalem program korzystalem z przeglądarki wbudowanej w VSC i tam jest git. Na telefonie z androidem i Operą tez jes OK . Podpowie mi ktos co moze być przyczyną takiego zachowania, ktore mozna powiedziec rowala mi troche projekt.

[klew]

Doprowadzilem swój projekt prawie do konca i... pojawił sie problem.
Jeśli w Operze lub Chrome odświeżam strone WWW to pojawia mi sie akcja i komunikat równoznaczny z przyciśnięciem przycisku Save. Gdy pisalem program korzystalem z przeglądarki wbudowanej w VSC i tam jest git. Na telefonie z androidem i Operą tez jes OK . Podpowie mi ktos co moze być przyczyną takiego zachowania, ktore mozna powiedziec rowala mi troche projekt.

To jest normalne zachowanie przeglądarki. Odświeżanie strony ponawia wysłanie formularza.
To można poprawić od strony serwera na ESP, i dać redirect po wysłaniu formularza

[petione]

To jest normalne zachowanie przeglądarki. Odświeżanie strony ponawia wysłanie formularza.
To można poprawić od strony serwera na ESP, i dać redirect po wysłaniu formularza

Mistrzu jak?

[petione]

Krzysztofie pomożesz? W którym pliku dodać Redirect i z jakim zapisem.
Ślicznie proszę

[klew]

Krzysztofie pomożesz? W którym pliku dodać Redirect i z jakim zapisem.
Ślicznie proszę

Nie wiem, nie sprwadzałem tego.

Tutaj masz to zrobione na esp-idf:
https://github.com/SUPLA/supla-device/b ... er.cpp#L68

Dla każdego requestu typu "POST" jest dodany redirect na tą samą stronę, tylko jako "GET".

Coś podobnego trzeba zrobić w:
https://github.com/SUPLA/supla-device/b ... server.cpp

[petione]

Krzysztofie pomożesz? W którym pliku dodać Redirect i z jakim zapisem.
Ślicznie proszę

Nie wiem, nie sprwadzałem tego.

Tutaj masz to zrobione na esp-idf:
https://github.com/SUPLA/supla-device/b ... er.cpp#L68

Dla każdego requestu typu "POST" jest dodany redirect na tą samą stronę, tylko jako "GET".

Coś podobnego trzeba zrobić w:
https://github.com/SUPLA/supla-device/b ... server.cpp

Dziękuje jak zwykle Ci Klew za naprowadzenie na rozwiązanie.

Wiec aby wyłączyć ponawianie wysłania formularza po odświeżeniu strony należy:
w pliku esp_web_server.cpp

Code: Select all

void postHandler()
Zamiana  z
...
//getHandler(); na
//NOTE Wyłączenie przesyłania formularza strony po odswierzeniu strony
  serverInstance->getServerPtr()->sendHeader("Location", "/", true);
  serverInstance->getServerPtr()->send( 303, "text/plain", "Redirecting...");  

void postBetaHandler() {
...
//getBetaHandler(); na
//NOTE - Wyłączenie przesyłania formularza strony po odswierzeniu strony
serverInstance->getServerPtr()->sendHeader("Location", "/beta", true);
serverInstance->getServerPtr()->send(303, "text/plain", "Redirecting...");  

Było to o tyle dla mnie ważne ponieważ nie aktualizowały się poprawnie wpisy w polach.

Następnym etapem było dodanie nowego przycisku Refresh umożliwiającego po prostu wygodne odświeżenie strony. Aby to uczynić należy:
w pliku html_generator.cpp
w:

Code: Select all

void Supla::HtmlGenerator::sendSubmitButton(Supla::WebSender* sender)
sender->send(
    //NOTE - dodanie przyciskow Refresh  
    "<button type=\"button\" onclick=\"location.reload();\">"
      "REFRESH"
      "</button>"
      ...

Następna zmiana dla czytelności w kolejnym poście

[petione]

Przycisk Update

Wiele osób pytało dodać możliwość aktualizacji.
Dla usystematyzowania przypominam

w pliku main.cpp należy dodać:

Code: Select all

#ifdef ARDUINO_ARCH_ESP32
#include <HTTPUpdateServer.h>
HTTPUpdateServer httpUpdater;
#else
#include <ESP8266HTTPUpdateServer.h>
ESP8266HTTPUpdateServer httpUpdater;
#endif

oraz w setup()

Code: Select all

httpUpdater.setup(suplaServer.getServerPtr(), "/update");

Aby przejść do strony aktualizacji należy jednak z "ręki" wpisać w pasku adresu:
adres_IP urządzenia/update

co nie jest najwygodniejsze.

Można wiec dodać przycisk Update


Aby uzyskać taką funkcjonalność należy w pliku html_generator.cpp dodać zapis w:

Code: Select all

void Supla::HtmlGenerator::sendSubmitButton(Supla::WebSender* sender) {
  sender->send(
...
 //NOTE Dodanie przycisku Update
      "<button type=\"button\" onclick=\"window.location.href='/update';\">"
      "UPDATE"
      "</button>"
      ...

Efektem naciśnięcia przycisku jest automatyczne przejście pod: