Kurs ESP8266 - #3 - przyspieszony kurs na Webmastera

Leoneq · Marzec 4, 2020

W poprzednim odcinku nauczyliśmy się włączać i wyłączać diodę LED przez Internet. Jedyne co wtedy zawierała strona, to krótki wyraz. Jeżeli chcemy, aby nasza strona była ładna, przejrzysta, i przede wszystkim - w 100% funkcjonalna, musimy się nauczyć podstaw HTMLa. Ale czym ten HTML jest? W skrócie, jest to język w którym piszemy strony WWW. To, jak strona ma wyglądać - piszemy w CSS, a co strona ma robić (animacje, skrypty) - piszemy w JavaScript (to pod żadnym pozorem nie jest zwykła Java). Zatem, zaczynamy!

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.

Spis treści serii artykułów:

Plik index.html

Proponuję zacząć od stworzenia strony na komputerze. Nie jest to trudne, a dopiero kiedy uznamy że strona jest gotowa - wgramy ja do mikrokontrolera. Stwórzmy zatem nowy folder:

W środku tworzymy nowy plik: index.html. To będzie nasza strona główna. Otwieramy, i na razie wklejamy to:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello</h1>
    <p>there</p>
  </body>
</html>

Zapisujemy, i otwieramy w przeglądarce:

image.png.bdbba7efc8901e2de82e69130afaf0d6.png

Spróbujmy zrobić to samo na ESP. Możemy to zrobić na kilka sposobów:

zrobić Stringa i co linijkę dodawać kod w htmlu (oof)
wgrać na zewnętrzną pamięć i odczytać z np. karty sd (przekombinowane)
na stałe zakodować stronę (to nie jest nasz cel)
użyć SPIFFS (very nice)

SPIFFS

Już wyjaśniam co to SPIFFS. W pierwszym artykule wspomniałem, że na płytkach ESP są dwa układy: mikrokontroler i pamięć flash. Bardzo dobrze to widać na ESP01. Do tej drugiej kostki wgrywamy nasz program - ale co, gdyby na to wgrać coś innego? Espressif przewidział tą możliwość, i zrobił takie coś jak SPI Flash File System (SPIFFS). Oznacza to tyle, że dostajemy w pełni funkcjonalny (i wbudowany!) system plików. Jaka jest jego pojemność? Definiujemy to w konfiguracji płytki - zwykle dzielimy pamięć na kod i SPIFFS (dla NodeMCU może to być 2 i 2MB).

Otwieramy folder z naszym projektem Platformio. Na tym samym poziomie co plik platformio.ini, tworzymy folder /data. Pliki w środku będą skopiowane do ESP. Przenieśmy zatem naszego indexa do /data, i odpalmy VS Code:

image.png.120382a47877a29fa70ad581163c2abf.png

VS Code jest na tyle mądry, że obsługuje składnię wielu języków - w tym i HTMLa. Po otworzeniu powinniśmy zobaczyć coś takiego:

image.png.2ed2090633cdab9715cde4d703278ce8.png

Aby wgrać naszą stronę, przechodzimy do zakładki Terminal → Run Task. Szukamy tam "Upload File System Image" - i czekamy aż się wgra nasz plik.

image.png.b59eb62e8f607930d46b498b4d2bc1c3.png

Musimy teraz wprowadzić lekkie modyfikacje do kodu. Zaczynamy od biblioteki obsługującej nasz system plików.

#include <FS.h>

Zróbmy sobie teraz funkcję (tudzież zmienną) która zwróci nam całą stronę. W środku "getPage" robimy kolejnego stringa, do którego dodajemy po kolei znak po znaku. Plik musi być najpierw otwarty, potem zamknięty - możemy obsłużyć 1 plik naraz. Na końcu zwracamy stringa ze stroną. Co robi "r"? Spróbuj sam zobaczyć, naciskając Spację+CTRL.

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

Na samym początku funkcji setup odpalamy bibliotekę. Ja to dodatkowo obudowałem w wyświetlanie wiadomości na LCD:

lcd.setCursor(0, 0);
lcd.print("SPIFFS ");
if(!SPIFFS.begin()) lcd.println("x");
else lcd.println("√");

Na koniec zostało tylko dopisać do funkcji obsługujących klienta, że strona ma być brana z getPage.

void handleRoot()
{ 
  server.send (200, "text/html", getPage());
}

void handleOn()
{
  digitalWrite(PIN_LED, LOW);
  server.send(200, "text/html", getPage());
}

void handleOff()
{
  digitalWrite(PIN_LED, HIGH);
  server.send(200, "text/html", getPage()); 
}

Wgrywamy program, i wpisujemy adres IP do przeglądarki:

image.png.411382fde048f5fa47bbc81798273231.png

Można powiedzieć, że pierwsza część backendu (piękny slang informatyczny) za nami. Teraz zajmijmy się frontendem. Specjalnie do tego przygotujemy sobie DS18B20, do znalezienia w zestawach kursu na malinke lub Arduino II. Zrobimy sobie mały inteligenty domek. Nie bój się dodać kilka innych czujników, o ile wiesz co będziesz robił.

Pierwsze kroki z HTML

W językach z rodziny C każdą funkcję zapisujemy przez jej nazwę, i otwierając klamerki. W HTMLu piszemy <x> aby zacząć pewien element, </x> aby go zakończyć. Przeanalizujmy zatem nasz kod "hello there":

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello</h1>
    <p>there</p>
  </body>
</html>

Na początku mamy doctype. Informuje on przeglądarkę o tym, z jakim rodzajem dokumentu ma ona do czynienia. Piszemy wszystko w HTML5, w starszym HTMLu deklaracja ta by wyglądała inaczej. Gdybyśmy tego nie dali, przeglądarka mogłaby pomyśleć że ma do czynienia z HTML 3 lub starszym. Po definicji, otwieramy cały dokument - <html>. Otwieramy także <body> - tam zapisujemy wszystko to, co widzimy. Mamy zatem już szkielet strony - możemy dodać nagłówek <h1> oraz tekst <p>. Ale nikt chyba nie lubi Times New Romana (chyba, że robimy gazetę) - spróbujmy zmienić czcionkę. Kiedyś, dawno temu wszystko się kodowało w HTMLu (strony z 2004/5 mocno to pokazują). Dzisiaj używamy CSS do określania stylów - Obok index.html tworzymy zatem style.css. W środku możemy zapisywać, co elementy o danym ID lub danej klasie będą miały za właściwości.

h1
{
    font-family: Arial, Helvetica, sans-serif;
}

#idd
{
    color: #ccc;
}

.klasa
{
    font-size: 10px;
}

Plik style.css to zbiór wszystkich naszych właściwości danych elementów. W powyższym kodzie, na początku mówimy że każdy h1 będzie pisany Arialem. Elementy z id #idd będą miały kolor szarawy, a z klasą .klasa będą wysokie na 10px. Od razu powiem, czym klasa różni się od id: jeżeli mamy przyciski, które się mają różnić tylko kolorem, musielibyśmy robić prawie dwa identyczne id, a na klasach - tylko jedna pod przycisk, i dwie małe pod kolor. Ba, możemy potem klasy 'kolor' wykorzystać gdzie indziej (np. do tekstu). Zobaczmy teraz, czy style działają. Najpierw musimy jednak zmodyfikować indexa:

<head>
      <link rel="stylesheet" type="text/css" href="style.css">
</head>
  
<body>
    <h1>Hello</h1>
    <p class="klasa">there</p>
    <p id="idd">general kenobi</p>
</body>

Pojawił się znacznik <head>. Tam często linkujemy dokumenty niezbędne do funkcjonowania strony, oraz definiujemy takie rzeczy jak nazwa, ikona, charset, itd - jak mówiłem, body widzimy, head nie. Zauważyłeś także, że przy znacznikach <p> są przypisane klasy i id. Możemy w ten sam sposób (przy znaczniku) także podać kolory i inne właściwości, ale od tego się odchodzi (dlatego wam pokazuję css). Na końcu, musimy jeszcze podać obsługę żądania ip/style.css do kodu. Dodajemy drugiego stringa czytającego style.css, oraz obsługę dla klienta - analogicznie jak w indexie.

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

void handleStyle()
{
  server.send(200, "text/css", getStyle())
}

//setup()
server.on("/style.css", handleStyle);

Wgrywamy kod, pliki i sprawdzamy, czy działa:

image.png.4c3b0ebf3f5c73511d3e092049eb2efe.png

Spróbujmy teraz zaimplementować JavaScript. Daje nam to możliwość "podstawiania" zmiennych do tekstu i dynamiczną zmianę strony, bez jej ponownego wczytywania. Podłącz swój czujnik i napisz kod (poważnie, jeżeli termometr zrobiłeś na Arduino, to na ESP nie będziesz mieć problemu). Ja wykorzystam Dallas DS18B20, dostępnego w forbotowym zestawie z malinką i Arduino - jest to cyfrowy termometr. Link do artykułu jest tutaj, a jak już mamy do niego kod, czas modyfikować stronę. Pouczymy się teraz czystego HTMLa (no, a bardziej frameworków).

Podstawowe znaczniki HTML

Znaczników mamy kilka(naście). Najbardziej będą potrzebne:

<p> - tekst
<hX> - nagłówek, za X dajemy numer (wielkość)
<div> - pusty blok
<button> - przycisk
<a> - link
<img /> - zdjęcie (uwaga: zdjęcia nie otwieramy, tylko od razu zamykamy)
<script>, <style> - tam umieszczamy fragmenty kodu JS lub CSS
<html>, <body>, <head> - tworzą szkielet strony

Aby te znaczniki ostylować, możemy "surowo" to zrobić w HTMLu, dodać własne CSS, lub skorzystać z gotowych frameworków. Ale jak z gotowych? Otóż Bootstrap to framework zawierający zestawy klas, umożliwiające stworzyć ładną, i responsywną stronę. Oznacza to tyle, że kodowania będzie mało, a dostaniemy własną, elegancką stronę do wyświetlenia na wszystkim co ma dostęp do internetu. Będziemy chcieli stworzyć ładną stronę z dwoma przyciskami, i etykietą pokazującą temperaturę.

Bootstrap

Otwieramy plik indexa. Wszystko w <head> usuwamy i wklejamy to:

    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>domek</title>

Pierwszy znacznik informuje stronę o zestawie znaków - tutaj utf-8 (umożliwi to nam wyświetlanie polskich znaków). Następnie linkujemy arkusz bootstrapa, po czym nadajemy naszej stronie nazwę "domek". Przydałoby się jeszcze dodać FontAwesome, z tego linku (trzeba się zarejestrować). Pozwoli nam to na wyświetlanie różnych ikonek.

Przechodzimy do samego dołu dokumentu. Tam dopisujemy:

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Pierwszy skrypt ładuje jQuery (lekki javascript), następny Poppera (pomaga bootstrapowi w responsywności), ostatni skrypt uzupełnia Bootstrapa. Dlaczego je ładujemy na końcu? To są największe pliki do załadowania, i często da się skorzystać ze strony bez nich. Jest to optymalizacja ładowania strony przy wolnym łączu.

Szkielet strony

W boostrapie tak wygląda struktura strony:

Mistrz painta w akcji.

Strona zawiera kontenery (.container), rzędy (.row), i kolumny (.col-*-*). Umożliwia to stworzenie eleganckiej i responsywnej strony w kilku łatwych krokach. Chcemy mieć kontener, rząd i kolumnę:

<div class="container">
     <div class="row">
          <div class="col-sm">

          </div>
     </div>
</div>

"container" to klasa kontenera, "row" rzędu, a "col-sm" małej kolumny. Teraz dajmy nagłówek, opis, etykietę i dwa przyciski:

    <div class="container">
        <div class="row">
            <div class="col-sm">
              <h1>Centralna Baza Dowodzenia</h1>
              <p>Dumnie wspierane 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: <span id="temp"> N/A </span></p>
            </div>
        </div>
    </div>

Elementy <h1> oraz <p> są domyślnie w Bootstrapie ostylowane. Tworzymy dwa linki o typie przycisków (odsyłam do kursu HTML na dole strony), oraz przypisuję im klasy przycisku, potem konkretnie o kolorach zielony i czerwony. Odsyłają one do podstron /on i /off, tak jak było wcześniej. Na koniec dajemy tekst, oraz etykietę z id "temp" która się przyda do skryptowania. Spróbujmy zatem to wgrać do SPIFFS i uruchomić:

Jeżeli chcemy podejrzeć strukturę strony, wystarczy kliknąć prawy przycisk myszy i wybrać Zbadaj Element (chrome/opera).

Pierwsze przygody z jQuery

Uznajmy, że skończyliśmy stronę. Teraz spróbujmy wyświetlić temperaturę. na samym dole, przed gotowymi skryptami, otwieramy <script>.

<script>
  
</script>

Dodajemy funkcję setInterval, wykonującą się co sekundę.

<script>
  setInterval(function()
  {

  }, 1000);
</script>

W tej funkcji dodajemy ten kod:

var strona = new XMLHttpRequest();

strona.onreadystatechange = function()
{
   if (this.readyState == 4 && this.status == 200)
   {
     document.getElementById("temp").innerHTML = this.responseText;
   }
};

Tworzymy zmienną strona, która wywołuje żądanie do strony. Kiedy mamy naszą stronę, sprawdzamy, czy wszystko się poprawnie załadowało (status 200). Jeżeli tak, zmieniamy tekst.

strona.open("GET", "/temp", true);
strona.send();

Na koniec tworzymy żądanie, a potem je wysyłamy. Całość zatem powinna wyglądać tak:

<script>
  setInterval(function()
  {
     var strona = new XMLHttpRequest();

     strona.onreadystatechange = function()
     {
       if (this.readyState == 4 && this.status == 200)
       {
         document.getElementById("temp").innerHTML = this.responseText;
       }
     };
    strona.open("GET", "/temp", true);
    strona.send();
  }, 10000);
</script>

Zostało nam wgrać nową stronę do SPIFFS, i modyfikujemy kod:

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

  server.on("/temp", handleTemp);

Standardowo już, w setupie dodajemy obsługę /temp, a w funkcji ją zwracamy i wypisujemy przy okazji temperaturę na wyświetlaczu. Efekt:

Przyciski działają, mamy temperaturę - zadanie wykonane. Spróbuj teraz dodać sterowanie np. serwem, i odczyt z kontaktronu. W następnym odcinku zgłębimy Bootstrapa, FontAwesome i podepniemy DNSy. Powodzenia!

Jeżeli chcesz się bardziej pouczyć HTMLa, CSS i frameworków, masz tutaj garść przydatnych linków (po polsku!):

Spis treści serii artykułów:

Treker · Marzec 12, 2020

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

ethanak · Marzec 12, 2020

@Leoneq sam chciałeś.

Co oznacza te całe doctype, i co dokładnie oznacza

<!DOCTYPE html>

Czy można tam wpisać coś innego? Jeśli tak to co? Jeśli nie to dlaczego?

Leoneq · Marzec 12, 2020

@ethanak, no chciałem XD
Ten kawałek kodu mówi przeglądarce, jaki dokument ma "przetrawić". Można tam wpisać coś innego, że np. przeglądarka ma trawić HTML 4, ale my się zajmujemy tutaj HTML 5 który wymaga takiego a nie innego zapisu.

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

ethanak · Marzec 12, 2020

To może byś o tym napisał?

A co będzie, jak nie dasz doctype?

Leoneq · Marzec 12, 2020

Przeglądarka najczęściej i tak poprawnie się odpali. Napisałem że doctype informuje o jakim rodzaju dokumentu mamy do czynienia, co chyba w kursie wystarczy.

ethanak · Marzec 12, 2020

Niekoniecznie się odpali poprawnie. Bez doctype będzie to najprawdopodobniej HTML3 albo 4.01 (nigdy 4). A z HTML3 to jest kompatybilny dowolny tekst z worda 😉

Leoneq · Marzec 12, 2020

No, dlatego mówię najczęściej. U mnie akurat z tym i bez tego działa, ale to opera która jest dość zaawansowaną przeglądarką. Dopiszę zatem żeby tego nie usuwać bo sie posypie i tyle.

SOYER · Marzec 12, 2020

@Leoneq Czy taką stronę da się obsłużyć klawiaturą?

Leoneq · Marzec 12, 2020

W teorii wszystko da się obsłużyć klawiaturą 😉 Myślę, że należałoby zaimplementować obsługę tego w jQuery, co może rzeczą trudną nie jest, ale ja Ci w tym już nie pomogę.

ethanak · Marzec 12, 2020

Oj - nie byłbym pewny. Zawsze można sprawdzić, odłożyć myszkę u spróbować ponawigować po stronie. Najlepiej (nie przesadzam) zainstalować sobie NVDA na Windowsie albo Orca na Linuksie, wyłączyć monitor i przejechać całość na screenreaderze.

Spróbuj - zobaczysz (a właściwie nie zobaczysz) ile masz baboli na stronie...

rziomber · Marzec 12, 2020

Warto wspomnieć o alternatywie dla Bootstrapa: CSS Grid. Jest on natywnie obsługiwany przez przeglądarki. Dzięki temu nie trzeba ładować biblioteki do SPIFFS.

Leoneq · Marzec 12, 2020

Hmm, o CSS Grid nie słyszałem. Zdecydowana większość stron z którymi miałem styczność miała Bootstrapa. Ale i tak nie ładujemy całego Bootstrapa do SPIFFS (chociaż możemy, żeby uniezależnić się od Internetu), tylko w kodzie mówimy skąd mamy Bootstrapa załadować do przeglądarki. Warto jednak wiedzieć o alternatywie.

Mihao · Marzec 13, 2020

@Leoneq Cześć, jak możesz to staraj sią aktualizować artykuły i dodawać jakiś spis czy coś na górze bądź dole artykułu aby potem nie trzeba było szukać skoro to jest seria w jednym temacie 🙂 (coś jak forbot robi)

Edytowano Marzec 13, 2020 przez Mihao

Leoneq · Marzec 13, 2020

Jak ukażą się wszystkie odcinki, oczywiście tak zrobię. Kończę już kolejną część, ostatnia wyjdzie do 15 marca - i wtedy dodam spis treści, oraz ponumeruję artykuły.

Kurs ESP8266 - #3 - przyspieszony kurs na Webmastera

Pomocna odpowiedź

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Polecacz 101

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach