Arduino - Desbloqueo de patrones web
Componentes y suministros
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
Acerca de este proyecto
Introducción
Si eres principiante, te recomiendo leer los siguientes tutoriales:
- Arduino - Motor
- Arduino - Servo motor
- Arduino - Wifi
Es posible que esté familiarizado con el patrón de desbloqueo cuando acceda a su teléfono. Ahora esta función está disponible en Arduino. Evita que personas no autorizadas controlen / monitoreen Arduino.
El usuario puede reutilizar libremente el código de este proyecto para otra aplicación. En aras de la simplicidad, tomo el control del servomotor como ejemplo.
Esta idea se origina en dos proyectos, que está escrito para la plataforma PHPoC:
- 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
Los adapto para Arduino.
En este proyecto, utilicé PHPoC WiFi Shield para conectar Arduino a Internet porque:
- PHPoC Shield es compatible con websocket, que es conveniente para este proyecto.
- PHPoC Shield tiene un servidor web integrado dedicado, que permite almacenar la aplicación web integrada en el escudo.
PHPoC Shield tiene algunas aplicaciones web integradas que permiten al usuario utilizar una aplicación web incorporada para controlar / monitorear Arduino sin requerir ningún conocimiento de programación web.
Además, PHPoC Shield permite a los usuarios que pueden programar una aplicación web desarrollar su propia aplicación web y almacenarla en PHPoC Shield.
Demostración
Flujo de datos
Navegador web <---> PHPoC WiFi Shield <---> Arduino

Cómo funciona
Cuando el usuario dibuja su patrón en el navegador web, el patrón se asigna a una cadena. Esta cadena de patrón se envía a Arduino a través de WebSocket (a través de PHPoC Shield).
Cuando Arduino recibe la cadena de patrón de entrada, comparará la cadena recibida con la cadena de patrón codificada en Arduino. Si coinciden, Arduino envía el código ACEPTADO de nuevo al cliente (navegador web) y establece la variable autenticada a la verdad. De lo contrario, Arduino envía el código DENEGADO al cliente y establece la variable autenticada a falso.
Cuando Arduino recibe un comando de control del usuario, verificará el valor de la variable autenticada primero. Si el valor es verdadero, realiza la tarea correspondiente al comando. Si el valor es falso, envía el código DENEGADO al cliente.
Asignación de patrones

El patrón se asignará a una cadena. Por ejemplo, en la imagen de arriba, la cadena del patrón es "1, 4, 8, 6, 3".
Se establece un tiempo de espera. Después de un período de tiempo, si el usuario no tiene ninguna actividad, la autenticación expira, el usuario debe ingresar el patrón nuevamente para desbloquear Arduino.
El código fuente incluye dos archivos:
- ArduinoUnlockExample.ino:se compila y se carga en Arduino a través de Arduino IDE
- unlock.php:este es el código de la aplicación web, se carga en el escudo PHPoC a través del depurador PHPoC.
Qué debemos hacer
- Configure la información de Wifi para el escudo PHPoC (SSID y contraseña)
- Sube una nueva interfaz de usuario al escudo PHPoC
- Escriba el código Arduino
Configuración de la información de Wi-Fi para PHPoC Shield
Vea esta instrucción.
Subir nueva interfaz de usuario web a PHPoC Shield
- Descargue el código fuente de PHPoC unlock.php (en la sección de códigos).
- Descargue las dos imágenes siguientes para controlar el servomotor


- Súbelo al escudo PHPoC usando el depurador PHPoC de acuerdo con esta instrucción (tenga en cuenta que NO elimine el archivo existente en el escudo PHPoC)
Escribir código Arduino
- Instale la biblioteca PHPoC para Arduino en Arduino IDE (consulte las instrucciones)
- Consulte el código fuente en la sección de código.
- Compile y cargue en Arduino a través de Arduino IDE
Pruébelo
- Haga clic en el botón de serie en Arduino IDE para ver la dirección IP.
- Abra el navegador web, escriba
http://
replace_ip_address
/unlock.php
- Haga clic en el botón Conectar y pruébelo.
El mejor kit de inicio de Arduino para principiantes
Si está buscando un kit de Arduino, consulte El mejor kit de Arduino para principiantes
Referencias de funciones
- Arduino - Servo Library
- Servo.attach ()
- Servo.write ()
- Servo.writeMicroseconds ()
- Servo.read ()
- Servo.attached ()
- Servo.detach ()
- Serial.begin ()
- Serial.println ()
- retraso ()
- milis ()
- para bucle
- ciclo while
- si es otra cosa
- bucle ()
- configuración ()
- String.toInt ()
- String.substring ()
- String.indexOf ()
- String.remove ()
- String.equals ()
Código
- unlock.php
- ArduinoUnlockExample
unlock.php PHP
Esta es la interfaz de usuario webArduino - PHPoC Shield
Arduino - Desbloqueo de patrones web
WebSocket: nulo
ArduinoUnlockExample Arduino
/ * servidor web arduino - patrón de desbloqueo * / # incluye "SPI.h" #include "Phpoc.h" #include#define CMD_AUTH 0 # define CMD_CTRL 1 # define ACCEPTED "202" #define NO AUTORIZADO "401" Servidor PhpocServer (80); Servo servo; Patrón de cadena; bool autenticado; tiempo de espera largo sin firmar; último tiempo activo sin firmar; void setup () {Serial.begin (9600); mientras (! Serial); Phpoc.begin (PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin (); server.beginWebSocket ("web_pattern"); Serial.print ("Dirección del servidor WebSocket:"); Serial.println (Phpoc.localIP ()); servo.attach (8); // conecta el servo en el pin 8 al objeto servo servo.write (90); patrón =Cadena ("1,4,8,6,3"); autenticado =falso; tiempo de espera =10000; // 10000 milisegundos lastActiveTime =0;} void loop () {// espera un nuevo cliente:PhpocClient client =server.available (); if (cliente) {String data =client.readLine (); if (datos) {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 (patrón.equals (reqPattern)) {autenticado =verdadero; sendResponse (ACEPTADO, 3); lastActiveTime =millis (); } else {//Serial.print(reqPattern); autenticado =falso; sendResponse (NO AUTORIZADO, 3); }} else if (cmd ==CMD_CTRL) {if (autenticado) {ángulo int =data.substring (pos + 1) .toInt (); // ángulo =mapa (ángulo, -90, 90, 0, 180); ángulo =mapa (ángulo, 90, -90, 0, 180); servo.write (ángulo); lastActiveTime =millis (); Serial.println (ángulo); } else {sendResponse (NO AUTORIZADO, 3); }}}} if (autenticado &&((millis () - lastActiveTime)> tiempo de espera)) {autenticado =falso; sendResponse (NO AUTORIZADO, 3); }} void sendResponse (char * data, int len) {server.write (data, len); }
Esquemas

Proceso de manufactura