Tutorial Arduino #27

WiFi ESP8266

WiFi ESP8266 - Tutorial Arduino #27
Tutorial Arduino #26: Display LED a 4 cifre 7 segmenti
Tutorial Arduino #26
Display LED a 4 cifre 7 segmenti
Tutorial Arduino #28: Sleep mode e risveglio tramite gli interrupt
Tutorial Arduino #28
Sleep mode e risveglio tramite gli interrupt

Descrizione

Con questo video imparerai a comandare la scheda Arduino da remoto tramite il WiFi.

Scoprirai i collegamenti e lo sketch per comunicare con il modulo ESP8266, come collegarsi alla rete WiFi e controllare il LED RGB dalla finestra del browser.

Scarica le risorse

Progetto: LED RGB con WiFi

Schema

Componenti

Codice

#include <WiFiEsp.h>#include <SoftwareSerial.h> #define WIFI_SSID "__RETE__"#define WIFI_PASSWORD "__PASSWORD__"#define RED_PIN 11#define GREEN_PIN 10#define BLUE_PIN 9 SoftwareSerial esp(23); // rx, txWiFiEspServer server(80);String color = "off"; void setup() {  Serial.begin(9600);  esp.begin(9600);  WiFi.init(&esp);    pinMode(RED_PIN, OUTPUT);  pinMode(GREEN_PIN, OUTPUT);  pinMode(BLUE_PIN, OUTPUT);    while (WiFi.begin(WIFI_SSID, WIFI_PASSWORD) != WL_CONNECTED);    Serial.println();  Serial.print("IP Address: ");  Serial.println(WiFi.localIP());  Serial.println();    server.begin(); } void loop() {  WiFiEspClient client = server.available();    if (client) {    String command = getRequestUrl(client);    if (command == "/red") {      rgb(25500);      color = "red";      sendResponseHeader(client);      client.print("{\"status\": \"ok\"}");    } else if (command == "/green") {      rgb(02550);      color = "green";      sendResponseHeader(client);      client.print("{\"status\": \"ok\"}");    } else if (command == "/blue") {      rgb(00255);      color = "blue";      sendResponseHeader(client);      client.print("{\"status\": \"ok\"}");    } else if (command == "/off") {      rgb(000);      color = "off";      sendResponseHeader(client);      client.print("{\"status\": \"ok\"}");    } else if (command == "/") {      sendResponseHeader(client);      client.print("{\"status\": \"ok\", ");      client.print("\"color\": \"");      client.print(color);      client.print("\"}");    } else {      sendResponseHeader(client);      client.print("{\"status\": \"error\", ");      client.print("\"message\": \"Comando non riconosciuto\"}");    }              Serial.println(command);    delay(10);    client.stop();  }} void rgb(int r, int g, int b){  analogWrite(RED_PIN, r);  analogWrite(GREEN_PIN, g);  analogWrite(BLUE_PIN, b);} String getRequestUrl(WiFiEspClient client) {  RingBuffer buffer(8);  String url = "";  bool parseUrl = false;  while (client.connected()) {    if (client.available()) {      char c = client.read();      buffer.push(c);       if (buffer.endsWith("\r\n\r\n")) {        break;      }            if (parseUrl) {        url.concat(c);      }            if (buffer.endsWith("GET ")) {        parseUrl = true;      }          if (parseUrl && buffer.endsWith(" HTTP/")) {        parseUrl = false;        url.remove(url.length()-6);        client.flush();        break;      }    }  }  return url;} void sendResponseHeader(WiFiEspClient client) {  client.println("HTTP/1.1 200 OK");  client.println("Content-type:application/json");  client.println("Access-Control-Allow-Origin: *");  client.println();}
<!DOCTYPE html><html lang="it">  <head>    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Arduino Wi-Fi ESP8266</title>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />    <style>      .container {        font-family: sans-serif;        max-width: 550px;        margin: auto;        padding: 20px;        text-align: center;      font-size: 16px;      }      #LedStatus {        font-size: 20px;        font-weight: 700;      }    #Notice {        font-size: 20px;        color: #d32f2f;    }      .status_red {        color: #d32f2f;      }      .status_green {        color: #2e7d32;      }      .status_blue {        color: #0277bd;      }      .status_off {        color: #757575;      }      .icon {        display: block;        font-size: 60px;        margin-bottom: 10px;    }    .ajaxButton {      cursor: pointer;      padding: 10px 20px;      width: 110px;      margin: 0 5px 20px;      border-radius: 20px;      border: none;      font-size: 18px;      box-shadow: 2px 2px rgba(0,0,0,0.4);      color: #fff;      font-weight: 700;    }    </style>  </head>  <body>    <div class="container">    <h1>Arduino Wi-Fi ESP8266</h1>        <h2>LED RGB</h2>    <p id="LedStatus" class="status_off">      <i class="icon fa-solid fa-lightbulb"></i>      <span class="message">&nbsp;</span>    </p>    <p id="Notice">&nbsp;</p>     <button class="ajaxButton" data-command="red" style="background: #d32f2f">Rosso</button>    <button class="ajaxButton" data-command="green" style="background: #2e7d32">Verde</button>    <button class="ajaxButton" data-command="blue" style="background: #0277bd">Blu</button>    <button class="ajaxButton" data-command="off" style="background: #757575">Spegni</button>     </div>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <script>      var ip = '192.168.1.105';              $(function() {        $.get('http://' + ip + '/'function (result) {          if (result.status == 'ok') {            setColor(result.color);          } else {            $('#Notice').html('Errore: impossibile recuperare il colore');          }        }).fail(function () {        $('#Notice').html('Errore: impossibile recuperare il colore');        });              $('.ajaxButton').on('click'function () {          var command = $(this).data('command');          $.get('http://' + ip + '/' + command, function (result) {          if (result.status == 'ok') {            setColor(command);          } else {          $('#Notice').html('Errore: impossibile cambiare il colore');        }          }).fail(function () {          $('#Notice').html('Errore: impossibile cambiare il colore');        });;        })      });            function setColor(color) {      $('#LedStatus').removeClass().addClass('status_' + color);      if (color == 'red') {        $('#LedStatus .message').html('Rosso');      } else if (color == 'green') {        $('#LedStatus .message').html('Verde');      } else if (color == 'blue') {        $('#LedStatus .message').html('Blu');      } else if (color == 'off') {        $('#LedStatus .message').html('Spento');      }        }    </script>  </body></html>
scarica il file

Altri componenti

Arduino Software Hero

Vuoi imparare a programmare Arduino, ma non sai da dove cominciare?

Iscriviti al corso online

Libri consigliati

In qualità di Affiliato Amazon riceviamo un guadagno dagli acquisti idonei


Tutorial consigliati

E-commerce di elettronica

Sul nostro negozio online trovi tutti i componenti usati nei tutorial.
Inoltre hai un'ampia scelta di prodotti tra:

  • Arduino
  • Raspberry Pi
  • Sensori
  • Robotica
  • Componenti elettronici
  • Accessori

Compra online, ricevi comodamente a casa

Visita il negozio