Bombilla controlada por web con Arduino: Guía paso a paso

Componentes y suministros

Sobre este proyecto

El control vía web se ha convertido en una norma hoy en día. En este proyecto simple, te mostraré cómo crear una aplicación que controle una bombilla a través de la web.

Seguramente no es algo nuevo, pero lo que verás es que el control basado en web solo requiere unos pocos pasos para hacerlo tú mismo. Cualquiera con conocimientos de programación web puede crear aplicaciones web para controlar/monitorizar dispositivos.

Componente hardware

Primero, configuramos el hardware. Aquí uso una placa Arduino Uno, un PHPoC WiFi Shield y una PHPoC Arduino Relay Board.

Cómo funciona

Luego viene la parte «basada en web». Combinando el PHPoC Shield, la placa Arduino se convierte en un servidor web / servidor WebSocket. Básicamente necesitamos:

• Código del lado del cliente: proporciona una interfaz de usuario basada en web para controlar la bombilla. La UI debe permitir al usuario enviar el comando de control al servidor web (placa Arduino). La UI también muestra el estado de la bombilla enviado en la respuesta del servidor. Este código fuente de la página web debe subirse al shield. Al recibir una petición HTTP del navegador web (cliente web), el shield (servidor web) enviará los archivos web interpretados al navegador.
• Código del lado del servidor: controla la bombilla basándose en los datos enviados por el navegador web. El código se ejecuta en la placa Arduino, y el flujo es simplemente un bucle que comprueba si hay alguna petición del cliente web para activar el relé y encender/apagar la bombilla, y luego envía el estado de la bombilla al navegador.

En este proyecto, creé un elemento SVG para mostrar la bombilla y un botón para enviar el comando de control desde la web. El navegador web y el servidor web se comunican mediante WebSocket. La conexión WebSocket se adapta a aplicaciones en tiempo real.

Cuanto más esfuerzo dediques a la UI, mejor se verá. Pero no te preocupes, hay montones de recursos compartidos en Internet, así que puedes encontrar código fuente gratuito y genial para la UI en lugar de hacer toda la programación tú mismo.

Gracias por leer :D.

Aprende más sobre relés en este tutorial.

Código

• remote_led.php (lado cliente)
• remoteLed.ino (lado servidor)

remote_led.php PHP

Código del lado del cliente. Debe subirse al PHPoC Shield.

<html> 
<head> 
<title> <? echo system("uname -i") ?> </title> 
<meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport"> 
<style> 
body { text-align: center; font-family: verdana, Helvetica, Arial, sans-serif, gulim; background: #C2CCD0; } 
h2 { font-size: 16px; line-height: 25px; } 
body.active { background: #E2ECF1; } 
#on { opacity: 0; } 
.active #on { opacity: 1; } 
.light-bulb { width: 250px; height: 400px; margin-top: 100px } 
.container { margin: auto; width: 250px; } 
.switches { width: 150px; height: 65px; background-color: #38434A; font-size: 24px; margin: auto; border-radius: 10px; color: white; cursor: pointer; letter-spacing: 0.2px; line-height: 65px; text-align: center; user-select: none; transition: none; } 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="light-bulb"> 
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve"> 
<g> 
<path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8 c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> 
</g> 
<g id="on"> 
<path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8 c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> 
</g> 
<g> 
<path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16 v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5z" /> 
<path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19 h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" /> 
<line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" /> 
<path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9 c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> 
</g> 
<g> 
<path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5 c-12.3-16.1-28.4-29.1-46.9-37.8" /> 
<path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4 c-0.8-2.2-1.8-4.4-2.7-6.5" /> 
</g> 
</svg> 
</div> 
<div class="switches"> Switch </div> 
</div> 
<br> 
<h2 id="ws_state"></h2> 
</body> 
<script> 
var is_on; 
var ws; 
var button = document.querySelector('.switches'); 
var ws_state = document.getElementById("ws_state"); 
function init() { 
  button.addEventListener("click", toogleLed); 
  connect(); 
  is_on = 0; 
} 
function connect() { 
  if (ws == null) { 
    var ws_host_addr = "<? echo _SERVER("HTTP_HOST") ?>"; 
    if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) { 
      ws_host_addr = ws_host_addr.replace(/[\[\]]/g, ''); 
      ws_host_addr = ws_host_addr.replace(/:/g, "-"); 
      ws_host_addr += ".ipv6-literal.net"; 
    } 
    ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc"); 
    ws_state.innerHTML = "Connecting. Please wait!"; 
    ws.onopen = ws_onopen; 
    ws.onclose = ws_onclose; 
    ws.onmessage = ws_onmessage; 
  } else ws.close(); 
} 
function ws_onopen() { 
  ws_state.style.display = "none"; 
  display_lightbulb(); 
} 
function ws_onclose() { 
  button.style.backgroundColor = "#C2C2C2"; 
  ws_state.style.display = ""; 
  ws_state.innerHTML = "<span style='color: gray'>Can not connect to Arduino Board. <br> Please check again and reload this page!</span>"; 
  ws.onopen = null; 
  ws.onclose = null; 
  ws.onmessage = null; 
  ws = null; 
  is_on = 0; 
  display_lightbulb(); 
} 
function ws_onmessage(e_msg) { 
  e_msg = e_msg || window.event; 
  is_on = parseInt(e_msg.data); 
  display_lightbulb(); 
} 
function toogleLed() { 
  if (is_on) ws.send("0"); 
  else ws.send("1"); 
} 
function display_lightbulb() { 
  document.body.className = (is_on) ? "active" : ""; 
} 
window.onload = init; 
</script> 
</html>

remoteLed.ino Arduino

Código del lado del servidor que maneja el control de E/S basado en datos WebSocket enviados desde el navegador web.

#include <Phpoc.h> 
#include <PhpocExpansion.h> 
#define ON '1' 
#define OFF '0' 
byte expansionId = 1; 
ExpansionRelayOutput relay(expansionId, 0); 
PhpocServer server(80); 
void setup() { 
  Serial.begin(9600); 
  while(!Serial) ; 
  // inicializar PHPoC [WiFi] Shield: 
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); 
  //Phpoc.begin(); 
  // iniciar servidor WebSocket 
  server.beginWebSocket("remote_led"); 
  // imprimir dirección IP del PHPoC [WiFi] Shield en monitor serial: 
  Serial.print("WebSocket server address : "); 
  Serial.println(Phpoc.localIP()); 
  Expansion.begin(); 
  // obtener nombre e imprimirlo en serial 
  Serial.println(relay.getName()); 
} 
void loop() { 
  // esperar nuevo cliente: 
  PhpocClient client = server.available(); 
  if (client) { 
    if (client.available() > 0) { 
      // leer un byte entrante del cliente: 
      char thisChar = client.read(); 
      switch(thisChar) { 
        case OFF: 
          Serial.println("Turn LED OFF"); 
          relay.off(); 
          server.write(OFF); 
          break; 
        case ON: 
          Serial.println("Turn LED ON"); 
          relay.on(); 
          server.write(ON); 
          break; 
      } 
    } 
  } 
}