Want to turn on and off any device that plugs into a normal outlet? Then this project is for you!

In this project, you'll connect an electronically controlled surge protector with a built-in relay. You'll connect the funhouse to Adafruit IO WipperSnapper and be able to control the device over the internet. Oh, and did I mention that you'll be doing this without having to write any code at all?

Parts

Home is where the heart is...it's also where we keep all our electronic bits. So why not wire it up with sensors and actuators to turn our house into an electronic wonderland....
$34.95
In Stock
Say goodbye to hazardous high voltage wiring and create the Internet of Things with safe, reliable power control....
Out of Stock
This cable will let you turn a JST PH 3-pin cable port into 3 individual wires with high-quality 0.1" male header plugs on the end. We're carrying these to match up with our...
$1.25
In Stock
As technology changes and adapts, so does Adafruit. This  USB Type A to Type C cable will help you with the transition to USB C, even if you're still...
$3.95
In Stock
WipperSnapper is BETA software

WipperSnapper is in beta and actively being developed to add functionality, hardware, and fix bugs.

We encourage you to try out WipperSnapper with the understanding that it is not final release software and is still in development.

If you encounter any bugs, glitches, or difficulties during the beta period, or in this guide, please file an issue on the Adafruit IO support page.

Sign up for Adafruit.IO

Adafruit IO is a platform designed by Adafruit to displayrespond, and interact with your project's data. You will need an Adafruit IO account to use the Adafruit.io Wippersnapper platform.

If you do not already have an Adafruit IO account set up, head over to io.adafruit.com to link your Adafruit.com account to Adafruit IO.

Install ESP32 USB Driver

First, install the SiLabs CP2104 Driver on your computer. This driver is required for your computer to communicate with the ESP32.

Enable Web Serial

We've developed a web-based tool for you to install WipperSnapper on your ESP32. This tool uses the Web Serial functionality of Google Chrome.

You will have to use the Google Chrome browser for this to work.

Safari, Firefox, and other browsers are not supported at this time because this tool requires Web Serial and only Chrome is supporting it to the level needed at present.

At this step, you'll need to enable the Serial API, which is really easy.

Visit chrome://flags from within Chrome. Find and enable the Experimental Web Platform features

Restart Chrome

Install WipperSnapper on ESP32

In the Chrome browser, visit the WipperSnapper NVM Tool website.

On the top right of the webpage, click the Connect button. You will get a pop-up with a list of USB devices. Select the USB port belonging to your ESP32.

You may want to remove all other USB devices so only the ESP32 board is attached, that way there's no confusion over multiple ports! 

The Javascript code will now try to connect to the ROM bootloader. It may timeout for a bit until it succeeds. On success, you will see that it is Connected and will print out a unique MAC address identifying the board.

Once you have successfully connected to the ESP32, a form will appear with a spot to enter your credentials.

To obtain your Adafruit IO credentials, navigate to the Adafruit IO WipperSnapper page and click "My Key". A modal will pop up with your Adafruit IO username and the active key.

Your network credentials are not saved to a server, this script is run locally on your browser.

Navigate back to the WipperSnapper ESP32 installation page and enter your network and Adafruit IO credentials.

Click Install WipperSnapper.

You should see WipperSnapper being flashed to your ESP32. Hang tight and stay on this tab, the process takes a little over a minute. Do not disconnect your ESP32 from USB until the installation has been completed.

Once the tool completes the installation, the top form will collapse and you'll see a message in the log indicating that the operation is complete.

Navigate to https://io.adafruit.com/wippersnapper and press the RESET button on your ESP32.

You should see a new modal pop-up with a picture of your ESP32! Give it a name and click Continue.

Congrats, your board is registered with WipperSnapper! The LED(s) or NeoPixel(s) will periodically flash to alert you that the board is still connected to Adafruit.io WipperSnapper.

Next, let's add some components to your board and start playing around! 

Wiring for this project is very simple. First, remove the green terminal block from the Power Relay. 

Then, connect the JST PH wire to the top-most JST PH port on the FunHouse.

After that, plug the white wire into the left terminal and the black wire into the right terminal.

Next, screw them down and put the terminal block back in the Power Relay. Make sure that the terminal block is fully inserted and you can't see the screws.

Finally, plug your FunHouse into the wall or into the outlet of the power switch that is 'Always ON.'

Now that you've wired everything up and added your board to WipperSnapper, it's time to set the device itself up.

The very first thing you'll want to do is make sure that the device is online. Make sure that the box next to the device name is green and says 'Online.'

From the device page, click + New Component.

Then, click on the Power Switch.

Call it whatever you want. I chose to call it switch, but anything else should work as well. Finally, set Power Switch Tail Pin to D17.

Project Usage

Now, click on the toggle switch and as you turn it on and off, you should hear a click from the relay and see the electronic device you've plugged in turn on and off.

This guide was first published on Oct 12, 2021. It was last updated on Oct 12, 2021.