Tresavis

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.

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: