Glühlampe per Web steuern – Arduino UNO + PHPoC Shield Schritt für Schritt

Komponenten und Zubehör

Projektbeschreibung

Webbasierte Steuerung ist heute Standard. Dieses Projekt zeigt, wie Sie mit wenigen Schritten eine eigene Web-App zur Lampensteuerung erstellen – ideal für Einsteiger in IoT und Webprogrammierung.

Hardware-Aufbau

Arduino UNO + PHPoC WiFi Shield + PHPoC Relais-Board. Die Lampe wird über das Relais geschaltet. Das Shield versorgt den Arduino mit Strom und stellt die WiFi-Verbindung her.

Funktionsweise

Das PHPoC Shield macht den Arduino zum Webserver/WebSocket-Server. Es werden zwei Code-Teile benötigt:

• Client-Seite (PHP/HTML/JS): Liefert die Benutzeroberfläche (SVG-Glühlampe + Schalter). Wird auf dem Shield gespeichert und bei HTTP-Request an den Browser ausgeliefert. Kommunikation per WebSocket (Echtzeit).
• Server-Seite (Arduino-Sketch): Lauscht auf WebSocket-Nachrichten, schaltet das Relais ein/aus und sendet den Status zurück.

Client-Code (remote_led.php)

Enthält HTML5, CSS für die Lampe (SVG), JavaScript für WebSocket-Verbindung und UI-Logik. Die Datei wird auf den PHPoC Shield hochgeladen.

Server-Code (remoteLed.ino)

#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 && client.available() > 0) {
    char cmd = client.read();
    switch(cmd) {
      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;
    }
  }
}

Hinweise

• Die UI lässt sich mit kostenlosen Web-Ressourcen beliebig aufwerten.
• WebSocket eignet sich ideal für Echtzeit-Anwendungen.
• Relais-Tutorial verlinkt im Originalprojekt.