Dzisiaj pokażę jak można postawić na Arduino R4 WiFi prostą stronę WWW wyświetlającą zebrane przez nas pomiary na ładnych, czytelnych wykresach. Być może przyda się komuś to do projektu typu czujnik temperatury, pomiar zużycia energii czy tam stacja pogodowa. Wykresy będzie rysować dobrana przeze mnie biblioteka Javascript, której skrypty pobierane będą z internetu. Nie zamierzam hostować ich na Arduino R4 WiFi, co nieco uprości nam projekt.
Wstęp - jak rysować wykresy na HTML?
Zacznijmy od wytłumaczenia jak w ogóle można wyświetlić wykres na stronie WWW. Na razie kwestię Arduino pomijamy.
Zasadniczo mamy do tego gotowe biblioteki, które są napisane w Javascripcie. Podpinamy taki Javascript do naszego HTML, podajemy mu w jakiejś formie dane i ten skrypt wygeneruje nam wykres, o ile nasz klient go obsługuje.
Tego typu bibliotek jest szeroki wybór, ja zdecydowałem się na Google Charts Library, gdyż jest ona prosta w użyciu.
Poniżej mamy przykładową stronę wyświetlającą wykres:
Kod: HTML, XML
Warto zwrócić uwagę, że bibliotekę JS załączam z zewnętrznego serwera. Ma to swoje plusy i minusy. Plusem jest to, że nie muszę jej hostować samodzielnie u siebie, lecz minusem jest to, że bez internetu (lub jeśli hosting tej biblioteki wygaśnie) nie otrzymamy wykresu.
W samej funkcji drawChart widać jak ustawiane są dane. Będziemy musieli wymyśleć, jak je wstawić tam z Arduino. Ale na początek - rezultat działania powyższego pliku HTML:
Przenosimy na Arduino R4 WiFi
Na początek przydadzą się jakieś przykładowe dane. Uznałem, że wygeneruję sobie ich wartości losowo. Nasze dane będą reprezentowane poprzez czas wykonania pomiaru (typ time_t) oraz jego wartość:
Kod: C / C++
Ten czas tutaj to tzw. epoch/unix time, można go odszyfrować chociażby na tej stronie:
https://www.epochconverter.com/
Ta liczba to po prostu liczba sekund od 1 stycznia 1970. Wiążą się z tym pewne problemy, np. kwestia przepełnienia integera 32-bitowego (błąd roku 2038), ale to nie temat na teraz. Chyba, że ktoś czyta ten artykuł w 2038 roku? Jeśli tak, to dajcie znać.
W każdym razie - dane mamy wygenerowane.
Teraz skopiujmy przykład serwera HTTP z Arduino R4...
Opisywałem to tutaj:
Arduino R4 WiFi i ArduinoHttpServer - poprawki, uruchomienie, przykłady użycia
Kod: C / C++
Najciekawsze, czyli obsługę GET zostawiłem na koniec:
Kod: C / C++
Powyższy kod składa wspomniany wcześniej dokument HTML z części, każda część to osobny fragment tekstu. Jedynie dane pomiarów są generowane dynamicznie. Wartości temperatury oraz czasu z pamięci są zamieniane na tekst. Czas wymaga specjalnej obsługi, ale na szczęście mamy do tego funkcje na Arduino, przykład poniżej:
Kod: C / C++
Przy tworzeniu danych w C należy pamiętać o tym, by nie dać przecinka po ostatnim elemencie tablicy w JSON. Z tego powodu w pętli sprawdzam, czy indeks nie jest zerowy i tylko wtedy umieszczam przecinek przed kolejnym elementem.
Kompilujemy i wgrywamy - oto rezultat:
Dane z pamięci są poprawnie wyświetlane na naszej małej stronie WWW.
Warto pamiętać, że w zależności od potrzeby można zmienić sam typ wykresu i sposób jego rysowania. W razie pytań odsyłam do dokumentacji użytej biblioteki.
Podsumowanie
To był tylko przykład a dane były wygenerowane pseudolosowo, ale w ten sam sposób można by wyświetlać rzeczywiste pomiary, chociażby temperatury i wilgotności z DHT11. Rozmiar tablicy pomiarów trzeba by tu odpowiednio dobrać i pewnie też polecałbym potraktować ją jako bufor kołowy by wygodnie nadpisywać/"zapominać" zbyt stare pomiary, ale idea generowania wykresu i tak byłaby taka sama.
W przypadku bardziej zaawansowany projektów można by się też pokusić o zapis pomiarów do pamięci EEPROM oraz o możliwość np. ich stronicowania (w zależności od tego na której stronie jest użytkownik odczytywać inne sekcje pamięci), ale o tym innym razem.
Czy widzicie jakieś praktyczne zastosowanie dla tego typu wykresów? Zapraszam do dyskusji.
Fajne? Ranking DIY Pomogłem? Kup mi kawę.
