Arduino - ontgrendeling webpatroon
Componenten en benodigdheden
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
Over dit project
Inleiding
Als je een beginner bent, raad ik je aan de volgende tutorials te lezen:
- Arduino - Motor
- Arduino - servomotor
- Arduino - Wifi
U bent wellicht bekend met het ontgrendelingspatroon wanneer u uw telefoon opent. Nu is deze functie beschikbaar op Arduino. Het voorkomt dat onbevoegden Arduino kunnen besturen/bewaken.
De gebruiker kan de code in dit project vrij hergebruiken voor andere toepassingen. Voor de eenvoud neem ik de servomotorbesturing als voorbeeld.
Dit idee komt voort uit twee projecten, die zijn geschreven voor het PHPoC-platform:
- 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
Ik pas ze aan voor Arduino.
In dit project heb ik PHPoC WiFi Shield gebruikt om Arduino met internet te verbinden omdat:
- PHPoC Shield ondersteunt websocket, wat handig is voor dit project.
- PHPoC Shield heeft een speciale ingebouwde webserver, waardoor de ingebouwde webtoepassing op het schild kan worden opgeslagen.
PHPoC Shield heeft een aantal ingebouwde webapplicaties waarmee de gebruiker een embedded webapplicatie kan gebruiken om Arduino te besturen/monitoren zonder enige kennis van webprogrammering.
Met PHPoC Shield kunnen gebruikers die een webapplicatie kunnen programmeren ook hun eigen webapplicatie ontwikkelen en deze opslaan op PHPoC Shield.
Demonstratie
Gegevensstroom
Webbrowser <---> PHPoC WiFi Shield <---> Arduino

Hoe het werkt
Wanneer de gebruiker zijn patroon in de webbrowser tekent, wordt het patroon toegewezen aan een tekenreeks. Deze patroonreeks wordt via WebSocket (via PHPoC Shield) naar Arduino gestuurd.
Wanneer Arduino de invoerpatroonreeks ontvangt, vergelijkt deze de ontvangen reeks met hardgecodeerde patroonreeks in Arduino. Als ze overeenkomen, stuurt Arduino de GEACCEPTEERDE code terug naar de client (webbrowser) en stelt de geverifieerde variabele in naar waar. Anders stuurt Arduino de DENIED-code naar de client en stelt de geverifieerde variabele in naar onwaar.
Wanneer Arduino een besturingsopdracht van de gebruiker ontvangt, controleert het de waarde van de geverifieerde variabele eerst. Als de waarde waar is, voert het de taak uit die overeenkomt met het commando. Als de waarde onwaar is, stuurt het de DENIED-code naar de klant.
Patroontoewijzing

Patroon wordt toegewezen aan een string. In de bovenstaande afbeelding is de patroontekenreeks bijvoorbeeld "1, 4, 8, 6, 3".
Er wordt een time-out ingesteld. Als de gebruiker na verloop van tijd geen activiteit heeft, is de authenticatie verlopen en moet de gebruiker het patroon opnieuw invoeren om Arduino te ontgrendelen.
Broncode bevat twee bestanden:
- ArduinoUnlockExample.ino:wordt gecompileerd en geüpload naar Arduino via Arduino IDE
- unlock.php:dit is webapp-code, het wordt geüpload naar PHPoC-schild via PHPoC Debugger.
Wat we moeten doen
- Wifi-informatie instellen voor PHPoC-schild (SSID en wachtwoord)
- Upload nieuwe gebruikersinterface naar PHPoC-schild
- Schrijf Arduino-code
Wifi-informatie instellen voor PHPoC Shield
Zie deze instructie.
Upload nieuwe web-UI naar PHPoC Shield
- Download PHPoC-broncode unlock.php (in het codegedeelte).
- Download twee volgende afbeeldingen voor het besturen van de servomotor


- Upload het naar PHPoC Shield met PHPoC debugger volgens deze instructie (let op:verwijder het bestaande bestand op PHPoC Shield NIET)
Schrijf Arduino-code
- Installeer PHPoC-bibliotheek voor Arduino op Arduino IDE (zie de instructie )
- Zie broncode in codesectie.
- Compileren en uploaden naar Arduino via Arduino IDE
Probeer het
- Klik op de seriële knop op Arduino IDE om het IP-adres te zien.
- Open webbrowser, typ
http://
replace_ip_address
/unlock.php
- Klik op de knop Verbinden en test het.
De beste Arduino-starterkit voor beginners
Als u op zoek bent naar een Arduino-kit, zie dan De beste Arduino-kit voor beginners
Functiereferenties
- Arduino - Servobibliotheek
- Servo.attach()
- Servo.write()
- Servo.writeMicroseconds()
- Servo.read()
- Servo.attached()
- Servo.detach()
- Serial.begin()
- Serial.println()
- vertraging()
- millis()
- for-lus
- terwijl-lus
- indien anders
- loop()
- setup()
- String.toInt()
- String.substring()
- String.indexOf()
- String.remove()
- String.equals()
Code
- unlock.php
- ArduinoUnlockExample
unlock.phpPHP
Dit is de webgebruikersinterfaceArduino - PHPoC Shield
Arduino - ontgrendeling webpatroon
WebSocket:null
ArduinoUnlockExampleArduino
/* arduino webserver - patroon ontgrendelen */#include "SPI.h"#include "Phpoc.h"#include#define CMD_AUTH 0#define CMD_CTRL 1#define ACCEPTED "202"#define NIET-GEAUTORISEERDE "401" PhpocServer-server (80); Servo-servo; Stringpatroon; bool geverifieerd; niet-ondertekende lange time-out; niet-ondertekende lange lastActiveTime; ongeldige setup () { Serial.begin (9600); while(!Serial); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); server.beginWebSocket("web_pattern"); Serial.print("WebSocket-serveradres:"); Serial.println(Phpoc.localIP()); servo.attach(8); // hecht de servo op pin 8 aan het servo-object servo.write (90); patroon =String ("1,4,8,6,3"); geauthenticeerd =onwaar; time-out =10000; // 10000 milliseconde lastActiveTime =0;}void loop() {// wacht op een nieuwe client: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 (GEACCEPTEERD, 3); lastActiveTime =millis(); } else { //Serial.print(reqPattern); geauthenticeerd =onwaar; sendResponse (ONBEVOEGD, 3); } } else if(cmd ==CMD_CTRL) {if(authenticated) {int angle =data.substring(pos+1).toInt(); //hoek =kaart (hoek, -90, 90, 0, 180); hoek =kaart (hoek, 90, -90, 0, 180); servo.schrijven (hoek); lastActiveTime =millis(); Serial.println(hoek); } else { sendResponse (ONBEVOEGD, 3); } } } } if (geverifieerd &&((millis() - lastActiveTime)> time-out)){ authenticated =false; sendResponse (ONBEVOEGD, 3); }}void sendResponse(char *data, int len) { server.write(data, len); }
Schema's

Productieproces