In the last a few months, I built a "make it rain" device that is controlled by mobile.
The client is a web app running on a user's mobile to control the custom-built cash launcher.
This app connects to the server running in the Raspberry Pi that is installed inside cash launcher. It uses WebSocket to transmit controlling data like device orientation and swipe speed to the server in real-time. The server uses such data to control the physical Cash Launcher, e.g. panning, tilting and enabling the motor.
The app comes with 2 pages:
The app is built with Vue 3. Routing is handled by vue-router. To achieve the best performance on mobile, the rendering of banknote stacks is built with konva, an HTML 2d canvas library. rxjs is used to help pipe data from user actions and device orientation events to WebSockets.
The server is an HTTPS + WebSocket server that transforms the controlling data from the web client to operate the cash launcher from Raspberry Pi.
It uses the ws library to accept WebSocket connections from the client. It has 2 endpoints: /orientation and /velocity. It transforms the device orientation and swiping velocity sent from the client to PWM signals and enabling signals, which are used to control the 2 servos and 1 motor connected to Raspberry Pi. The low-level GPIO operations are handled by the rpio package. rxjs is also used to help with the data transformation.
As the server is secured using HTTPS, a pair of key and certifications files namely key.pem and crt.pem need to be put under the project root before running the server.
The server also provides an HTTPS endpoint /siri. When called. it makes the motor on the cash launcher to work for 500ms.