ESP32 webseriallarmino

International Italiano Generale
1

Ciao a tutti, chiedo a chi più competente, come trasformare il progettino di "webseriallarmino"

#include <Arduino.h>
#include <WiFi.h>
#include <Wire.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

#define ledv 17
#define led 18
#define ledr 16
#define ledv 17
#define ledb 19
#define buzzer 22

int sensore = 21;
bool allarme = false;
int statusPir = LOW;
int lampeggi = 3;
AsyncWebServer server(80);

const char* ssid = "Zyxel_8B59_EXT";        // Your WiFi SSID
const char* password = "e mica lo vengo a dire a te";  // Your WiFi Password
void (*Riavvia)(void) = 0;                  //reset ARDUINO
void lampu2() {
  digitalWrite(led, LOW);
  delay(500);
  digitalWrite(led, HIGH);
  delay(500);
  tone(buzzer, 13, 200);
}
void recvMsg(uint8_t* data, size_t len) {
  WebSerial.println("Received Data...");
  String d = "";
  for (int i = 0; i < len; i++) {
    d += char(data[i]);
  }
  //WebSerial.println(d);  //OUTPUT A SERIALE
  if (d == "on") {
    digitalWrite(ledr, HIGH);
    tone(buzzer, 4186, 100);
    delay(300);
    tone(buzzer, 4186, 300);
    delay(300);
    digitalWrite(ledr, HIGH);
    //accensione();
  }
  if (d == "off") {
    digitalWrite(ledv, LOW);
  }
  if (d == "bip") {
    WebSerial.println("Hai detto bip!");
    tone(buzzer, 13, 200);
    digitalWrite(ledv, HIGH);
    delay(50);
    digitalWrite(ledv, LOW);
    delay(50);
    digitalWrite(ledv, HIGH);
    delay(50);
    digitalWrite(ledv, LOW);
    delay(50);
    digitalWrite(ledv, HIGH);
    delay(50);
    digitalWrite(ledv, LOW);
  }
  if (d == "a") {
    WebSerial.print("Attivazione ALLARME");
    Serial.print("Attivazione ALLARME");
    for (byte i = 0; i < lampeggi; i++) {
      WebSerial.print(".");
      Serial.print(".");
      // tone(buzzer, 13, 1700);
      WebSerial.println(" ");
      Serial.println(" ");
      lampu2();
    }
    digitalWrite(led, LOW);
    digitalWrite(ledv, LOW);
    digitalWrite(ledb, HIGH);
    WebSerial.println(" ");
    WebSerial.println("ALLARME ATTIVATO");
    WebSerial.println(" ");
    Serial.println(" ");
    Serial.println("ALLARME ATTIVATO");
    Serial.println(" ");
    allarme = true;
  }
  if (d == "s") {
    allarme = false;
    //tone(buzzer, 13, 1700);
    digitalWrite(ledr, LOW);
    digitalWrite(buzzer, LOW);
    digitalWrite(ledv, HIGH);
    digitalWrite(ledb, LOW);
    WebSerial.println(" ");
    WebSerial.println("ALLARME DISATTIVATO");
    WebSerial.println(" ");
    Serial.println(" ");
    Serial.println("ALLARME DISATTIVATO");
    Serial.println(" ");
  }
  if (d == "r") {
    WebSerial.println("RESET");
    digitalWrite(ledb, HIGH);
    digitalWrite(ledv, HIGH);
    digitalWrite(ledr, HIGH);
    digitalWrite(led, HIGH);
    delay(500);
    digitalWrite(ledb, LOW);
    digitalWrite(ledv, LOW);
    digitalWrite(ledr, LOW);
    digitalWrite(led, LOW);
    Riavvia();
  }
}
void setup() {
  Serial.begin(115200);
  pinMode(ledv, OUTPUT);
  pinMode(led, OUTPUT);
  pinMode(ledr, OUTPUT);
  pinMode(ledv, OUTPUT);
  pinMode(ledb, OUTPUT);
  pinMode(buzzer, OUTPUT);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.printf("WiFi Failed!\n");
    return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
  // WebSerial is accessible at "<IP Address>/webserial" in browser
  WebSerial.begin(&server);
  WebSerial.msgCallback(recvMsg);
  server.begin();
  digitalWrite(led, HIGH);
}
void loop() {
  // WebSerial.println("Hello!");
  if (digitalRead(sensore) == HIGH && allarme == true)  //rilevo movimento con allarme in on
  {
    tone(buzzer, 4186, 300);
    //digitalWrite(ledr, millis() / 500 % 2);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    WebSerial.println(" ");
    char bytesSent = WebSerial.println("Rilevato MOVIMENTO !");
    Serial.println(" ");
    Serial.println("Rilevato MOVIMENTO !");
  }
  // if (digitalRead(sensore) == LOW && allarme == true) {
  else {
    digitalWrite(ledr, LOW);
    noTone(buzzer);
    // delay(500);
  }
  delay(200);
}

da web serial in web server.
Mi spiego: vorrei, invece di usare i caratteri via seriale (a - s - ecc..) creare una pagina web con la disponibilità di tasti via web che richiamino le stesse operazioni.

Grazie a tutti

2

Prova a dare un'occhiata alla libreria SerialCmd ... c'è un esempio che riceve i comandi da web (proprio su ESP32). :wink:

La installi da "Gestore Librerie" (library manager) dell'IDE.

Guglielmo

3

Grazie per la dritta della libreria SerialCmd (c'è sempre da studiare), ma la mia domanda è: esiste una libreria, un manuale, info, ecc.. su come creare una pagina HTML con dei tasti che quando vado a cliccare sopra, mi manda una lettera in seriale?
Questo per trasformare il codice allegato in una paginetta WEB con dei tasti ON-OFF che mandano caratteri in seriale alla ESP32 come "a" per "Attivazione ALLARME" ecc...
La poca chiarezza è dovuta all'età :wink:

4

Parti dal presupposto che su un microcontrollore come l'ESP32 ci puoi far girare più o meno tutto quello che fai su qualsiasi servizio di web hosting online oppure su un tuo PC locale (ovvero "servire" risorse come HTML, JavaScript, CSS, ma non eseguire script come PHP).

Questo significa che ci sono terabyte e terabyte di documentazione su come realizzare una pagina web, aggiungere gli abbellimenti estetici, script js etc etc , perché non devi limitare la tua ricerca al mondo "ESP32 Arduino".
Anche perché cosi facendo, nel 99% dei casi troverai degli esempi (secondo me pessimi) dove c'è lo Stringone costruito a runtime con tutto il codice HTML concatenato.

Per iniziare, cerca qualcosa tipo "Arduino ESP32 AJAX".
L'acronimo AJAX sta per:

AJAX , acronimo di Asynchronous JavaScript and XML , è un insieme di tecniche e metodologie di sviluppo software per la realizzazione di applicazioni web interattive (Rich Internet Application), basandosi su uno scambio di dati in background fra web browser e server, consentendo così l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.

*fonte wikipedia

Questo implica che lato ESP32 dovrai fare una funzione che interpreta le stringhe inviate ed agisce di conseguenza. Non è l'approccio che userei io, ad ogni modo è una possibile soluzione e tradurla in codice è anche piuttosto semplice.
La libreria è già inclusa nel core ESP32 per Arduino, non serve installare altro.

Ad esempio, con la ricerca che ti ho suggerito prima, uno dei primi risultati che mi viene fuori è questa pagina che mi sembra ben fatta e scritta con chiarezza.
Rispetto a quanto scritto, avrei giusto un paio di osservazioni da fare (ad esempio l'oggetto XMLHttpRequest non è l'unico modo per fare richieste asincrone, io preferisco usare l'istruzione fetch che è più lineare e moderna per come la vedo io).

Partendo dall'esempio in questione (giusto per evitare di riscrivere tutto), la tua pagina potrebbe essere qualcosa del genere:

  • nel blocco HTML aggiungi un paio di pulsanti di test
  <div class="card">
    <h1><span style="background-color:white">Due pulsanti a caso</span></h1>
    <!-- Stesso metodo usato con il pulsante Help, 
         ma passo l'elemento che ha cliccato alla funzione-->
    <button onclick="sendString(this)">PULSANTE 1</button>
    <button onclick="sendString(this)">PULSANTE 2</button>
    <div id="esp-response"></div>
  </div>
  • nel blocco Javascript aggiungi la funzione che sarà eseguita al click dei due pulsanti
// Visto che l'esempio con XMLHttpRequest c'è già, usiamo fetch questa volta
function sendString(el) {
    // Definisco i parametri che verranno aggiunti alla richiesta (di tipo GET per default)
    const parameters = new URLSearchParams({
      val:  el.innerHTML    // Aggiungo un solo parametro, ovvero la stringa HTML contenuta nell'elemento button
    });
    
    fetch("/string?" + parameters)        // Do the GET request
    .then(response => response.text())    // Parse the response (plain text)
    .then(text => {                       // Do something with text   
      // Aggiorno l'elemento con id=esp-response con il testo ricevuto dall'ESP32
    	document.getElementById('esp-response').innerHTML = text;
  	});
  }
  • infine lato ESP32 dovrai gestire questa richiesta "asincrona" che arriverà dalla pagina web quando l'utente fa click su uno dei pulsanti. Analogamente a quanto ha fatto l'autore dell'esempio, crei una tua funzione "handler" e poi l'aggiungi al server
//=============================================
//Handle functions executed upon client request
//=============================================
void handleString()
{
  // Controllo che il browser abbia inviato il parametro che mi aspetto
  if (server.hasArg("val")) {
    // Recupero il valore del parametro
    String valore = server.arg("val");

    // Ci faccio quello che voglio
    String risposta = "Hai inviato la stringa '";
    risposta += valore;
    risposta += "'";
    Serial.println(risposta);

    // Mando la risposta al browser
    server.send(200, "text/html", risposta);
  }
  else 
    server.send(500, "text/html", "Richiesta GET non corretta");
}

Nel setup() aggiungi il nuovo handler al server

  server.on("/", handleRoot);
  server.on("/readPOT", handlePOT);
  server.on("/string", handleString);
  server.begin();
5

ciao ragazzi,
mi unisco solo per un'info, ci sono device esterne tipo ESP01, che andrà utilizzato in caso con arduino mega che permette le stesse performance di un'esp32?

grazie

6

Puoi installare il firmware AT anche su un ESP32, ma se con prestazioni intendi velocità e reattività, non otterrai mai la stessa cosa perché il collo di bottiglia sarebbe la comunicazione seriale tra le due schede.

Dal punto di vista delle funzionalità invece non cambia nulla.

7

ok grazie!

8

Grazie mille!!

9

Ringrazio ancora @cotestatnt e aggiungo la mia rivisitazione del codice.

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "webpage.h"
//---------------------------------------------------
WebServer server(80);
const char* ssid = "mio router wifi";
const char* password = "mia password";
//---------------------------------------------------
#include "handleFunctions.h"
#define ledv 17
#define led 18
#define ledr 16
#define ledv 17
#define ledb 19
#define buzzer 22
int scossa = 15;
int sensore = 21;
bool allarme = false;
int statusPir = LOW;
int statusscossa = LOW;
int lampeggi = 2;
//----------------------------------------------------------
void (*Riavvia)(void) = 0;  //reset ARDUINO
//----------------------------------------------------------
void lampu2() {
  digitalWrite(led, LOW);
  delay(500);
  digitalWrite(led, HIGH);
  delay(500);
  tone(buzzer, 13, 200);
}
//===================================================
void setup() {
  Serial.begin(115200);
  pinMode(ledv, OUTPUT);
  pinMode(led, OUTPUT);
  pinMode(ledr, OUTPUT);
  pinMode(ledv, OUTPUT);
  pinMode(ledb, OUTPUT);
  pinMode(buzzer, OUTPUT);
  //-------------------------------------------------
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi");
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  //-------------------------------------------------
  server.on("/", handleRoot);
  server.on("/readPOT", handlePOT);
  server.on("/readPOT2", handlePOT2);
  server.on("/readPOT3", handlePOT3);
  server.begin();
  Serial.println("HTTP server started");
  server.on("/", handleRoot);
  server.on("/readPOT", handlePOT);
  server.on("/readPOT2", handlePOT2);
  server.on("/readPOT3", handlePOT3);
  server.on("/string", handleString);
  server.begin();
  digitalWrite(ledr, HIGH);
  digitalWrite(ledv, HIGH);
  digitalWrite(led, HIGH);
  digitalWrite(ledb, HIGH);
  tone(buzzer, 4186, 300);
  delay(200);
  digitalWrite(ledr, LOW);
  digitalWrite(ledv, LOW);
  digitalWrite(ledb, LOW);
}
//===================================================
void loop(void) {
  server.handleClient();
  //-----------------------------------------------------------
  if (digitalRead(scossa) == HIGH && allarme == true)  //rilevo movimento con allarme in on
  {
    tone(buzzer, 4186, 300);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);

    Serial.println(" ");
    Serial.println("Rilevato MOVIMENTO sensore 1 !");
  }
  if (digitalRead(sensore) == HIGH && allarme == true)  //rilevo movimento con allarme in on
  {
    tone(buzzer, 4186, 300);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    delay(50);
    digitalWrite(ledr, HIGH);
    delay(50);
    digitalWrite(ledr, LOW);
    Serial.println(" ");
    Serial.println("Rilevato MOVIMENTO sensore PIR !");
  } else {
    digitalWrite(ledr, LOW);
    noTone(buzzer);
  }
  delay(200);
}
void handleString() {
  // Controllo che il browser abbia inviato il parametro che mi aspetto
  if (server.hasArg("val")) {
    // Recupero il valore del parametro
    String valore = server.arg("val");
    // Ci faccio quello che voglio
    if (valore == "ACCENSIONE ALLARME") {
      Serial.println("Attivazione ALLARME");
      for (byte i = 0; i < lampeggi; i++) {
        Serial.print(".");
        Serial.println(" ");
        lampu2();
      }
      digitalWrite(led, LOW);
      digitalWrite(ledv, LOW);
      digitalWrite(ledb, HIGH);
      Serial.println(" ");
      Serial.println("ALLARME ATTIVATO");
      Serial.println(" ");
      allarme = true;
    }
    if (valore == "SPEGNIMENTO ALLARME") {
      allarme = false;
      digitalWrite(ledr, LOW);
      digitalWrite(buzzer, LOW);
      digitalWrite(ledv, HIGH);
      digitalWrite(ledb, LOW);
      digitalWrite(led, LOW);
      Serial.println(" ");
      Serial.println("ALLARME DISATTIVATO");
      Serial.println(" ");
    }
    if (valore == "RESET") {
      digitalWrite(ledr, LOW);
      digitalWrite(buzzer, LOW);
      digitalWrite(ledv, HIGH);
      digitalWrite(ledb, LOW);
      Serial.println(" ");
      Serial.println("RESET ESEGUITO");
      Serial.println(" ");
      Riavvia();
    }
    String risposta = "Comando '";
    risposta += valore;
    risposta += "' eseguito";
    Serial.println(risposta);
    // Mando la risposta al browser
    server.send(200, "text/html", risposta);
  } else
    server.send(500, "text/html", "Richiesta GET non corretta");
}

file handleFunction.h

//=============================================
//Handle functions executed upon client request
//=============================================
void handleRoot() {
  server.send(200, "text/html", webpageCode);
}
//---------------------------------------
void handlePOT() {
  String POTval = String(digitalRead(15));
  server.send(200, "text/plane", POTval);
}
void handlePOT2() {
  String POT2val = String(digitalRead(21));
  server.send(200, "text/plane", POT2val);
}
void handlePOT3() {
  String POT3val = String(digitalRead(19));
  server.send(200, "text/plane", POT3val);
}

e webpage.h

//============
//Webpage Code
//============
String webpageCode = R"***(

<!DOCTYPE html>
<head>
  <title> ESP32 Web Server </title>
</head>
<html>
<!----------------------------CSS---------------------------->
<style>
  body {background-color: rgba(128, 128, 128, 0.884)}
  h4 {font-family: arial; text-align: center; color: white;}
  .card
  {
      border: 2px solid red;
  padding: 10px;
  border-radius: 45px ;
     max-width: 450px;
     min-height: 100px;
     background: rgba(162, 102, 212, 0.521);

     padding: 10px;
     
     font-weight: bold;
     font: 25px calibri;
     text-align: center;
     box-sizing: border-box;
     color: black;
     margin:20px;
     box-shadow: 0px 2px 15px 15px rgba(0,0,0,0.75);
  }
<!----------------------------HTML--------------------------->
</style>

<body>
  <div class="card">
    <h1><span style="background-color:none">INPUT ESP32</span></h1>
    <h2>
      stato sensore scossa : <span style="color:yellow" id="POTvalue">0</span>
    <h2>
    stato sensore PIR : <span style="color:yellow" id="POT2value">0</span>
    <h2>
        stato ALLARME : <span style="color:yellow" id="POT3value">0</span>
    <h2>

  </h2>
     <button onclick="help()">Help</button><br><br>
    <div id="myDIV"> </div>
      </div>
  </h4>
  <div class="card">
    <h1><span style="background-color:none">WEBALLARMINO</span></h1>
    <!-- Stesso metodo usato con il pulsante Help, 
         ma passo l'elemento che ha cliccato alla funzione-->
</html>
          <br> 
    <button onclick="sendString(this)">ACCENSIONE ALLARME</button>
    <br>
        </br>
    <button onclick="sendString(this)">SPEGNIMENTO ALLARME</button>
    </br>
      </br>
        </br>
    <button onclick="sendString(this)">RESET</button>
    <div id="esp-response"></div>
  </div>
  
<!-------------------------JavaScrip------------------------->
  <script>
    setInterval(function()
    {
      getPOTval();
      getPOT2val();
      getPOT3val();
    }, 2000);
    //-------------------------------------------------------
    function getPOTval()
    {
      var POTvalRequest = new XMLHttpRequest();
      POTvalRequest.onreadystatechange = function()
      {
        if(this.readyState == 4 && this.status == 200)
        {
          document.getElementById("POTvalue").innerHTML =
          this.responseText;
        }
      };
      POTvalRequest.open("GET", "readPOT", true);
      POTvalRequest.send();
    }
    //-------------------------------------------------------





    function getPOT2val()
    {
      var POT2valRequest = new XMLHttpRequest();
      POT2valRequest.onreadystatechange = function()
      {
        if(this.readyState == 4 && this.status == 200)
        {
          document.getElementById("POT2value").innerHTML =
          this.responseText;
        }
      };
      POT2valRequest.open("GET", "readPOT2", true);
      POT2valRequest.send();
    }
    //-------------------------------------------------------
    function getPOT3val()
    {
      var POT3valRequest = new XMLHttpRequest();
      POT3valRequest.onreadystatechange = function()
      {
        if(this.readyState == 4 && this.status == 200)
        {
          document.getElementById("POT3value").innerHTML =
          this.responseText;
        }
      };
      POT3valRequest.open("GET", "readPOT3", true);
      POT3valRequest.send();
    }











// Visto che l'esempio con XMLHttpRequest c'è già, usiamo fetch questa volta
function sendString(el) {
    // Definisco i parametri che verranno aggiunti alla richiesta (di tipo GET per default)
    const parameters = new URLSearchParams({
      val:  el.innerHTML    // Aggiungo un solo parametro, ovvero la stringa HTML contenuta nell'elemento button
    });
    
    fetch("/string?" + parameters)        // Do the GET request
    .then(response => response.text())    // Parse the response (plain text)
    .then(text => {                       // Do something with text   
      // Aggiorno l'elemento con id=esp-response con il testo ricevuto dall'ESP32
    	document.getElementById('esp-response').innerHTML = text;
  	});
  }
    //-------------------------------------------------------
    function help()
    {
      var x = document.getElementById("myDIV");
      var message = "Il PIR e' collegato al GPIO21 e la scossa al GPIO15";
      if (x.innerHTML == "") x.innerHTML = message;
      else x.innerHTML = "";
    }
  </script>
</body>
</html>

)***";

Vorrei adesso aggiungere dei riquadri lampeggianti in rosso/verde per visualizzare in web il ritardo dell'attivazione dell'allarme, ma credo che questa sia un'altra discussione fuori topic.

Grazie ancora a tutti.

10

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.