IZ5FCY
Controllo di piu’ Rele’ con web server
A casa dei suonatori non andar per serenate
In questa sezione è stato creato un esempio di server Web che
consente di controllare tutti i relay desiderati tramite server Web,
indipendentemente dal fatto che siano configurati come normalmente
aperti o normalmente chiusi.
È sufficiente modificare alcune righe di codice per definire il numero
di relè che si desidera controllare e l'assegnazione dei relativi pin.
Per questo server Web, utilizziamo la libreria ESPAsyncWebServer.
Installazione della libreria ESPAsyncWebServer
Informazioni circa l’installazione della libreria ESPAsyncWebServer:
Fare clic qui per scaricare la libreria ESPAsyncWebServer.
Dovresti ottenere una cartella .zip nella cartella Download
Decomprimere la cartella .zip e si dovrebbe ottenere la cartella
ESPAsyncWebServer-master
Rinominare la cartella da ESPAsyncWebServer-master come
ESPAsyncWebServer
Sposta la cartella ESPAsyncWebServer nella cartella delle librerie di
installazione dell'IDE Arduino
In alternativa, nel tuo IDE Arduino, puoi andare su
Sketch > Includi libreria > Aggiungi .ZIP libreria... e selezionare la libreria che hai appena scaricato,
Installazione della libreria TCP asincrona per ESP32
La libreria ESPAsyncWebServer richiede il funzionamento della libreria AsyncTCP.
Seguire i passaggi successivi per installare la libreria:
Fare clic qui per scaricare la libreria AsyncTCP.
Dovresti ottenere una cartella .zip nella cartella Download
Decomprimi la cartella .zip e dovresti ottenere la cartella AsyncTCP-master
Rinominare la cartella da AsyncTCP-master a AsyncTCP
Sposta la cartella AsyncTCP nella cartella delle librerie di installazione dell'IDE di Arduino
Infine, riapri il Arduino IDE
In alternativa, nel tuo IDE Arduino, puoi andare su Sketch > Includi libreria > Aggiungi .ZIP libreria
e selezionare la libreria che hai appena scaricato.
Dopo aver installato le librerie richieste, copia il seguente codice sul tuo IDE Arduino, che allego in
formato compresso Web Server.zip oppure ricopiare il seguente listato sul vostro IDE Arduino.
Definire la configurazione dei relays
Modificare la variabile seguente per indicare se si utilizzano i relè in configurazione normalmente
aperta (NO) o normalmente chiusa (NC).
Impostare il RELAY_NO variabile a true (vero)
Per il sistema operativo normalmente aperto impostato su vero e su false per normalmente chiuso.
#define RELAY_NO true
Definire il numero di relè (channels)
È possibile definire il numero di relè che si desidera controllare sul NUM_RELAYS
variabile. A scopo dimostrativo, lo stiamo impostando su 5.
#define NUM_RELAYS 5
Definizione dell'assegnazione dei pin dei relè
Nella seguente variabile di array è possibile definire i GPIO ESP32 che controlleranno i relay:
int relayGPIOs[NUM_RELAYS] = {2, 26, 27, 25, 33};
Credenziali di rete
Inserire le credenziali di rete nelle seguenti variabili.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Cablaggio del relè a 8 canali per ESP8266 NodeMCU
A scopo dimostrativo, stiamo controllando 5 canali di inoltro. Collegare la scheda NodeMCU
ESP8266 al modulo relè come illustrato nel diagramma schematico seguente.
/*********
IZ5FCY Roberto (iz5fcy@gmail.com)
*********/
// Import required libraries
#include "ESP8266WiFi.h"
#include "ESPAsyncWebServer.h"
// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO true
// Set number of relays
#define NUM_RELAYS 5
// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12, 13};
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const char* PARAM_INPUT_1 = "relay";
const char* PARAM_INPUT_2 = "state";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color:
#ccc; border-radius: 34px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px;
bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-
radius: 68px}
input:checked+.slider {background-color: #2196F3}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform:
translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>ESP Web Server</h2>
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1",
true); }
else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
xhr.send();
}</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons ="";
for(int i=1; i<=NUM_RELAYS; i++){
String relayStateValue = relayState(i);
buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] +
"</h4><label class=\"switch\"><input type=\"checkbox\"
onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue
+"><span class=\"slider\"></span></label>";
}
return buttons;
}
return String();
}
String relayState(int numRelay){
if(RELAY_NO){
if(digitalRead(relayGPIOs[numRelay-1])){
return "";
}
else {
return "checked";
}
}
else {
if(digitalRead(relayGPIOs[numRelay-1])){
return "checked";
}
else {
return "";
}
}
return "";
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Set all relays to off when the program starts - if set to Normally Open (NO), the
relay is off when you set the relay to HIGH
for(int i=1; i<=NUM_RELAYS; i++){
pinMode(relayGPIOs[i-1], OUTPUT);
if(RELAY_NO){
digitalWrite(relayGPIOs[i-1], HIGH);
}
else{
digitalWrite(relayGPIOs[i-1], LOW);
}
}
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP8266 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to
<ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
String inputParam;
String inputMessage2;
String inputParam2;
// GET input1 value on <ESP_IP>/update?relay=<inputMessage>
if (request->hasParam(PARAM_INPUT_1) & request-
>hasParam(PARAM_INPUT_2)) {
inputMessage = request->getParam(PARAM_INPUT_1)->value();
inputParam = PARAM_INPUT_1;
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
inputParam2 = PARAM_INPUT_2;
if(RELAY_NO){
Serial.print("NO ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
}
else{
Serial.print("NC ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
}
}
else {
inputMessage = "No message sent";
inputParam = "none";
}
Serial.println(inputMessage + inputMessage2);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
Dimostrazione
Dopo aver apportato le modifiche necessarie, carica il codice sul tuo ESP8266.
Aprire il monitor seriale a una velocità di trasmissione di 115200 e premere il pulsante ESP8266 RST
per ottenere il suo indirizzo IP.
Quindi, aprire un browser nella rete locale e digitare l'indirizzo IP ESP8266 per accedere al server
Web.
Dovresti ottenere qualcosa di quanto segue con tanti pulsanti quanti sono i relay che
hai definito nel tuo codice.
Ora puoi utilizzare i pulsanti per controllare i tuoi relè da remoto utilizzando il tuo smartphone