This is the 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:
- Menu: provide a list of banknotes for users to choose.
- Stack: render the selected banknote as a stack of money. Users swipe up to dispense the banknote.
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 original design can be found at design/design.sketch.
The specimens of banknotes can be found in the
design/original-specimens folder.
- Compiles and hot-reloads for development:
npm run dev - Compiles and minifies for production:
npm run build - Lints and fixes files
npm run lint
See Configuring Vite.