|
Tutorial del Internet de las Cosas con el ESP8266
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
117D.- iot.eclipse.org. App Inventor.
- Vamos a utilizar el servidor iot.eclipse.org, es gratuito, no hace falta registrarse. No muestra página web como hemos visto con ThingSpeak.
- Vamos a enviar y obtener los valores mediante App Inventor y JavaScript.
- Estos códigos funcionan tanto con el ESP8266 como con el ESP32, solo hay que cambiar la librería.
#include <ESP8266WiFi.h> // Para ESP8266
#include <WiFi.h> // Para ESP32
__________________________________________________________________
1.- ESP8266 Publica un número aleatorio y la aplicación de App Inventor lo Subscribe.
- El ESP8266 (o el ESP32) genera un número aleatorio del 1 al 90 y en App Inventor observamos ese valor con número.
- Es necesario esta librería: pubsubclient.zip [vimos la instalación de esta librería en el tutorial anterior]
- De https://vimalb.github.io/IoT-ESP8266-Starter/Lesson_04/lesson.html
- Este programa genera un número aleatorio del 1 al 90, cada 5 segundos
- Código para enviar desde ESP8266:
- Publicaremos la información mediante: juan/aleatorio
ESP8266_publish.ino |
// Juan A. Villalpando.
// kio4.com
#include <ESP8266WiFi.h> // Para ESP8266
// #include <WiFi.h> // Para ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
void setup() {
Serial.begin(115200);
delay(10);
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.println("IP: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Continuamente comprueba si tiene conexión con MQTT,
// en caso de que no tenga, reconecta.
if (!MQTT_CLIENT.connected()) {
reconnect();
}
// Publicar un mensaje. Publish.
// Convierte el entero a char. Debe ser char.
int aleatorio = random(1,90);
String aleatorioString = String(aleatorio);
char alea[10];
aleatorioString.toCharArray(alea, 10);
MQTT_CLIENT.publish("juan/aleatorio", alea);
// Espera antes de Publicar otro aleatorio.
delay(5000);
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("iot.eclipse.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar con MQTT.");
MQTT_CLIENT.connect("JuanAntonio");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
|
________________________________________
- Recibir en la aplicación de App Inventor.
 p117B_eclipse_mqtt.aia
- Mediante un código en JavaScript de Adafruit, realizaremos la Subscripción en iot.eclipse
- Creamos un archivo llamado mqtt_publish.htm que a su vez llamará a...
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- Ese enlace lo pondremos en nuestro código de JavaScript, que quedará de la siguiente forma:
mqtt_subscribe.htm |
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js"></script>
<script type="text/javascript">
// https://medium.com/kidstronics/adafruit-io-meets-esp8266-arduino-mit-app-inventor-2-14dc7737cc7b
var url = 'ws://iot.eclipse.org/ws',
datos = window.AppInventor.getWebViewString(); // Entrada de datos.
topic = datos;
var client = mqtt.connect(url, {
username: 'No_es_necesario',
password: 'No_es_necesario'
});
client.on('connect', function() {
client.subscribe(topic);
});
client.on('message', function(topic, payload) {
$('pre').append(topic + ": " + payload+ '\n'); // Puedes eliminar esto para que no salga en la página.
window.AppInventor.setWebViewString(' '+ payload);
});
</script>
</head>
</html>
|
- Ese archivo lo subiremos a nuestra aplicación de App Inventor.
- Para conectar con el servidor de iot.eclipse.org, no es necesario registrarse, ni poner nombre ni contraseña.
- Nuestra aplicación de App Inventor recibirá un dato y lo mostrará.
- El archivo de JavaScript de Adafruit se puede poner mediante este enlace:
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- o bajarlo directamente y luego Subirlo a la aplicación: mqtt.js
________________
- Diseño.
________________
- Bloques.
file:///mnt/sdcard/AppInventor/assets/mqtt_subscribe.htm
Previamente a Generar, debemos cambiar por: file:///android_asset/mqtt_subscribe.htm
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
2.- ESP8266 Publica el valor de dos pulsadores. App Inventor lo Subscribe.
- Este ejemplo es parecido al anterior.
- Tenemos dos pulsadores, en D3 y D4. Publicamos el estado de esos dos pulsadores y lo Subscribimos en la app Linerar MQTT.
- App Inventor estará Subscrito a juan/consulta
ESP8266_eclipse_2.ino |
// Modificado por Juan A. Villalpando.
// kio4.com
#include <ESP8266WiFi.h> // Para ESP8266
// #include <WiFi.h> // Para ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
#define pulsa3 D3 // Pulsador en terminal 3.
#define pulsa4 D4 // Pulsador en terminal 4.
int valor3;
int valor4;
String p3;
String p4;
String publicar = "0,0";
char publicacion[30];
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
void setup() {
Serial.begin(115200);
delay(10);
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.println("IP: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Continuamente comprueba si tiene conexión con MQTT.
// en caso de que no tenga, reconecta.
if (!MQTT_CLIENT.connected()) {
reconnect();
}
// Publica el mensaje. Publish.
consulta();
MQTT_CLIENT.publish("juan/consulta", publicacion);
// Espera antes de enviar otro aleatorio.
delay(5000);
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("iot.eclipse.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar.");
MQTT_CLIENT.connect("JuanAntonio");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
// Consulta el estado de los pulsadores.
void consulta(){
valor3 = digitalRead(pulsa3);
if (valor3 == HIGH) {p3 = "P3 No";} else {p3 = "P3 PULSADO";}
valor4 = digitalRead(pulsa4);
if (valor4 == HIGH) {p4 = "P4 No";} else {p4 = "P4 PULSADO";}
publicar = p3 + "," + p4;
Serial.println(publicar);
String publicarString = publicar;
publicarString.toCharArray(publicacion, 30);
delay(10);
}
|
- Obtendremos un texto con el estado de los pulsadores.
___________________________________
- Propuesta.
- Termina esta aplicación. Debes crear el archivo .htm para App Inventor y la aplicación.
En vez de obtener un texto, modifica el Widget type para obtener dos RGB LED que se enciendan/apaguen.
- Deberás modificar el código del ESP8266.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
3.- La aplicación App Inventor Publica un valor. El ESP8266 lo Subscribe.
- En la aplicación de App Inventor pondremos cuatro Botones, al pulsarlos encenderemos/apagaremos el LED4 y el LED5 del ESP8266.
- En este caso Publicaremos en la aplicación y Subscribiremos en ESP8266.
- Utilizamos los LEDS D4 o el D5, en el ESP8266 los defineremos así:
const byte led4 = D4;
const byte led5 = D5;
- Si estamos utilizando el ESP32 debemos poner:
const byte led4 = 2;
const byte
led5 = 5;
- Este código es más complicado que el de Publicar, se basa en la librería PubSubClient. Utiliza la función setCallback que se ejecutará cuando se reciiba un mensaje.
ESP8266_subscribe.ino |
// Juan A. Villalpando.
// kio4.com
#include <ESP8266WiFi.h> // Para ESP8266
// #include <WiFi.h> // Para ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
const byte led4 = D4; // En el ESP32 led2 = 2;
const byte led5 = D5; // En el ESP32 led5 = 5;
void setup() {
Serial.begin(115200);
delay(10);
pinMode(led4, OUTPUT);
pinMode(led5, OUTPUT);
// Conectar con WiFi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// Configuración de la respuesta.
MQTT_CLIENT.setCallback(callback);
}
// Aquí configuramos lo que debe hacer cuando recibe un valor.
void callback(char* recibido, byte* payload, unsigned int length) {
Serial.print("Mensaje recibido: ");
Serial.print(recibido);
Serial.print(" ");
for (int i=0;i<length;i++) {
char receivedChar = (char)payload[i];
Serial.print(receivedChar);
if (receivedChar == 'a'){digitalWrite(led4, LOW);}
if (receivedChar == 'b'){digitalWrite(led4, HIGH);}
if (receivedChar == 'c'){digitalWrite(led5, HIGH);}
if (receivedChar == 'd'){digitalWrite(led5, LOW);}
}
Serial.println();
}
void loop() {
if (!MQTT_CLIENT.connected()) {
reconnect();
}
MQTT_CLIENT.loop(); // Chequea lo Subscrito.
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("iot.eclipse.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar con MQTT.");
MQTT_CLIENT.connect("JuanAntonio");
MQTT_CLIENT.subscribe("juan/led4");
MQTT_CLIENT.subscribe("juan/led5");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
|
________________________________________
- Enviar desde la aplicación de App Inventor.
p117_eclipse_mqtt.aia
- Mediante un código en JavaScript de Adafruit, realizaremos la Publicación en iot.eclipse
- Creamos un archivo llamado mqtt_publish.htm que a su vez llamará a...
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- Ese enlace lo pondremos en nuestro código de JavaScript, que quedará de la siguiente forma:
mqtt_publish.htm |
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js"></script>
<script type="text/javascript">
// https://medium.com/kidstronics/adafruit-io-meets-esp8266-arduino-mit-app-inventor-2-14dc7737cc7b
var url = 'ws://iot.eclipse.org/ws',
datos = window.AppInventor.getWebViewString(); // Entrada de datos.
datos = datos;
partes = datos.split(":");
topic = partes[0];
valor = partes[1];
var client = mqtt.connect(url, {
username: 'No_es_necesario',
password: 'No_es_necesario'
});
client.on('connect', function() {
client.publish(topic, valor);
window.AppInventor.setWebViewString(datos);
});
</script>
</head>
</html>
|
- Ese archivo lo subiremos a nuestra aplicación de App Inventor.
- Para conectar con el servidor de iot.eclipse.org, no es necesario registrarse, ni poner nombre ni contraseña.
- Nuestra aplicación de App Inventor enviará un dato de la forma juan/led4:a
- Que llegará a iot.eclipse.
- El código del ESP8266 recibirá ese valor y encenderá el LED4.
- El archivo de JavaScript de Adafruit se puede poner mediante este enlace:
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- o bajarlo directamente y Subirlo a la aplicación: mqtt.js
________________
- Diseño.
________________
- Bloques.
- En el código del ESP8266 hemos utilizado estos caracteres para encender/apagar los LED.
file:///mnt/sdcard/AppInventor/assets/mqtt_publish.htm
Previamente a Generar, debemos cambiar por: file:///android_asset/mqtt_publish.htm
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
4.- La aplicación App Inventor Publica grados de un servo. El ESP8266 lo Subscribe mueve servo.
- Tenemos una app con App Inventor con dos Botones, según pulsemos uno u otro un servo conectado al ESP8266 se moverá 5º en sentido horario o antihorario.
- App Inventor será que el Publique los grados y ESP8266 será el que Subscriba.
____________________________________
- Código.
ESP8266_eclipse_servo.ino |
// Juan A. Villalpando.
// kio4.com
#include <ESP8266WiFi.h> // Para el ESP8266
// #include <WiFi.h> // Para el ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
// Servo.
#include <Servo.h>
Servo myservo;
#define servoPin D3 // El servo en el D3
int grado = 90;
String mensaje = "";
void setup() {
Serial.begin(115200);
// Conectar con WiFi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
myservo.attach(servoPin);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// Configuración de la respuesta.
MQTT_CLIENT.setCallback(callback);
}
// Aquí configuramos lo que debe hacer cuando recibe un valor.
void callback(char* recibido, byte* payload, unsigned int length) {
for (int i=0;i<length;i++) {
mensaje = mensaje + (char)payload[i];
}
// Mueve el Servo.
if (mensaje == "aumenta") {grado = grado + 5; myservo.write(grado);}
if (mensaje == "disminuye"){grado = grado - 5; myservo.write(grado);}
mensaje = "";
Serial.println(grado);
}
void loop() {
if (!MQTT_CLIENT.connected()) {
reconnect();
}
MQTT_CLIENT.loop(); // Chequea lo Subscrito.
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("iot.eclipse.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar con MQTT.");
MQTT_CLIENT.connect("JuanAntonio");
MQTT_CLIENT.subscribe("juan/mensaje");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
|
________________________________________
- Publica mensaje desde la aplicación de App Inventor.
p117_eclipse_mqtt_servo.aia
- Mediante un código en JavaScript de Adafruit, realizaremos la Publicación en iot.eclipse
- Creamos un archivo llamado mqtt_publish.htm que a su vez llamará a...
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- Ese enlace lo pondremos en nuestro código de JavaScript, es el mismo que el del ejemplo anterior.
mqtt_publish.htm |
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js"></script>
<script type="text/javascript">
// https://medium.com/kidstronics/adafruit-io-meets-esp8266-arduino-mit-app-inventor-2-14dc7737cc7b
var url = 'ws://iot.eclipse.org/ws',
datos = window.AppInventor.getWebViewString(); // Entrada de datos.
datos = datos;
partes = datos.split(":");
topic = partes[0];
valor = partes[1];
var client = mqtt.connect(url, {
username: 'No_es_necesario',
password: 'No_es_necesario'
});
client.on('connect', function() {
client.publish(topic, valor);
window.AppInventor.setWebViewString(datos);
});
</script>
</head>
</html>
|
________________
- Diseño.
________________
- Bloques.
file:///mnt/sdcard/AppInventor/assets/mqtt_publish.htm
Previamente a Generar, debemos cambiar por: file:///android_asset/mqtt_publish.htm
________________
- Propuesta.
- Crea un CampoDeTexto en App Inventor. El usuario escribirá un número de grados y pulsará un Botón.
- El servo se moverá a la posición indicada en esos grados.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
5.- La aplicación App Inventor Publica un mensaje. El ESP8266 lo Subscribe en pantalla LCD.
- Escribimos un mensaje en la App Inventor, pulsamos un Botón para Publicar ese mensaje.
- El ESP8266 está Subscrito a ese mensaje, cuando llegue, lo mostrará en la pantalla LCD.
____________________________________
- Código.
ESP8266_eclipse_mensaje.ino |
// Juan A. Villalpando.
// kio4.com
#include <ESP8266WiFi.h> // Para el ESP8266
// #include <WiFi.h> // Para el ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
// Pantalla LCD.
#include <LiquidCrystal_I2C.h>
int columnas = 16;
int filas = 2;
LiquidCrystal_I2C lcd(0x27, columnas, filas);
// LiquidCrystal_I2C lcd(0x3F, columnas, filas);
String mensaje;
void setup() {
Serial.begin(115200);
lcd.init();
lcd.backlight();
// Conectar con WiFi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// Configuración de la respuesta.
MQTT_CLIENT.setCallback(callback);
}
// Aquí configuramos lo que debe hacer cuando recibe un valor.
void callback(char* recibido, byte* payload, unsigned int length) {
for (int i=0;i<length;i++) {
mensaje = mensaje + (char)payload[i];
}
Serial.print(mensaje);
lcd.clear(); // Borra pantalla.
lcd.setCursor(0, 0); // Inicio del cursor
lcd.print("Mensaje:");
lcd.setCursor(0,1); // Siguiente renglón.
lcd.print(mensaje);
mensaje = "";
}
void loop() {
if (!MQTT_CLIENT.connected()) {
reconnect();
}
MQTT_CLIENT.loop(); // Chequea lo Subscrito.
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("iot.eclipse.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar con MQTT.");
MQTT_CLIENT.connect("JuanAntonio");
MQTT_CLIENT.subscribe("juan/mensaje");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
|
________________________________________
- Publica mensaje desde la aplicación de App Inventor.
p117_eclipse_mqtt_lcd.aia
- Mediante un código en JavaScript de Adafruit, realizaremos la Publicación en iot.eclipse
- Creamos un archivo llamado mqtt_publish.htm que a su vez llamará a...
https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js.
- Ese enlace lo pondremos en nuestro código de JavaScript, es el mismo que el del ejemplo anterior.
mqtt_publish.htm |
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js"></script>
<script type="text/javascript">
// https://medium.com/kidstronics/adafruit-io-meets-esp8266-arduino-mit-app-inventor-2-14dc7737cc7b
var url = 'ws://iot.eclipse.org/ws',
datos = window.AppInventor.getWebViewString(); // Entrada de datos.
datos = datos;
partes = datos.split(":");
topic = partes[0];
valor = partes[1];
var client = mqtt.connect(url, {
username: 'No_es_necesario',
password: 'No_es_necesario'
});
client.on('connect', function() {
client.publish(topic, valor);
window.AppInventor.setWebViewString(datos);
});
</script>
</head>
</html>
|
________________
- Diseño.
________________
- Bloques.
file:///mnt/sdcard/AppInventor/assets/mqtt_publish.htm
Previamente a Generar, debemos cambiar por: file:///android_asset/mqtt_publish.htm
________________
- Propuesta de modificación del código anterior.
p117_eclipse_mqtt_lcd_2.aia
- En vez de enlazar los archivos jquery.min.js y mqtt.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/adafruit/io-issues/releases/download/mqttjs/mqtt.js"></script>
vamos a subirlos a la aplicación:
- Modificamos la líneas donde se encuentran esos archivos:
mqtt_publish.htm |
<!doctype html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="mqtt.js"></script>
<script type="text/javascript">
var url = 'ws://iot.eclipse.org/ws',
datos = window.AppInventor.getWebViewString(); // Entrada de datos.
datos = datos;
partes = datos.split(":");
topic = partes[0];
valor = partes[1];
var client = mqtt.connect(url, {
username: 'No_es_necesario',
password: 'No_es_necesario'
});
client.on('connect', function() {
client.publish(topic, valor);
window.AppInventor.setWebViewString(datos);
});
</script>
</head>
</html>
|
_____________________________________________
_____________________________________________
_____________________________________________
- Con Adafruit.
- Con Adafruit puedes seguir el siguiente código, necesitarás autentificarte con nombre de usuario y key.
https://medium.com/kidstronics/adafruit-io-meets-esp8266-arduino-mit-app-inventor-2-14dc7737cc7b
_______________________________
|
