Internet de les coses amb ESP32 i ESP8266

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

Controlem el color d'un NeoPixel

En aquest exemple controlarem el color d'un NeoPixel 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 NeoPixel. 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. Tot seguit hi haurà tres controls lliscants, un sota l'altre, que controlaran els tres colors (vermell, verd i blau). A la darrera línia hi haurà un botó sense text ni funció que serà on mostrarem el color actual, un polsador per enviar el nou color i un polsador per consultar l'estat del LED (suposem que pot ser modificat des d'altres llocs). 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_R Aquest nom l'hem de posar en el requadre Components
Width Fill parent

Propietat Valor Comentaris
Nom Label_R Aquest nom l'hem de posar en el requadre Components
Text R:

Propietat Valor Comentaris
Nom Slider_R Aquest nom l'hem de posar en el requadre Components
ColorLeft Pink
ColorRight Red
Width Fill parent
MaxValue 255
MinValue 0
ThumbPosition 127

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

Propietat Valor Comentaris
Nom Label_G Aquest nom l'hem de posar en el requadre Components
Text G:

Propietat Valor Comentaris
Nom Slider_G Aquest nom l'hem de posar en el requadre Components
ColorLeft Custom: #33ff33ff
ColorRight Custom: #009900ff
Width Fill parent
MaxValue 255
MinValue 0
ThumbPosition 127

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

Propietat Valor Comentaris
Nom Label_B Aquest nom l'hem de posar en el requadre Components
Text B:

Propietat Valor Comentaris
Nom Slider_B Aquest nom l'hem de posar en el requadre Components
ColorLeft Cyan
ColorRight Blue
Width Fill parent
MaxValue 255
MinValue 0
ThumbPosition 127

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

Propietat Valor Comentaris
Nom Button_color Aquest nom l'hem de posar en el requadre Components
Text
TextColor None

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

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

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. Hem creat dues funcions, la primera posa el color al botó corresponent i la farem servir cada cop que llegim el color o que es modifiquin els selectors. La segona posa els selectors a la posició que correspon al color actual i la farem servir cada cop que llegim el color. 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à a (0, 0, 0)</h1>
<form action='/' method='get'>
<p></p>
<p>R</p>
<input type='range' name='R' min='0' max='255' value='0'>
<p></p>
<p>G</p>
<input type='range' name='G' min='0' max='255' value='0'>
<p></p>
<p>B</p>
<input type='range' name='B' min='0' max='255' value='0'>
<p></p>
<p></p>
<input type='submit'>
</form>
</html>

Observem que la dada que ens interessa (l'estat del NeoPixel) 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, la descomposem (també amb split) separant pels espais en blanc i ho guardem a la llista. En alguna de les posicions de la llista hi hauria d'haver un parèntesi (, que és on comença l'estat del NeoPixel. En previsió que el microcontrolador no hagués enviat el valor i no hi hagués el parèntesi, ho comprovem. Si no ho ha enviat (linia = 0) posem un color gris neutre i deixem l'estat a desconegut. Si ho ha enviat, anem a processar-lo. El valor de vermell serà el que hi hagi a la línia del parèntesi després d'eliminar la coma i el parèntesi. El valor de verd serà el contingut de la línia següent després d'eliminar la coma i en la darrera línia ens queda el valor de blau seguit de )</h1>. Tornem a dividir, ara pel parèntesi ), i a la primera posició ens quedarà el valor de blau. Un cop tenim els tres valors, els escrivim a l'estat, els posem com a posició dels controls i el posem com a color del botó.

El programa serà el següent:

Programa
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.