Elektroda.pl
Elektroda.pl
X
Elektroda.pl
PCBway
Proszę, dodaj wyjątek dla www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Arduino + ESP8266 + Czujniki | Wykresy na stronie WWW

10 Lip 2017 23:51 3138 12
  • Poziom 21  
    Witam

    Arduino znam nie za dobrze a WWW jeszcze mniej... Nie pytam czy jest to możliwe ale jak to zrobić...

    Mianowicie Sercem układu jest Arduino pod który mam podpięty wyświetlacz TFT + SD, czujniki np: DS18B20 i inne, ESP8266,...

    Wiem że ESP8266 jest szybsze od Arduino ale nie wszystko na raz... (Na ESP jako samodzielnym układzie też działam ale nie taki mój cel)

    Zrobiłem tak:
    Wchodzę na adres np: 192.168.1.1 wyświetla mi się stronka na której mam dane z czujników, strona samoczynnie mi się odświeża co zadany czas. Jest OK ale chciałem to rozbudować.

    Chcę dodać wykresy z ostatnich 24h i z np 7 dni. (interwał to chyba nie problem)

    Puki co mam tak (fragment):

    Kod: c
    Zaloguj się, aby zobaczyć kod


    Mam tytuł strony odświeża się ona rysuje ładnie ramkę i w niej dane z czujnika.

    Chciałbym jednak zamieścić jeszcze wykres danych z czujników obok.
    Problem w tym że Arduino się uczę od niedawna a WWW przy okazji robienia "projektu"...

    Z góry przepraszam że nie daje całego kodu ale puki co nie mogę...

    Na początku chciałem zapisywać dane na karcie SD jako szereg danych czytelnych dla Excel... wtedy mógł bym otworzyć dane z karty SD przez Excel'a na komputerze...

    Jednak ja chciałbym na WWW stworzyć wykres w zależności [t/x] a nie wiem jak to wysłać przez ESP8266 na przeglądarkę...

    Proszę o pomoc jakieś linki... cokolwiek...

    Pozdrawiam
  • PCBway
  • Pomocny post
    Redaktor
    Byłoby prościej jeżeli ESP ma dostęp do internetu, to można wysyłać dane pomiarowe "do chmury" i korzystając z bezpłatnych usług na serwisach typu https://thingspeak.com/ przeglądać wygenerowane wykresy na urządzeniach z dostępem do internetu, przykłady tutaj: https://www.elektroda.pl/rtvforum/topic3357545.html

    Można też wysyłać do swojego rozwiązania również udostępniającego dane w internecie np. https://www.elektroda.pl/rtvforum/topic3294262.html

    Innym rozwiązaniem może być wykorzystanie google charts: https://diyprojects.io/esp8266-web-server-part-5-add-google-charts-gauges-and-charts
    http://www.instructables.com/id/Online-Graphs-Using-Nothing-but-an-Arduino-Etherne/
  • PCBway
  • Pomocny post
    Poziom 29  
    Są biblioteki (np w canvas) do wyświetlania wykresów z danych, wystarczy skonfigurować i użyć. Cała idea html, js i canvas to to, że wysyłasz wsad w tekście i to przeglądarka ci to parsuje.

    Możesz też zrobić sobie dynamiczną grafikę np bmp - też samo przetwarzanie tekstu - ale sądząc po platformie której używasz - może być problem z szybkością odświeżania.
  • Pomocny post
    Poziom 8  
    Cytat:
    ...Jednak ja chciałbym na WWW stworzyć wykres w zależności [t/x] a nie wiem jak to wysłać przez ESP8266 na przeglądarkę...
    Proszę o pomoc jakieś linki... cokolwiek...


    W Elektronice Praktycznej nr 3/2017 na str. 117-118 masz opisane krok po kroku jak to zrobić na jednym module ESP8266.
  • Poziom 21  
    Dziękuje wszystkim za zainteresowanie.

    O https://thingspeak.com/ czytałem fajna sprawa jednak akuratnie potrzebny jest dostęp do internetu a takiego nie przewiduje... Przynajmniej jak na razie... Jednak nie omieszkam kiedyś to przetestować.

    O Google charts także zacząłem czytać jednak jeszcze się w to nie zgłębiłem.

    drobok <-- to chyba dobry trop.

    Ja miałem pomysł zapisywać dane na SD w postaci pliku CSV czytelnego dla Excela... Jednak nie chce wyciągać karty kombinować by zrobić wykres... chciałbym go wyświetlić na stronce.

    Wiem że grzech zaprzęgać Arduino do tego ale takie jest założenie by właśnie Arduino było mózgiem. Po za tym nie napisałem rodzaju Arduino:) Póki co robię to wszystko na MEGA2560 jednak w zanadrzu mam Arduino DUE a tam już siedzi 84MHz Cortex 32bit.

    Druga sprawa że muszę się nauczyć i po testować komunikację między uC ale póki co chciałbym skończyć jeden projekt...

    Dziękuje za linki na pewno wszystko "przekopię"

    Pozdrawiam
  • Redaktor
    @drobok czy są jakieś przykłady wykorzystania takiego rozwiązania? To mogło by się przydać w niektórych zastosowaniach działających w LAN i działało by nawet bez dostępu do internetu.
  • Poziom 37  
    Taaaaa .... serwowanie obszernych danych AJAX (JS) w oparciu o kilka kilo RAM, taaa ... to będzie "bardzo dobrze" działać. Zbudowałem prowizoryczną budkę i nawet mi stoi, jak to przerobić w wieżowiec.
  • Poziom 29  
    Zauważ, że dla canvas to co serwujesz to sam tekst - gdzie tu obszerne dane ? Wiadomo, że to nie serwer, ale jednego / dwóch klientów powinno to obsłużyć.
  • Poziom 21  
    Generalnie o tyle mi chodzi. Chce by ESP był jako AP bez dostępu do internetu.. Może później bardziej się wdrożę to zmienię to... Jeszcze nie ogarnąłem tego canvas ale wstępnie wygląda obiecująco.
  • Poziom 37  
    drobok napisał:
    Zauważ, że dla canvas to co serwujesz to sam tekst - gdzie tu obszerne dane ? Wiadomo, że to nie serwer, ale jednego / dwóch klientów powinno to obsłużyć.


    Myślę że jeden pixel (również większa struktura, kwadrat, linia skośna itd...) w formacie tekstowym kosztuje więcej niż element będący częścią wykresu JPG/PNG. Wysłanie przez HTTP 1.1 bez znanej z góry długości powoduje "chunking", "chunking" wiele bibliotek nie ma lub ma błędy itd... (HTTP 2 nie znam nowości - raczej nie poszedł w uproszczenia)

    Optymistycznie można domniemywać (do autora pyt. o szczegóły), że wykres jest X-Y tj da się analizować od lewej do prawej (i nigdy nie wracać), co bajką nie jest, czy/jak jest opisywany. Owszem da się, ale kosztem czegoś.
    W każdym innym przypadku o RAM będą ostro konkurować bufory wejściowe i wyjściowe.

    EDIT: wspomnienie "kombatanta", gdyby o bitmapy chodziło, taki archaiczny format PCX ma skrajnie prosty algorytm kompresji operujący tylko w zakresie jednej linii obrazu, czyli jest nadzieja na mało buforów.
  • Poziom 29  
    Canvas nie ma nic wspólnego z bitmapą. Bitmapa to był osobny pomysł który mógłby przycinać (wspomniane w pierwszym poście).

    Tam nie wysyłasz pixeli, tylko bibliotekę + zestaw danych. A sam ajax byłby przyrostowy.
    Taki canvasjs to 70kB, jquery.min.js drugie 70kB razem 140kB + strona 10kB + dane (a to już zależy od próbkowania, można np założyć dane próbkowanie co x i spisywać tylko zmiany - i już część danych odpada). W moim mniemaniu arduino wysyła 3 pliki tekstowe przy odświeżeniu + 1 mały plik co czas x - który mógłby być ewentualnie trzymany w ram - o ile się zmieści.

    Jedyny problem to sam arduino i jego możliwości, ale zawsze można obniżyć odświeżanie bądź zupełnie je odpuścić. Skoro gość z wspomnianego wyżej linku używa go do wyświetlania jpeg to z trzema plikami tekstowymi nie powinno być problemu.
  • Poziom 17  
    Najłatwiej to zrobić z użyciem canvas HTML5. konkretnie do zmiennej zapisujesz wyniki (tablica javascript). Znając częstotliwość zapisu wyniku (np. 15 minut) wystarczy podczas zapytania podać jeszcze liczbę minut lub sekund od ostatniego pomiaru (w innej zmiennej javascript). Wtedy można stworzyć wykres umieszczony w czasie rzeczywistym (np. ostatni punkt 7 minut od teraz, poprzednie: 7+15, 7+2*15 itd). Sam wykres należy namalować przy użyciu javascriptu (zrobi to przeglądarka), który pobiera kolejne wyniki, skaluje je do rozmiaru canvas a następnie kreśli.
    Całość najlepiej stworzyć najpierw na komputerze (jest to przecież normalna strona html) i tam testować, a dopiero jak zadziała przenieść na ESP.
    Problemem może być zapamiętywanie poprzednich wyników - najprostsze jest użycie RAM - niestety po restarcie utracimy nasz wykres. Jeśli użyjemy EEPROM to należy rozważyć problem liczny cykli zapisu dopuszczalnych w EEPROM ESP8266 - nigdzie nie znalazłem tej liczby.