Wstęp – głównie o mojej platformie

W poprzednim kursie na majsterkowo opisałem odczyt temperatury przy pomocy platformy którą tworzę. Od publikacji tamtego artykułu upłynęło trochę czasu ( dokładnie to 10 miesięcy ) platforma RemoteMe mocno się rozwinęła z punktu widzenia wcześniejszego kursu:

• Zostały wprowadzone Variable – jako wariacja topic-subscribera.
  • z możliwością zapisu danych historycznych.
• Kreator stron – z gotowymi komponentami działającymi out-of-the-box.
• Szybkie projekty – gdzie kilkoma kliknięciami można zbudować coś działającymi (ten kurs dotyczy jednego z nich).
• Eksport stron jako aplikację PWA (też w tym kursie).
• Inne usprawnienia, ułatwienia itd – jednak nie została w żaden sposób ograniczona możliwość pełnej modyfikacji projektów.

O RemoteMe najkrócej jak to możliwe : hosting stron WWW, z gotowymi komponentami bibliotekami do kontrolowania IoT + protokoły, biblioteki, możliwość zapisywania danych do bazy danych i wiele więcej. Współpracuje z Arduino, RasbperryPi, i innymi – implementacja przesyłu wiadomości jest opensourcowa, więc można jak ktoś chce zaimplementować na własnym IoT. Biblioteki : javascript, python (współpracujące z programem na RPI), Java. Posiada API Restowe dla bardziej zaawansowanych rozwiązań. I eksport projektów jako aplikacje na Androida i iPhona (o tym też w tym kursie).

RemoteMe nie jest dla wszystkich zwłaszcza dla osób, które nie lubią korzystać z rozwiązań chmurowych.

Wstęp do kursu

ten kurs głównie w wersji obrazkowej – bo tak najprościej – zaintersowanych poznaniem mechanizmów głębiej zachęcam do przeczytania dokumentacji na www.remoteme.org 

na filmie całość po angielsku

Tytuł Kursu mówi sam za siebie – stworzycie aplikację na smarthpona, gdzie odczytacie pomiary z BME280, czyli ciśnienie wilgotność i temperaturę + historię w formie wykresu. Na dole kursu omówienie jak to działa.

Start

Logujemy się do aplikacji i przechodzimy do https://app.remoteme.org/en/#/app/quickstart

Klikamy “Read More or Buid it”

Potrzebne części:

Połączenia

Kolejny krok to budowanie plików źródłowych ( musimy uzupełnić nazwę wifi i hasło – możemy pominąć i uzupełnić w kodzie źródłowym w arduino IDE)

Nie musimy uzupełniać innych wartości, zielony tekst na górze informuje nas, że wszystko jest OK

Klikamy dwukronie Next Step.

Klikamy “Build Project”:

Ściągamy kod źródłowy do ESP i otwieramy go w arduino IDE

W arduino IDE instalujemy wymagane biblioteki:

W arduino IDE -> Tools -> Manage Libraries:

wyszukujemy wszystkie biblioteki i każdą instalujemy:

Wgrywamy sketch do ESP

Po wgraniu i uruchomieniu ikonka się zmieni:

Instalacja na smartphonie:

wybieramy platformę, pojawi się okno:

Klikając tworzymy potrzebne pliki do instalacji aplikacji (więcej tutaj):

Skanujemy QR code, lub w inny sposób otwieramy link w chrome na telefonie z androidem ( użytkownicy iPhone powinni podążać zgodnie z krokami wypisanymi nad QR codem )

Na telefonie (z androidem ) wyskoczy powiadomienie czy zainstalować aplikację na głównym ekranie – klikamy tak, a potem dodaj. Na głównym ekranie pojawi się ikona programu:

,a po uruchomieniu:

Po kliknięciu w “show history” będzie wykres, który u Was jest prawie pusty (nie ma jeszcze danych):

Gotowe :)

Teraz opis jak to działa i co się stało:

Do przechowywania danych służą trzy zmienne humm, press i temp możemy je podglądnąć:

Więcej o zmiennych w artykule opisujących zmienne w RemoteMe

1. Zakładka Variables
2. Ostatnio zapisana wartość
3. Historia wartości zaokrąglona do godziny

,żeby zmienić zaokrąglanie dla historii –  klikamy ustawienia historii:

potem “Disable or change round” i w okienku ustawiamy w minutach zaokrąglanie (60 oznacza zaokrąglenie do godziny)

Zielona poświata oznacza, że zmienna właśnie została zmieniona przez nasze ESP. Dzieje się tak dlatego że:

Co 10 sekund wysyłamy dane do RemoteMe funkcją:

Która wykonuje dziewięć odczytów i na serwer wysyła medianę:

Pozwala to na przefiltrowaniu błędnych odczytów – które czasem się zdarzają.

Dane pomiarowe są odczytywane przez stronę internetową, którą możemy otworzyć także na komputerze:

Wszystkie komponenty, które zostały użyte mogą być tak samo wstawione przez Was do nowej strony internetowej więcej w artykule na temat komponentów

Aplikacja na androida/iPhona to tak zwana aplikacja progresywna (PWA dla zaciekawionych odsyłam tutaj,  a tych co chcą zmieniać pliki jak ikonki itd do artykułu o PWA w platformie RemoteMe) , oczywiście możecie łatwo zmienić ikonkę zmieniając pliki ikon:  

po prostu przeciągając nowe ikonki w “Drop Files here” i reinstalując aplikację – żeby pokazać QR code dla nowej instalacji klikamy ikonę androida lub apple na belce :

Wykresy, które są widoczne na podstronie są renderowane przy pomocy plotly.js – i sposób ich renderowanie można zmienić w pliku 

Dane pobierane są przy pomocy RESTów, opis restów w dokumencie swaggerowym w zakładce Variables-rest

Pomysły na rozwinięcie projektu:

Możecie dodać opcje usypiania do swojego ESP, żeby nie mielił cały czas loopa :) – pozwoli to też na uruchomienie projektu na baterii.

Pozdrawiam

Maciej