domingo, 30 de julio de 2017

Tutorial #13 ESP8266 (Parte3) - Tus Propios Dashboards (Tableros) MQTT

En la tercera parte de los tutoriales de IOT usando MQTT en ESP8266, explico cómo hacer nuestros propios dashboards (tableros), valiéndonos de HTML y JavaScript; lo que nos permite controlar y monitorear nuestros dispositivos mediante una aplicación web, ya sea desde una PC, tablet, smartphone, etc. Si bien el ejemplo es muy sencillo y carece de diseño, es perfectamente funcional, ya que le idea del video es que se entiendan los conceptos y en futuros videos contemplaremos el diseño, la seguridad, etc.


tutorial13.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tutorial 13</title>
    <script src='mqttws31.js' type='text/javascript'></script> 
    <!-- https://api.cloudmqtt.com/sso/js/mqttws31.js -->    
  </head>
  <body>
      <div>
        <h2>Suscripciones:</h2>
      </div>
      <div>
        <a>Temperatura: </a>
        <a id ="temperatura">-</a>
      </div>
      <div>
        <a>Pulsador: </a>
        <a id ="pulsador">-</a>
      </div>
      <div>
        <a>Salida Digital: </a>
        <a id ="salidaDigital">-</a>
      </div>
      <div>
        <a>Salida Analógica: </a>
        <a id ="salidaAnalogica">-</a>
      </div>
      <div>
        <h2>Publicaciones:</h2>
      </div>
      <div>
        <a>Salida Digital: </a>
        <button type='button' onclick='OnOff("ON")'>ON</button>
        <button type='button' onclick='OnOff("OFF")'>OFF</button>
      </div>
      <div>
        <a>Salida Analógica: </a>
        <input type="range" id="myRange" min="0" max="1023"  onmouseup="enviarSalidaAnalogica()">
      </div>
    <script>      
      usuario = 'placa1';
      contrasena = '12345678';

      function OnOff(dato){
        message = new Paho.MQTT.Message(dato);
        message.destinationName = '/' + usuario + '/salidaDigital'
        client.send(message);
      };

      function enviarSalidaAnalogica(){
        var dato = document.getElementById("myRange").value;
        message = new Paho.MQTT.Message(dato);
        message.destinationName = '/' + usuario + '/salidaAnalogica'
        client.send(message);
      };
       
      // called when the client connects
      function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        client.subscribe("#");
      }
        
      // called when the client loses its connection
      function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
          console.log("onConnectionLost:", responseObject.errorMessage);
          setTimeout(function() { client.connect() }, 5000);
        }
      }
        
      // called when a message arrives
      function onMessageArrived(message) {
        if (message.destinationName == '/' + usuario + '/' + 'temperatura') { //acá coloco el topic
            document.getElementById("temperatura").textContent = message.payloadString  + " ºC";
        }
        if (message.destinationName == '/' + usuario + '/' + 'pulsador') { //acá coloco el topic
            document.getElementById("pulsador").textContent = message.payloadString;
        }
        if (message.destinationName == '/' + usuario + '/' + 'salidaDigital') { //acá coloco el topic
            document.getElementById("salidaDigital").textContent = message.payloadString;
        }
        if (message.destinationName == '/' + usuario + '/' + 'salidaAnalogica') { //acá coloco el topic
            document.getElementById("salidaAnalogica").textContent = message.payloadString;
        }
      }

        function onFailure(invocationContext, errorCode, errorMessage) {
          var errDiv = document.getElementById("error");
          errDiv.textContent = "Could not connect to WebSocket server, most likely you're behind a firewall that doesn't allow outgoing connections to port 39627";
          errDiv.style.display = "block";
        }
        
        var clientId = "ws" + Math.random();
        // Create a client instance
        var client = new Paho.MQTT.Client("m11.cloudmqtt.com", 30722, clientId);
        
        // set callback handlers
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;
        
        // connect the client
        client.connect({
          useSSL: true,
          userName: usuario,
          password: contrasena,
          onSuccess: onConnect,
          onFailure: onFailure
        });        
    </script>
  </body>
</html>

2 comentarios:

  1. maestro realmente me quede sorprendido por la explicacion clara y sencilla. Seguí los pasos y lo probé y si fuciona. Entiendo que arduino publica los datos de temperatura y de los botones hacia el broker pero me gustaria verlo desde un navegador en forma externa no solo desde el navegador en forma local con este mismo esquema. He visto el tutorial #9 pero yo no deseo almacenar en una base de datos sino interactuar desde fuera de mi casa con este mismo esquema que es la base por supuesto mejorar los graficos como el tutorial #16. por favor me podrias ayudar entiendo poco de programacion. mi correo es freedbg32@gmail.com. Gracias por ser tan explicito hasta un novato como yo lo entendió. :)

    ResponderEliminar
  2. Hola de nuevo. subí este codigo html a un pagina web que he creado de practica http://tunc2mk.260mb.org pero no interactua con cloudmqtt solo en mi navegador de mi pc si hace todos los cambios, que crees que le falte? podrias ayudarme por favor? o tal vez hacer un tutorial al respecto? seria muy interesante. De nuevo gracias por compartir tus conocimientos. gracias a tu canal he entendido cosas que no hubiera entendido asi no mas y me anime a hacer pequeños proyectos. sigue adelante.

    ResponderEliminar