Obsługa Widgetu Wykresy
W tym artykule omówimy zajmiemy się prezentacją danych dla naszych punktów prezentowych z wykorzystaniem widgetu "Wykresy". Widok ten umożliwia wyświetlenie danych dla pojedynczego lub wielu punktów pomiarowych w wybranym przedziale czasowym. Stworzymy kilka nowych punktów pomiarowych, odpowiednio przygotujemy dane do wysłania w urządzeniu ADEAS UNO i wyświetlimy otrzymane wyniki na wykresach. Obecnie platforma ADEAS APP udostępnia 7 różnych rodzajów wykresów do wykorzystania i użyjemy dzisiaj każdego z nich. Dane możemy zaprezentować na 4 sposoby : wykres liniowy(zwykły + warstwowy), słupkowy, kołowy(kołowy 2D + kołowy 3D) oraz wykres porównawczy (zwykły + poziomy). W tym celu stworzymy 8 nowych punktów pomiarowych po 2 dla każdego sposobu prezentacji.
Przejdźmy do zakładki urządzenie i dodajmy nasze nowe punkty pomiarowe. Wszystkie dane będą wartościami liczbowymi więc skorzystamy z typu danych "Number". Jak pamiętamy z poprzednich artykułów nazewnictwo naszych punktów pomiarowych jest dowolne, natomiast warto trzymać się pewnej nomenklatury w celu uniknięcia problemów w przypadku dużej ilości dodanych punktów. Jeżeli dodaliśmy poprawnie wszystkie dane pomiarowe widok naszego urządzenia powinien przedstawiać się następująco :
Możemy przejść teraz do stworzenia nowych widoków w naszym dashboardzie w tym celu należy z listy etykiet wybrać opcję "Wykresy" siedmiokrotnie. W rezultacie otrzymamy 7 nowych widoków do skonfigurowania. Dodając nowy punkt pomiarowy do naszego wykresu otrzymamy możliwość wyboru rodzaju pomiaru. Jest to wartość która będzie wyświetlana w przypadku wyboru większego zakresu czasowego (godzina, 6 godzin itd). Możemy wybrać między wartością średnią, maksymalną, minimalną oraz różnicą między wartością maksymalną a minimalną. Na potrzeby tego artykułu wybierzmy dla każdego punktu pomiarowego domyślną opcję czyli wartość średnią.
Skonfigurujmy nasze widgety według następującej kolejności :
1. Wykres słupkowy: Punkty pomiarowe : slupkowy_1, slupkowy_2. Wielkość : 50%
2. Wykres liniowy: Punkty pomiarowe : liniowy_1, liniowy_2. Wielkość : 50%
3. Wykres liniowy warstwowy: Punkty pomiarowe : liniowy_1, liniowy_2. Wielkość : 50%
4. Wykres porównawczy: Punkty pomiarowe : porownawczy_1, porownawczy_2. Wielkość : 50%
5. Wykres porównawczy poziomy: Punkty pomiarowe : porownawczy_1, porownawczy_2. Wielkość : 50%
6. Wykres kołowy: Punkty pomiarowe : kolowy_1, kolowy_2. Wielkość : 50%
7. Wykres kołowy 3D: Punkty pomiarowe : kolowy_1, kolowy_2. Wielkość : 50%
Jeżeli udało nam się dodać wszystkie widoki, nasz dashboard powinien przedstawiać się następująco:
Możemy przejść teraz do najważniejszej części, czyli przygotowania i wysłania danych za pośrednictwem serwera WEB API do bazy danych. Stwórzmy nowy szkic i zainicjujmy zmienne do przechowywania wartości wysyłanych do naszej bazy danych.
#include <ADEAS.h>
/**** SETUP ****/
void setup()
{
ADEAS::setup("WIFI_SSID", "WIFI_PASS", "TOKEN");
}
int slupkowy_1 = 0;
int slupkowy_2 = 0;
int liniowy_1 = 0;
int liniowy_2 = 0;
int porownawczy_1 = 0;
int porownawczy_2 = 0;
int kolowy_1 = 0;
int kolowy_2 = 0;
/**** LOOP ****/
void loop()
{
ADEAS::process();
if (API::isReady())
{
}
}Dla wykresu słupkowego i kołowego wygenerujemy dla obu punktów pomiarowych losową wartość z zakresu od 0, 100. W tym celu dodajmy do funkcji setup() funkcję randomSeed() która będzie generowała nam losową wartość na podstawie napięcia z pinu przetwornika analogowo-cyfrowego.
void setup()
{
ADEAS::setup("WIFI_SSID", "WIFI_PASS", "TOKEN");
randomSeed(analogRead(0));
}Poniżej funkcji loop dodajmy nową funkcję która będzie nam generowało losową wartość z zakresu od 0 do 100.
int losowaWartosc()
{
return random(0, 101);
}Dla wykresów liniowych będziemy i porównawczych będziemy korzystać z prostego licznika który będzie zwiększał swoją wartość o 1, a następnie przypiszemy do pierwszego pomiaru tą wartość powiększoną o 1 a dla drugiego o 3. Zainicjujmy nową zmienną do przechowywania aktualnej wartości licznika.
int licznik = 0;Przypiszmy teraz do naszych zmiennych odpowiednie wartości w ciele funkcji loop().
void loop()
{
ADEAS::process();
if (API::isReady())
{
slupkowy_1 = losowaWartosc();
delay(100);
slupkowy_2 = losowaWartosc();
delay(100);
kolowy_1 = losowaWartosc();
delay(100);
kolowy_2 = losowaWartosc();
delay(100);
liniowy_1 = licznik+1;
delay(100);
liniowy_2 = licznik+3;
delay(100);
porownawczy_1 = licznik+1;
delay(100);
porownawczy_2 = licznik+3;
delay(100);
licznik++;
}
}Dla punktów pomiarowych z wykresu kołowego i słupkowego przypisaliśmy zwrócone losowe wartości, a dla wykresu porównawczego i liniowego wartość licznika. Wyślimy teraz nasze dane do bazy danych za pomocą metody API::UpdateData() pamiętając o przypisaniu nazwy punktu pomiarowego identycznej jaką wpisaliśmy podczas tworzenia nowych punktów pomiarowych w platformie ADEAS APP. Na podstawie przykładu z artykułu funkcje wysyłające dane przedstawiają się następująco:
API::updateData("liniowy_1", liniowy_1);
delay(100);
API::updateData("liniowy_2", liniowy_2);
delay(100);
API::updateData("porownawczy_1", porownawczy_1);
delay(100);
API::updateData("porownawczy_2", porownawczy_2);
delay(100);
API::updateData("kolowy_1", kolowy_1);
delay(100);
API::updateData("kolowy_2", kolowy_2);
delay(100);
API::updateData("slupkowy_1", slupkowy_1);
delay(100);
API::updateData("slupkowy_2", slupkowy_2);
delay(100);Gotowy kod do wgrania prezentuje się następująco :
#include <ADEAS.h>
/**** SETUP ****/
void setup()
{
ADEAS::setup("WIFI_SSID", "WIFI_PASS", "TOKEN");
randomSeed(analogRead(0));
}
int slupkowy_1 = 0;
int slupkowy_2 = 0;
int liniowy_1 = 0;
int liniowy_2 = 0;
int porownawczy_1 = 0;
int porownawczy_2 = 0;
int kolowy_1 = 0;
int kolowy_2 = 0;
int licznik = 0;
/**** LOOP ****/
void loop()
{
ADEAS::process();
if (API::isReady())
{
slupkowy_1 = losowaWartosc();
delay(100);
slupkowy_2 = losowaWartosc();
delay(100);
kolowy_1 = losowaWartosc();
delay(100);
kolowy_2 = losowaWartosc();
delay(100);
liniowy_1 = licznik+1;
delay(100);
liniowy_2 = licznik+3;
delay(100);
porownawczy_1 = licznik+1;
delay(100);
porownawczy_2 = licznik+3;
delay(100);
licznik++;
delay(100);
API::updateData("liniowy_1", liniowy_1);
delay(100);
API::updateData("liniowy_2", liniowy_2);
delay(100);
API::updateData("porownawczy_1", porownawczy_1);
delay(100);
API::updateData("porownawczy_2", porownawczy_2);
delay(100);
API::updateData("kolowy_1", kolowy_1);
delay(100);
API::updateData("kolowy_2", kolowy_2);
delay(100);
API::updateData("slupkowy_1", slupkowy_1);
delay(100);
API::updateData("slupkowy_2", slupkowy_2);
delay(100);
}
}
int losowaWartosc()
{
return random(0, 101);
}Po wgraniu kodu i odczekaniu kilku minut powinniśmy zacząć obserwować pojawiające się dane na naszych wykresach :
Domyślnie nasze wykresy prezentują ostatnie otrzymane dane, natomiast możemy zmienić przedział czasowy w zależności od potrzebny w górnej części naszego dashboardu.
W taki oto sposób prosty sposób odkryliśmy działanie widoku wykresów w platformie ADEAS APP. Prezentacja zbieranych danych za pomocą wykresów znajduje szerokie zastosowanie np. podczas mierzenia temperatury, wilgotności, dźwięku czy wszelakich inmnych czujników i urządzeń. Dzięki możliwości zmiany przedziału czasowego możemy analizować zmienność i zachowanie naszych danych na przestrzeni godzin, dni czy nawet miesięcy.