Kako napraviti ESP32 Wi-Fi WEB Server sa 7 Segmentnim Display-em

Deni Ajanić Tutorijali Komentari isključeni

U prethodnim lekcijama objasnili smo šta je to ESP32 mikrokontroler, koje su njegove karakteristike, kao i postavke za programirnje ESP32 sa Arduino IDE-om. Za sve one koji su preskočili pročitati, lekciju mogu naći na ovome LINK-u.

Takodjer u jednoj od prethodnih lekcija objasnili smo sve vezano za kontrolu 7 segmentnog ekrana pomoću ESP32 mikrokontrolera. U ovoj lekciji ćemo napraviti prvi lokalni Server na ESP32 mikrokontroleru. Iz prethodnih lekcija nam je poznato da ESP32 podržava WiFi komunikaciju, tako da ćemo u ovoj lekciji napraviti vezu između ESP32, lokalnog rutera i web browser-a. Ova lekcija jeste početna lekcija, ali zahtjeva minimalno poznavanje HTML programskog jezika. Za one koji nisu nikada radili sa HTML-om, jedno od najboljih mjesta za početak učenja je: https://www.w3schools.com.

U ovoj lekciji ćemo objasniti:

Kako skenirati IP adresu i kako se konektovati na Wi-Fi
Šema povezivanja i kod za kontrolu jedne LED diode putem WEB browser-a
Šema povezivanja i kod za kontrolu 7 segmentnog ekrana ESP32 mikrokontrolerom putem WEB browser-a
Specifikacija materijala

Kako skenirati IP adresu i kako se konektovati na Wi-Fi

Na svu sreću nećemo pisati velike kodove jer prilikom instaliranja ESP32 biblioteke za ploče, automatski dobivate i ESP32 primjere (Example). U slučaju da nemate instalirane biblioteke za korištenje ESP32 kliknite na ovaj tutorial i uradite sve korake kako bi mogli normalno nastaviti sa radom.

Za početak prvo što trebamo da uradimo je da znamo da imamo prisutan WiFi u našem okruženju kako bi ga mogli koristiti. Također za testiranje možete koristiti i HOTSPOT jer se i on ponaša isto kao Router i dijeli vašu 3G, 4G ili neku drugu mrežu kao WiFi. U ovome primjeru ćemo koristiti Hotspot pod nazivom “StarmoTech Hotspot”. Sada kada znate koja Vam je mreža (naziv mreže) i koja je šifra mreže, možemo da krenemo sa skeniranjem svih mreža.
Za samo skeniranje mreža imamo primjer na File > Examples > WiFi > WiFiScan. Na slici ispod možete vidjeti putanju.

Nakon što smo otvorili Arduino IDE primjer za skeniranje, potrebno je da uradimo Upload i otvorimo Serial Monitor. Kao što možete vidjeti na slici ispod, svakih 5 sekundi će se ispisivati sve mreže koje su skenirane.

Sada kada su ostvareni svi uslovi tj. kada imamo sve potrebne podatke za konektovanje na Wi-Fi, vrijeme da sve povežemo i isprogramiramo.

Šema povezivanja i kod za kontrolu jedne LED diode putem WEB browser-a

U slučaju da ne želite prepisivati kod sa slike, kliknite na ovaj GITHUB link i preuzmite kod iz ovog tutorijala, kao i od ostalih Tutorijala.
Prije samog povezivanja ESP32 mikrokontrolera, bitno je naglasiti da ne smijete ploču spuštati na metalnu podlogu, jer pinovi nisu izolovani. U slučaju da navedeni kontroler spustimo na metalnu podlogu, možemo izazvati kratki spoj između pinova i oštetiti mikrokontroler, a nismo ni počeli sa projekom.

Napomena: Većina ESP32 i ESP8266 mikrokontrolera ne odgovara breadboardima, pa se često prepolovi breadboard po sredini kako bi se dobilo na prostoru. Naš savjet Vam je kupiti ESP32 Screw Shield i ne patiti se sa pilanjem breadboard-a nožem ili pilom. Screw Shield će Vam omogućiti čvršću vezu između kablova i mikrokontrolera, jer se sve veze “stegnu” šarafima.

Kada govorimo o kodu, sve što je potrebno da uradimo je da otvorimo primjer na File > Example > WiFi > SimpleWiFiServer. Na slici ispod možete vidjeti putanju.

U kodu možemo vidjeti da LED dioda treba da bude spojena na Pin 5 kao na šemi ispod.

Kao što možete vidjeti na slici ispod na mjestu const char *ssid = "naziv Wifi Mreže"; – u ovom primjeru “StarmoTech Hotspot” i const char *password = "šifra"; – šifra u ovom primjeru je “starmotech“, a Vi trebate da ukucate vašu WiFi šifru. Nakon unesenih podataka kliknite Upload. Nakon upload-a otvorite Serial Monitor.

Ako Vam se u Serial Monitoru prikažu tačke, to zači da niste konektovani i da se mikrokontroler stalno pokušava konektovati. Razlog može biti da Vaš ESP32 nemože dohvatiti mrežu, dok je najčešći razlog taj da niste tačno unijeli SSID ili Password. U slučaju da ste tačno unijeli sve podatke, u Serial Monitoru će Vam se ispisati IP adresa preko koje će se obavljati komunikacija između svih uređaja i ESP32 mikrokontrolera. Također bitno je da izaberete 115200 baud u Serial monitori, jer ćete kao odgovor dobivati čudne karaktere koje nije moguće pročitati.

Napomena: U slučaju da je Serial Monitor prazan, potrebno je pritisnuti dugme EN – RESTART na ESP32 mikrokontroleru.

Na slici iznad može se vidjeti da smo konektovani na WiFi mrežu StarmoTech Hotspot i broj IP Adrese – 192.168.179.224. Nakon što ukucamo ovu IP adresu na računaru tj. WEB browser-u, dobit ćemo pregled kao na slici ispod.

Napomena: Kako bi pristupili slanju komandi ESP32 Serveru preko IP adrese, svi uređaji moraju biti spojeni na istoimenu Wi-Fi mrežu tj. mrežu na koju se ESP32 konektuje.

Kod je poprilično jednostavan, ono što nas najviše interesuje je 85 i 86 linija koda koja nam ispisuje tekst i link na Web Browser-u i od 100 do 104 linije koda koja na kraju adrese ispuje slovo H (HIGH) ili L (LOW). U ovisnosti o tome koji link kliknemo LED lampica će se paliti i gasiti.
Kako bi ovu lekciju napravili dosta interesantnijom i kako bi jednu od prethodnih lekcija napravili još interesantnijom, u nastavku ćemo povezati 7 segmentni ekran i ispisivati željeni broj od 0 do 9. Za sve one koje interesuje više detalja o 7 segmentnom ekranu jednostacno kliknite na ovaj LINK i naučite:

Šema povezivanja i kod za kontrolu 7 segmentnog ekrana ESP32 mikrokontrolerom putem WEB browser-a

Šema povezivanja 7 segmentnog ekrana je ista kao u lekciji:

Kako se programira 7 Segment Ekran sa ESP32 i Arduino Mikrokontrolerom

Nakon što smo povezali 7 segmentni ekran kao na šemi iznad, vrijeme je za kod. U slučaju da ne želite prepisivati kod sa slike, kliknite na ovaj GITHUB link i preuzmite kod iz ovog tutorijala, kao i od ostalih Tutorijala.

// Definicija pinova za segmente (A, B, C, D, E, F, G)
int A = 32;
int B = 33;
int C = 25;
int D = 26;
int E = 27;
int F = 14;
int G = 12;

#include <WiFi.h>

const char *ssid = "StarmoTech Hotspot";
const char *password = "starmotech";

NetworkServer server(80);

void setup() {
  Serial.begin(115200);

  // Postavi sve segmente kao outpute - izlaze
  pinMode(A, OUTPUT);
  pinMode(B, OUTPUT);
  pinMode(C, OUTPUT);
  pinMode(D, OUTPUT);
  pinMode(E, OUTPUT);
  pinMode(F, OUTPUT);
  pinMode(G, OUTPUT);

  // Ugasiti sve segmente prilikom paljenja
  digitalWrite(A, HIGH);
  digitalWrite(B, HIGH);
  digitalWrite(C, HIGH);
  digitalWrite(D, HIGH);
  digitalWrite(E, HIGH);
  digitalWrite(F, HIGH);
  digitalWrite(G, HIGH);

  delay(10);

  // Počinjemo povezivanjem na Wi-Fi mrežu
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

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

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {
  NetworkClient client = server.accept();  // slušajte dolazeće konekcije/klijente
  
  if (client) {                     // if you get a client,
    Serial.println("New Client.");  // print a message out the serial port
    String currentLine = "";        // make a String to hold incoming data from the client
    while (client.connected()) {    // loop while the client's connected
      if (client.available()) {     // if there's bytes to read from the client,
        char c = client.read();     // read a byte, then
        Serial.write(c);            // print it out the serial monitor
        if (c == '\n') {            // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Klikni <a href=\"/0\">ovdje</a> da ispises broj 0 on.<br>");
            client.print("Klikni <a href=\"/1\">ovdje</a> da ispises broj 1 on.<br>");
            client.print("Klikni <a href=\"/2\">ovdje</a> da ispises broj 2 on.<br>");
            client.print("Klikni <a href=\"/3\">ovdje</a> da ispises broj 3 on.<br>");
            client.print("Klikni <a href=\"/4\">ovdje</a> da ispises broj 4 on.<br>");
            client.print("Klikni <a href=\"/5\">ovdje</a> da ispises broj 5 on.<br>");
            client.print("Klikni <a href=\"/6\">ovdje</a> da ispises broj 6 on.<br>");
            client.print("Klikni <a href=\"/7\">ovdje</a> da ispises broj 7 on.<br>");
            client.print("Klikni <a href=\"/8\">ovdje</a> da ispises broj 8 on.<br>");
            client.print("Klikni <a href=\"/9\">ovdje</a> da ispises broj 9 on.<br>");

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        //Provjeri da li clijent zahtjeva GET / broj if (currentLine.endsWith("GET /0")) {
        if (currentLine.endsWith("GET /0")) {
          prikaziBroj(0);  // GET /0 upali broj 0
        }
        if (currentLine.endsWith("GET /1")) {
          prikaziBroj(1);  // GET /1 upali broj 1
        }
        if (currentLine.endsWith("GET /2")) {
          prikaziBroj(2);  // GET /2 upali broj 2
        }
        if (currentLine.endsWith("GET /3")) {
          prikaziBroj(3);  // GET /3 upali broj 3
        }
        if (currentLine.endsWith("GET /4")) {
          prikaziBroj(4);  // GET /4 upali broj 4
        }
        if (currentLine.endsWith("GET /5")) {
          prikaziBroj(5);  // GET /5 upali broj 5
        }
        if (currentLine.endsWith("GET /6")) {
          prikaziBroj(6);  // GET /6 upali broj 6
        }
        if (currentLine.endsWith("GET /7")) {
          prikaziBroj(7);  // GET /7 upali broj 7
        }
        if (currentLine.endsWith("GET /8")) {
          prikaziBroj(8);  // // GET /8 upali broj 8
        }
        if (currentLine.endsWith("GET /9")) {
          prikaziBroj(9);  // GET /9 upali broj 9
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}


// Funkcija za prikaz brojeva od 0 do 9 
void prikaziBroj(int broj) {
  if (broj == 0) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(E, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, HIGH);
  }

  if (broj == 1) {
    digitalWrite(A, HIGH);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, HIGH);
    digitalWrite(E, HIGH);
    digitalWrite(F, HIGH);
    digitalWrite(G, HIGH);
  }

  if (broj == 2) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(G, LOW);
    digitalWrite(E, LOW);
    digitalWrite(D, LOW);
    digitalWrite(C, HIGH);
    digitalWrite(F, HIGH);
  }

  if (broj == 3) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(G, LOW);
    digitalWrite(E, HIGH);
    digitalWrite(D, LOW);
    digitalWrite(C, LOW);
    digitalWrite(F, HIGH);
  }

  if (broj == 4) {
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(A, HIGH);
    digitalWrite(D, HIGH);
    digitalWrite(E, HIGH);
  }

  if (broj == 5) {
    digitalWrite(A, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(B, HIGH);
    digitalWrite(E, HIGH);
  }

  if (broj == 5) {
    digitalWrite(A, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(B, HIGH);
    digitalWrite(E, HIGH);
  }

  if (broj == 6) {
    digitalWrite(A, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
    digitalWrite(E, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(B, HIGH);
  }

  if (broj == 7) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, HIGH);
    digitalWrite(E, HIGH);
    digitalWrite(F, HIGH);
    digitalWrite(G, HIGH);
  }

  if (broj == 8) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(E, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
  }

  if (broj == 9) {
    digitalWrite(A, LOW);
    digitalWrite(B, LOW);
    digitalWrite(C, LOW);
    digitalWrite(D, LOW);
    digitalWrite(F, LOW);
    digitalWrite(G, LOW);
    digitalWrite(E, HIGH);
  }
}

Kao što možete vidjeti u kodu ispod prvo što smo uradili je // Definicija pinova za segmente (A, B, C, D, E, F, G). Nakon definicije pinova, sve Pinove smo postavili kao OUTPUTE i sve ih ugasili kako nam se ne bi ništa prikazalo prilikom prvog paljenja.

Napomena: U ovoj lekciji koristimo 7 segmentni ekran sa zajedničkom anodom (Common Anode) pa se svi pinovi ili segmenti aktiviraju na zadanu komandu LOW i zbog toga smo postavili sve pinove na HIGH kako ne bi svjetlili.

Od 83 linije koda do 92 linije koda ispisali smo tekst i link šta će nam se prikazati na Web Browser-u.

Od 106 linije koda do 135 linije koda ispisali smo šta sve mikrokontroler može očekivati na kraju linka u Web Browser-u.

Na kraju smo napisali funkciju pod imenom void prikaziBroj(int broj) (samo smo je prepisali iz prethodne lekcije).

Naravno da postoji dosta elegantniji i kraći način za programiranje ekrana kroz nizove, ali naš kod je prilagođen svim uzrastima kako bi hobistima bio što jasniji proces izvršavanja koda.

Obzirom da smo koristili kod sa zajedničkom Anodom, to znači da smo VCC (+) doveli na zajednički pin, dok smo sa stanjem LOW palili segmente, a sa stanjem HIGH gasili segmente.

U slučaju da koristite zajedničku katodu, sve što trebate uraditi je na sredinu dovesti GND (-) i u kodu zamijeniti gdje je LOW staviti HIGH i obrnuto.

Nakon što uradite upload koda, kao rezultat u Web browser-u dobit ćete ispis za biranje broja koji želite da kliknete i prikažete na 7 segmentnom ekranu.

Zadatci za kraj:

Napravite još dva link za prikaz u Browser-u koja će ispisivati slovo A, slovo E i slovo F na 7 segmentnom ekranu.

Specifikacija materijala

1x Espressif ESP32 mikrokontroler
1x Breadboard ili Screw shield
1x 7 segmentni ekran 1 broj
8x Otpornik 100Ω
8x Komunikacijski kablovi

Napomena: Nakon što pročitate bilo koji Tutorijal na internetu, uvijek pogledajte Datasheet bilo koje komponente ili senzora, jer se tu nalaze svi bitni fabrički detalji!

Kontakt Telefon:

Kako napraviti ESP32 Wi-Fi WEB Server sa 7 Segmentnim Display-em