🧠 Introduzione
​
Nei progetti precedenti abbiamo imparato a visualizzare i dati di un sensore su una pagina web tramite WiFi.

In questo progetto facciamo un passo in avanti creando una dashboard più completa, utilizzando un sensore DHT11 per leggere temperatura e umidità.

A differenza del progetto precedente, non mostreremo un solo valore, ma più informazioni organizzate all’interno della stessa pagina web, rendendo l’interfaccia più utile e simile a quelle utilizzate nei sistemi IoT reali.
​
Questo approccio è alla base di applicazioni come:
  • monitoraggio ambientale domestico
  • controllo clima in serre
  • sistemi smart home
  • dashboard di controllo remoto
🧰 Materiale necessario
​
  • Arduino UNO
  • Modulo ESP8266
  • Sensore DHT11
  • Breadboard
  • Cavi jumper
🛒 Componenti e risorse consigliate

👉 Kit Arduino consigliato: https://amzn.to/41fmFNK
💡 Con un solo kit puoi realizzare la maggior parte dei progetti presenti nel sito.

📚 I miei libri consigliati
​
👉 Arduino per tutti – Volume 1: https://amzn.to/4rGNxB9
👉 Arduino per tutti – Volume 2: https://amzn.to/4bkfaey
👉 Arduino per tutti – Volume 3: https://amzn.to/4bogjAg
🔌 Schema di collegamento

Sensore DHT11
  • VCC → 5V Arduino
  • GND → GND Arduino
  • DATA → Pin 2 Arduino

Modulo ESP8266
  • VCC → 3.3V Arduino
  • GND → GND Arduino
  • TX → Pin 10 Arduino
  • RX → Pin 11 Arduino (consigliato partitore)
  • CH_PD → 3.3V

Tutti i GND devono essere collegati tra loro.
📚 Librerie necessarie
​
Questo progetto utilizza una libreria esterna:
  • DHT.h
Può essere installata direttamente dall’IDE Arduino tramite il gestore librerie.
​💻 Codice Arduino
​// ============================================
// Progetto 87 - Dashboard sensori web
// Temperatura e umidità con DHT11
// ============================================

#include <SoftwareSerial.h>
#include <DHT.h>

#define DHTPIN 2
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

SoftwareSerial esp(10, 11);

String ssid = "NOME_WIFI";
String password = "PASSWORD_WIFI";

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

  dht.begin();

  sendCommand("AT", 2000);
  sendCommand("AT+CWMODE=1", 2000);

  String cmd = "AT+CWJAP=\"" + ssid + "\",\"" + password + "\"";
  sendCommand(cmd, 6000);

  sendCommand("AT+CIPMUX=1", 2000);
  sendCommand("AT+CIPSERVER=1,80", 2000);
}

void loop() {

  float temperatura = dht.readTemperature();
  float umidita = dht.readHumidity();

  if (esp.available()) {

    String webpage =
      "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n"
      "<html><head>"
      "<meta name='viewport' content='width=device-width, initial-scale=1'>"
      "<style>"
      "body{font-family:Arial;text-align:center;background:#111;color:#fff;}"
      ".box{padding:20px;margin:20px;border-radius:10px;background:#222;}"
      ".val{font-size:35px;color:#00ffcc;}"
      "</style>"
      "</head><body>"
      "<h1>Dashboard Arduino</h1>"

      "<div class='box'>"
      "<p>Temperatura</p>"
      "<div class='val'>" + String(temperatura) + " °C</div>"
      "</div>"

      "<div class='box'>"
      "<p>Umidità</p>"
      "<div class='val'>" + String(umidita) + " %</div>"
      "</div>"

      "</body></html>";

    String sendCmd = "AT+CIPSEND=0," + String(webpage.length());
    sendCommand(sendCmd, 2000);

    esp.print(webpage);

    sendCommand("AT+CIPCLOSE=0", 2000);
  }
}

void sendCommand(String cmd, int timeout) {
  esp.println(cmd);
  long int time = millis();

  while ((time + timeout) > millis()) {
    while (esp.available()) {
      Serial.write(esp.read());
    }
  }
}
🌐 Come accedere alla pagina web
​
Dopo aver collegato Arduino alla rete WiFi, il modulo ESP8266 riceverà un indirizzo IP dalla rete locale.

Apri il Monitor Seriale per individuare l’indirizzo IP assegnato, quindi inseriscilo nel browser di uno smartphone o computer collegato alla stessa rete.
​
La pagina mostrerà in tempo reale temperatura e umidità rilevate dal sensore.
⚙️ Come funziona
​
Arduino legge i dati dal sensore DHT11 e li aggiorna continuamente.

Quando un dispositivo accede alla pagina web, i valori vengono inseriti dinamicamente nel codice HTML e mostrati in modo organizzato.
​
La presenza di più “box” nella pagina permette di separare le informazioni e rendere la dashboard più chiara e leggibile.
🔁 Varianti possibili
​
  • Sensore DHT22 (più preciso)
  • Aggiunta pressione atmosferica
  • Dashboard con più stanze
  • Interfaccia grafica avanzata