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

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 "__NOME_DELLA_RETE__"#define WIFI_PASSWORD "__PASSWORD__"#define RED_PIN 11#define GREEN_PIN 10#define BLUE_PIN 9SoftwareSerial 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


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
Tech Maker (italian tech project)
Utilizziamo i cookie per migliorare l'esperienza di navigazione, a fini statistici e di marketing. Per maggiori informazioni consulta la nostra informativa sulla privacy.