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.

Prerequisites

What You'll Learn

What You'll Need

What You'll Build

sticker-wizard-diagram

Set up your Raspberry Pi

Follow the Viam documentation to complete the following steps to set up your Raspberry Pi.

  1. Install Raspberry Pi OS.
  2. Connect to your Pi with SSH.
  3. Enable communication protocols with sudo raspi-config. You will need to enable I2C for the motor driver. enable i2c protocol
  4. Restart your Pi to apply the changes with sudo reboot.

Set up the dispensing mechanisms

  1. Wind up your craft wire into 9 coils of equal size
    • 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!

  1. Attach the coils to the motors
    • We simply wrapped the wire around the double servo arms that come with the motors.
  2. Wire up the motors to the motor board
  3. Wire up the motor board to a 5V power supply
  4. Wire up the motor board to your Raspberry Pi
    • Follow these instructions and refer to the wiring diagram above.

Configure a new machine

  1. In the Viam app under the LOCATIONS tab, create a machine by typing in a name and clicking Add machine. add machine
  2. Click View setup instructions. setup instructions
  3. To install viam-server on the Raspberry Pi device that you want to use to communicate with and control your webcam, select the Linux / Aarch64 platform for the Raspberry Pi, and leave your installation method as viam-agent. select platform
  4. Use the viam-agent to download and install viam-server on your Raspberry Pi. Follow the instructions to run the command provided in the setup instructions from the SSH prompt of your Raspberry Pi. installation agent
  5. The setup page will indicate when the machine is successfully connected. successful toast

Add your board and peripherals

  1. In the Viam app, find the CONFIGURE tab. It's time to configure your hardware.
  2. Click the + icon in the left-hand menu and select Component.
  3. Select board, and find the pca:pca9685 module. Give this component a name motor-board. This adds the module for working with a PCA9685 board that displays in the left sidebar. Notice adding this component also adds a corresponding panel on the right.
  4. From the Attributes section of the panel, configure the i2c_bus to 1.
  5. Configure the i2c_address as 64 (0x40), the default base address for PCA9685.

motor-board-config

Test the machine

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
    • The MG90S motors use a PWM frequency of 50 hz
  4. (Experimentally) Set the PWM duty cycle
    • 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
    • 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 i2cdetect -y 1 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.

full machine

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!

Cardboard prototype

cardboard prototype

In progress...

cardboard prototype

Motor "drawer"

3D-printed motor mount

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:

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
    • We recommend uploading your source code to GitHub and then downloading git on your Raspberry Pi to pull changes from your website
  2. 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!
  3. Create a bash script to run your production bundle locally. Call it run-web-server.sh.
  4. Add a process to your machine config
    • Configure the executable to be the absolute path to run-web-server.sh. You can determine the absolute path with the pwd command.
    • Set the working directory to be the absolute path to the folder containing your bash script.

web server config

  1. Test!
    • Save your config
    • Go to the LOGS tab, and check for logs verifying that your web server is up and running
    • 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.

finishing touches

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.

LED

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.

Explore the Viam platform and browse components and services to build your next project.

Vaim architecture diagram

Related projects

Vaim claw game

Related Viam resources