Indice
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.
#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(2, 3); // 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(255, 0, 0); color = "red"; sendResponseHeader(client); client.print("{\"status\": \"ok\"}"); } else if (command == "/green") { rgb(0, 255, 0); color = "green"; sendResponseHeader(client); client.print("{\"status\": \"ok\"}"); } else if (command == "/blue") { rgb(0, 0, 255); color = "blue"; sendResponseHeader(client); client.print("{\"status\": \"ok\"}"); } else if (command == "/off") { rgb(0, 0, 0); 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"> </span> </p> <p id="Notice"> </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>
