We'll start off by wiring the RGB LED to the ESP32:

The diagram above shows a breadboard for clarity, but the RGB LED and ESP32 could be wired directly together using male-to-male jumpers if you choose.

Take note of the GPIO pin numbers connected by red, blue, and green jumper wires to three of the LED legs, any GPIO that support digital output or pulse width modulation (PWM) will work; check your board's pinout to verify. Here we're using GPIO pins 15, 32, and 14. Those values will be important for configuring the development board in the Viam app and the Python code later. The jumper connecting the 3V pin on the ESP32 board to the LED will provide power to the component when the board is connected to your computer or the battery over USB.

Next is creating a new robot in the Viam app and following the "Setup" instructions to flash the ESP32 with the micro-RDK.Once you've confirmed that it is connected to Viam (you should see a "Live" status under "Last online" in the header of the app), configure the board component  and relevant pins using the following JSON:

{
  "components": [
    {
      "attributes": {
        "pins": [
          15,
          32,
          14
        ]
      },
      "depends_on": [],
      "name": "board",
      "model": "esp32",
      "type": "board",
      "namespace": "rdk"
    }
  ]
}

 Remember to replace the numbers in the list of `pins` with the ones matching the physical wiring of the project.

Restart the ESP32 to confirm a working configuration. If there is a "reset" button on the development board, use that; otherwise, unplugging and plugging in the board also works. You can look at the Control tab in the app to read and write the configured pin values to control the LED. Try setting all the pins to 1 or 0 or a floating number in between like 0.5 to see what happens.

Now to build the web application that will accept webhook requests from Zoom and control the light, we'll use the Viam Python SDK with the Starlette async web framework. Clone the working project from GitHub.

git clone https://github.com/HipsterBrown/viam-on-air.git

To configure the application with the required API key, API key ID, and location address for the Viam SDK and the secret token from Zoom, make a copy of the `.env.example` file and call it `.env`.

Get the Viam API and location values from the "Code Sample" tab when viewing the machine details in the app. Toggle the "Include API Key" switch to reveal the API Key and API Key ID in the code where "<API-KEY>" and "<API-KEY-ID>" is seen initially.

Get the Zoom secret token by creating a webhook-only app in the Zoom App Marketplace  and subscribing to the following events when adding an event subscription:

Update the `.env` file with the relevant values, including the configured pins from Viam as `RGB_PINS` and your Zoom username to make sure the light only updates when you join or leave a meeting.

With a working Python development environment, run the install command to get the dependencies in the cloned project repository:

pip install -e . 

Start the web application:

python -m viam_on_air

This will connect to the ESP32 and start a webserver on `0.0.0.0:8000` (a.k.a `localhost:8000`).

❯ python -m viam_on_air
INFO: 	Started server process [96243]
INFO: 	Waiting for application startup.
2023-11-22 17:40:02,956     	INFO	viam.rpc.dial (dial.py:286) 	Connecting to socket: /tmp/proxy-LSL4xP2F.sock
INFO: 	Application startup complete.
INFO: 	Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)

To confirm this all works together and start receiving webhook events from Zoom, the webhook endpoint needs to be validated first. To do this without deploying to a live server, use a service like `ngrok` , `zrok` , or something else to provide a secure proxy to the local server.

For example, install `zrok` with Homebrew and start a proxy by running:

brew install zrok
zrok share public localhost:8000

The endpoint URL configured for the webhook should end in `/webhooks/zoom`. Click the "Validate" button to confirm the app is working as expected:

The hostname (the part before the `/webhooks/zoom`) should be the proxy URL returned by the secure tunnel tool. 

Once the Zoom webhook-only app has been successfully activated, you can start joining some meetings and see the on-air light in action!

Green = A meeting has started
Red = You have joined the meeting
Blinking Red for 5 seconds = You left the meeting
Blinking Purple for 5 seconds = The meeting has just ended

Keeping the secure tunnel running all the time is not a viable solution in the long term, so let's take a look at deploying the Python app to a service like Fly.

With the `flyctl` CLI installed , log in or create an account  before continuing. The project repository contains the required `fly.toml` and `Procfile` to deploy the application to a Fly Machine.

#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = "viam-on-air"
primary_region = "ewr"

[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ["app"]

[build]
  builder = "paketobuildpacks/builder:base"
  buildpacks = ["gcr.io/paketo-buildpacks/python"]

[env]
  ZOOM_USERNAME="Your Username"
  BOARD_NAME="board"
  RGB_PINS="18,5,19"

[[vm]]
  cpu_kind = "shared"
  cpus = 1
  memory_mb = 1024

Before deploying, you can update the `app` value in the `fly.toml` to create a different hostname for the running application, as well as update the `[env]` section with your environment variables from the `.env` file. While we could include the `.env` file in the deployed application image, there are security concerns with storing secrets like the Viam API key and Zoom secret token in plain text on a server that could be compromised. For those secrets, use the expected `fly` command: 

fly secrets set ZOOM_SECRET_TOKEN="" VIAM_API_KEY="" VIAM_API_KEY_ID="" VIAM_ADDRESS=""

 The empty `""` after each secret name should be filled in with the associated value.

Finally, deploy the application:

fly deploy

 After a minute or two, you will get a success message

Watch your deployment at https://fly.io/apps/viam-on-air/monitoring

-------
Updating existing machines in 'viam-on-air' with rolling strategy

-------
 ✔ Machine 7811110f907408 [app] update succeeded
-------

Visit your newly deployed app at https://viam-on-air.fly.dev/

 You can visit the deployed app URL to see a `{"message": "Ok"}` JSON response. Then update the Zoom app configuration to use that new URL hostname instead of the secure tunnel and re-validate the endpoint.

Unplug the ESP32 from the computer and power it from the USB battery. Mount all the components in your container. I used a cardboard box with "ON AIR" cut from the front and lined it with printer paper to diffuse the RGB LED shining through.

In practically no time at all, you now have a battery-powered, automated on-air light that you can hang whenever you'd like to signal your current meeting status. If you ever want to monitor the status of the light from your computer or phone, you can view it in the Viam app and learn about extending the functionality of the project.  

Share your builds with the community in Discord! Thanks for following along!