Arduino per Web-Pattern-Entsperrung sichern – Einfache Einrichtung & Fernsteuerung

3. Arduino-Code schreiben

• PHPoC-Bibliothek in der Arduino IDE installieren.
• Quellcode ArduinoUnlockExample.ino kompilieren und hochladen.

Testen

1. Seriellen Monitor öffnen → IP-Adresse notieren.
2. Browser: https://<IP-Adresse>/unlock.php
3. „Connect“ klicken und Muster zeichnen.

Code

unlock.php (Web-UI)

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<style>
body { text-align: center; font-size: width/2pt; }
h1, h2, button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
// ... (JavaScript-Code für Pattern-Unlock & Servo-Steuerung via WebSocket)
// Vollständiger Code im Originalprojekt verfügbar.
</script>
</head>
<body>
<h1>Arduino - Web Pattern Unlock</h1>
<div id="unlock_area" style="display:block;">
<canvas id="unlock"></canvas>
</div>
<div id="control_area" style="display:none;">
<canvas id="servo"></canvas>
<p>Winkel: <span id="debug">0</span></p>
</div>
<h2>
<p>WebSocket: <span id="ws_state">null</span></p>
<button id="bt_connect" onclick="connect_onclick()">Connect</button>
</h2>
</body>
</html>

ArduinoUnlockExample.ino

/* Arduino Webserver - Pattern Unlock */
#include <SPI.h>
#include <Phpoc.h>
#include <Servo.h>

#define CMD_AUTH 0
#define CMD_CTRL 1
#define ACCEPTED "202"
#define UNAUTHORIZED "401"

PhpocServer server(80);
Servo servo;
String pattern;
bool authenticated;
unsigned long timeout;
unsigned long lastActiveTime;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("web_pattern");
  Serial.print("WebSocket Server Adresse: ");
  Serial.println(Phpoc.localIP());

  servo.attach(8);
  servo.write(90);
  pattern = String("1,4,8,6,3");
  authenticated = false;
  timeout = 10000; // 10 s
  lastActiveTime = 0;
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    String data = client.readLine();
    if (data) {
      int pos = data.indexOf(':');
      int cmd = data.substring(0, pos).toInt();

      if (cmd == CMD_AUTH) {
        String reqPattern = data.substring(pos+1);
        reqPattern.remove(reqPattern.indexOf(13));
        reqPattern.remove(reqPattern.indexOf(10));
        if (pattern.equals(reqPattern)) {
          authenticated = true;
          sendResponse(ACCEPTED, 3);
          lastActiveTime = millis();
        } else {
          authenticated = false;
          sendResponse(UNAUTHORIZED, 3);
        }
      } else if (cmd == CMD_CTRL) {
        if (authenticated) {
          int angle = data.substring(pos+1).toInt();
          angle = map(angle, 90, -90, 0, 180);
          servo.write(angle);
          lastActiveTime = millis();
        } else {
          sendResponse(UNAUTHORIZED, 3);
        }
      }
    }
  }
  // Timeout-Prüfung
  if (authenticated && ((millis() - lastActiveTime) > timeout)) {
    authenticated = false;
    sendResponse(UNAUTHORIZED, 3);
  }
}

void sendResponse(char *data, int len) {
  server.write(data, len);
}

Schaltplan

Weiterführende Links

• Original PHPoC Pattern Unlock Projekt
• Servo-Steuerung via WebSocket
• PHPoC Arduino Bibliothek