diff --git a/README.md b/README.md index 4dbb005..3310f85 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,24 @@ # Introduction -This reposity includes the basic information to mount a web server using **Node-RED** as a Dashboard and also working as a MQTT server using **Mosquitto**. +This reposity includes the basic information to mount a server using **Node-RED** as a Dashboard and also working as a MQTT server using **Mosquitto**. The MQTT server is tested with a ESP32 client to publish random numbers every two seconds. -*Again, thanks to Andrés Perez for the first version.* +The general scheme is shown below, the complete environment requires a client, mqtt server or broker, and a mqtt client that works like a user interface (dashboard). -# Servidor Web y comunicación con ESP32 por medio de un broker MQTT +The basic communication scheme could work like: -En este repositorio se presenta el proceso para montar un servidor web haciendo uso de Node-RED, y llevar a cabo su conexion con una tarjeta ESP32, haciendo uso del protocolo de comunicacion MQTT. +1. The ESP32 starts the communication chain by sending a text message to the broker, the broker can be public or local. -## Comunicacion +2. Depending on the code, the sending message can be replicated to all the connected clients in the *topic*. -1. La comunicacion comienza en el ESP32, el cual se encarga de enviar un texto al broker MQTT por medio de una conexion de red local. +3. Finally, a web server based on *Node-RED* will read the publicated data in the broker to be displayed in the *UI*. -2. El broker MQTT recibe el valor y permite que otros clientes lo lean a traves de el. - -3. Un servidor web ejecutado por Node-RED lee el dato recibido por el broker y ejecuta una accion de acuerdo al dato leido, en este caso esa accion es mostrar el texto en un sitio web. ![mqttesp32](./Imagenes/mqttesp32.PNG) -Este proyecto trabaja en conjunto con un programa creado para el esp32, el cual se encuentra en el siguiente repostorio: - http://gmarxcc.com:8088/andrespm/mqtt-server-esp32.git + +The client code to test the environment is hosted in the [mqtt-client-esp32-v2](https://github.com/ss-jade/mqtt-client-esp32-v2). + +*Thanks to Andrés Perez for the first version.* # MQTT Server @@ -94,36 +93,20 @@ click on *Add new mqtt-brocker*, then, in the *Connection* tab: set *Name* to Ra Finally, set the topic to `data/esp32` and the output to `a String` in the mqtt properties' node: ![](./topic.png) -Next, click on the `Deploy` button to check if the process can connect to the Broker: +Next, connect the blocks as shows in the image and click on the `Deploy` button to check if the process can connect to the Broker: ![](./deploy.png) +## Creating the UI +Next, make double-click on the `dashboard-text` node and add a new `Group` by click on the pencil icon: +![](./group.png) -how to connect??? - - -In the *Node-RED* App press the `import`button at the right-lower menu and upload the `flows.json` file in this repository. - - -![Importar](./Imagenes/Import_Node_Red.png) - -Damos clic en el nodo de mqtt in (el morado con el texto prueba/xd), se desplegara un menu con las propiedades del nodo. - -![Propiedades](./Imagenes/Prop_node.png) - -Damos clic en el lapiz, el cual nos desplegara un menu con la configuracion, en el apartado de server tecleamos la direccion de nuestro server mosquitto - -Una vez configurado, corremos el proceso con boton **Deploy**, en caso de haber configurado correctamente el nodo mqtt, debajo de este habra un mensaje con el texto **connected** - -![Connected](./Imagenes/Connected.png) - -Como se puede apreciar, uno de los nodos es una salida de insterfaz de usuario de tipo texto. Para acceder a ella nos dirijimos al navegador y escribimos la siguiente direccion: **localhost:1880/ui** - -En esta interfaz se reciben los datos enviados por otros clientes al servidor mqtt +set the name *Project*, and add also a new `Dashboard tab`, do not change the default names: -## Recepcion de datos en DASHBOARD +![](./add-tab.png) -Al entrar a la pagina del dashboard vemos como node-red recibe el dato y lo muestra en la interfaz de usuario +once the parameters have been configured click the add button twice; for the tabs and for the node properties. Next, click on the `Deploy` button and visit the `hostname-or-ip/ui` to see the output generated by the MQTT client: -![Connected](./Imagenes/Resultado.png) +![](./ui.png) +**Note: you can also check the generated data on the Arduino IDE serial tools.** diff --git a/add-tab.png b/add-tab.png new file mode 100644 index 0000000..e3dad61 Binary files /dev/null and b/add-tab.png differ diff --git a/group.png b/group.png new file mode 100644 index 0000000..509e6a2 Binary files /dev/null and b/group.png differ diff --git a/process.png b/process.png new file mode 100644 index 0000000..6f6117f Binary files /dev/null and b/process.png differ diff --git a/ui.png b/ui.png new file mode 100644 index 0000000..689f7e5 Binary files /dev/null and b/ui.png differ