Cómo controlar un led a través de una interfaz web PHP

En este tutorial, vamos a aprender cómo podemos crear una interfaz web con PHP desde la que poder encender y apagar un led conectado a una placa Arduino Uno.

Led controlado por una web

Led controlado por una web

Arduino

Para seguir este tutorial, necesitamos instalar el entorno de desarrollo de Arduino, siguiendo los pasos que vimos en Primeros pasos con Arduino.

Conectaremos el led a la placa Arduino, con una resistencia de 220 Ω , según el esquema:

Esquema de conexión del led

Esquema de conexión del led

Cargamos el código en nuestra placa, que podemos encontrar en mi cuenta Github:

https://github.com/diegorys/arduino-web-control-arduino-led

Lo probaremos abriendo la consola serial del IDE de Arduino. Enviamos en primer lugar un 12, para que asigne el pin al que está conectado el led, y, con un 101 encenderá el led mientras que con un 100 lo apagará, según indica la función «executeOrder«. El resultado que se verá en la consola será el siguiente:

Consola serial

Consola serial

Si vemos que el led se enciende y se apaga, hemos terminado este paso con éxito.

Interfaz web PHP

Para seguir este tutorial, necesitamos instalar el entorno en PHP, para lo que podemos seguir el tutorial de Primeros pasos con WampServer.

A continuación, descargaremos en el directorio donde apunte Apache (configurado en el paso anterior) el código de la web, que podéis encontrar en mi cuenta Github;

https://github.com/diegorys/php-web-control-arduino-led

Una vez tengamos el entorno configurado y el código clonado, crearemos un nuevo sitio web, al que llamaremos, por ejemplo, ledcontrol.dev, y que apuntará al directorio www del código. Para hacerlo, podéis seguir los pasos del tutorial Cómo configurar sitios web en WampServer.

Ahora, vamos a modificar el archivo index.php, líneas 12 y 13.

En la línea 12 debemos indicar el puerto al que está conectada la placa Arduino, El IDE de Arduino lo indica.

define('PORT', "\\\\.\\COM8"); //Puerto serie al que está conectada tu placa.

En la línea 13, indicamos el pin al que está conectado el led en la placa. Si hemos seguido el esquema, estará en el pin 12, por lo que no deberíamos tocar nada, a no ser que queráis probar a conectarlo a otro pin.

define('PIN', 12); //Pin al que está conectado el led.

Creado el nuevo sitio web, con WampServer arrancado (recordad que hay que reiniciarlo cada vez que creamos un nuevo sitio) y el archivo index.php modificado, escribimos la dirección ledcontrol.dev en el navegador. Deberíamos de ver por pantalla lo siguiente:

Interfaz web PHP

Interfaz web PHP

Al pulsar los botones, comprobaremos que el led se apaga y se enciende.

Vídeo

Aquí podemos ver un vídeo del ejemplo en funcionamiento.

Conclusiones

Con este tutorial, hemos aprendido cómo realizar una interfaz amigable para manejar componentes conectados a una placa Arduino. Haciendo ligeras modificaciones en el código, podríamos encender y apagar una lámpara con relé o mover un servo. ¡Probad por vosotros mismos!

 

diegorys

Ingeniero en Informática, apasionado de la robótica, con alma de investigador en nuevas tecnologías, analista programador y profesional del desarrollo ágil en entornos web y smartphones, con amplios conocimientos y experiencia desde antes de 2008 en entornos WAMP/LAMP, experimentando con Arduino desde 2012 y con Raspberry Pi desde 2014.

Share

9 comentarios en “Cómo controlar un led a través de una interfaz web PHP

  1. Andres Martinez

    Hola Diego Buenas noches este es un muy buen tutorial, mira he descargado el codigo y lo he probado en el arduino y todo funciona bien, cargo la pagina y tambein se visualiza bien pero cuadno interactuo con los botones no funciona, no se que cual sea la falla mi servidor esta montado con xampp en windows 7.

    Responder
    1. Lesly

      Hola Diego. Que tal.
      He probado todo tu código pero tengo problemas para poder interactuar con el arduino desde la interfaz de php. Desde la consola de arduino si me manda la señal y enciende el led, lo cambie al pin 13 para no meterle resistencia y me arrojo el COM4… bien desde la interfaz web me dice que no hay ninguna placa conectada al puerto COM4 pero ese es el puerto que esta. No se si tenga que ver algo el que no tenga apache en el equipo, sino que lo subo al server y pues ya sabes, le pongo la direccion ip y la direccion del directorio. Crees que tenga que hacer algo fuera de esto para lograr la conexion? Porque me dicen que quiza tenga que tener una libreria. Ojala pueda leerme y ayudarme, gracias y saludos.

      Responder
  2. diegorys Autor

    Buenos días Andrés,

    Si ya has probado el código Arduino y envías desde la consola serial órdenes y funciona bien, y por otro lado has probado que la web se muestra correctamente, por eliminación, lo más probable es que el puerto al que está conectado Arduino no esté bien definido en el archivo index.php, porque me parecería raro que fuera cosa de Xampp (nunca lo he usado, pero puedo probar a ver).

    define(‘PORT’, «\\\\.\\COM8»); //Puerto serie al que está conectada tu placa.

    Yo lo tenía en el COM8, pero igual tú lo tienes en otro puerto. Esto puedes verificarlo en el IDE de Arduino.

    Si me dices que eso también lo has revisado, nos ponemos a debugear el código.

    Estamos en contacto.

    Responder
  3. gonzalo

    buenas antes que nada agradesco el tutorial , muy bien detallado y bien explicado , no pude ponerlo en practica ya que el archivo index.php de alguna manera lo estoy copiando mal o de forma equibocada ya que al guardarlo en mi servidor local en la web no lo visualiso , la comunicacion serial funciona pero no logro acceder desde la web con php , saludos y desde ya muchas gracias si puedes facilitarme un link con el codigo php o bien ayudarme con este problema , saludos

    Responder
  4. RR

    Buenas tardes Diego, Felictaciones por el tutorial, buenísimo. Ysi quisiera controlar 5 leds, que pasos tendría que hacer?

    Responder
  5. Luis Manuel

    Arduino:1.6.5 (Windows 8.1), Placa:»Arduino/Genuino Uno»
    Marca este error:

    Sketch uses 3.186 bytes (9%) of program storage space. Maximum is 32.256 bytes.
    Global variables use 234 bytes (11%) of dynamic memory, leaving 1.814 bytes for local variables. Maximum is 2.048 bytes.
    avrdude: ser_open(): can’t open device «\\.\COM6»: Acceso denegado.

    Problema subiendo a la placa. Visita http://www.arduino.cc/en/Guide/Troubleshooting#upload para sugerencias.
    This report would have more information with
    «Show verbose output during compilation»
    activala desde Archivo > Preferencias

    Responder
  6. GSJ

    buenas antes que nada agradezco el tutorial , muy bien detallado y bien explicado , no pude ponerlo en practica ya que el archivo index.php de alguna manera lo estoy copiando mal o de forma equivocada ya que al guardarlo en mi servidor local en la web no lo visualiso , estoy ocupando appserver

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.