Internet de les coses amb ESP32 i ESP8266

Exemples Referència Plaques   Recursos CITCEA
Projectes Programació Perifèrics   Inici

Controlem l'encesa d'un LED des de l'App Inventor

En aquest exemple controlarem l'encesa del LED des d'una aplicació mòbil desenvolupada amb App Inventor. El programa del microcontrolador serà exactament el mateix que el d'aquest exemple perquè així tenim un programa genèric que també ens permet accedir des d'un navegador web. No explicarem aquí els detalls del funcionament de l'App Inventor sinó que donarem només un programa bàsic que permet complir els objectius de l'exemple. Per a més informació sobre l'App Inventor podeu consultar aquest web.

Hem de tenir present que, atès que hem agafat un programa de microcontrolador que crea una pàgina web, el nostre programa amb App Inventor haurà de descodificar la informació rebuda per extreure les dades necessàries. Això vol dir que si modifiquem el disseny de la pàgina web que envia el microcontrolador ens caldrà refer el tractament que en faci l'App Inventor.

En fer l'aplicació, hem suposat que l'adreça IP del microcontrolador començarà per 192.168.1. i probablement serà 192.168.1.66. A la primera línia li indiquem a l'usuari aquesta adreça i li donem la possibilitat de canviar el darrer valor. A la segona línia li indicarem, si el sabem, l'estat del LED. A la tercera hi ha un espai que normalment estarà ocult però que permetrà, en cas que n'hi hagi, mostrar els missatges d'error. A la darrera línia hi haurà tres polsadors, un per consultar l'estat del LED (suposem que pot ser modificat des d'altres llocs), un per encendre el LED i un darrer per apagar-lo. L'aspecte de l'aplicació serà el següent:

Disposició dels elements

Atès que en aquest web el nostre objectiu no és crear aplicacions, ens hem preocupat només del funcionament i la comprensió però no del disseny. Si ho desitgem, l'App Inventor ens permet personalitzar la disposició, els colors i altres propietats dels elements de la pantalla segons els nostres gustos.

Les següents taules mostren les propietats de cada un dels elements:

Propietat Valor Comentaris
Nom HorizontalArrangement_adre Aquest nom l'hem de posar en el requadre Components
Width Fill parent

Propietat Valor Comentaris
Nom Label_adre Aquest nom l'hem de posar en el requadre Components
Text Adreça: 192.168.1.

Propietat Valor Comentaris
Nom TextBox_adre Aquest nom l'hem de posar en el requadre Components
Text 66

Propietat Valor Comentaris
Nom HorizontalArrangement_LED Aquest nom l'hem de posar en el requadre Components
Width Fill parent

Propietat Valor Comentaris
Nom Label_LED Aquest nom l'hem de posar en el requadre Components
Text L'estat del LED és

Propietat Valor Comentaris
Nom Label_estat Aquest nom l'hem de posar en el requadre Components
Text desconegut

Propietat Valor Comentaris
Nom Label_avis Aquest nom l'hem de posar en el requadre Components
TextColor Red

Propietat Valor Comentaris
Nom HorizontalArrangement_botons Aquest nom l'hem de posar en el requadre Components
Width Fill parent

Propietat Valor Comentaris
Nom Button_consulta Aquest nom l'hem de posar en el requadre Components
Text Consulta estat

Propietat Valor Comentaris
Nom Button_encen Aquest nom l'hem de posar en el requadre Components
Text Encén

Propietat Valor Comentaris
Nom Button_apaga Aquest nom l'hem de posar en el requadre Components
Text Apaga

Propietat Valor Comentaris
Nom Web_connecta Aquest nom l'hem de posar en el requadre Components

El programa es mostra a continuació. La part que correspon a la inicialització és molt senzilla. També ho és la part que correspon als botons que es limita a enviar la comanda GET corresponent. On el programa és més llarg és quan arriba la resposta de la comanda GET.

Si tot ha anta bé (resposta 200) és quan hem d'analitzar el contingut de la resposta per saber l'estat del LED. En cas contrari mostrem un missatge d'error al lloc corresponent. En cas que tot sigui correcte, la resposta serà similar a aquesta:

<!DOCTYPE HTML>
<meta charset='UTF-8'>
<html>
<h1>El LED està apagat</h1>
<p></p>
<p></p>
<a href='/?LED=1'>Encén</a>
<p></p>
<p></p>
<a href='/?LED=0'>Apaga</a>
</html>

Observem que la dada que ens interessa (l'estat del LED) està en el títol, és a dir en una línia que conté la marca <h1>.

Atès que la resposta són diverses línies, farem servir la instrucció split per separar el text en els salts de línia (\n) i guardem el resultat en una llista. Tot seguit fem un bucle sobre tota la llista per trobar a quina línia hi ha la instrucció <h1>. Un cop trobada la línia, hi hauria d'haver la paraula encès o la paraula apagat. Si la trobem actualitzem l'estat del LED a la pantalla, en cas contrari hi deixem la paraula desconegut.

El programa serà el següent:

Programa
Programa

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.