Rete WLAN con ESP32

Introduzione

Il microcontrollore ESP32 è un sistema molto versatile, dotato  di due periferiche wireless ( Bluetooth e WI-FI) molto utili per applicazione IOT.

In questa nuova rubrica vorrei usare l’ESP32 per realizzare anche dei progetti per applicazioni IOT, e proprio in questo post  analizzeremo un progetto di una rete locale WLAN (Wireless Local Area Network),  senza accesso ad Internet.

Creeremo una WLAN domestica , gestita dal microcontrollore ESP32, il sistema è formato da un AP (Access Point)  che funge anche da server, per accedere alla rete  locale e inviare  richieste al server, bisogna connettersi alla rete  e inviare dei comandi tramite i browser alla pagina predefinita del server, di seguito nell’articolo approfondiremo con maggiori dettagli questa procedura.

Il sistema sarà composto da un server gestito dall’ ESP32 e da uno o più client, che si connetteranno al server, sulla rete WLAN.

Nozioni sulle reti

WLAN: è una rete wireless locale  non  connessa ad Internet e l’accesso alla rete è consentito solo  in un’area ridotta, che può essere un edificio oppure un ufficio.

Indirizzo IP: è un indirizzo unico, formato da quattro numeri  (32 bit)che identifica l’host connesso sulla rete. 

Gateway IP: è l’indirizzo che il router associa ad un dispositivo connesso nella  rete locale,  nel nostro caso è identico all’IP poiché’ la rete non è connessa ad Internet.  

AP (Access Point):è un dispositivo di rete wireless che funge da portale per la connessione dei dispositivi a una rete locale.

Server: è un programma che offre un servizio  richiesto  all’interno di una rete da altri dispositivi ad esso connesso,  chiamati anche client.

URL(Uniform Resource Locator):  Chiamato  anche indirizzo web, è un riferimento ad una risorsa del server o sito web  o un file specifico.

Rete WLAN con microcontrollore ESP32

Il nostro sistema è composto da un  AP, funzione svolta dal microcontrollore ESP32  oltre ad attivare un server, e da un client che invia dei comandi per pilotare due LEDs nella forma HTML (HyperText Markup Language).

Il client fa una richiesta HTTP d’informazioni ad un determinato indirizzo URL del server. Il server chiama una funzione mappata dall’URL richiesto e risponde al client con una pagina HTML  dove fornisce le informazioni prodotte dalla funzione precedentemente chiamata.  Nel nostro caso abbiamo mappato due indirizzi URL per pilotare due diodi LEDs.

Per accedere al server dobbiamo  selezionare la rete WLAN  e connetterci ad essa inserendo la  propria password, successivamente apriamo un browser all’indirizzo IP  del server che ci invierà una pagina  HTML dove sono  presenti dei pulsanti che  possono essere cliccati per inviare i comandi al server e per pilotare i diodi LEDs, mappati ad URL differenti.

Nel codice è stato definito l’indirizzo IP del server piuttosto che farlo generare dal codice in modo automatico allo stesso modo abbiamo definito l’indirizzo  gateway, quest’ultimo,  come indicato in precedenza, è identico all’indirizzo IP perché la rete non è connessa ad Internet.

Inoltre, il  subnet mask (255,255,255,0) per la  classe di indirizzi C IP, per esempio 192.168.2.1, dove i primi tre numeri dell’indirizzo IP definiscono l’ID della WLAN , mentre l’ultimo numero è l’ID dell’host.

Approfondimenti sulla richiesta HTTP

Quando il client si connette ad un server esegue una richiesta HTTP di un servizio, con l’invio di un predefinito URL, dove il server associa una determinata funzione.

Il server chiama la funzione mappata dall’URL ed esegue le istruzioni, per poi rispondere al client con un’altra pagina HTML, in cui riporta il risultato  prodotto dall’elaborazione.

Per esempio, se l’URL inviato al server è mappato su una funzione che esegue il cambiamento di stato di un diodo LED,  dopo l’esecuzione del comando, il server invia al client una pagina HTML in cui e’ riportato il nuovo stato del diodo LED.

Nel caso in cui avessimo un sistema con molti comandi, sarebbe improponibile ricordare ogni singolo URLs da inviare al server. Per semplificare la gestione dei comandi senza dover ricordare tutti URLs, il server, ad ogni connessione richiesta dal client, invia una pagina HTML,   dove sono presenti i pulsanti associati a tutti i comandi, cliccando su uno di essi si carica la pagina all’URL del comando associato.

Analisi del codice

Codice WAP e Server

// Includiamo le libreirie per la gestione del WIFI
#include <WiFi.h> 
#include <WiFiClient.h>
#include <WebServer.h>

// Includiamo la pagina HTML
#include "page.h"

WebServer server(80); // identifichiamo il server 
char ssidAP[] = "ESP32"; // identificatico dell'AP
char passwordAP[] = "12345678"; //Password per la connessione 
// definizione degli indirizzi 
IPAddress local_ip(192,168,2,1); 
IPAddress gateway(192,168,2,1);
IPAddress subnet(255,255,255,0);

int Pin_LEDGiallo = 26; // definizione del pin
int Pin_LEDRosso = 27;
int LEDR = LOW; // default  dello stato dei LED
int LEDG = LOW;

void setup()
  {
    WiFi.mode(WIFI_AP); // configurazioendel wifi come AP 
	delay(1000); 
	// inizializzazione   del WIFI
    WiFi.softAP(ssidAP, passwordAP); 
    WiFi.softAPConfig(local_ip, gateway , subnet);
    
	// inizializzazione  del server
    server.begin(); 
    server.on("/", home); // pagina iniziale
    server.on("/LEDGurl", LEDG_funzione); // mappiamo l'URLs delle funzioni
    server.on("/LEDRurl", LEDR_funzione); // LEDG_funzione, LEDR_funzione
    pinMode(Pin_LEDGiallo, OUTPUT); // definiamo i pins dei LEDs come output
    pinMode(Pin_LEDRosso, OUTPUT);
   }
void home() // funzione di default 
  { // invio della pagina HTML
    server.send(200, "text.html", codice_pagina(LEDG, LEDR));
  }
void LEDG_funzione() // funzione del diodo LED verde,
  { 
    LEDG = !LEDG; // invio della pagina HTML
    digitalWrite(Pin_LEDGiallo, LEDG);
    server.send(200, "text/html", codice_pagina(LEDG, LEDR));
  }
void LEDR_funzione() /// funzione del diodo LED rosso,,
  { 
    LEDR = !LEDR; /// invio della pagina HTML
    digitalWrite(Pin_LEDRosso, LEDR);
    server.send(200, "text/html", codice_pagina(LEDG, LEDR));
  }

void loop()
  {
    server.handleClient(); // gestione delle richieste HTTP
  }

Con questa istruzione includiamo il file della pagina HTML, che gestisce l’interfaccia web con l’utente, potevamo anche inserirla an che all’interno del codice principale, ma ho preferito separare in due file distinti le funzione per avere un codice più compatto e modulare.

Predefiniamo in variabili di tipo char l’identificativo la rete WLAN e la password di accesso insieme agli indirizzi IP, gateway e subnet.

Configuriamo il la rete WIFI come un Access Point e forniamo i parametri di rete precedentemente definiti.

Configuriamo il server e ad ogni indirizzo URL associamo la funzione che deve essere eseguita.

Nelle istruzione riportate sopra, sono definite le tre funzioni che devono essere invocate per ogni URL predefinito, a differenza della prima funzione le altre due cambiano lo stato dei diodi LEDs ad ogni richiesta HTTP predefinita.

Gestisce tutte le richieste HTTP.

Codice Pagina HTML

String codice_pagina(int LEDG, int LEDR)
{
String page = "<!DOCTYPE html><html><head>";
page +="<title>Rete WLAN</title>";
page +="<style>";
page +="body {margin-top:50px; font-family:Arial;";
page +="font-size:20px; text-align:center}";
page +=".btn {display:block; width:220px;";
page += "margin:auto; padding:30px}";
page +=".btn {font-size:30px; color:black;";
page += "text-decoration:none}";
page +=".on {background-color:#4CAF50}";
page +=".off {background-color:#008CBA}";
page +="td {font-size:30px; margin-top:50px;";
page += "margin-bottom:5px}";
page +="p {font-size:30px; margin-top:50px;";
page += "margin-bottom:5px}";
page +="</style></head>";
page +="<body>";
page +="<h1>Rete locale con ESP32</h1>";
page +="<table style='width:100%'><tr>";
if(LEDG>0)
{
page +="<td>Il LED Verde e' acceso ";
page +="<a href='/LEDGurl' class='btn on'>";
page +="Premi per segnere il LED verde</a></td>";
}
else
{
page +="<td>Il LED Verde e' spento ";
page +="<a href='/LEDGurl' class='btn off'>";
page +="Premi per accendere il LED verde</a></td>";
}
if(LEDR>0)
{
page +="<td>Il LED Rosso e' acceso";
page +="<a href='/LEDRurl' class='btn on' >";
page +="Premi per spegnere il LED rosso</a></td>";
}
else
{
page +="<td>Il LED Rosso e' spento";
page +="<a href='/LEDRurl' class='btn off'>";
page +="Premi per accendere il LED rosso</a></td>";
}

page +="</body></html>";
return page;
}