ESP8266 Web Data Logger: creare una pagina web per visualizzare i dati di temperatura e umidità

Introduzione

Benvenuto nell’avventura della creazione di un ESP8266 Web Data Logger con il sensore DHT22, arricchito dalla presenza dello SPIFFS (SPI Flash File System). Questa guida completa ti condurrà attraverso la costruzione di un sistema avanzato di monitoraggio delle condizioni ambientali, rendendo il processo di acquisizione e gestione dati un’esperienza appassionante.

Il sensore DHT22, noto per le sue letture precise di temperatura e umidità, sarà il nostro alleato nella creazione di un dispositivo affidabile e accurato. Tuttavia, la vera innovazione risiede nell’uso dello SPIFFS, che permette di archiviare la pagina web del data logger direttamente sulla memoria flash dell’ESP8266. Questo approccio non solo semplifica la gestione dei file, ma apre nuove opportunità per la personalizzazione dell’interfaccia web e la visualizzazione dei dati.

Attraverso questa esperienza, non solo imparerai a creare un sistema di monitoraggio avanzato ma acquisirai competenze preziose nell’utilizzo dello SPIFFS per organizzare e gestire file sulla tua ESP8266. Preparati a esplorare le potenzialità di questa combinazione tecnologica e a trasformare il monitoraggio ambientale in un progetto avvincente. Senza ulteriori indugi, immergiamoci nell’affascinante mondo del fai-da-te digitale, con un tocco di innovazione grazie allo SPIFFS!

Come al solito useremo l’eccellente IDE PlatformIO per la stesura del firmware.

Cosa è un file system


Un file system è un meccanismo di gestione e organizzazione dei dati su un dispositivo di memorizzazione, come un disco rigido, una memoria flash, o anche un dispositivo removibile. Esso fornisce un’astrazione logica della struttura dati e consente il salvataggio, la ricerca, la modifica e l’eliminazione di file e directory all’interno del dispositivo di memorizzazione. Ecco alcune caratteristiche e funzionalità chiave di un file system:

  1. Organizzazione gerarchica: i file e le directory sono organizzati in una struttura gerarchica, consentendo una facile organizzazione e navigazione dei dati. Questa struttura gerarchica è spesso rappresentata come un albero, con una directory principale (root) e sottodirectory e file che si estendono da essa.
  2. Metadati: ogni file o directory nel sistema di file è associato a metadati, come il nome del file, la data di creazione, l’ultima data di modifica, le autorizzazioni di accesso e altre informazioni pertinenti. I metadati sono essenziali per la gestione e il controllo dei file.
  3. Gestione dello spazio: un file system gestisce lo spazio disponibile sul dispositivo di memorizzazione. Ciò include l’allocazione dello spazio per nuovi file, la gestione degli spazi liberi e la possibilità di rilasciare spazio quando un file viene eliminato.
  4. Accesso e sicurezza: i file system includono meccanismi per controllare l’accesso ai file e alle directory. Ciò può essere realizzato attraverso autorizzazioni di lettura, scrittura ed esecuzione assegnate a utenti specifici o gruppi di utenti.
  5. Tipi di file: un file system supporta diversi tipi di file, come documenti di testo, immagini, programmi eseguibili e altri formati. Ogni tipo di file può essere gestito in modo appropriato dal sistema operativo e dalle applicazioni.
  6. Ridondanza e recupero degli errori: alcuni file system includono meccanismi per la gestione degli errori e la ridondanza dei dati per proteggere contro la perdita di informazioni dovuta a guasti hardware o altri problemi.
  7. Tipi di file system: esistono diversi tipi di file system, ognuno progettato per scopi specifici. Ad esempio, FAT (File Allocation Table) è comunemente usato su schede SD, mentre NTFS (New Technology File System) è spesso utilizzato su sistemi operativi Windows. File systems come ext4 sono popolari in ambienti Linux.
  8. Strutture di memorizzazione: i file system possono utilizzare diverse strutture di memorizzazione, come tabelle di allocazione dei file (FAT), inode, o algoritmi più complessi come B-tree o MFT (Master File Table).

Complessivamente, un file system svolge un ruolo fondamentale nel garantire l’efficace gestione e l’accesso ai dati su dispositivi di memorizzazione, contribuendo così al corretto funzionamento dei sistemi informatici.

L’utilità del file system SPIFFS: un approfondimento tecnico


Lo SPIFFS (SPI Flash File System) si presenta come un elemento essenziale nel panorama delle tecnologie di memorizzazione dati per i dispositivi basati su ESP8266. Si tratta di un file system pensato appositamente per essere utilizzato sulla memoria flash SPI, conferendo un’efficienza e una flessibilità notevoli.

Le caratteristiche distintive dello SPIFFS includono:

  1. Memoria Flash integrata: il sistema sfrutta la memoria flash incorporata nell’ESP8266, offrendo uno spazio di archiviazione supplementare senza necessità di hardware aggiuntivo.
  2. Accesso diretto ai file: l’approccio di gestione file dello SPIFFS permette un accesso diretto e agevole ai dati archiviati. Questa caratteristica semplifica notevolmente le operazioni di lettura e scrittura.
  3. Adatto per file di piccole dimensioni: SPIFFS è ottimizzato per operare in ambienti in cui la dimensione dei file è relativamente contenuta. È ideale per gestire risorse come pagine web, immagini, e dati di configurazione.
  4. Flessibilità nell’organizzazione: consente di organizzare i file in modo gerarchico, permettendo una struttura ordinata e facilmente gestibile.
  5. Utilizzo comune in progetti IoT: SPIFFS è ampiamente impiegato in progetti Internet of Things (IoT) e nelle applicazioni embedded, offrendo un’alternativa efficiente per archiviare dati non volatili.
  6. Interfaccia con il file system standard: benché progettato per operare sulla memoria flash, SPIFFS offre un’interfaccia di file system standard, semplificando l’implementazione nelle applicazioni.

In sintesi, lo SPIFFS rappresenta una risorsa inestimabile per arricchire le capacità di archiviazione delle piattaforme ESP8266, contribuendo a rendere questi dispositivi più versatili e funzionali nei contesti in cui vengono impiegati. La sua adozione in progetti IoT e embedded è la testimonianza della sua efficacia nell’ottimizzare lo spazio di archiviazione e semplificare la gestione dei dati.

Il nostro progetto è un data logger che misura la temperatura e l’umidità ogni 5 secondi. I valori misurati sono mostrati tramite una pagina web che viene servita dal webserver che gira sulla ESP8266. Tale pagina web contiene anche due pulsanti che vengono usati per accendere/spegnere ciascun relè in maniera indipendente. I relè, compatibilmente con i valori massimi ammessi per i carichi, possono essere utilizzati per attivare resistenze (per scaldare un ambiente) o ventole (per raffrescare una parte di ambiente o un oggetto specifico) o per attivare un deumidificatore o un umidificatore. Basta rispettare la massima potenza tollerata dai contatti del relè.

Useremo questo file system per memorizzare il file html che mostrerà i dati misurati sull pagina web e i pulsanti di comando dei relè. In generale possiamo usare questo file system per memorizzare file come html, css e javascript.

L’aspetto dell’interfaccia sarà come l’immagine che segue:

Schermata di esempio
Schermata di esempio

Come vedi, viene visualizzata una riga con l’ora corrente e i valori di temperatura e umidità. Sulla riga sotto ci sono i due pulsanti. Un pulsante appare rosso se il relè corrispondente è disattivato, appare verde se in corrispondente relè è attivato.

Di che componenti abbiamo bisogno per il nostro data logger?

La lista dei componenti non è particolarmente lunga:

Il modulo doppio relè

  1. Alimentazione:
    • Accetta un’ampia gamma di tensioni di alimentazione, di solito compresa tra 5V e 12V.
    • Il connettore di alimentazione è progettato per essere facilmente collegato a una sorgente di alimentazione esterna, come una batteria o un alimentatore.
  2. Relè:
    • Due relè a bordo, ciascuno con i propri contatti elettrici: comune (COM), normale aperto (NO) e normale chiuso (NC).
    • I contatti del relè sono progettati per gestire carichi di potenza. Tuttavia, le specifiche esatte dipendono dal modello specifico del modulo relè.
  3. Ingressi di Controllo:
    • Due ingressi di controllo (IN1 e IN2) che possono essere collegati a pin digitali di una scheda di sviluppo tipo Arduino.
    • Attivare uno di questi ingressi con un segnale logico alto (o basso, a seconda dei casi) attiverà il relè corrispondente.
  4. Indicatori LED:
    • Indicatori LED incorporati per ogni relè che indicano lo stato di attivazione (spesso con colori come rosso per attivato e spento per disattivato).
  5. Compatibilità Arduino:
    • Progettato per essere facilmente integrato con piattaforme di sviluppo come Arduino, rendendo il controllo dei relè un’operazione semplice e accessibile.
  6. Carichi Pilotabili:
    • In grado di pilotare una varietà di carichi elettrici come lampadine, motori, elettrovalvole, e altri dispositivi che richiedono controllo on/off.
    • Le specifiche esatte del carico dipendono dal modello del relè, ma spesso possono gestire carichi con tensioni alternate fino a 250V e correnti fino a 10A.

Questi moduli relè sono ampiamente utilizzati in progetti di domotica, automazione elettronica e controlli remoti, fornendo un’interfaccia sicura e controllata per dispositivi di potenza.

Un esempio di modulo con doppio relè optoisolato usato dall' ESP8266 Web Data Logger
Un esempio di modulo con doppio relè optoisolato usato dall’ ESP8266 Web Data Logger

Il sensore DHT22

Ecco una panoramica tecnica dettagliata delle caratteristiche principali del sensore DHT22:

  1. Precisione delle Misure: il DHT22, noto anche come AM2302, è un sensore di temperatura e umidità digitale che offre una precisione notevole nelle misurazioni. La precisione della temperatura è di ±0.5°C, mentre per l’umidità è di ±2%.
  2. Ampio Range di Misura: il sensore è in grado di misurare la temperatura in un range che va da -40°C a 80°C, coprendo quindi una vasta gamma di condizioni ambientali. Per quanto riguarda l’umidità, il range è compreso tra 0% e 100%.
  3. Risposta Veloce: grazie alla sua capacità di rispondere rapidamente alle variazioni ambientali, il DHT22 è ideale per monitorare condizioni in tempo reale.
  4. Segnali Digitali: il sensore trasmette i dati direttamente in forma digitale, semplificando l’interfacciamento con microcontroller come l’ESP8266. Questo evita la necessità di convertitori analogico-digitali esterni.
  5. Affidabilità e Durata: progettato per offrire una lunga durata, il DHT22 è caratterizzato da una buona affidabilità nel tempo, rendendolo adatto per applicazioni di monitoraggio a lungo termine.
  6. Facilità di Utilizzo: con la sua interfaccia di comunicazione a singolo filo, il DHT22 semplifica l’integrazione nei progetti elettronici. La comunicazione avviene attraverso un protocollo di comunicazione a due fili (data e terra).
  7. Calibrazione Integrata: il sensore include una calibrazione interna, riducendo la necessità di correzioni esterne e garantendo una maggiore accuratezza nelle misurazioni.
  8. Ampia Applicabilità: grazie alle sue caratteristiche e alla sua facilità di integrazione, il DHT22 è utilizzato in una varietà di applicazioni, tra cui stazioni meteorologiche personali, sistemi di climatizzazione, e progetti di monitoraggio ambientale.

Realizzazione del progetto

Lo schema elettrico dell’ Esp8266 Web Data Logger

Prima di realizzare il circuito vero e proprio diamo un’occhiata al pinout della board:

Pinout del NodeMCU ESP8266
Pinout del NodeMCU ESP8266

Il pinout del sensore DHT22:

Pinout del DHT22
Pinout del DHT22

Vediamo ora lo schema elettrico del progetto, realizzato come al solito con Fritzing:

Schema elettrico dell' ESP8266 Web Data Logger
Schema elettrico dell’ ESP8266 Web Data Logger

Il sensore DHT22 è collegato al GPIO D4 mentre gli ingressi IN1 e IN2 del modulo relè sono collegati rispettivamente ai GPIO D0 e D1.

Come puoi vedere lo schema non è particolarmente complesso. Piuttosto devi fare attenzione alle alimentazioni dato che sono separate tra sezione di alimentazione del sensore e sezione di alimentazione del modulo relè. Come puoi vedere, l’alimentazione per il sensore è presa dall’uscita 3.3V del NodeMCU (pin 3V3). E’ necessario alimentarlo con 3.3V in modo che anche la sua uscita sia 3.3V in quanto i pin digitali del NodeMCU non accettano tensioni superiori a 3.3V.

Invece l’alimentazione del modulo relè è presa dal pin Vin del NodeMCU che eroga i 5V necessari a pilotare le bobine dei relè.

ATTENZIONE: nel NodeMCU ESP8266 la tensione massima tollerata dagli ingressi digitali è pari a 3.3V. Qualsiasi tensione superiore lo danneggerebbe irreparabilmente!!

Attualmente il modulo doppio relè non è presente in Fritzing ma, se vuoi usarlo nei tuoi progetti, puoi scaricarlo da qui.

Analizziamo più in dettaglio il collegamento del modulo relè.

I due pin Vin e GND del NodeMCU ESP8266 vengono utilizzati per alimentare il modulo a doppio relè, collegando il pin Vin (lato NodeMCU) al pin VCC (lato modulo a doppio relè) e i due pin GND (massa).

Altre due connessioni sono utilizzate per controllare il modulo relè e sono il filo arancione e il filo marrone che collegano le due uscite digitali D0 e D1 del NodeMCU agli ingressi IN1 e IN2 del modulo relè.

Noterai che sul modulo relè è presente un ponticello (disegnato in azzurro sul connettore sinistro) che collega i morsetti JD-VCC e VCC. Questo ponticello viene utilizzato per alimentare il modulo relè attraverso i terminali VCC e GND sul connettore destro. Senza questo ponticello, saremmo costretti ad alimentare il modulo con un alimentatore esterno.

Ciascun relè può pilotare un carico indipendentemente dall’altro.

Lo sketch

Creiamo il progetto PlatformIO

Abbiamo già visto la procedura di creazione di un progetto PlatformIO nell’articolo Come creare un progetto per NodeMCU ESP8266 con PlatformIO.

Delle librerie indicate installa la DHT sensor library for ESPx by Bernd Giesecke e la WiFiManager by tzapu.

Ora modifica il file platformio.ini in modo che abbia questo aspetto:

[env:nodemcuv2]
platform = espressif8266
board = nodemcuv2
framework = arduino
monitor_speed = 115200
upload_speed = 921600
board_build.flash_mode = dout
board_flash_size = 4MB
build_flags = 
	-Wl,-Tesp8266.flash.4m1m.ld
	-DFS_SIZE=4M
lib_deps = 
	[email protected]
	ArduinoJson
	ESP8266mDNS
	beegee-tokyo/DHT sensor library for ESPx@^1.19
	tzapu/WiFiManager@^0.16.0

Come puoi notare c’è una parte:

board_build.flash_mode = dout
board_flash_size = 4MB
build_flags = 
	-Wl,-Tesp8266.flash.4m1m.ld
	-DFS_SIZE=4M

che serve a gestire il file system SPIFFS mentre nella sezione lib_deps stiamo aggiungendo le librerie [email protected], ArduinoJson, ESP8266mDNS col metodo alternativo che PlatformIO offre: aggiungendole direttamente al file platformio.ini invece che passare per la finestra di ricerca.

Ovviamente puoi scaricare il progetto dal link seguente:

Sostituisci il file main.cpp del progetto che hai creato con quello presente nel file zip. Oltre a questa operazione, crea nella cartella del progetto una cartella di nome data dove copierai il file index.html presente nel file zip. Tale file rappresenta l’interfaccia web che verrà esposta dall’ESP8266. Vedremo in seguito come fare a caricarla sul suo file system (la solita operazione di compilazione e trasferimento trasferisce solo lo sketch compilato ma non il file index.html che richiede una operazione a parte).

Vediamo ora come funziona lo sketch.

Inizialmente vengono incluse le librerie necessarie:

#include <Arduino.h>
#include "DHTesp.h"
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <FS.h>
#include <WiFiManager.h>

Segue la definizione del GPIO su cui collegare il sensore DHT22:

// Set the DHT22 sensor pin
DHTesp dht;
#define  DHT22_PIN D4 

Vengono poi definite le variabili che regolano la tempistica di lettura del DHT22:

unsigned long measureDelay = 2000;                //    NOT LESS THAN 2000!!!!!   
unsigned long lastTimeRan;

e poi vengono definiti i GPIO su cui collegare il modulo relè:

const int relay1Pin = D0;  // GPIO where relay 1 is connected
const int relay2Pin = D1;  // GPIO where relay 2 is connected

Vengono definite poi le variabili che contengono gli stati dei due relè:

bool relay1State = false;
bool relay2State = false;

e le variabili temperature e humidity sia come float che come stringa, oltre al webserver che rimane in ascolto sulla porta 80:

String temperature_s = "";
String humidity_s = "";

float temperature, humidity;

ESP8266WebServer server(80);

Segue la funzione handleGetData che crea un documento json contenente i valori di temperatura e umidità correnti (trasformati preventivamente in stringhe):

void handleGetData() {
  //Example of data logger data in JSON format
  temperature_s = String(temperature);
  humidity_s = String(humidity);
  String jsonData = "{ \"temperature\": " + temperature_s + ", \"humidity\": " + humidity_s + " }";
  Serial.println(jsonData);
  // Send the response to the client
  server.send(200, "application/json", jsonData);
}

Segue poi la funzione readFile che legge il file index.html dal file system SPIFFS, mette il contenuto nella variabile content e la restituisce alla funzione che l’ha chiamata:

String readFile(String path) {
  // Read the file from SPIFFS storage
  File file = SPIFFS.open(path, "r");
  if (!file) {
    Serial.println("Error opening the file " + path);
    return "";
  }

  // Read the contents of the file
  String content = file.readString();
  file.close();

  return content;
}

La funzione handleRoot legge la parte html contenuta nel file index.html e rende il codice 200 al client.

void handleRoot() {
  // Read HTML content from SPIFFS
  String html = readFile("/index.html");

  // Send the response to the client
  server.send(200, "text/html", html);
}

Le funzioni handleRelay1 e handleRelay2 gestiscono ciascuna lo stato del relè di riferimento a seconda del valore contenuto rispettivamente nelle variabili relay1State e relay2State:

void handleRelay1() {
  // Change the state of relay 1
  relay1State = !relay1State;
  digitalWrite(relay1Pin, relay1State ? LOW : HIGH);

  Serial.print("\nrelay1State ");
  Serial.println(relay1State);

  // Sends the current state of relay 1 to the client
  server.send(200, "text/plain", relay1State ? "ON" : "OFF");
}

void handleRelay2() {
  // Change the state of relay 2
  relay2State = !relay2State;
  digitalWrite(relay2Pin, relay2State ? LOW : HIGH);

  Serial.print("\nrelay2State ");
  Serial.println(relay2State);

  // Sends the current state of relay 2 to the client
  server.send(200, "text/plain", relay2State ? "ON" : "OFF");
}

Subito dopo incontriamo la funzione setup. Inizialmente viene attivata la porta seriale:

Serial.begin(115200);
delay(2000);

poi viene collegato il sensore DHT22:

dht.setup(DHT22_PIN, DHTesp::DHT22); // Connect DHT sensor to GPIO D4 

Segue poi la parte di gestione del collegamento wifi:

WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP
// it is a good practice to make sure your code sets wifi mode how you want it.

//WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
WiFiManager wm;

// reset settings - wipe stored credentials for testing
// these are stored by the esp library
// wm.resetSettings();

// Automatically connect using saved credentials,
// if connection fails, it starts an access point with the specified name ( "AutoConnectAP"),
// if empty will auto generate SSID, if password is blank it will be anonymous AP (wm.autoConnect())
// then goes into a blocking loop awaiting configuration and will return success result

bool res;
// res = wm.autoConnect(); // auto generated AP name from chipid
// res = wm.autoConnect("AutoConnectAP"); // anonymous ap
res = wm.autoConnect("AutoConnectAP","password"); // password protected ap

if(!res) {
    Serial.println("Failed to connect");
    ESP.restart();
} 
else {
    //if you get here you have connected to the WiFi    
    Serial.println("Connected...yeey :)");
    Serial.print("My IP is: ");
    Serial.println(WiFi.localIP());
}

seguita dalla parte che inizializza il file system SPIFFS:

// Initialize SPIFFS
if (!SPIFFS.begin()) {
Serial.println("Error initializing SPIFFS");
return;
} else {
Serial.println("SPIFFS initialized");
}

Subito dopo troviamo la parte che instrada le richieste dal client (tipicamente il browser sul nostro pc o sul nostro cellulare) verso le relative funzioni (cioè collega / a handleRoot, /getData a handleGetData, /relay1 a handleRelay1 e /relay2 a handleRelay2) e lo start del server:

// Set up request handlers
server.on("/", HTTP_GET, handleRoot);
server.on("/getData", HTTP_GET, handleGetData);
server.on("/relay1", HTTP_GET, handleRelay1);
server.on("/relay2", HTTP_GET, handleRelay2);

// Start the server
server.begin();

Vengono poi inizializzati i pin relay1Pin e relay2Pin come OUTPUT, messi gli output nello stato HIGH e stampato un messaggio:

  // Initialize the relay pins as output
  pinMode(relay1Pin, OUTPUT);
  pinMode(relay2Pin, OUTPUT);


  digitalWrite(relay1Pin, HIGH);
  digitalWrite(relay2Pin, HIGH);

  Serial.println("Server running");

Segue poi la funzione loop:

void loop() {
  server.handleClient();

  if (millis() > lastTimeRan + measureDelay)  {
    temperature = dht.getTemperature(); // reads temperature and puts the value in the global temperature variable
    humidity = dht.getHumidity(); // reads humidity and puts the value in the global humidity variable
    lastTimeRan = millis();
  }     
}

Viene tenuto sempre in funzione l’handler del client e vengono acquisite la temperatura e l’umidità dal DHT22 ogni measureDelay secondi

Diamo uno sguardo anche al file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Logger</title>
    <style>
        table {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        #relay1, #relay2 {
            display: inline-block;
            padding: 10px;
            margin: 5px;
            cursor: pointer;
            border-radius: 5px;
        }

        #relay1.on, #relay2.on {
            background-color: green;
            color: white;
        }

        #relay1.off, #relay2.off {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <h1> ESP8266 Data Logger Web Interface</h1>
    <table>
        <tr>
            <th>Time</th>
            <th>Temperature (°C)</th>
            <th>Humidity (%)</th>
        </tr>
        <tbody id="dataBody"></tbody>
    </table>

    <div id="relay1" class="off" onclick="toggleRelay(1)">Relay 1</div>
    <div id="relay2" class="off" onclick="toggleRelay(2)">Relay 2</div>

    <script>
        function getData() {
            fetch('/getData')
                .then(response => response.json())
                .then(data => {
                    // Create a new row
                    const newRow = document.createElement("tr");

                    // Add time, temperature, and humidity as cells
                    newRow.innerHTML = `
                        <td>${new Date().toLocaleTimeString()}</td>
                        <td>${data.temperature}</td>
                        <td>${data.humidity}</td>
                    `;

                    // Clear previous data and append the new row to the table body
                    document.getElementById('dataBody').innerHTML = '';
                    document.getElementById('dataBody').appendChild(newRow);
                });
        }

        function toggleRelay(relayNumber) {
            fetch(`/relay${relayNumber}`)
                .then(response => response.text())
                .then(state => {
                    const relayElement = document.getElementById(`relay${relayNumber}`);

                    // Toggle the class based on the relay state
                    relayElement.className = state === 'ON' ? 'on' : 'off';
                });
        }

        setInterval(getData, 5000);  // Update data every 5 seconds
        getData();  // Load initial data
    </script>
</body>
</html>

Inizialmente viene definito lo stile della pagina, con una tabella iniziale che mostrerà una riga contenente l’ora corrente, la temperatura e l’umidità (che vengono aggiornate ogni 5 secondi). Poi viene definito lo stile dei due bottoni di controllo dei due relè. Il body contiene le funzioni getData e toggleRelay che rispettivamente acquisiscono dallo sketch i valori rilevati di temperatura e umidità e gestiscono lo stato dei pulsanti che comandano i relè.

Come trasferire il file index.html verso il file system SPIFFS

L’operazione è abbastanza semplice. È necessario aprire un nuovo terminale su PlatformIO col tasto indicato in figura:

Pulsante per aprire un nuovo terminale
Pulsante per aprire un nuovo terminale

scrivere il seguente comando:

pio run -t uploadfs

e premere il tasto INVIO. Se tutto sarà andato bene il file index.html sarà stato trasferito sul file system SPIFFS.

NOTA: è importante che il file index.html si trovi, come già detto all’inizio, in una cartella di nome data allo stesso livello della cartella src.

Il caricamento dello sketch, invece, segue la via normale.

Come connettere la board ad Internet

Dopo aver caricato lo sketch sulla board, apri il Serial Monitor per vedere i messaggi provenienti dal dispositivo.

Per prima cosa la board va in modalità Access Point e ci fornirà un indirizzo IP che useremo a breve. Questa operazione serve per connettere la board ad Internet senza dover inserire nel codice i parametri della rete WiFi (SSID e password).

La board ci fornisce il suo indirizzo IP
La board ci fornisce il suo indirizzo IP

In questo caso l’indirizzo IP è 192.168.4.1.

A questo punto la ESP8266 è in modalità Access Point (con SSID AutoConnectAP) e dobbiamo connettere il nostro computer alla rete AutoConnectAP. Se andiamo nel menu delle reti del nostro computer, dovremmo vedere anche la rete AutoConnectAP nell’elenco delle reti wireless.

Lista delle reti WiFi disponibili
Lista delle reti WiFi disponibili

Connetti il computer alla rete AutoConnectAP. Quindi vai sul tuo browser e inserisci l’IP precedentemente fornito dalla ESP8266 (che in questo esempio è 192.168.4.1)

Vedrai una schermata come questa:

La schermata del browser per scegliere la rete
La schermata del browser per scegliere la rete

Clicca il bottone ConfigureWiFi. Ti mostrerà le reti disponibili:

Lista delle reti disponibili
Lista delle reti disponibili

Scegli la SSID della tua rete:

Scegli la tua rete
Scegli la tua rete

Inserisci la password della tua rete e clicca il bottone save:

Inserisci la password
Inserisci la password

La risposta della board
La risposta della board

Il modulo ESP8266 conserva memorizzati i parametri di accesso anche se lo spegni, li ricorderà al riavvio e si ricollegherà automaticamente senza dover ripetere questa procedura. Solo se lo resetti rimuovendo il commento da questa riga

// wm.resetSettings();

perderà i parametri di connessione.

Nota Bene: il dispositivo può memorizzare solo una rete. Se successivamente lo colleghi a un’altra rete, dimenticherà le impostazioni della rete precedente.

Testiamo il progetto con un browser

Una volta che la ESP8266 è stata connessa alla rete WiFi ci fornirà tramite il Serial Monitor di PlatformIO il suo indirizzo IP, come visibile nella figura seguente:

L'IP della board
L’IP della board

In questo caso l’IP della board è 192.168.36.128 (nel tuo caso sarà molto probabilmente diverso).

Copia l’IP che ti ha indicato la board sulla barra del browser (sul tuo pc o sul tuo cellulare) e premi INVIO. Ti apparirà la pagina web, come puoi vedere nel video seguente:

Newsletter

Se vuoi essere aggiornato sui nuovi articoli, iscriviti alla newsletter. Prima dell’iscrizione alla newsletter leggi la pagina Privacy Policy (UE)

Se ti vuoi disiscrivere dalla newsletter clicca sul link che troverai nella mail della newsletter.

Inserisci il tuo nome
Inserisci la tua email
0 0 votes
Valutazione articolo
guest
0 Commenti
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
Torna in alto