Sticker Wizard – an Interactive Sticker Vending Machine!

Sticker wizard is a sticker vending machine with a twist: you don't get to choose which sticker you get. Instead, you'll scan the QR code, take the "which robot are you?" personality quiz, and then receive the sticker you deserve (along with a free personality analysis).

This tutorial will walk you through making your own vending machine from scratch, along with a web application that allows you to operate your machine from any device.

1. Physical supplies
2. x3 packs of craft wire
3. Sturdy material for the machine frame (we used black acrylic sheets, screws, and mounting brackets)
4. Hardware
5. Raspberry Pi
6. x9 360° micro servo motors (we used MG90S)
7. x1 16 channel 12-Bit PWM servo motor driver (PCA9685)
8. x2 5V power supply
9. Software
10. A code editor
11. Viam (requires a free account)
12. Viam Typescript SDK
13. Tools
14. A computer for development
15. A smartphone, for testing!
16. Screwdriver
17. Wire cutter
18. Tools to construct the machine frame (we used a laser cutter and 3D printer)

Set up your Raspberry Pi

Follow the Viam documentation to set up your Raspberry Pi with viam-server.

Be sure to also enable I2C while enabling communication protocols – this will be needed for the motor driver!

Set up the dispensing mechanisms

1. Wind up your craft wire into 9 coils of equal size
2. Our coils are about 20 loops long and have a diameter just under 2". We recommend using a PVC pipe or otherwise cylindrical object as a guide!
3. Attach the coils to the motors
4. We simply wrapped the wire around the double servo arms that come with the motors.
5. Wire up the motors to the motor board
6. Wire up the motor board to a 5V power supply
7. Wire up the motor board to your Raspberry Pi
8. Follow these instructions

1. Create a machine on app.viam.com
2. Add a PCA9685 board component to your machine configuration.
3. Configure the i2c_bus to 1
4. Configure the i2c_address as 64 (0x40), the default base address for PCA9685
5. Save your configuration

From here, you should be able to use Viam to control your motors! To test:

1. Open the test section of the board component
2. Set the pin to be the pin on the board that you connected your motor to
3. Set the PWM frequency to whatever your motor specifies
4. The MG90S motors use a PWM frequency of 50 hz
5. (Experimentally) Set the PWM duty cycle
6. Different duty cycles determine the speed and direction of your motor. Due to inconsistencies between motors, it may take some experimentation to find the desired duty cycle
7. Our duty cycles ended up being either 0.075 or 0.09, or 7.5% and 9% (opposite directions)

If you cannot find the board, run the following on your Raspberry Pi to check if your board is connected correctly:

The basic structure of the vending machine is a box with 3 "drawers" of 3 motors each. We prototyped using cardboard, and then made the final structure with acrylic cut to size and screws. We made each layer of motors a drawer for convenient refilling and maintenance. To fit the motors in the drawers, we created dividers between each motor and coil, and 3D printed a motor mount that sits on the drawer.

But your structure can be anything! You could build this out of cardboard and tape! As long as it can contain the motors and dispenses the stickers...you're golden!

This part is entirely up to your imagination, you can build any interface you want, using any technology you want! The only requirement is to use Viam's Typescript SDK to interface between your web application and your machine.

We built our web application with SvelteKit and Threlte. We used Aseprite-created pixel art assets with the Threlte component to create the animations. Our web app has the following basic components:

1. Intro sequence
2. Quiz (Display questions, accept responses)
3. Results view (with dispense sticker button)

To authenticate your website with your machine, use Viam API keys. We recommend setting up an operator API key so users don't have write access to your machine (and use a .env file to avoid committing your API keys to your Github repo!)

Here's our source code.

Through Viam, we can host our web server directly on the Raspberry Pi using a process. A process runs every time your machine starts up.

1. Download your web app's source code to your Raspberry Pi
2. We recommend uploading your source code to Github and then downloading git on your Raspberry Pi to pull changes from your website
3. Follow instructions from your selected web framework to run your production bundle locally from your Pi. Make sure you can access it from your local network!
4. In SvelteKit, you can run your production bundle locally with vite preview
5. Expose it on your local network with the --host flag
6. Create a bash script to run your production bundle locally. Call it run-web-server.sh.
7. Add a process to your machine config
8. Configure the executable to be the absolute path to run-web-server.sh
9. Set the working directory to be the absolute path to the folder containing your bash script
10. Test!
11. Save your config
12. Go to the logs tab, and check for logs verifying that your web server is up and running
13. Verify that you can access your website on a separate device that is also on your local network

To make your local web server available to those not on your local network, use a service like ngrok. You can set up ngrok with Viam with a process in the same way so it is always available when your machine is running.

That's it! We added a few finishing touches to enhance the experience, but these are completely optional.

LEDs

The LEDs really enliven this project, and let people know that sticker wizard is alive and ready to gift you a sticker! These instructions are for WS2811 LEDs, the LEDs we used here, but any individually-addressible LEDs should do the trick.

1. Connect some WS2811 LEDs to a SPI pin of the Raspberry Pi
2. If using a Raspberry Pi 5, write a script using neopixel_spi to control the colors of your LEDs. Otherwise, use rpi_ws281x
3. Encase your LEDs in a pretty display!

QR code

Use any QR code generator to create a QR code that encodes your web app's URL, and display it somewhere on your machine! We used qr-code-generator.com, but any generator should work.

Clay figurine

Personify your machine! This dude was hand-sculpted with polymer clay.

We love sticker wizard and we hope you do too :) Big thanks to Viam for supporting this project!

This codelab was originally published on Viam.