Wysyłanie danych z ESP do strony internetowej

W tym kursie krótko jak wysłać i wyświetlić dane z ESP ( użyłem WEMOS w wersji D1 pro, jednak identycznie będzie dla innych płytek prototypowych) na stronie internetowej. W przykładzie wykorzystałem ultradźwiękowy czujnik odległości i pomiar z niego będziemy wyświetlać na stronie internetowej.

Wideo

całość kursu krok po kroku jest zamieszczona w wideo:

Założenia

Podłączenia

Strona internetowa

Potrzebne będzie konto na remoteMe.org tworzymy tutaj: https://app.remoteme.org w zakładce Sign up.

Po utworzeniu konta przechodzimy do zakładki Variables i po prawej stronie na górze “Add” wypełniamy:

Pola opisane tutaj

Po tym kroku mamy w systemie naszą zmienną, która będzie zapisywana przez ESP i wyświetlana na stronie internetowej.

Żeby dodać stronę internetową.

Przechodzimy do zakładki “Devices”, “New Device” a następnie “New Web Page”:

Pola opisane tutaj

Teraz dodamy komponent do wyświetlania zmiennej. Otwieramy belkę strony internetowej, klikamy na index.html, następnie “Edit With wizard”, i “Insert Component”:

Wybierając lupke “1” wybieramy naszą zmienna “distance” – bo chcemy żeby właśnie stan tej zmiennej wyświetlał nasz komponent.

Więcej o generowaniu kodu tutaj

Po kliknięciu “Insert”, możemy otworzyć naszą stronę internetową w nowej zakładce (index.html open in new tab) otrzymamy:

Oczywiście “zegar” pokazuje 0 – domyślną wartość zmiennej. Żeby “zegar” się ruszał musimy zmienić naszą zmienna przez kod ESP.

Kod ESP

Przed wgraniem sketcha upewnij się, że zainstalowałeś potrzebne biblioteki  https://remoteme.org/network-devices/

Na początek musimy dodać nasze urządzenie w RemoteMe:

Przechodzimy do zakładki “Devices”, “New Device” a następnie “New Network device” .

Uzupełniamy:

Pola opisane tutaj

Pora wygenerować kod do arduino, klikamy “burger menu” i “Code generator wizard”:

W pierwszym kroku zaznaczamy naszą zmienną, w drugim parametry naszej sieci Wifi, w kolejnych krokach nic nie zmieniamy. W kroku ostatnim klikamy “View” żeby wyświetlić nasz kod, który przeklejamy do Arduino IDE

Dodane linie kodu zaznaczone na żółto:

Definiujemy podłączenie pinów, żeby kod był czytelniejszy.

Tryb pracy pinów

Wysyłanie odległości do systemu remoteMe wykorzystaliśmy wygenerowaną przez “wizarda” funkcję  setDistance 

Blok kodu również pilnuję, żeby nie wysyłać pomiaru częściej niz 700ms, ponieważ RemoteMe nie pozwoli na przekazanie więcej  wysłanych wiadomości w ciągu minuty niż 110.

Sama funkcja pomiaru wygląda następująco:

Działanie sensora, jak i kodu w tym artykule

Po wgraniu programu do ESP, przy otwartej stronie internetowej zobaczymy, że nasz “zegar” pokazuje zmierzone odległości.

Smartphone

Żeby otworzyć stronę internetową najlepiej zeskanować kod QR dostępny po kliknięciu index.html -> get anymous link -> “zielona ikona kodu QR”. Pozwoli nam to na otworzenie i automatyczne zalogowanie się do naszego konta 🙂 więcej tutaj

Podsumowanie

W tym artykule pokazałem najprostszy sposób na wyświetlenie pomiaru na stronie internetowej, oczywiście zmiennych może być więcej i możemy je wyświetlać na różnych komponentach, a nawet dodać własne. 

Zachęcam do zapoznania się z artykułami odnośnie wykorzystanych technik, których linki umieszczałem w artykule.