[Tutorial] Primera interface web para Arduino YUN

post
1-yun-description-block

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…

descargar

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.

captura_web

 

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.

captura_icono_webapp       captura_webapp

 

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 !

descargar

9 comentarios en “[Tutorial] Primera interface web para Arduino YUN

  • Arcadi Sabate on febrero 9th, 2015

    Me gusta el blog.
    En web con Arduino Yun , el arduino yun como tiene que estar configurado
    comp api rest sin contraseña
    dentro de una red
    o en 192.168.240.1

    • arduinoprincipal on febrero 10th, 2015

      Hola!

      Para seguir el tutorial puede estar tanto dentro de una red, como en modo “Ad-hock” conectado directo al Yún.

      El api rest debe de estar sin contraseña, no son proyectos críticos si no de testing. Si fuera una aplicación real, se podría poner contraseña y enviarla en la petición URL.

      Un saludo!

  • Arcadi sabate on febrero 10th, 2015

    Gracias por tu respuesta:
    Ya he visto que funciona perfectamente
    ¿cuando publicaras, la aplicación para ver una webcam?

    Saludos

  • NElson on marzo 25th, 2015

    hola
    gracias por el tutorail, pero tengo una consulta, como subo la pagina al arduino, espero no molestar =) Gracias

  • Steven Campos on julio 1st, 2015

    hola! realizas muy Buenos tutoriales,

    he estado siguiendo todos, me llaman mucho la atención, pero tengo una pequeña duda, como hago para subir la carpeta llamada web al sistema de ficheros del Arduino yún en la carpeta www, es que no me ha quedado claro, espero me ayudes y disculpa mi ignorancia soy nuevo en el tema.

    Saludos,

  • arduinoprincipal on julio 1st, 2015

    Tienes que conectar con un programa de sftp al yun. Puedes usar Cyberduck en mac, y ssh secure shell client en windows.

    Ahí le das a conectar / conexión sftp. Pones la ip del yun, usuario y pass y ya puedes subir gráficamente los archivos.

    https://www.youtube.com/watch?v=-jV_Q3Rw69M

    Un saludo!

    • Steven Campos on julio 4th, 2015

      Gracias, me sirvio de maravilla!

      Sigue subiendo mas tutoriales saludos,

  • Armando on octubre 12th, 2015

    QUE TAL, muy buen tutorial, pero si quisiera agregar una lectura de un sensor, que requeriría el html?
    Espero su pronta respuesta. gracias.

  • Alan on diciembre 15th, 2015

    WOW!!! excelente
    buscaba por meses (no miento) y por fin encontré el tutorial perfecto, porfavor siguelos subiendo.
    Ahora terminar de entender las funciones del servidor

    Gracias

Dejar una respuesta

Categorías

Entradas recientes

Comentarios recientes

Archivos

Meta