Club Door App | WordPress / Vue.js / Rasberry Pi and Python

I have been involved in a recent project which has been more advanced. I was charged with finding a plugin that would be able to help memberships grow and be managed online. Linking membership plugin via a custom API to be able to control access to the club building using a QR Code.

There was no strict brief so on understanding the requirements of the club I set about creating the brief for the club. First finding a suitable plugin which I chose ARM from a list of about ten suitable plugins using a staging area of the website. Next to create a Custom API plugin that would be able to lookup the information, and using a small QR Code Generator Library to create a base64 encoded image that could be included in the API Json response.

I then wrote and created a custom Vue.js app that was able to log a user in via the API and return the QR code to the app. Vue.js made the application agnostic of the WordPress site and much faster to work with. I used Bulma CSS which is fairly robust and lightweight for styling and structure.

The next phase was to get a Rasberry Pi Zero W from the PiHut, and a 5volt Relay, a 470Ohm Resistor, a webcam and program it that when somebody scanned the QR code the Python code would call an API that would check if the user was a valid member (or they were not barred) and allow them access. It also logged the time of entry and snapped a picture. This was wired into the existing magnetic door and allowed to activate the Relay for 5-10 Seconds.

Prototype Rasberry Pi Zero W with Webcam, Relay for door entry system
Prototype Rasberry Pi Zero W with Webcam, Relay for door entry system

The script was set to run automatically from boot via a Supervisor script and re-load if it failed.

Some caveats and improvements:

We found that when the internet was down that the system would either not work or be slow, so I altered the custom plugin to write all the members status to a dot file that would then be Rsynched to the PI via SSH keys access every hour. This way the door access could read from a file rather than use the network and could continue to work regardless if the internet was down or not.

The webcam is not the best in low light so we ended up fitting a scanner (RFID/NFC and QR), I will be programming this in as well as the reading of NFC chips when they arrive. We found that some older members struggle with holding the cards up to the camera so next year will be utilising NFC as well as the QR.

I also made the Vue.js app a PWA so that a shorcut can be saved to the desktop of a phone.

Here is the finalised project mounted to the wall:

The advantages of this project:

  • Allows more control over the members from the website
  • Allows new members to sign up and existing members to be able to pay for membership online
  • Keeps a tally of who enters the building via this method so useful for security footage, fire service
  • As members can let themselves in they no longer need to wait for staff to stop serving to push a button to gain entry to the building
  • Allows less contact on surfaces to prevent the spread of Coronavirus