Arduino web-gecontroleerde lamp: stapsgewijze handleiding

Onderdelen en benodigdheden

Over dit project

Besturing via het web is tegenwoordig de norm. In dit project laat ik zien hoe je een webapplicatie bouwt om een lamp aan en uit te schakelen.

De combinatie van Arduino en PHPoC Shield maakt de Arduino tot een webserver/WebSocket-server. We hebben twee delen nodig:

• Client-side code: een webinterface (HTML/JS) om de lamp te bedienen en status weer te geven. De broncode wordt naar de shield geüpload. Bij een HTTP-verzoek stuurt de shield de geïnterpreteerde bestanden naar de browser.
• Server-side code: draait op de Arduino, luistert naar WebSocket-verzoeken, schakelt het relais en stuurt de lampstatus terug.

De communicatie loopt via WebSocket – ideaal voor realtime toepassingen. De UI gebruikt een SVG-lamp en een knop. Je kunt de UI zo mooi maken als je wilt, of bestaande gratis bronnen gebruiken.

Hardware-opstelling

Stap 1: Monteer de Arduino Uno, PHPoC WiFi Shield en het relaisbord. Sluit de lamp aan op het relais.

Hoe het werkt

De PHPoC Shield fungeert als webserver. De browser (client) stuurt commando's via WebSocket. De Arduino ontvangt deze, schakelt het relais en bevestigt de status.

Code

Client-side: remote_led.php (PHP)

Deze bestand upload je naar de PHPoC Shield. Het bevat HTML, CSS, SVG voor de lamp, en JavaScript voor WebSocket-communicatie met de Arduino.

<html>
<head>
  <title><? echo system("uname -i") ?></title>
  <meta name="viewport" content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes">
  <style>
    body { text-align: center; font-family: verdana, Helvetica, Arial, sans-serif; background: #C2CCD0; }
    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; line-height: 65px; text-align: center; user-select: none; }
  </style>
</head>
<body>
  <div class="container">
    <div class="light-bulb">
      <svg version="1.1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 275.3 413.3">
        <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.8c7.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.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z"/></g>
        <g>... </g> <!-- SVG paden voor lampkap en schakelaar -->
      </svg>
    </div>
    <div class="switches"> Switch </div>
  </div>
  <br><h2 id="ws_state"></h2>
  <script>
    var is_on = 0, ws;
    var button = document.querySelector('.switches');
    var ws_state = document.getElementById("ws_state");
    function init() {
      button.addEventListener("click", toogleLed);
      connect();
    }
    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, '').replace(/:/g, "-") + ".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 = 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() { ws.send(is_on ? "0" : "1"); }
    function display_lightbulb() { document.body.className = is_on ? "active" : ""; }
    window.onload = init;
  </script>
</body>
</html>

Server-side: remoteLed.ino (Arduino)

#include 
#include 
#define ON '1'
#define OFF '0'
byte expansionId = 1;
ExpansionRelayOutput relay(expansionId, 0);
PhpocServer server(80);

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_led");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
  Expansion.begin();
  Serial.println(relay.getName());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    if (client.available() > 0) {
      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;
      }
    }
  }
}

De relaismodule schakelt de lamp. De PHP-pagina op de shield fungeert als webinterface. Na uploaden en aansturen via browser kun je de lamp wereldwijd bedienen.