Lâmpada Controlada via Web com Arduino: Guia Passo a Passo

Componentes e Materiais

Sobre o Projeto

Controlar dispositivos via web tornou-se padrão hoje em dia. Neste projeto simples, mostro como criar uma aplicação que controla uma lâmpada pela web.

Não é algo novo, mas o interessante é que o controle baseado em web pode ser feito em poucos passos. Qualquer pessoa com conhecimentos básicos de programação web pode criar aplicações para controlar/monitorar dispositivos.

Componentes de Hardware

Primeiro, configure o hardware. Utilizo uma placa Arduino Uno, um PHPoC WiFi Shield e uma Placa de Relé PHPoC para Arduino.

Como Funciona

Combinando o PHPoC Shield, o Arduino torna-se um servidor Web/WebSocket. Basicamente precisamos de:

+ Código do lado cliente: fornece uma Interface de Usuário baseada na web para controlar a lâmpada. A UI deve permitir enviar comandos de controle ao servidor web (placa Arduino). Também exibe o status da lâmpada enviado na resposta do servidor. Este código fonte da página web deve ser enviado ao shield. Ao receber requisição HTTP do navegador (cliente web), o shield (servidor web) envia os arquivos web interpretados ao navegador.

+ Código do lado servidor: controla a lâmpada com base nos dados enviados pelo navegador. O código roda no Arduino, e o fluxo é basicamente um loop que verifica se há requisição do cliente web para ligar/desligar o relé e, em seguida, envia o status da lâmpada ao navegador.

Neste projeto, criei um elemento SVG para exibir a lâmpada e um botão para enviar o comando de controle via web. O navegador e o servidor comunicam-se via WebSocket, ideal para aplicações em tempo real.

Quanto mais esforço você dedicar à UI, melhor será a aparência. Mas não se preocupe — há muitos recursos gratuitos na internet, então você pode encontrar código fonte legal para a UI em vez de programar tudo sozinho.

Código

remote_led.php PHP

Código do lado cliente. Deve ser enviado ao 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,10,141.4 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 = ""; 
      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 = "Conectando. Aguarde!"; 
      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'>Não foi possível conectar à placa Arduino. <br> Verifique e recarregue a página!</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 do lado servidor que controla I/O baseado nos dados WebSocket enviados pelo navegador.

#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); 
  
  // Inicializa PHPoC [WiFi] Shield: 
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); 
  // Phpoc.begin(); 
  
  // Inicia servidor WebSocket 
  server.beginWebSocket("remote_led"); 
  
  // Imprime endereço IP do PHPoC [WiFi] Shield no monitor serial: 
  Serial.print("Endereço do servidor WebSocket: "); 
  Serial.println(Phpoc.localIP()); 
  
  Expansion.begin(); 
  // Obtém nome e imprime no serial 
  Serial.println(relay.getName()); 
} 

void loop() { 
  // Aguarda novo cliente: 
  PhpocClient client = server.available(); 
  if (client) { 
    if (client.available() > 0) { 
      // Lê byte recebido do cliente: 
      char thisChar = client.read(); 
      switch(thisChar) { 
        case OFF: 
          Serial.println("Desligar LED"); 
          relay.off(); 
          server.write(OFF); 
          break; 
        case ON: 
          Serial.println("Ligar LED"); 
          relay.on(); 
          server.write(ON); 
          break; 
      } 
    } 
  } 
}