Arduino - Freischaltung von Webmustern
Komponenten und Verbrauchsmaterialien
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
Über dieses Projekt
Einführung
Wenn Sie Anfänger sind, empfehle ich Ihnen, die folgenden Tutorials zu lesen:
- Arduino - Motor
- Arduino - Servomotor
- Arduino - WLAN
Möglicherweise kennen Sie das Entsperrmuster, wenn Sie auf Ihr Telefon zugreifen. Jetzt ist diese Funktion auf Arduino verfügbar. Es verhindert, dass unbefugte Personen Arduino steuern/überwachen.
Der Benutzer kann den Code in diesem Projekt für andere Anwendungen frei wiederverwenden. Der Einfachheit halber nehme ich als Beispiel die Servomotorsteuerung.
Diese Idee stammt aus zwei Projekten, die für die PHPoC-Plattform geschrieben wurden:
- https://www.hackster.io/iot_lover/web-based-pattern-unlock-for-iot-device-aeaf44.
- https://forum.phpoc.com/articles/tutorials/350-servo-motor-controlling-servo-motor-via-websocket-with-graphic-ui
Ich passe sie für Arduino an.
In diesem Projekt habe ich PHPoC WiFi Shield verwendet, um Arduino mit dem Internet zu verbinden, weil:
- PHPoC Shield unterstützt Websocket, was für dieses Projekt praktisch ist.
- PHPoC Shield verfügt über einen dedizierten eingebetteten Webserver, der es ermöglicht, die eingebettete Webanwendung auf dem Shield zu speichern.
PHPoC Shield verfügt über einige integrierte Webanwendungen, mit denen der Benutzer eine eingebettete Webanwendung zur Steuerung/Überwachung von Arduino verwenden kann, ohne dass Kenntnisse in der Webprogrammierung erforderlich sind.
Außerdem ermöglicht PHPoC Shield den Benutzern, die Webanwendungen programmieren können, ihre eigene Webanwendung zu entwickeln und sie auf PHPoC Shield zu speichern.
Vorführung
Datenfluss
Webbrowser <---> PHPoC WiFi Shield <---> Arduino

Wie es funktioniert
Wenn der Benutzer sein Muster im Webbrowser zeichnet, wird das Muster einer Zeichenfolge zugeordnet. Diese Musterzeichenfolge wird über WebSocket (über PHPoC Shield) an Arduino gesendet.
Wenn Arduino die Eingabemusterzeichenfolge empfängt, vergleicht es die empfangene Zeichenfolge mit der hartcodierten Musterzeichenfolge in Arduino. Wenn sie übereinstimmen, sendet Arduino den ACCEPTED-Code zurück an den Client (Webbrowser) und setzt die authentifizierte Variable zu wahr. Andernfalls sendet Arduino den DENIED-Code an den Client und setzt die authentifizierte Variable zu falsch.
Wenn Arduino einen Steuerbefehl vom Benutzer erhält, überprüft es den Wert der authentifizierten Variablen Erste. Wenn der Wert wahr ist, führt es die dem Befehl entsprechende Aufgabe aus. Wenn der Wert falsch ist, wird der DENIED-Code an den Client gesendet.
Musterzuordnung

Das Muster wird einem String zugeordnet. Im obigen Bild ist die Musterzeichenfolge beispielsweise "1, 4, 8, 6, 3".
Es wird eine Zeitüberschreitung festgelegt. Wenn der Benutzer nach einiger Zeit keine Aktivität hat, ist die Authentifizierung abgelaufen. Der Benutzer muss das Muster erneut eingeben, um Arduino zu entsperren.
Quellcode enthält zwei Dateien:
- ArduinoUnlockExample.ino:wird kompiliert und über die Arduino IDE auf Arduino hochgeladen
- unlock.php:Dies ist der Web-App-Code, er wird über den PHPoC-Debugger in den PHPoC-Schild hochgeladen.
Was wir tun müssen
- WLAN-Informationen für PHPoC-Schild festlegen (SSID und Passwort)
- Neue Benutzeroberfläche auf PHPoC-Schild hochladen
- Arduino-Code schreiben
WLAN-Informationen für PHPoC Shield einstellen
Siehe diese Anleitung.
Neue Web-Benutzeroberfläche in PHPoC Shield hochladen
- Download des PHPoC-Quellcodes unlock.php (im Codebereich).
- Laden Sie zwei der folgenden Bilder zur Steuerung des Servomotors herunter


- Laden Sie es mit dem PHPoC-Debugger gemäß dieser Anleitung auf PHPoC Shield hoch (beachten Sie, dass die vorhandene Datei auf PHPoC Shield NICHT gelöscht wird)
Arduino-Code schreiben
- Installieren Sie die PHPoC-Bibliothek für Arduino auf der Arduino IDE (siehe die Anleitung)
- Siehe Quellcode im Codeabschnitt.
- Über die Arduino IDE kompilieren und auf Arduino hochladen
Probieren Sie es aus
- Klicken Sie auf die serielle Schaltfläche in der Arduino IDE, um die IP-Adresse anzuzeigen.
- Öffnen Sie den Webbrowser, geben Sie
http://
einreplace_ip_address
/unlock.php
- Klicken Sie auf die Schaltfläche "Verbinden" und testen Sie es.
Das beste Arduino Starter Kit für Anfänger
Wenn Sie nach einem Arduino-Kit suchen, lesen Sie Das beste Arduino-Kit für Anfänger
Funktionsreferenzen
- Arduino - Servobibliothek
- Servo.attach()
- Servo.write()
- Servo.writeMicroseconds()
- Servo.read()
- Servo.attached()
- Servo.detach()
- Seriell.begin()
- Seriell.println()
- verzögerung()
- millis()
- for-Schleife
- while-Schleife
- wenn sonst
- Schleife()
- setup()
- String.toInt()
- String.substring()
- String.indexOf()
- String.remove()
- String.equals()
Code
- entsperren.php
- ArduinoUnlockBeispiel
unlock.phpPHP
Dies ist die Web-BenutzeroberflächeArduino - PHPoC Shield
Arduino - Web Pattern Unlock
WebSocket:null
ArduinoUnlockExampleArduino
/* Arduino-Webserver - Muster entsperren */#include "SPI.h"#include "Phpoc.h"#include#define CMD_AUTH 0#define CMD_CTRL 1#define ACCEPTED "202"#define UNAUTHORIZED "401"PhpocServer-Server (80);Servo-Servo;String-Muster;Bool authentifiziert;Unsigned Long Timeout;Unsigned Long LastActiveTime;Void setup() { Serial.begin (9600); while(!Seriell); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); server.beginWebSocket("web_pattern"); Serial.print("WebSocket-Serveradresse:"); Serial.println (Phpoc.localIP()); servo.attach(8); // verbindet das Servo an Pin 8 mit dem Servo-Objekt servo.write (90); Muster =String("1,4,8,6,3"); authentifiziert =falsch; Zeitüberschreitung =10000; // 10000 Millisekunden lastActiveTime =0;}void loop() { // auf einen neuen Client warten: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)) { authentifiziert =wahr; sendResponse(AKZEPTIERT, 3); lastActiveTime =millis(); aufrechtzuerhalten. Sonst {//Serial.print (reqPattern); authentifiziert =falsch; sendResponse(UNAUTHORIZED, 3); } } else if(cmd ==CMD_CTRL) { if(authenticated) {int angle =data.substring(pos+1).toInt(); // Winkel =Karte (Winkel, -90, 90, 0, 180); Winkel =Karte (Winkel, 90, -90, 0, 180); servo.write (Winkel); lastActiveTime =millis(); Serial.println (Winkel); aufrechtzuerhalten. Sonst { sendResponse (UNAUTHORIZED, 3); } } } } if (authentifiziert &&((millis() - lastActiveTime)> timeout)){authentifiziert =false; sendResponse(UNAUTHORIZED, 3); }}void sendResponse(char *data, int len) { server.write(data, len); }
Schaltpläne

Herstellungsprozess