Remote door

Small full stack application with a single purpose: to open entrance door hooked up to the internet-connected relay. The app intends to design cartoon-like interface of the door without sacrificing usability. It is a drawing of a door, that user can swipe and open the real door. Live example (actual door is somewhere in Berlin) can be found here: https://133.conformity.io.

One of the challenges was to prevent user confusion by clear communication of the door states without use of words. The door have loading, open or offline states represented graphically:

Code Structure

The project consist of two main parts, connected through MQTT brocker

• firmware – ESP-based internet-connected relay
• src – Node.js + React.js full stack web application

Hardware

The project is designed to run on a $5 Sonoff Basic module, that should be modified and reflashed with the provided firmware.

How to make your own door

1. Install MQTT-brocker or register on a public one
2. Setup hardware (Sonoff or any other ESP-based board would work)
   1. Add ESP support to Arduino IDE and PubSubClient library
   2. Copy configuration-example.h to configuration.h and fill information about wifi and mqtt server
   3. Open up firmware in the Arduino IDE
   4. Connect module to your serial adapter, build and upload
   5. Test the mqtt connection by listening on defined outTopic and sending letter o to the inTopic
   6. If you using Sonoff Basic module, be carefull with the main power! You will need to modify it's PCB and disconnect the relay from the mains, in order to drive low-power door switch
   7. Connect NORMALLY OPEN relay to the ESP and to the switch contacts that opens up the door
3. Setup dev server
   1. Download the code to your local environment
   2. Copy configuration-example.json to configuration.json and edit it
   3. Run npm i && npm run dev in terminal inside root of the project (install modern verion of node.js if you don't have it)
   4. Open localhost:7001 in your browser
4. Make a new door component
   1. Draw your door using a vector graphics editor (Illustrator would be ok), try to keep door in the middle
   2. Separate door and it's frame into different layers/groups
   3. Export drawing to SVG
   4. Copy any existing door component and replace SVG code inside. Optionally, embedded css code can be moved into a separate file
   5. Find door group inside CSS and apply doorTransformStyle and doorAnimationClass just like in the examples
   6. Add newly created component to the list in DoorSelector.js
   7. Edit componentName property inside configuration.json to replace it with a newly created component name
   8. Debug problems localhost:7001 using browser console
5. Deploy the project. src/pm2.config.js can be used to start keep server-side code running