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>

No hay comentarios:

Publicar un comentario