Kurs ESP8266 - #2 - zapoznanie z nowym środowiskiem, praca jako Arduino i prosty serwer WWW

[Leoneq]

Witajcie w drugiej części kursu ESP8266! Dzisiaj omówimy sobie, co przynosi zmiana środowiska na VS Code, zobaczymy sprzętowe możliwości ESP, a także połączymy się z siecią WIFI. Do kursu będziecie potrzebowali:

• ESP8266 (najlepiej NodeMCU v3)
• Dioda LED (z rezystorem)
• Wyświetlacz HD44780 z konwerterem I2C (lub inny, ale będziesz musiał modyfikować kod)
• Fotorezystor lub potencjometr
• Płytkę stykową
• Przewody połączeniowe
• oraz oczywiście dobre chęci 🙂

Zacznijmy od tego, co nam dała przeprowadzka na VS Code. Poza samym wyglądem (kwestia gustu), wsparciem wielu wtyczek (pluginów) czy po prostu większą wygodą pisania, VS Code oferuje wiele zwykłych, aczkolwiek przydatnych funkcji których brakuje w Arduino IDE.

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:

• 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

Praca na wielu plikach jednocześnie

Nawet z jednym monitorem, wszystko wygląda dość czytelnie i elegancko. Po lewej stronie mamy przeglądarkę plików, gdzie możemy wczytać przykład z Arduino IDE czy otworzyć cały folder z projektem. Dzięki temu, będziemy mieli od razu łatwy dostęp do wszystkich plików projektu, jak pliki nagłówkowe, pliki tekstowe, czy nawet zdjęcia. Na dole zaś znajdziemy konsolę. Tam mamy dostęp do windowsowego PowerShella, arduinowego Serial Monitora, czy po prostu informacje o wgrywaniu/kompilowaniu programu. Na samym środku okna znajdziemy zakładki z otwartymi plikami. Możemy je jeszcze podzielić, co umożliwia nam pracę na wielu plikach jednocześnie.

Typowe okno programu VS Code.

Wygoda pisania

VS Code o wiele bardziej potrafi się do nas przystosować. Poza zmianą ogólnego schematu kolorów, mamy możliwość zmiany kolorowania składni. Dostajemy także podpowiadanie (skrót CTRL+SPACJA), co często jest bardzo przydatną funkcją, oraz autouzupełnianie - czyli po zapisaniu pierwszego nawiasu, od razu piszemy drugi (magia IntelliSense). Po prawej stronie, obok suwaka, mamy widok na kod "z daleka". Umożliwia to wyszukiwanie konkretnych bloków kodu, np. obszernych tablic zmiennych, długich instrukcji switch-case czy innych dobrze widocznych rzeczy. 

Podpowiedź do własnej funkcji blink()

VS Code oferuje oczywiście jeszcze wiele, wiele funkcji - lecz są one dla bardziej zaawansowanych programistów, i najzwyczajniej nam się nie przydadzą. Przejdźmy zatem do części praktycznej.

Analog Read oraz Serial

Sprawdźmy, czy ESP może pracować tak jak zwykłe Arduino. Ale czym by było Arduino bez przetwornika ADC i komunikacji z komputerem? Sprawdźmy, czy przykład "AnalogReadSerial" zadziała na NodeMCU. Wgrywamy poniższy kod:

#define PIN_ANALOG A0 //pin analogowy. NodeMCU ma taki tylko jeden!
int odczyt; //zmienna, w której zapisujemy odczyt

void setup()
{
  Serial.begin(115200); //uruchamiamy komunikację UART z prędkością 115200 bodów
  pinMode(PIN_ANALOG, INPUT); //ustawiamy pin analogowy jako wejście
}

void loop()
{
  odczyt = analogRead(PIN_ANALOG); //odczytujemy wartość
  Serial.println(odczyt); //piszemy wartość
  delay(1);  //czekamy chwilę
}

Oraz podłączamy NodeMCU zgodnie z poniższym schematem:

Gdzie:

• pin pierwszy fotorezystora łączymy z pinem A0
• pin drugi fotorezystora łączymy z zasilaniem 3.3V

Po wgraniu przykładu i otworzeniu portu, powinniśmy zobaczyć ciągle wypisywane wartości. U mnie, przy zwykłym oświetleniu odczyt wskazywał 1024 (czyli maks. wartość), po przysłonięciu ręką ta wartość malała aż do 0 (kiedy fotorezystor włożyłem do pudełka). Oznacza to, że zarówno mierzenie wartości analogowych, jak i komunikacja przez port szeregowy działa. Przejdźmy zatem do następnego przykładu.

Komunikacja w drugą stronę, przycisk, PWM

Kolejny, prosty przykład. Chcemy, aby po odebraniu z komputera po Serialu liczby dioda zaświeciła się dzięki PWM, a po naciśnięciu przycisku zgasła. W tym celu utworzymy nowy projekt. Ja to robię trochę manualne, mianowicie tworzę nowy folder, a w nim "plik.ino". Aby taki plik utworzyć, po nazwie dajemy ".ino" - więc nadajemy rozszerzenie pliku Arduino. Musimy także wybrać typ pliku jako wszystkie pliki. Nazwa folderu i pliku są takie same.

Teraz możemy przejść do kodu.

#define PIN_BTN D1
#define PIN_LED BUILTIN_LED

char znak = ' ';

void setup()
{
    Serial.begin(115200);
    pinMode(PIN_BTN, INPUT_PULLUP);
}

void loop()
{
  if(Serial.available() > 0) znak = Serial.read(); //jak odbieramy coś, zapisujemy 1 znak
  
  switch (znak) {
    case '1':
      analogWrite(PIN_LED, 0);  //maks
      break;
    case '2':
      analogWrite(PIN_LED, 400); //ok. 80%
      break;
    case '3':
      analogWrite(PIN_LED, 800); //ok. 30%
      break;
    case '4':
      analogWrite(PIN_LED, 1023); //0%
      break;
  }

  if(digitalRead(PIN_BTN) == LOW) znak = '4';
}

Na początku definiujemy piny. W ESP używamy oznaczeń "Dx" - jeżeli chcielibyśmy podać samą liczbę, musielibyśmy podać numer GPIO zgodny z rozpiską.

Następnie definiujemy zmienną "znak" typu char. Przechowuje ona jeden (!) znak. W funkcji setup uruchamiamy komunikację UART, oraz podpinamy rezystor podciągający do pinu przycisku. Zapobiegnie to "pływaniu" napięcia - nie wiadomo, jakie napięcie by wtedy było na tym pinie. W funkcji loop() na początku sprawdzamy, czy odebraliśmy dane - jeżeli tak, zapisujemy je do zmiennej. Następnie analizujemy zmienną - oraz ustawiamy PWM na pin z daną wartością. Tutaj warto zaznaczyć, że wartość podajemy w zakresie 0-1023 (w Arduino 0-255), oraz że wypełnienie też jest "odwrócone". Czyli "maksymalne wypełnienie" zgasi diodę, natomiast podanie "zera" po prostu ją zapali. Następnie, jeżeli przycisk jest zwarty z masą, gasimy diodę. Tak wygląda schemat:

Pin D1 łączymy z pierwszym pinem przycisku, drugi pin łączymy z masą (G). Teraz spróbuj połączyć się Serial Monitor i wpisać kolejno 1,2,3,4, oraz przycisnąć przycisk gaszący diodę. Wszystko powinno sprawnie działać.

Pierwsze kroki z WIFI - łączenie się z siecią

Czas, aby nasze ESP mogło się połączyć z Wifi. Oczywiście, możemy także ustawić ESP w trybie "routera", lecz zajmiemy się tym później - najlepiej, gdybyś miał gotową domową sieć Wifi do której bezpiecznie można się podpiąć. Nawet jeżeli takiej nie masz, możesz uruchomić w telefonie "hotspota". Jeżeli zapewniłeś sobie już dostęp do Wifi, zapisz gdzieś SSID (nazwę) i hasło. Spróbujemy połączyć się z Wifi, a następnie wyświetlić to na wyświetlaczu sterowanym przez I2C. Tak jak mówiłem, I2C możemy skonfigurować na dowolnych pinach; domyślnie pin D1 to SCL, a D2 to SDA. Tak też zostawiamy, następnie uruchamiamy skaner adresów I2C, aby znaleźć jaki adres ma nasz wyświetlacz. Podłączenie nie powinno być problemem:

I teraz prosty programik uruchamiający wyświetlacz:

#include <Wire.h>   //biblioteka od I2C
#include <LiquidCrystal_I2C.h> //biblioteka od HD44780 po I2C
 
LiquidCrystal_I2C lcd(0x3F, 20, 4); //adres, szerokość, wysokość
 
void setup()
{
  lcd.begin();
  lcd.print("Hello, world!");
}
void loop() {}

Powinniśmy zobaczyć takie coś:

Teraz spróbujemy połączyć się z Wifi. Do poprzedniego kodu dodajemy bibliotekę, odpowiadającą za obsługę Wifi.

#include <ESP8266WiFi.h>

Następnie tworzymy tablice charów zawierające naszą nazwę i hasło. Do tego tworzymy obiekt klienta.

const char* ssid = "ssid";
const char* pass = "hasło";

WiFiClient client;

Przechodzimy do funkcji setup. Tam dodajemy funkcję załączającą Wifi. Przyjmuje ona argument nazwy, a potem hasła. 

void setup()
{
  lcd.begin();
  WiFi.begin(ssid, pass); //połącz z Wifi
  lcd.setCursor(0, 0);
  lcd.print("Laczenie ");

Potem możemy dodać animację, żeby zobaczyć czy nic się nie zacięło.

while(WiFi.status() != WL_CONNECTED) //wyświetlaj animacje dopóki się nie połączyliśmy
  {
    lcd.setCursor(10,0);
    lcd.print(".");
    delay(400);
    lcd.setCursor(10,0);
    lcd.print(" ");
    delay(400);
  }

Na końcu dodamy wiadomość, że już się połączyliśmy. Wyświetlimy nawet nasz adres IP!

  lcd.setCursor(0, 0); //napisz, że połączono i wyświetl IP
  lcd.print("Polaczono! ");
  lcd.setCursor(0, 1);
  lcd.print("IP: ");
  lcd.print(WiFi.localIP());

Całość zatem będzie wyglądać tak:

#include <Wire.h>   //biblioteka od I2C
#include <LiquidCrystal_I2C.h> //biblioteka od HD44780 po I2C
#include <ESP8266WiFi.h>

LiquidCrystal_I2C lcd(0x3F, 20, 4); //adres, szerokość, wysokość

const char* ssid = "nazwa"; //nazwa
const char* pass = "haslo"; //hasło

WiFiClient client; //obiekt wifi

void setup()
{
  lcd.begin();
  WiFi.begin(ssid, pass); //połącz z Wifi
  lcd.setCursor(0, 0);
  lcd.print("Laczenie ");

  while(WiFi.status() != WL_CONNECTED) //wyświetlaj animacje dopóki się nie połączyliśmy
  {
    lcd.setCursor(10,0);
    lcd.print(".");
    delay(400);
    lcd.setCursor(10,0);
    lcd.print(" ");
    delay(400);
  }
  lcd.setCursor(0, 0); //napisz, że połączono i wyświetl IP
  lcd.print("Polaczono! ");
  lcd.setCursor(0, 1);
  lcd.print("IP: ");
  lcd.print(WiFi.localIP());
}
void loop() //nie robimy już nic
{

}

Pamiętaj, aby przed wgraniem programu wprowadzić swoje hasło i swoją nazwę sieci (a także adres LCD). Jeżeli nam się nie uda połączyć, lub coś pójdzie nie tak, zamiast adresu IP wyświetli nam się "IP unset". Spróbuj teraz w przeglądarkę wpisać adres IP, który odczytasz na wyświetlaczu. Oczywiście, teraz nic się nie wyświetli - ESP nie ma instrukcji, co zrobić w przypadku wejścia na jego adres IP. Zmieńmy to!

ESP8266 jako prosty serwer WWW

Nasze zadanie będzie proste: jeżeli wejdziemy na stronę główną (ip), wyświetla nam się tekst "witaj". Po wejściu w podstronę "on" (ip/on) zapalamy diodę, i podobnie w przypadku "off". Będziemy sterować wbudowaną diodą. 

Dodajemy zatem bibliotekę odpowiedzialną za serwer WWW:

#include <ESP8266WebServer.h>

Oraz jej obiekt. Liczba podana w nawiasie to port. Jeżeli chcesz wiedzieć więcej o HTTP i serwerach, odsyłam Ciebie do artykułu ethanaka.

ESP8266WebServer server(80);

Przechodzimy do funkcji setup. Na samym dole dodajemy kilka linijek - pierwsze 3 odpowiadają za funkcje, które się wykonają po wywołaniu strony. Ostatnia uruchamia serwer.

server.on("/", handleRoot);
server.on("/on", handleOn);
server.on("/off", handleOff);
server.begin();

Teraz jedynie w funkcji loop() zostało dodać obsługę całego serwera.

server.handleClient();

Ostatnim krokiem zostało dodanie trzech funkcji, podanych wcześniej. Funkcja handleRoot wykona nam się za każdym razem, po wywołaniu strony głównej. Stwórzmy ją w takim razie:

void handleRoot()
{ 
    server.send ( 200, "text/html", "<p>witaj</p>");
}

Wykonuje nam się tylko polecenie send. Wysyła ono informacje do klienta - pierwszą z nich jest kod 200 (wszystko jest w porządku), następnie tekst. Chwilowo po prostu przepisz ostatni argument,  później omówimy HTMLa bardziej szczegółowo. Tak będzie wyglądać funkcja zapalająca oraz gasząca LED:

void handleOn()
{
  digitalWrite(PIN_LED, LOW);
  server.send(200, "text/html", "<p>dioda jest wlaczona</p>");
}

void handleOff()
{
  digitalWrite(PIN_LED, HIGH);
  server.send(200, "text/html", "<p>dioda jest wylaczona</p>");
}

I, po dodaniu wszystkiego, całość będzie wyglądać tak:

#define PIN_LED BUILTIN_LED

#include <Wire.h>   //biblioteka od I2C
#include <LiquidCrystal_I2C.h> //biblioteka od HD44780 po I2C
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

LiquidCrystal_I2C lcd(0x3F, 20, 4); //adres, szerokość, wysokość

const char* ssid = ""; //nazwa
const char* pass = ""; //hasło

WiFiClient client; //obiekt wifi
ESP8266WebServer server(80);

void setup()
{
  lcd.begin();
  WiFi.begin(ssid, pass); //połącz z Wifi
  lcd.setCursor(0, 0);
  lcd.print("Laczenie ");
  pinMode(PIN_LED, OUTPUT);
  while(WiFi.status() != WL_CONNECTED) //wyświetlaj animacje dopóki się nie połączyliśmy
  {
    lcd.setCursor(10,0);
    lcd.print(".");
    delay(400);
    lcd.setCursor(10,0);
    lcd.print(" ");
    delay(400);
  }
  lcd.setCursor(0, 0); //napisz, że połączono i wyświetl IP
  lcd.print("Polaczono! ");
  lcd.setCursor(0, 1);
  lcd.print("IP: ");
  lcd.print(WiFi.localIP());
  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.begin();
}

void handleRoot()
{ 
    server.send ( 200, "text/html", "<p>witaj</p>");
}

void handleOn()
{
  digitalWrite(PIN_LED, LOW);
  server.send(200, "text/html", "<p>dioda jest wlaczona</p>");
}

void handleOff()
{
  digitalWrite(PIN_LED, HIGH);
  server.send(200, "text/html", "<p>dioda jest wylaczona</p>"); 
}

void loop()
{
server.handleClient(); //obsługa serwera
}

Teraz wpisz swoją nazwę i hasło, wgraj program, i wpisz w przeglądarkę adres IP. Powinien ci się ukazać tekst "witaj". Spróbuj teraz po adresie wpisać ukośnik, oraz "on".

Dioda powinna się zapalić, oraz wyświetlić stosowny tekst. Tak samo będzie z podstroną off.

Właśnie udało Ci się postawić serwer WWW na mikrokontrolerze za 20zł! W następnej części nauczymy się podstaw HTMLa, wczytamy stronę WWW z karty SD, a nawet zrobimy mini termometr IoT. W międzyczasie spróbuj zrobić program obsługujący dwie diody. Tak więc, 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

[Treker (Damian Szymański)]

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

[Mike84]

Co w tym kodzie mogłem zrobić źle? Nie mogę dopatrzeć się błędów 😕 

 Wyskakuje mi błąd kompilacji:

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define LED 15
const char* ssid = "";
const char* pass = "";
WiFiClient client; // Stworzenie kilenta
ESP8266WebServer server(80); // Stworzenie serwera

void setup() {
  Serial.begin(9600);
  Serial.println("NodeMCU v.3.0");
  Serial.println("Łączenie");
  WiFi.begin(ssid, pass); // Łączenie z siecią

  while(WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(50);
  }

 Serial.println("Połączono z ");
 Serial.print(ssid);
 Serial.println("IP: ");
 Serial.print(WiFi.localIP());

server.on("/", home);
server.on("/on", ledON);
server.on("/off", ledOFF);
server.begin();
}
 void loop() {
  server.handleClient();
 }

 void home()
{ 
    server.send ( 200, "text/html", "<p>witaj</p>");
}

void ledON()
{
  digitalWrite(LED, LOW);
  server.send(200, "text/html", "<p>dioda jest wlaczona</p>");
}

void ledOFF()
{
  digitalWrite(LED, HIGH);
  server.send(200, "text/html", "<p>dioda jest wylaczona</p>"); 
}

 

[Leoneq]

Spróbuj te funkcje zdeklarować przed funkcją setup - przenieś je na górę, i powinno być ok.

[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

[Mike84]

Dobra, już wszystko działa , dzięki za pomoc 🙂 

Edytowano Maj 15, 2020 przez Mike84

[Leoneq]

Jak widzę, brakuje Ci pinMode(LED_PIN, OUTPUT); w setupie.

[Mike84]

Tak, tak, też już to zauważyłem, po dodaniu wszystko działa jak trzeba 😄 

[tomaszkot]

Cześć, nie działa mi komunikacja UART z prędkością 115200 bodów tylko 9600.
Mam NodeMcu v3, od czego zależy max. prędkość komunikacji?

 

[Leoneq]

Może trywialne pytanie, ale terminal na komputerze (monitor portu szeregowego) także ustawiłeś na prędkość 115200 bodów? 9600 to ustawienie domyślne. W pliku platformio.ini należy dopisać

monitor_speed = 115200

 

[daneil737]

Ten tutorial jest rewelacyjny, naprawdę świetnie jest to napisane! Korzystam z niego do ESP32 i poza drobnymi różnicami z bibliotekami bardzo dobrze mi się z nim pracuje.

[kaminski-tomek]

Cześć, fajny kurs.

 

Jedno pytanie, czemu nie używasz dzielnika napięcia przy pomiarze ADC?

[Leoneq]

NodeMCU mają wbudowany dzielnik napięcia. Jest on tam ponieważ ESP8266 mimo że działają na 3.3v, napięcie ADC mogą mieć zakres tylko od 0 do 1v. Dzielnik jest tam po to żeby nie przekroczyć tego zakresu, a tutaj fotorezystor po prostu łączy się równolegle z jednym z rezystorów i wszystko działa prawidłowo (dla pewności, zawsze można zajrzeć w schematy i policzyć rezystancje zastępcze).