Hoy os traemos el primero de los tutoriales para crear interfaces web con Arduino YUN. Utilizaremos Bootstrap para simplificar la inclusión de nuevos elementos y dejar en lo posible la parte de programación web aparte, para poder centrarnos en el YUN.
En los anteriores tutoriales, hemos visto como dar los primeros pasos con nuestro yun, y como instalar el software complementario, por lo que ya tendremos nuestro entorno de trabajo configurado.
Para simplificar la parte web, os dejamos una descarga con el zip que contiene el primer esquema html, el cual utilizaremos como base e iremos modificando en los sucesivos tutoriales. Será nuestra plantilla para no tener que subir de nuevo los archivos de bootstrap y realizar las modificaciones para la recarga por ajax, webapp etc…
Simplemente tendremos que subir la carpeta web a /www en nuestro yun por SFTP, y conectarnos a nuestro yun con la url http://xxxxx.local/web
En esta primera aproximación, controlaremos 2 pines del arduino, conectados a una placa dual de relés (o 2 leds), desde los que podremos controlar 2 cargas, tanto AC como DC de hasta 220V y 10A. Es un ejemplo simple, lo tomaremos como comprobación de que tenemos todo correctamente instalado, y nuestro entorno de desarrollo funcionando al 100%.
Inicialmente no será una prioridad la estética de la app, para tener un código legible y comprensible por todos, e iremos subiendo un poco el nivel en los siguientes tutoriales, aunque seguiremos colgando los proyectos para probarlos directamente sin tocar código para los que no estéis acostumbrados al lenguaje html.
En la plantilla hemos añadido el poder agregar como WebApp en ios, por lo que la primera vez que abráis la web podéis escoger la opción de “agregar a pantalla de inicio”, con lo que desaparecerá la barra de direcciones, quedando mucho mas estética en el mismo, y con un acceso sencillo y rápido.
Todas las peticiones se realizan mediante Ajax, por lo que no hay recarga de página, se realiza todo de forma dinámica 
En esta primera versión la comunicación es unidireccional, no tenemos feedback del estado del relé antes de accionarlo, ni de si se ha recibido ok la petición. Esta parte la iremos desarrollando en sucesivos tutoriales, para que todos tengamos claro como realizarla y adaptarla, sin entrar demasiado en la parte de programación web.
El el zip del proyecto encontraréis la carpeta “web“, la cual debemos de subir al sistema de ficheros del yun en la carpeta /www, y un sketch para cargar en el yun. Es el ejemplo bridge, pero modificado para poner como salidas en el arranque los pines que definamos, nosotros hemos escogido el pin 10 y 11, pero podéis variarlos cambiándolos en el index y en el setup del sketch
Sketch:
void setup() {
// Bridge startup
pinMode(13,OUTPUT);
pinMode(10,OUTPUT);
pinMode(11,OUTPUT);
digitalWrite(13, LOW);
Bridge.begin();
digitalWrite(13, HIGH);
Index.html:
onclick=”setValue(‘10/1′)
En el evento onclick, tenemos 2 valores, el primero es el pin al que enviamos el comando, y el segundo el valor a escribir en el mismo.
Otra de las modificaciones que podremos realizar es escribir en su eeprom los últimos valores, por lo que si en algún momento hay un corte de luz, recupere su estado anterior sin intervención por nuestra parte
Quedamos a la espera de vuestros comentarios y sugerencias para los próximos tutoriales !
