Bez kategorii Maciej 31 marca 2019

Pomiar temperatury, ciśnienia i wilgotności z BME280 do aplikacji na smartphonie [Out Of the box Project]

Witam,

ten kurs głównie w wersji obrazkowej 🙂

a 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

Zakładka Variables
Ostatnio zapisana wartość
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 (60min 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:

void loop() {
    remoteMe.loop();
    static long time=0;
    if (time+10000<millis()){
      time=millis();
      sendData();
    }
}

void loop() {

remoteMe.loop();

static long time=0;

if (time+10000<millis()){

time=millis();

sendData();

}

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

void sendData(){
  double temp[10];
  double pressure[10];
  double humm[10];
  for(int i=0;i<9;i++){
    temp[i]= mySensor.readTempC();
    pressure[i]= mySensor.readFloatPressure();
    humm[i]= mySensor.readFloatHumidity();
    delay(100);
  }

  sort(temp,10);
  sort(humm,10);
  sort(pressure,10);


  setHumm(round(humm[5]));
  setPress(round(pressure[5]/100));
  setTemp(round(temp[5]));

}

void sendData(){

double temp[10];

double pressure[10];

double humm[10];

for(int i=0;i<9;i++){

temp[i]= mySensor.readTempC();

pressure[i]= mySensor.readFloatPressure();

humm[i]= mySensor.readFloatHumidity();

delay(100);

}

sort(temp,10);

sort(humm,10);

sort(pressure,10);

setHumm(round(humm[5]));

setPress(round(pressure[5]/100));

setTemp(round(temp[5]));

}

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

  setHumm(round(humm[5]));
  setPress(round(pressure[5]/100));
  setTemp(round(temp[5]));

setHumm(round(humm[5]));

setPress(round(pressure[5]/100));

setTemp(round(temp[5]));

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ć też 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: icon512.png, icon192.png, iconApple.png po prostu przeciągając nowe ikonki w “Drop Files here” i reinstalując aplikację – żeby pokazać QR code dla nowej isntalacji 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 scriptHistory.js

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

Artykuły