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/[email protected]/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.

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ź

Leoneq

Treker (Damian Szymański)

ethanak

Leoneq

ethanak

Leoneq

ethanak

Leoneq

SOYER

Leoneq

ethanak

rziomber

Leoneq

Mihao

Leoneq

Bądź aktywny - zaloguj się lub utwórz konto!

Utwórz konto w ~20 sekund!

Zaloguj się

Quizy

Najnowsze posty w innych tematach

Kurs elektroniki II - #8 - wstęp do układu NE555 1 2 3 4 10

Linux i Raspberry Pi zamknięte w kieszonkowym komputerze. M5Stack zapowiada C...

Kazik T800 w przebudowie

Kurs STM32L4 – #14 – czujnik odległości, wyświetlacz 7-seg. 1 2

Kurs elektroniki II - #10 - tranzystory unipolarne (MOSFET) 1 2 3 4 11

Inne