Tresavis

Benvinguts al blog de tresavis de noves tecnologies i més.

Correu : tresavis3@gmail.com

☰ Pràctiques ☰ Articles

Control de la intensitat de llum de un LED per Internet.

Descripció.

El client des de el navegador web, poder regular la intensitat de un led connectat al servidor NodeMCU configurat en mode Access Point.

Per aquesta pràctica fem servir la tecnologia WebSocket.

Components.

1.- Placa NodeMCU com a servidor i AccessPoint.

2.- Led i resistència de 100 oms.

3.- Bombeta a 220V.Navegador WEB com a client.

4.- IDE de Arduino.

Bibliografia.

Per desenvolupar aquesta practica ens hem basat en la pàgina de ESPloradores

Teoria.

Els dos mètodes mes comuns per la comunicació entre el servidor i el client son GET i POST. Cada vegada que s'envia una comanda GET o POST el navegador actualitza la pagina amb el inconvenient de la latència i recursos de processament al tenir que establir connexió TCP per transmetre tota la informació per recarregar la pagina.

En situacions que es vol enviar dades sense actualitzar la pagina, per reduir la latència, en aquest casos es pot fer servir la tecnologia WebSocket.

WebSocket permet mantenir oberta una connexió TCP, per enviar i rebre dades entre el servidor i el client. Com una tubària oberta permanentment entre el servidor i el client per on passant les dades.

Circuit elèctric.

Esquema elèctric dissenyat amb la aplicació de circuito.io

Hardware.

Explicació del codi.

La pàgina web de control la allotgem en la memòria flash del processador ESP8266 del NodeMCU, mitjançant la funció PROGMEM. Normalment els sketch de Arduino, s'allotgen en la memòria SRAM. De aquesta manera el codi es mes fàcil de entendre al pujar el codi HTML directament.

Codi WEB (HTML i JavaScript).

El codi següent es per mostrar una barra de desplaçament (range slider), per poder regular la intensitat del led.

static const char PROGMEM INDEX[] = R"( 
<!DOCTYPE html>
<html>
  <head>
      <meta charset=utf-8>
      <title> WebSocket ESP8266-REGULACIÓ DE INTENSITAT DE LED </title>
  </head>
  <body>
    <h1> WebSocket ESP8266-REGULACIÓ DE INTENSITAT DE LED </h1> 
    <p> Servidor (ESP8266)<--WebSocket -->Client (navegador)</p>
    <input type='range' min='0' max='255' value='127' id='entrada' oninput='getEntrada()'>
    <p id='sortida'></p>
    <script>
       var x; 
       var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
       connection.onopen = function () {
         connection.send('Connectat  -  ' + new Date()); 
         getEntrada();
       }
       connection.onmessage = function (event) {
         console.log('Servidor (rep): ', event.data);
       }
       connection.onerror = function (error) {
         console.log('WebSocket Error!!!', error);
       }
       function getEntrada() {
         x = document.getElementById('entrada').value;
         document.getElementById('sortida').innerHTML = 'Intensitat (0-255): ' + x;
         enviarValor();
       }
       function enviarValor(){
         console.log('Client (envia): ' + x);
         connection.send(x);
       }
    </script>
  </body>
</html>
)";

El resultat de aquest codi es el següent:

El interval de valors de la barra de desplaçament es de 0 a 255, però pot ser un altre.

Cada vegada que es mogui el cursor s'executa la funció de JavaScript, getEntrada(), que converteix el valor entrada en un numero i l'imprimeix per pantalla.

Establir la connexió WebSocket amb el servidor.

Fem servir JavaScript.

       var x; 
       var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
       connection.onopen = function () {
         connection.send('Connectat  -  ' + new Date()); 
         getEntrada();
       }
       connection.onmessage = function (event) {
         console.log('Servidor (rep): ', event.data);
       }
       connection.onerror = function (error) {
         console.log('WebSocket Error!!!', error);
       }
       function getEntrada() {
         x = document.getElementById('entrada').value;
         document.getElementById('sortida').innerHTML = 'Intensitat (0-255): ' + x;
         enviarValor();
       }
       function enviarValor(){
         console.log('Client (envia): ' + x);
         connection.send(x);
       }

La part mes important del codi es la declaració de la variable connection:

       var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);

Els paràmetres del constructor son la url amb el port i el nom del WebSocket.

Enviar la data actual del client al servidor o enviar dades a la consola del navegador no aporta res a la comunicació WebSocket, nomes es per facilitar el control.

Codi complert.

    /* 
    Control de la intensitat de un led.
    Comunicació servidor-client per WebSocket
    NodeMCU com a servidor en mode AccessPoint i el navegador com client
    */

    //llibreries
    #include <ESP8266WiFi.h>
    //llibreria WebSockets by Marcus Sattler
    #include <WebSocketsServer.h>
    #include <ESP8266WebServer.h>

    #define pinLed  D1          

    const char* ssid = "NodeMcuAp";
    const char* password = "12345678";
    //guardem la pagina web en la memoria flash del ESP8266
    static const char PROGMEM INDEX[] = R"( 
    <!DOCTYPE html>
    <html>
      <head>
          <meta charset=utf-8>
          <title> WebSocket ESP8266-REGULACIÓ DE INTENSITAT DE LED </title>
      </head>
      <body>
        <h1> WebSocket ESP8266-REGULACIÓ DE INTENSITAT DE LED </h1> 
        <p> Servidor (ESP8266)<--WebSocket -->Client (navegador)</p>
        <input type='range' min='0' max='255' value='127' id='entrada' oninput='getEntrada()'>
        <p id='sortida'></p>
        <script>
           var x; 
           var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
           connection.onopen = function () {
             connection.send('Connectat  -  ' + new Date()); 
             getEntrada();
           }
           connection.onmessage = function (event) {
             console.log('Servidor (rep): ', event.data);
           }
           connection.onerror = function (error) {
             console.log('WebSocket Error!!!', error);
           }
           function getEntrada() {
             x = document.getElementById('entrada').value;
             document.getElementById('sortida').innerHTML = 'Intensitat (0-255): ' + x;
             enviarValor();
           }
           function enviarValor(){
             console.log('Client (envia): ' + x);
             connection.send(x);
           }
        </script>
      </body>
    </html>
    )";
    //inicialitzem el servidor WiFi
    ESP8266WebServer server (80);
    //inicialitzel el webSocket per el servidor, port 81
    WebSocketsServer webSocket = WebSocketsServer(81);

    ///// métode que tracte el diferents evens en el socket/////////
    ///// conectar, desconnectar, intercamvi de missatges///////  
    void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
      switch(type) {
        case WStype_CONNECTED: {
          IPAddress ip = webSocket.remoteIP(num);
          Serial.printf("[%u] Connectat a la URL: %d.%d.%d.%d - %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
          }
          break;

        case WStype_DISCONNECTED:
          Serial.printf("[%u] Desconnectat!\n", num);
          break;

        case WStype_TEXT:
          Serial.printf("Número conexió: %u -Caràcters rebuts: %s\n  ", num, payload);
          //Retorna al client el missatge rebut. 
          webSocket.sendTXT(num, payload);
          //Conversió dels caràcters rebuts a cadena de texte     
          String strCadena = (char*)payload;
          //Conversió de String a enter
          int intensitat = strCadena.toInt();                            
          analogWrite(pinLed, intensitat);
          break;
      }
    }

    void setup() {
      Serial.begin(115200);
      Serial.println();

      //configurem el AccessPoint
      WiFi.softAP(ssid, password);
      IPAddress myIP = WiFi.softAPIP(); 
      //per defecte la IP del servidor AP es 192.168.4.1
      Serial.print("IP del AccessPoint: ");
      Serial.println(myIP);
      
       // inici del servidor WebSocket
      webSocket.begin();
      webSocket.onEvent(webSocketEvent);

      // gestiona la web, el index
      server.on("/", []() {
          server.send_P(200, "text/html", INDEX);
      });

      server.begin();
      Serial.println("WebServer iniciat...");

      pinMode(pinLed, OUTPUT); 
      digitalWrite(pinLed, 0); 

      analogWriteRange(255);
    }

    void loop() {
        webSocket.loop();
        server.handleClient();
    }

Descarrega el codi.

La llibreria que fa servir aquest codi per el WebSocket es WebSockets de Marcus Sattler.

Una vegada carregat el codi al NodeMCU, tenim que connectar a la WiFi creada per el AccesPoint de nom NodeMcuAP i contrasenya 12345678.

Després de establerta la connexió, en el navegador accedim a la IP del AccessPoint que oer defecte es: 192.168.4.1. S'executarà el codi HTML i es visualitzarà la pagina web amb la barra de desplaçament per controlar el led.

Resultat final.

Obrim la consola del navegador, en Firefox es menú/desenvolupador Web/consola Web. Accedim a la IP 192.168.4.1. Al interectuar amb la barra de moviment, el resultat es el següent: