domingo, 28 de mayo de 2017

ESP8266 + servicio mqtt

Bueno, hoy les traigo una comunicación simple entre un ESP8266 y el celular (con la aplicación para android llamada MQTT Client, aunque cambiando un poco las cosas, se podría hacer entre dos ESP8266) y haciendo de intermediario un MQTT broker, más específicamente el broker que vamos a usar es el mosca. El broker se va a encargar de administrar la comunicación entre ambos dispositivos.

Primero que nada debemos descargar y ejecutar el mqtt broker:

Para esto vamos a abrir el git-bash (antes de continuar recomiendo leer los post del mqtt, el del esp8266 y el del node-red) y ejecutar el siguiente comando: "npm install mosca bunyan -g"



Luego de que se instale escribimos en la consola "mosca -v | bunyan" y eso va a iniciar el mqtt broker


Así nos debería quedar cuando lo ejecutamos por primera vez, esto sería el servidor por lo que hay que dejar abierta esta ventana (si la cerramos se detiene el servicio).

Ahora si bajamos la aplicación MQTT Client (presionando en el nombre los lleva a la página de descarga) (esta aplicación está para android, desconozco si se encuentra disponible para otros sistemas opera) y la abrimos nos vamos a encontrar con la siguiente pantalla


Si presionamos en donde aparece la llave (arriba a la derecha) podremos ingresar a las configuraciones para poner la ip local donde se aloja el servidor (al final del post dejo la forma de averiguarlo).


Yo puse la ip de mi pc (192.168.1.15) (esta ip varía dependiendo de como las administre el router, por lo que podría cambiar incluso si apagamos y prendemos el wifi o desconectamos el cable de ethernet o reiniciamos la pc o el router) y el puerto (1883) en el cual se encuentra nuestro mqtt broker (este puerto es por defecto), una vez finalizado esto ponemos "CONNECT" y en la consola nos va a aparecer lo siguiente:


Como aclaración, yo me conecté dos veces, por eso figura dos veces el texto "client connected".
Si ahora vamos a la aplicación a la parte donde dice "add topic" y agregamos uno debería quedarnos de la siguiente forma:


Como podemos ver, inmediatamente figura que nos subscribimos al tópico mensajes (el nombre es indistinto). Ahora vamos a mandar un mensaje al tópico mensajes presionando el ícono de subir (que se encuentra al lado del de configuración).


Y si lo enviamos deberíamos recibir el mensaje dado que estamos subscritos a ese tópico.

Bueno, esta fue la parte del celular, ahora si queremos mandar mensajes desde el esp8266, deberíamos meternos en arduino y hacer un programa que se comunique.

Primero vamos al gestor de librerías de arduino, y buscamos e instalamos la librería "PubSubClient", y cargamos el siguiente código:


#include <ESP8266WiFi.h>
#include <PubSubClient.h>

// Las siguientes tres constantes definen, ip del 
//mqtt broker, nombre de red wifi y su contraseña.

const char* mqtt_server = "192.168.1.15";
const char* ssid = "id_red_wifi";
const char* password = "contraseña_red_wifi";

// A continuación declaramos el nombre del cliente 
// que se va a conectar.
WiFiClient espClient;
PubSubClient client(espClient);

// En esta variable se almacena el mensaje recibido
// notar que tiene un máximo de 50 (en realidad son
// 49) caracteres.
char msg[50];

// Iniciamos la comunicación serie, la conexión por
// wifi y definimos en donde se aloja el servidor y
// en qué puerto, y la función donde administramos
// la llegada de mensajes.
void setup() {
  Serial.begin(115200);
  setup_wifi();
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

// En esta función se conecta con la red designada,
// mientras esté tratando de conectarse va a mandar
// un punto "." por el puerto serie y cuando lo 
// consiga nos avisará.
void setup_wifi() {

  delay(10);

  Serial.println();
  Serial.print("Conectando a: ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi conectado");
  Serial.println("Direccion IP: ");
  Serial.println(WiFi.localIP());
}

// En esta función se administra la llegada de 
// mensajes, nos avisa en qué tópico llegó y 
// cuál es el mensaje.
void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Mensaje recibido [");
  Serial.print(topic);
  Serial.print("] ");
  for (int i = 0; i < length; i++) {
    Serial.print((char)payload[i]);
  }
  Serial.println();
}

// Esta función se encarga de conectar con el 
// mqtt broker, si lo consigue se subscribe a
// los tópicos que definamos (no es necesario
// subscribirnos en esta función, pero si lo
// recomiendo para organizar mejor el código.
// Prueba reconectarse cada cinco segundos si
// no lo consigue.
void reconectar() {

  while (!client.connected()) {
    Serial.print("Intentando conectar con el mqtt broker...");

    if (client.connect("ESP8266Client")) {
      Serial.println("conectado");
      client.subscribe("mensajes");
    } else {
      Serial.print("fallo, rc=");
      Serial.print(client.state());
      Serial.println(" prueba nuevamente en 5 segundos");

      delay(5000);
    }
  }
}

// En el loop principal no hacemos nada más 
// que verificar si perdimos la conexión con
// el servicio mqtt y verificamos que lleguen
// mensajes. El "client.loop();" se encarga 
// de revisar si llegaron mensajes, por lo 
// que habría que invocar esta función regu-
// larmente.
// Esta sección se podría mejorar si ponemos
// que revise si perdió la conexión con la
// red wifi.
void loop() {

  if (!client.connected()) {
    reconectar();
  }
  client.loop();
}


Este código sólo sirve para recibir mensajes en el tópico de "mensajes". Y como aclaración es un código editado mínimamente del ejemplo que nos da la librería PubSubClient (más específicamente
Ahora paso a explicar qué hace cada función.
Antes que nada se define la ip donde se aloja el mqtt broker, la id (o nombre) de la red wifi y su correspondiente contraseña (estas tres cosas, en este código, son constantes, pero se podría hacer algo más interesante para que sean variables)


Si queremos averiguar cuál es la ip que asignó el router a nuestra computadora simplemente abrimos la consola de comandos de windows y tecleamos "ipconfig" y debería aparecer algo similar a lo siguiente (dentro del recuadro rojo se encuentra la ip de la pc):


domingo, 21 de mayo de 2017

MQTT

Hoy les voy a comentar sobre el MQTT (pido disculpas por el link de wikipedia en inglés, pero no lo conseguí en español). El mqtt es un protocolo de comunicación "ligero", es decir que no necesita de mucho ancho de banda para establecer un comunicación. Este protocolo necesita un servidor o un "broker" que administre las comunicaciones.

La forma de comunicarnos entre dos o más dispositivos es relativamente sencilla, si queremos recibir mensajes nos subscribimos a un canal o tópico y para mandar mensajes, publicamos en un canal o tópico. Esto sólo puede funcionar si primero nos conectamos al servidor bajo un nombre (no requiere contraseña o alguna clase de token de identificación) o nos desconectamos del mismo. Y así como nos subscribimos a un tópico podemos dejar de estar subscritos al mismo.

Este protocolo es muy útil para comunicar dispositivos entre sí (conocido como comunicación M2M (machine to machine)) con una baja transferencia de datos.

El servidor o broker de mqtt que vamos a usar es el mosca.

domingo, 14 de mayo de 2017

Node-Red Introducción

Hoy les traigo un programa llamado "Node-red", que es una herramienta que sirve para montar servicios de forma rápida y sencilla. Antes que nada, vamos a instalarlo.

  1. Primero vamos a descargar e instalar el aquila tools. Este programa nos va a instalar todo lo necesario, el git bash, python 2.7.x, el arduino, es un paquete de programas necesarios para poder usar el node red sin ningún problema.
  2. Una vez instalado, abrimos el git-bash y ponemos el comando "npm install node-red -g" y una vez que termina ponemos el comando "npm install node-red-dashboard" una vez finalizado ya tendremos todo lo necesario para usar el node-red en casi todo su esplendor.
Si en la ventana del git-bash ponemos node-red y vamos a la dirección ip 127.0.0.1:1880 nos vamos a encontrar con una interfaz en al cual podremos "programar".


si arrastramos el nodo inject y el debug y los conectamos como muestra la siguiente imágen:


y hacemos click en el botón deploy y en la pestaña debug deberíamos ver lo siguiente:


Esto se consigue haciendo click en el botón del nodo inject (donde está recuadrado en rojo). Si bien esto no es un gran avance y no es muy interesante, si vamos a las 3 filas que se encuentran arriba a la derecha, ponemos la opción import, seleccionamos clipboard y pegamos lo siguiente:

[{"id":"bc740d23.438bf","type":"websocket-listener","path":"/ws/chat","wholemsg":"false"},{"id":"c86da933.379258","type":"websocket in","name":"","server":"bc740d23.438bf","x":112,"y":61,"z":"d46b9957.2b9468","wires":[["f9476129.06b8a"]]},{"id":"f9476129.06b8a","type":"function","name":"","func":"delete msg._session;\nreturn msg;\n\n","outputs":1,"valid":true,"x":286,"y":61,"z":"d46b9957.2b9468","wires":[["bda54943.425ab8"]]},{"id":"bda54943.425ab8","type":"websocket out","name":"","server":"bc740d23.438bf","x":467,"y":61,"z":"d46b9957.2b9468","wires":[]},{"id":"df7af34a.20851","type":"http in","name":"","url":"/chat","method":"get","x":120,"y":129,"z":"d46b9957.2b9468","wires":[["969892ad.69677"]]},{"id":"969892ad.69677","type":"template","name":"","field":"","template":"<head>\n  <meta name=\"viewport\" content=\"width=320, initial-scale=1\">\n  <title>Chat</title>\n</head>\n\n<body>\n  <div id=\"wrapper\">\n    <div id=\"chat_box\" class=\"content\"></div>\n\n    <div id=\"footer\">\n      <div class=\"content\">\n        <input type=\"text\" id=\"user\" placeholder=\"Who are you?\" />\n        <input type=\"text\" id=\"message\" placeholder=\"What do you want to say?\" />\n        <input type=\"button\" id=\"send_btn\" value=\"Send\" onclick=\"sendMessage()\">\n      </div>\n    </div>\n  </div>\n</body>\n\n<script type=\"text/javascript\">\n  var wsUri = \"ws://{{req.headers.host}}/ws/chat\";\n  var ws = new WebSocket(wsUri);\n\n  function createSystemMessage(message) {\n    var message = document.createTextNode(message);\n\n    var messageBox = document.createElement('p');\n    messageBox.className = 'system';\n\n    messageBox.appendChild(message);\n\n    var chat = document.getElementById('chat_box');\n    chat.appendChild(messageBox);\n  }\n\n  function createUserMessage(user, message) {\n    var user = document.createTextNode(user + ': ');\n\n    var userBox = document.createElement('span');\n    userBox.className = 'username';\n    userBox.appendChild(user);\n\n    var message = document.createTextNode(message);\n\n    var messageBox = document.createElement('p');\n    messageBox.appendChild(userBox);\n    messageBox.appendChild(message);\n\n    var chat = document.getElementById('chat_box');\n    chat.appendChild(messageBox);\n  }\n\n  ws.onopen = function(ev) {\n    createSystemMessage('[Connected]');\n  };\n\n  ws.onclose = function(ev) {\n    createSystemMessage('[Disconnected]');\n  }\n\n  ws.onmessage = function(ev) {\n    var payload = JSON.parse(ev.data);\n    createUserMessage(payload.user, payload.message);\n\n    var chat = document.getElementById('chat_box');\n    chat.scrollTop = chat.scrollHeight;\n  }\n\n  function sendMessage() {\n    var user = document.getElementById('user');\n    var message = document.getElementById('message');\n\n    var payload = {\n      message: message.value,\n      user: user.value,\n      ts: (new Date()).getTime()\n    };\n\n    ws.send(JSON.stringify(payload));\n    message.value = \"\";\n  };\n</script>\n\n<style type=\"text/css\">\n  * {\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, serif;\n    font-style: italic;\n    font-size: 24px;\n  }\n\n  html, body, #wrapper {\n    margin: 0;\n    padding: 0;\n    height: 100%;\n  }\n\n  #wrapper {\n    background-color: #ecf0f1;\n  }\n\n  #chat_box {\n    box-sizing: border-box;\n    height: 100%;\n    overflow: auto;\n    padding-bottom: 50px;\n  }\n\n  #footer {\n    box-sizing: border-box;\n    position: fixed;\n    bottom: 0;\n    height: 50px;\n    width: 100%;\n    background-color: #2980b9;\n  }\n\n  #footer .content {\n    padding-top: 4px;\n    position: relative;\n  }\n\n  #user { width: 20%; }\n  #message { width: 68%; }\n  #send_btn {\n    width: 10%;\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    margin: 0;\n  }\n\n  .content {\n    width: 70%;\n    margin: 0 auto;\n  }\n\n  input[type=\"text\"],\n  input[type=\"button\"] {\n    border: 0;\n    color: #fff;\n  }\n\n  input[type=\"text\"] {\n    background-color: #146EA8;\n    padding: 3px 10px;\n  }\n\n  input[type=\"button\"] {\n    background-color: #f39c12;\n    border-right: 2px solid #e67e22;\n    border-bottom: 2px solid #e67e22;\n    min-width: 70px;\n    display: inline-block;\n  }\n\n  input[type=\"button\"]:hover {\n    background-color: #e67e22;\n    border-right: 2px solid #f39c12;\n    border-bottom: 2px solid #f39c12;\n    cursor: pointer;\n  }\n\n  .system,\n  .username {\n    color: #aaa;\n    font-style: italic;\n    font-family: monospace;\n    font-size: 16px;\n  }\n\n  @media(max-width: 1000px) {\n    .content { width: 90%; }\n  }\n\n  @media(max-width: 780px) {\n    #footer { height: 91px; }\n    #chat_box { padding-bottom: 91px; }\n\n    #user { width: 100%; }\n    #message { width: 80%; }\n  }\n\n  @media(max-width: 400px) {\n    #footer { height: 135px; }\n    #chat_box { padding-bottom: 135px; }\n\n    #message { width: 100%; }\n    #send_btn {\n      position: relative;\n      margin-top: 3px;\n      width: 100%;\n    }\n  }\n</style>\n","x":286,"y":129,"z":"d46b9957.2b9468","wires":[["82cb0232.7d35"]]},{"id":"82cb0232.7d35","type":"http response","name":"","x":429,"y":129,"z":"d46b9957.2b9468","wires":[]}]

Una vez que presionemos el botón deploy podremos obtener un chat dentro de la red local (si queremos saber como acceder deberíamos saber nuestra ip local y agregar ":1880/chat" (todo esto en el navegador)).

Por defecto en la ip de nuestra máquina más ":1880/ui" vamos a tener una página web desde donde podríamos agregar gráficas y botones. Esto lo explicaré mejor la próxima vez en un ejemplo más práctico. Por lo pronto pueden ir investigando y procesando toda esta información para poder entenderlo lo mejor posible.

domingo, 7 de mayo de 2017

Graficador de señales con processing (osciloscopio de mala calidad con arduino)

Hola nuevamente, hoy les traigo un graficador de señales (podría decirse que es un osciloscopio muuuuy precario y con una bajísima frecuencia de muestreo, que para fines de aprendizaje está bueno) que grafica en la computadora utilizando la herramienta llamada processing. Este ide es muy similar al de arduino y comparten bastantes funciones.

Este es el IDE del processing, muy similar al de arduino.
A continuación les dejo el programa en cuestión del processing.

import processing.serial.*;

Serial puerto;
long valor, x=25, valor1=10, alto, ancho, tiempo1;
long tiempo2=1000, z, tiempo, basura, nulo=0;
String valores; boolean comprobacion=false;   void setup() {   size(900, 500);   alto = height;   ancho= width-200;   background(0);   puerto = new Serial(this, Serial.list()[0], 115200);   dibujo();    } void draw() {      if(puerto.available() > 0)   {          textSize(11);          //valores=puerto.readStringUntil('\n');     tiempo1 = int(trim("0"+puerto.readStringUntil(' ')));     valor = int(map(int(trim("0"+puerto.readStringUntil('\n'))), 0, 1023, alto-20, 10));          println(tiempo1+" "+tiempo2+" "+valor);     stroke(0);     fill(0);     rect(ancho-45, 0, 50, 10);     stroke(0, 255, 0);     fill(255);     text(map(valor, alto-20, 10, 0, 5), ancho-45, 10);     text("v", ancho-10, 10);     if(tiempo1 != nulo)     {       if((x+((tiempo1-tiempo2)*ancho/20000))>25)       {         line(x, valor1, x+((tiempo1-tiempo2)*ancho/20000), valor);         x+=((tiempo1-tiempo2)*ancho/20000);         valor1 = valor;         tiempo2=tiempo1;         //x++;         valor=0;         if((x==ancho-10)||(x>ancho-10))         {           dibujo();           x=25;           }       }     }     else     {       println("error tiempo");     }   }      if(mousePressed && ((millis()-tiempo)>300))   {     tiempo = millis();     println(botonpresionado(mouseX,mouseY, 720, 50, "botón"));   }    } void dibujo() {   int div = 11, ini = 20;   clear();   background(0);   stroke(127, 34, 255);   line(25, 10, 25, alto-20);   line(25, alto-20, ancho-15, alto-20);   for(int i = 0; i<div; i++)   {     line(ini, ((alto-30)/(div-1))*i+10, ini+10, ((alto-30)/(div-1))*i+10);     text(5-i/2.0+"v", 0, ((alto-30)/(div-1))*i+15);     line(((ancho-35)/(div-1))*i+25, alto-15, ((ancho-35)/(div-1))*i+25, alto-25);     text(/*nf((ancho-30)/(div-1)*0.03*i, 1, 2)*/(i*2)+"s", ((ancho-35)/(div-1))*i+15, alto-0);   }   boton(720,50,"botón"); } void boton(int x, int y, String texto) {   stroke(0);   fill(50);   rect(x,y,90, 30);   fill(230);   rect(x+3,y+3,84, 24);   fill(0);   textSize(15);   text(texto,x+5,y+20); } boolean botonpresionado(int mx, int my, int x, int y, String texto) {   if (((mx>=x && mx<=x+90) && (my>=y && my<=y+30)))   {     return true;   }   else   {     return false;   }    }
Este programa nos va a crear la siguiente ventana (una vez que presionemos el botón de "play" que se encuentra en la esquina superior derecha):


como se puede ver tenemos la gráfica de la señal que lee el arduino y por otro lado tenemos un botón que si se explora un poco el lenguaje se podría hacer que haga cosas interesantes como un zoom o que cambie las escalas (bastante sencillo de implementar). Vale aclarar que este programa no funciona si no detecta un arduino conectado en el puerto usb de la computadora.

Para el arduino (en este caso un arduino leonardo) el programa es el siguiente:


void setup() {

  Serial.begin(115200);
}

void loop() {
  Serial.print(millis());
  Serial.print(' ');
  Serial.println(analogRead(A0));
  delay(50);
}


Estos programas se pueden editar rápidamente para obtener mejores resultados. Como nota, para un mejor muestreo de la gráfica, el tiempo se manda desde el arduino junto con el valor equivalente al de la tensión.

Por último pido disculpas si las instrucciones invaden otro campo, pero cambiarlo significaría que no se podría copiar el código y pegarlo en donde queramos porque habría saltos de línea por todos lados.