Kurs ESP8266 - #4 - wykresy, zapis do FS, mini smartdom

[Leoneq]

W poprzedniej części, nauczyliśmy się kodować rozbudowane i responsywne strony. Mam nadzieję, że przeczytałeś co nieco z linków na dole, ponieważ teraz będziemy mocniej kodować, aby stworzyć jeszcze ładniejszą i jeszcze bardziej funkcjonalną stronę. Zrobimy nawet mały smartdom! Do dzieła!

Spis treści serii artykułów:

• 1. Omówienie, i przygotowanie środowiska
• 2. Zapoznanie z nowym środowiskiem, praca jako Arduino, prosty serwer WWW
• 3. Przyspieszony kurs na webmastera
• 4. Wykresy, zapis do SPIFFS, mini smart-dom
• 5. Odbiór danych z przeglądarki, stałe IP, łączenie modułów ESP

Ten wpis brał udział konkursie na najlepszy artykuł o elektronice lub programowaniu. Sprawdź wyniki oraz listę wszystkich prac »
Partnerem tej edycji konkursu (marzec 2020) był popularny producent obwodów drukowanych, firma PCBWay.

Wykresy

Wcześniej mieliśmy specjalną podstronę, gdzie zapisywaliśmy temperaturę co jedną sekundę. Jeżeli chcielibyśmy dodać drugi termometr musielibyśmy dodać drugą podstronę, itd... Ale dzięki jQuery, możemy odczytać z jednej podstrony więcej informacji, niż tylko jedna! Zacznijmy od zmodyfikowania poprzedniego kodu. Na rozgrzewkę, zmieńmy nazwę /temp na /data.

server.on("/data", handleData); //setup()

void handleData()
{ 
  ds.requestTemperatures(); 
  cls();
  lcd.print("Temperatura: ");
  lcd.println(ds.getTempCByIndex(0));
  server.send (200, "text/html", (String)ds.getTempCByIndex(0));
}

Następnie przejdziemy od razu do wyświetlenia wykresu. Do tego będziemy potrzebować biblioteki ChartJS. Dopisujemy zatem kilka linijek kodu:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>

<div class="col-sm">
     <canvas id="wykres"></canvas>
</div>

Pierwsza linijka odpowiada za dołączenie biblioteki. W drugiej zaś, tworzymy nową małą kolumnę, w środku niej canvas. Canvas to znacznik wykorzystywany jako swego rodzaju płótno - będziemy tam rysować nasz wykres. Jak na razie w środku nie ma nic - ale zaraz coś namalujemy, dzięki nowej bibliotece. Pamiętajmy, że nową kolumnę umieszczamy obok pierwszej, w tym samym rzędzie!

Jak się domyślasz, trzeba będzie dodać trochę kodu. Proponuję już nie używać znacznika <script>, tylko wszystkie nasze skrypty przenieść do nowego pliku. Dlatego, w folderze testowym, robimy nowy plik "skrypty.js".

W środku przenosimy stary kawałek kodu:

Cały kod JS w dokumencie HTML usuwamy. Znaczniki możemy zostawić, dopiszemy jedynie atrybut, gdzie jest nasz nowy plik.

Przechodzimy do naszego nowo utworzonego pliku - zrobimy na razie wykres z stałych danych. Stwórzmy zatem tablice tych danych:

var temperatura = [25, 20, 21, 22, 27];
var lata = ["1 rok", "2 rok", "3 rok", "4 rok", "5 rok"];

Przykładem tutaj będzie średnia temperatura pokoju na przestrzeni lat. Lata będą osią x (poziomą), temperatura y (pionową). Tablica labels przechowuje etykiety poszczególnych danych,

var ctx = document.getElementById('wykres');
var wykres = new Chart(ctx, {
  type: 'line',
  data:
  {
    labels: lata,
    datasets:
    [
    { 
        label: 'Temperatura',
        data: temperatura,
        borderColor: 'rgba(255, 130, 150, 1',
        backgroundColor: 'rgba(255, 130, 150, 0.2)'
    }
    ]
  }
});

Następnie przypisujemy nasze płótno do zmiennej. Kolejna zmienna to już stricte nasz wykres. Pierwszy atrybut mówi, że będzie to wykres liniowy (możemy zrobić kołowy, czy słupkowy). Potem zapisujemy dane wykresu: na początku definiujemy "labels" (etykiety) - to one będą naszą osią czasu. Datasets to paczki danych umieszczanych na tamtej osi - my mamy tylko jedną paczkę, temperatura. Przed każdą temperaturą wyświetlamy zatem tekst "Temperatura: ", informujemy jakie dane chcemy wyświetlić (po kolei!), następnie definiujemy jaki chcemy kolor kreski i kolor tła, jakie kreska wykreśli. Wrzucamy to wszystko do naszego dokumentu:

$( document ).ready(function() {
var temperatura = [25, 20, 21, 22, 27];
var lata = ["1 rok", "2 rok", "3 rok", "4 rok", "5 rok"];

var ctx = document.getElementById('wykres');
var wykres = new Chart(ctx, {
  type: 'line',
  data:
  {
    labels: lata,
    datasets:
    [
    { 
        label: 'Temperatura',
        data: temperatura,
        borderColor: 'rgba(255, 130, 150, 1',
        backgroundColor: 'rgba(255, 130, 150, 0.2)'
    }
    ]
  }
});

setInterval(function()
{
    var strona = new XMLHttpRequest();
      
    strona.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
             document.getElementById("data").innerHTML = this.responseText;
        }
    };
    strona.open("GET", "/data", true);
    strona.send();
}, 1000);
});

Dlaczego wszystko jest w "ready"? Dzięki temu, nasz kod wykona się tylko wtedy, kiedy wszystko się załaduje. Bo jak kod w jQuery miałby się wykonać bez jQuery? Jeżeli dokument już zapisałeś, spróbuj uruchomić stronę:

A teraz spróbuj zmienić rozmiar okna przeglądarki, czy uruchomić wszystko na telefonie. Jak to wygląda?

Właśnie dzięki responsywności, dostajemy możliwość "łatwego" zmieniania rozmiarów strony. Dlatego będzie ona dobrze czytelna i na komputerze, i na telefonie. Wrzućmy zatem wszystko co mamy w folderze testowym, do folderu /data, i wgrajmy na ESP. Dokonujemy szybkich zmian w kodzie:

String getScript()
{
  String strona;
  File file = SPIFFS.open("/skrypty.js", "r");
  while(file.available()) strona+=(char)file.read();
  file.close();
  return strona;
} //skrypty

  server.on("skrypty.js", handleSkrypty);

void handleSkrypty()
{
  server.send(200, "text/javascript", getScript());
}

I wgrywamy całość na ESP. Jak widzimy, wszystko pięknie działa:

Wykresy w czasie rzeczywistym

Spróbujmy teraz wyświetlić "rzeczywiste" dane. Niestety, to już jest trochę trudne - lecz na pewno sobie poradzimy. Na początku, dopóki nie dostaniemy odczytów z termometru, będziemy mieli 0 stopni: 

var temperatura = [0, 0, 0, 0, 0];

To, ile damy tutaj zmiennych, będzie decydować o "szerokości" naszego wykresu. 

var ctx = document.getElementById('wykres');
var wykres = new Chart(ctx, {
  type: 'line',
  data:
  {
    labels: ['', '', '', '', ''],
    datasets:
    [
    { 
        data: temperatura,
        label: 'Temperatura',
        borderColor: 'rgba(255, 130, 150, 1',
        backgroundColor: 'rgba(255, 130, 150, 0.2)'
    }
    ]
  }
});

Pierwszych 5 temperatur tak naprawdę nie ma, więc damy im puste etykiety. Reszta zostaje tak samo. Teraz dodamy dwie funkcje: dodającą wartość, i usuwającą ostatnią wartość.

function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets[0].data.push(data);
  chart.update();
}

Pierwszy argument, to wykres - bo w końcu możemy ich mieć kilka na stronie. Drugi argument to etykieta, trzeci to wartość. Na początku "popychamy" stos etykiet, dodając kolejną. Podobnie robimy z danymi, a na końcu aktualizujemy wykres.

function popData(chart, index) {
  chart.data.labels.splice(index, 1);
  chart.data.datasets[0].data.splice(index, 1);
  chart.update();
}

Kolejna funkcja usuwa nam etykietę na podanym indeksie, a potem dane.

var sekundy = 0;
setInterval(function()
{
    var strona = new XMLHttpRequest();
    sekundy++;
    var etykieta = "" + sekundy + " sekunda";

    strona.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
             var zawartosc = this.responseText;
             var dane = zawartosc.split("\n");
             document.getElementById('data').innerHTML = dane[0];
             addData(wykres, etykieta, dane[0]);
             popData(wykres, 0);
             
        }
    };
    strona.open("GET", "/data", true);
    strona.send();
}, 1000);
});

Tak wygląda cała nowa funkcja, która nam aktualizowała temperaturę. Z racji tego, że wykonuje się co sekundę, zrobimy od razu licznik tych sekund - stąd zmienna na początku. W funkcji zwiększamy zmienną o 1, a potem tworzymy etykietę. W środku funkcji pobierającej temperaturę dokonało się jednak najwięcej zmian. Zawartość całej strony /dane przechowujemy w zmiennej, którą potem rozdzielamy na linie co znak nowej linii. Dlaczego tak, a nie po prostu odczytać? Dzięki temu, na jednej podstronie możemy odczytywać bardzo wiele informacji, zamiast tworzyć nowe podstrony. Temperatura będzie zapisana na pierwszej linijce strony - wypisujemy ją na stronie głównej, potem dodajemy ją do wykresu (z etykietą), a starą temperaturę usuwamy. Jeżeli nie będziemy usuwać starych danych, po pewnym czasie całość zrobi się mocno nieczytelna. Przechodzimy do kodu; modyfikujemy funkcję handleData:

void handleData()
{ 
  ds.requestTemperatures(); 
  cls();
  lcd.print("Temperatura: ");
  lcd.println(ds.getTempCByIndex(0));
  String strona = (String)ds.getTempCByIndex(0);
  strona += "\n";
  //dodamy zaraz więcej danych!
  server.send (200, "text/html", strona);
}

Praktycznie nic się nie zmieniło, jedyne co to dodaliśmy zmienną strona przechowującą podstronę /data. Jest ona pisana w locie, co umożliwia wypisanie tam danych z czujników. Po każdym dodaniu linii, dodajemy znak nowej linii dla rozdzielenia danych. Wszystko wgrywamy do ESP, i sprawdzamy czy działa:

Zapisywanie plików

To teraz spróbujmy zapisać temperaturę do pliku, żeby potem "na żądanie" robić wykres. Np. co godzinę zapisywać temperaturę, robić średnią, i pokazywać na wykresie. Akurat to jest dość proste, wystarczy nowa funkcja:

void writeToFile(String plik, String tekst)
{
  File file = SPIFFS.open(plik, "w");
  if (file.print(tekst)) {
    cls();
    lcd.println("Zapisano pomyslnie!");
  } else
  {
    cls();
    lcd.println("Blad zapisu!");
  }
  file.close();
}

Pierwszym argumentem jest plik. Musimy sami utworzyć taki pusty plik, aby do niego zapisać różne dane. Drugi argument to oczywiście zawartość, którą chcemy zapisać. Jako zadanie domowe (no dobra, zadanie dodatkowe), spróbuj zrobić program który zapisze temperaturę, a następnie odczyta i zapisze na wykresie.

Praca na wielu danych

No, to jak mamy już wszystko do pracy na wielu danych, dodanie czujników powinno być czystą przyjemnością. Dlatego dodamy:

• HC-SR04
• przycisk (kontakron, co chcesz)
• barometr BMP180
• fotorezystor
• a nawet WS2812. A co.

Scenariusz jest prosty: mierzę temperaturę, odległość, stan przycisku, ilość światła, wysyłam to do WWW, a z WWW dostaję informacje o kolorze WS2812. W tym momencie instalujemy wszystkie potrzebne biblioteki, dodajemy je na początku kodu, i dodajemy je do naszej funkcji obsługującej /data:

void handleData()
{ 
  ds.requestTemperatures(); 
  String strona = (String)ds.getTempCByIndex(0);
  strona += "\n";
  strona += analogRead(PIN_FRES);
  strona += "\n";
  strona += bmp.readTemperature();
  strona += "\n";
  strona += bmp.readPressure();
  strona += "\n";
  strona += zmierzOdleglosc();
  strona += "\n";
  strona += digitalRead(PIN_BTN);
  //temperatura ds
  //fotorezystor
  //temperatura bmp
  //cisnienie
  //odleglosc
  //przycisk
  server.send (200, "text/html", strona);
}

Jedyne co się zmieniło, to dodanie kilku odczytów oddzielonymi znakami nowej linii. Po wgraniu tego do kodu, powinieneś zobaczyć takie coś na stronie /data:

Pierwsza wartość to zatem temperatura, druga ilość światła, trzecia to też temperatura (uznajmy że z innego pokoju), czwarta to ciśnienie w paskalach, piąta to odległość zmierzona przez HC-SR04, ostatnia to odczyt z kontaktronu. Wygląda na to, że muszę popracować z HC... Ale dlaczego wszystko jest w jednej linii, tylko porozdzielane spacjami? Otóż to są nowe linie, co możemy zobaczyć w narzędziach deweloperskch:

Aby przejść do nowej linii, musielibyśmy dać znacznik <br>. Jak widać, przeglądarka także "sama" dodała <html> i <body>. No, jeżeli już masz wszystkie czujniki gotowe, przejdziemy do strony. Odpalamy plik skrypty.js. Ale chwila! Zanim zaczniemy kodować, musimy sobie odpowiedzieć na pytanie "co kodować". Zawsze przed kodowaniem zadaj sobie to pytanie! Mamy 6 odczytów. Dwa z nich wyświetlimy na wspólnym wykresie, światło możemy wyrazić kolorem barwy, ciśnienie pokażemy w hPa obok "surowych" danych. Będziemy wyświetlali napis, czy drzwi zostały otwarte (kontaktron). No, to teraz możemy kodować. Zacznijmy od zapisu tych wszystkich danych:

if (this.readyState == 4 && this.status == 200)
        {
             var zawartosc = this.responseText;
             var dane = zawartosc.split("\n");
             var temp1 = dane[0];
             var fres = dane[1];
             var temp2 = dane[2];
             var cis = dane[3] / 100;
             var odl = dane[4];
             var btn = dane[5];
             document.getElementById('data').innerHTML = dane[0];
             addData(wykres, etykieta, dane[0]);
             popData(wykres, 0);
             
        }

To jest if z funkcji "setInterval". Tak jak wcześniej tylko dodaliśmy zapis danych, tak i teraz tylko dodaliśmy odczyty. Aby wyświetlić temperatury na jednym wykresie, musimy najpierw zmodyfikować funkcje pop i push:

function addData(chart, data, dset) {
  chart.data.datasets[dset].data.push(data);
  chart.update();
}

function addLabel(chart, label) {
  chart.data.labels.push(label);
  chart.update();
}

function popData(chart, index) {
  chart.data.labels.splice(index, 1);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.splice(index, 1);
  });
  chart.update();
}

Komenda "znikająca" została teraz obramowana pętlą forEach. Wykonuje się ona tyle razy, ile razy występuje coś (dosłownie - dla każdego). Dla każdego zatem zestawu danych, usuwamy zmienną. Aby dodać daną, od teraz musimy powiedzieć do którego zestawu danych ją dodać. Dodawanie etykiety dałem do osobnej funkcji, aby nie robić duplikatów etykiet. A tak wygląda nasz nowy wykres:

var temperatura = [0, 0, 0, 0, 0];
var temperatura2 = [0, 0, 0, 0, 0];

var ctx = document.getElementById('wykres');
var wykres = new Chart(ctx, {
  type: 'line',
  data:
  {
    labels: ['', '', '', '', ''],
    datasets:
    [
    { 
        data: temperatura,
        label: 'Temperatura w pokoju',
        borderColor: 'rgba(255, 130, 150, 1)',
        backgroundColor: 'rgba(255, 130, 150, 0.2)'
    },{
        data: temperatura2,
        label:'Temperatura w drugim pokoju',
        borderColor: 'rgba(23, 126, 214, 1)',
        backgroundColor: 'rgba(23, 126, 214, 0.2)',
    }
    ]
  }
});

Dodaliśmy drugi zestaw danych. Ma on niebieską kreskę, i pusty zestaw początkowych danych. Etykiety teraz będą różne - dla dwóch różnych pokoi. Zostało nam dodać dodawanie i odejmowanie danych z wykresu:

document.getElementById('temp1').innerHTML = temp1;
document.getElementById('temp2').innerHTML = temp2;
addLabel(wykres, etykieta);
addData(wykres, temp1, 0);
addData(wykres, temp2, 1);
popData(wykres, 0);

I szybkie zmiany w HTMLu:

<p>Temperatura w pokoju: <span id="temp1">N/A</span></p>
<p>Temperatura w drugim pokoju: <span id="temp2">N/A</span></p>

Spróbujmy teraz to wgrać i zobaczyć efekt.

Piękny efekt. No, to teraz może pobawimy się FontAwesome? Wchodzimy tutaj, i szukamy ikonki termometru:

Niestety, dla nas dostępne są tylko te widoczne ikony - te szare są dla wersji płatnych. Wybierzmy ikonkę która nam najbardziej przypadła do gustu:

Klikamy "Start using this icon", i kod kopiujemy tam, gdzie ma być ikonka. Ja sobie dam ją przed temperatury:

<p>Temperatura w pokoju: <i class="fas fa-thermometer-three-quarters"></i>
<span id="temp1">N/A</span></p>
<p>Temperatura w drugim pokoju: <i class="fas fa-thermometer-three-quarters"></i>
<span id="temp2">N/A</span></p>

I po wgraniu dostajemy takie ładne ikonki:

To teraz możemy dodać pozostałe dane. Spróbujemy zmienić kolor za pomocą jQuery - lecz musimy jakoś przekonwertować wartość z fotorezystora do koloru. Kolor możemy zapisać heksadecymalnie (#ffffff to biały), w formacie rgba (255, 255, 255, 255 to biały nieprzezroczysty), czy podać stałą (red - czerwony). Tutaj proponuję wyświetlić kolor w skali szarości. Dlatego odczyt od razu podzielimy przez 4, by mieć wartości 0-255:

var fres = dane[1] / 4;

'Następnie stworzymy zmienną, która będzie przechowywać tekst atrybutu color.  Dlaczego odejmowanie jest w nawiasach? Otóż bez nich, odjęlibyśmy tekst "20". Dlatego zapis 2+2 da nam 22, a zapis (2+2) da nam 4. Ale... dlaczego w ogóle odejmujemy? Jeżeli światło będzie białe, nie będziemy go widzieli na stronie z białym tłem.

var color = 'rgb('+fres +','+(fres - 20)+','+(fres - 20)+')';

Oraz zmieniamy co sekundę kolor:

document.getElementById('light').style.color = color;

No dobra, ale czego zmieniamy? Ja sobie dodałem tekst "Światło" oraz ikonkę kwadratu z przypisanym id "light". To on będzie zmieniał kolor.

<p>Światło: <i class="fas fa-square" id="light"></i>

Teraz dodamy ciśnienie, oraz jednostki dla temperatur. W googlu szukamy "degree symbol" lub kopiujemy stąd:

°

Cała kolumna będzie wyglądać tak:

            <div class="col-sm">
              <h1>Centralna Baza Dowodzenia</h1>
              <p>Dumnie wspierana przez ESP8266</p>
              <a type="button" class="btn btn-success" href="/on">ON</a>
              <a type="button" class="btn btn-danger" href="/off">OFF</a>
              <p>Temperatura w pokoju: <i class="fas fa-thermometer-three-quarters"></i>
              <span id="temp1">N/A</span>°C</p>
              <p>Temperatura w drugim pokoju: <i class="fas fa-thermometer-three-quarters"></i>
              <span id="temp2">N/A</span>°C</p>
              <p>Światło: <i class="fas fa-square" id="light"></i></p>
              <p>Ciśnienie: <span id="cis"></span>hPa</p>
              <p>Odległość: <span id="odl"></span>cm</p>
              <p>Drzwi są <span id="drzwi"></span></p>
            </div>

Pomiędzy znacznik </span> a </p> dodaliśmy tekst, z jednostką. Podobnie z ciśnieniem. Przechodzimy zatem do kodowania:

             document.getElementById('cis').innerHTML = cis;
             document.getElementById('odl').innerHTML = odl;
             if(!btn) document.getElementById('drzwi').innerHTML = 'otwarte!';
             else document.getElementById('drzwi').innerHTML = 'zamknięte.';

Robimy prostego ifa, który nam wyświetli tekst "zamknięte", jeżeli odczyta HIGH. W przeciwnym razie wyświetli tekst "otwarte". Sprawdźmy, czy kod działa:

Można powiedzieć, że zrobiliśmy już mini smartdom. Mamy sterowanie z poziomu aplikacji oraz wiele odczytów. W następnym odcinku spróbujemy dodać małego ESP, aby zbierał odczyty z innego pokoju, użyjemy WS2812, oraz zrobimy małe podsumowanie. Bądźcie kreatywni! Spróbujcie urozmaicić swój smartdom, stronę, i pokażcie w komentarzach wasze konstrukcje!

Spis treści serii artykułów:

• 1. Omówienie, i przygotowanie środowiska
• 2. Zapoznanie z nowym środowiskiem, praca jako Arduino, prosty serwer WWW
• 3. Przyspieszony kurs na webmastera
• 4. Wykresy, zapis do SPIFFS, mini smart-dom
• 5. Odbiór danych z przeglądarki, stałe IP, łączenie modułów ESP

[Treker (Damian Szymański)]

Artykuł został opublikowany, więc podbijam, aby wszyscy widzieli go jako nowy temat 🙂

[fizyk89]

A mam takie pytanko bo dotychczas bazujemy na lokalnym serwerze a jakbyśmy chcieli sterować esp za pomocą  strony internetowej z dowolnego miejsca na świecie to czy wystarczy wykupić sobie hosting i przenieść cały folder z projktem z VSC na serwer ? bo próbowałem robić tak za pomoca filezilla ale wczytało na serwer samą strone (sam html z css) bez plików z kodami odpowiedzialnymi za sterowanie esp i jak wciskam przyciski na stronie  która jest na tym hostingu to nic się nie dzieje 

[Treker (Damian Szymański)]

@fizyk89 witam na forum 🙂 Dodatkowy serwer z plikami wiele tutaj nie pomoże. Kluczowe jest to, aby ESP miało dostęp do Internetu (publiczne IP), wtedy równie dobrze pliki mogą być nadal na ESP. Oczywiście to tylko jedna z metod, bo można to zrealizować za pośrednictwem jakiegoś serwera, ale mam wrażenie, że nie o to Ci chodzi. Daj znać co konkretnie próbujesz zrobić, bo może są na to jakieś gotowe rozwiązania 🙂 

[Polecacz 101]

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

[Leoneq]

Informatykiem z wykształcenia nie jestem, choć jak pamiętam odblokowanie adresu IP (oraz portu) publicznie może się wiązać z potencjalnymi atakami. Co więcej, należałoby mieć stały adres IP (lub usługę typu no-ip), żeby połączenie nie było przydzielane pod nowy adres.

Proponuję postawić sobie VPNa - więc z dowolnego miejsca tak jak chciałeś, twój laptop byłby widziany jakby był po prostu w Twojej sieci lokalnej. Wtedy możesz się połączyć tak samo, jak lokalnie.

Koncepcja z przeniesieniem strony z ESP na hosting 'tak o' się nie uda, bo jak nawet sam wspomniałeś - nie ma plików z kodem, więc przyciski nie wiedzą co robić.

[rziomber]

Na stronie Chart.js znajduje się wiele przykładów.

By z nich skorzystać, nie można pominąć

https://www.chartjs.org/docs/latest/getting-started/

Dołączamy bibliotekę Chart.js

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

Tworzymy płótno do "malowania"

<canvas id="myChart" width="400" height="200"></canvas>

var ctx = document.getElementById("myChart").getContext("2d");

Wklejamy Setup z przykladów

Wklejamy Config

var myChart = new Chart(ctx, config);

Jeżeli prezentujemy zależność czasową, warto ustawić oś X na time scale.

options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'hour',
                    //parser: 'DD.MM.YY HH:mm', // Define the custom time format
                    displayFormats: {
                        hour: 'DD.MM.YY HH:mm',
                    },

Rozwiąże to problem niezachowania skali przy nierównych odstępach czasu pomiędzy pomiarami.

Do służby czasu, Chart.js wymaga jeszcze dołączenia Moment.js

<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

W całości:

<!DOCTYPE html>
<html>
   <head>
      <title>Readings</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/moment"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
   </head>
   <body>
      <div class="chart-container" style="position: relative; width: 100%; height: calc(width/1.4);">
         <canvas id="readingsChart" aria-label="chart"></canvas>
      </div>
      <script>
         var ctx = document.getElementById("readingsChart").getContext("2d");

         var data = [];

         let config = {
             type: 'line',
             data: {
                 datasets: [{
                     label: 'Voltage',
                     data: data.map(point => ({
                         x: point.x,
                         y: point.voltage
                     })),
                     borderColor: 'rgba(75, 192, 192, 1)',
                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
                     borderWidth: 1,
                     pointRadius: 5,
                     pointHoverRadius: 8,
                     yAxisID: 'y',
                 }, {
                     label: 'Current',
                     data: data.map(point => ({
                         x: point.x,
                         y: point.current
                     })),
                     borderColor: 'rgba(255, 99, 132, 1)',
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderWidth: 1,
                     pointRadius: 5,
                     pointHoverRadius: 8,
                     yAxisID: 'y1',
                 }],
             },
             options: {
                 scales: {
                     x: {
                         type: 'time',
                         time: {
                             unit: 'hour',
                             //parser: 'DD.MM.YY HH:mm', // Define the custom time format
                             displayFormats: {
                                 hour: 'DD.MM.YY HH:mm',
                             },
                         },
                         title: {
                             display: false,
                             text: 'Time',
                         },
                         ticks: {
                             //maxTicksLimit: 6
                             maxRotation: 0,
                             autoskip: true,
                             autoSkipPadding: 15
                         },
                     },
                     y: {
                         id: 'y',
                         type: 'linear',
                         position: 'left',
                     },
                     y1: {
                         id: 'y1',
                         type: 'linear',
                         position: 'right',
                         //suggestedMax: 0.0,
                         //suggestedMin: 0.0,
                         beginAtZero: false,
                         // grid line settings
                         grid: {
                             drawOnChartArea: false, // only want the grid lines for one axis to show up
                         },
                     },
                 },
                 animation: {
                     duration: 0 // general animation time
                 },
                 hover: {
                     animationDuration: 0 // duration of animations when hovering an item
                 },
                 responsiveAnimationDuration: 0, // animation duration after a resize
             },
         };
         if (typeof Chart !== "undefined") {
             var dataChart = new Chart(ctx, config);
         }

         function appendDataToChart(chart, time, voltage, current) {
             chart.data.datasets[0].data.push({
                 x: time,
                 y: voltage
             });
             chart.data.datasets[1].data.push({
                 x: time,
                 y: current
             });
             chart.update();
         }

         function clearChart(chart) {
             chart.data.datasets[0].data = [];
             chart.data.datasets[1].data = [];
             chart.update();
         }

         appendDataToChart(dataChart, "2023-12-01 18:41:08", 12.2, 2.32);
         appendDataToChart(dataChart, "2023-12-02 18:41:08", 11.2, 3.32);
         appendDataToChart(dataChart, "2023-12-03 18:41:08", 10.2, 2.82);
         appendDataToChart(dataChart, "2023-12-04 18:41:08", 15.2, 4.32);
      </script>
   </body>
</html>

Bonus: funkcja pobierająca dane do wykresu w formacie JSON.

       const tbody = document.querySelector('table tbody');
      function appendDataToTable(tbody, voltage, current, date) {
        let row = document.createElement('tr');
        let timeCell = document.createElement('td');
        timeCell.textContent = date;
        row.appendChild(timeCell);
        let voltageCell = document.createElement('td');
        voltageCell.textContent = voltage;
        row.appendChild(voltageCell);
        let currentCell = document.createElement('td');
        currentCell.textContent = current;
        row.appendChild(currentCell);
        let firstChildElement = tbody.firstChild;
        // Append the row to the table body
        tbody.insertBefore(row, firstChildElement);
        //tbody.appendChild(row);
      }

      async function refreshSensors() {
          let url = "./json.php";
          let response = await fetch(url);
          let text = await response.text();
          //https://www.w3schools.com/jsref/jsref_parse_json.asp
          let values = JSON.parse(text);
          values.forEach((element) => {
              if (typeof Chart !== "undefined") {
                  appendDataToChart(dataChart, element["time"], element["voltage"], element["current"]);
              }
              appendDataToTable(tbody, element["voltage"], element["current"], date.toLocaleString('sv-SE'));
          });
      }

Edytowano Grudzień 4, 2023 przez rziomber