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:
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 anat 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:
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.