# Make your own sticker vending machine

## 1. Overview

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

- Sign up for a free Viam account, and then [sign in](https://app.viam.com/).
- Hardware and supplies requirements
  - Raspberry Pi
    - Follow the [Raspberry Pi setup guide](https://docs.viam.com/installation/prepare/rpi-setup/) to make sure your Pi is flashed with a Viam-compatible operating system, and that you are able to SSH into it.
  - x3 packs of [craft wire](https://www.amazon.com/TecUnite-Aluminum-Bendable-Skeleton-Thickness/dp/B08GCPWVSZ/)
  - x9 [360° micro servo motors (we used MG90S)](https://www.amazon.com/Compatible-Raspberry-Project-Helicopter-Airplane/dp/B0925TDT2D?th=1)
  - x1 [16 channel 12-Bit PWM servo motor driver (PCA9685)](https://www.amazon.com/HiLetgo-PCA9685-Channel-12-Bit-Arduino/dp/B07BRS249H)
  - x2 5V power supply
  - Something to build the vending machine with (we used black acrylic sheets, screws, and mounting brackets)
- Software
  - Install the Typescript SDK on your computer.

## What You'll Learn

- How to build a custom web interface to control a machine (hint: use the Viam Typescript SDK!)
- How to use servo motors and a motor driver with Viam
- Your robot personality type 😈

## What You'll Need

- A computer running Mac, Windows, or Linux
- Your preferred code editor
- A smartphone, for testing!
- Tools
  - A computer
  - Screwdriver
  - Wire cutter
  - Tools to construct the vending machine frame (we used a laser cutter and 3D printer)

## What You'll Build

- A vending machine controlled by a custom web application

## 2. Set up the electronics

## Set up your Raspberry Pi

Follow the Viam [documentation](https://docs.viam.com/installation/prepare/rpi-setup/) 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. 
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!

2. Attach the coils to the motors
   - We simply wrapped the wire around the double servo arms that come with the motors.
3. Wire up the motors to the motor board
4. Wire up the motor board to a 5V power supply
5. Wire up the motor board to your Raspberry Pi
   - Follow these [instructions](https://learn.adafruit.com/adafruit-16-channel-servo-driver-with-raspberry-pi/hooking-it-up) and refer to the wiring diagram above.

## 3. Configure your machine with Viam

## Configure a new machine

1. In [the Viam app](https://app.viam.com/fleet/dashboard) under the **LOCATIONS** tab, create a machine by typing in a name and clicking **Add machine**. 
2. Click **View 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`](https://docs.viam.com/how-tos/provision-setup/#install-viam-agent). 
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. 
5. The setup page will indicate when the machine is successfully connected.

## Add your board and peripherals

1. In [the Viam app](https://app.viam.com/fleet/locations), 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](https://learn.adafruit.com/16-channel-pwm-servo-driver/chaining-drivers#addressing-the-boards-848847).

## 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.

## 4. Build the structure

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!

### Cardboard prototype

### In progress...

### Motor "drawer"

### 3D-printed motor mount

## 5. Build the web app interface

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](https://docs.viam.com/sdks/#frontend-sdks) to interface between your web application and your machine.

We built our web application with [SvelteKit](https://svelte.dev/docs/kit/introduction) and [Threlte](https://threlte.xyz/). We used [Aseprite](https://www.aseprite.org/)-created pixel art assets with the Threlte component to create the animations. Our web app has the following basic components:

- Intro sequence
- Quiz (Display questions, accept responses)
- 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](https://github.com/ehhong/sticker-wizard).

## 6. Use a Viam module to run a local web server

We can host our web server directly on the Raspberry Pi using a [module](https://docs.viam.com/operate/get-started/other-hardware/). For now, we've incorporated our web app and the web server into the same module.

1. In [the Viam app](https://app.viam.com/fleet/locations), find the **CONFIGURE** tab. Click the **+** icon in the left-hand menu and select **Component or service**.
2. Search for `sticker-wizard:webapp`, then select it. 
3. Give this module a more descriptive name, for example `sticker-wizard-app`. Click **Create**
4. Notice that this adds two cards, one for the module information and one to configure the module itself. If you'd like, you can configure a different port for to access the web app. Otherwise, if the config is left empty, the default port of `8888` will be used. 
5. Click **Save**. Verify that you can access the web app on your local network (default port is :8888 unless you configured a different one in the web app configuration).

## 7. Finishing touches

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.

- Connect some WS2811 LEDs to [a SPI pin of the Raspberry Pi](https://pinout.xyz/pinout/spi)
- If using a Raspberry Pi 5, write a script using [neopixel_spi](https://docs.circuitpython.org/projects/neopixel_spi/en/latest/) to control the colors of your LEDs. Otherwise, use [rpi_ws281x](https://github.com/jgarff/rpi_ws281x)
- 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](https://www.qr-code-generator.com/), but any generator should work.

## Clay figurine

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

## 8. Next Steps

[Explore the Viam platform](/content/product/platform-overview/index.html) and browse components and services to build your next project.