As an example, the following adds the Flat Vibration Switch sold in the Adafruit store to WipperSnapper.

First, identify what type of pin component this switch is. You can learn this by understanding how the switch works.

When the vibration switch gets bumped, it acts as a closed switch. In order to get the state of the switch, a microcontroller needs to configure the switch as a digital input as it only reports two states: when the switch is either open ('0') or closed ('1').

So, we'll be creating a digital input switch as we'll want the vibration switch to send data to WipperSnapper if it's bumped.

Add Component JSON

This page assumes you've followed the instructions on the Get Setup page and have the WipperSnapper_Components repository forked and locally cloned.

First, create a Git branch to work within. In this case, name it add-flat-vibration-switch.

Next, navigate to the Wippersnapper_Components/components/pin directory and make a copy of a component with similar functionality. The toggle switch component and the vibration switch both operate the same way and send the same values if they're toggled.

Create a copy of the toggle_switch folder.

Component folder names should use underscores and the name should be lower case (i.e: my_component).

Rename the toggle_switch copy folder to flat_vibration_switch.

Modify Component Definition JSON File

The definition.json file within this folder is known as the definition file, it defines the pin-based WipperSnapper component for use in Adafruit IO. 

Using a text editor, open the toggle switch's definition.json file.

JSON files are written as pairs of keys and values, separated by a semicolon.

The first key/value pair in the JSON definition is the displayName, which is the human-friendly name of a component. This field is required.

We'll start by changing the displayName from "Toggle Switch" to "Flat Vibration Switch". You should change the displayName to reflect the component you're adding.

At this point, the definition.json file looks like the following.

Next, set the required pin mode field. This field may either be ANALOG or DIGITAL. Since the microcontroller reading a vibration switch will either read a digital 1 or a digital 0 value, its mode is digital.

At this point, the definition.json file looks like the following.

Finally, the last of the required fields is the pin's direction which may be either INPUT or OUTPUT. Data from the vibration switch will be read into the board, so  define an INPUT direction.

The optional autoSelectString field is a hint for automatically looking up pin names. For example, an LED component will automatically select a pin labeled "LED" if the pin exists. 

In the vibration switch case, this field is not required so it can be removed.

The defaultPeriod field describes the default value of the Period field on the "Component Settings" form on WipperSnapper (in seconds). You may leave this as-is.

However, some sensors may take a longer amount of time than the 30-second default to gather readings and this time period may need to be adjusted.

Add Component Image

Next, you'll need to add an image of your component. It's best to get a photo of the component from the manufacturer's website.

First, make sure your image adheres to the following specifications: 

• Image file's extension can be any one of: jpg, jpeg, gif, png, svg
  
• Image file's dimensions must be 300px x 300px
  
• Image file's size must be at least 3kb and must not exceed 100kb

For the flat vibration switch, it is the first image from the Adafruit Store product page. Next, this image must be resized. Using a web-based tool such as https://picresize.com is suggested and ensuring the final image is 300px by 300px. 

Add the resized image to the flat_vibration_switch folder and rename it image.png. You may need to delete the existing file, there should only be one file named image.EXTENSION in this folder.

You may also delete the optional animation.gif file within this folder if you are not planning to add one.

(Optional) Add Component Animation

This step is optional due to the amount of work required to produce an animation. The Ruiz brothers have a video on how to create a spinning board animation below:

The optional animation.gif file also must adhere to the following specifications:

• File must ALWAYS be .gif
  
• File dimensions must be 300px x 300px
  
• File is between 5kb and 700kb

Commit Your Changes and Push

Next, let's add all these changes to your fork. Add your components using the git add command.

Typing git status shows the files you're about to add.

Then, commit the files by typing git commit -m "adding new component"

And push to your forked repository, git push yourRepo add-component-name

Next, follow this page to submit a pull request to add your component to WipperSnapper.

Submit a Pull Request

Finally, it's time to submit a pull request to add the component to WipperSnapper!

After you've pushed the updated files to your branch, navigate to https://github.com/adafruit/Wippersnapper_Components/pulls and click "Compare & pull request".

Give your pull request a name and a description. Make it as descriptive as possible!

Click "Create pull request".

The repository will run checks on these files. If the checks pass, Adafruit will review the files. 

For reference, an example of this pull request is here >>>

When approved, they'll be automatically added to WipperSnapper and available under the component picker along with the form options you added to the definition.json file.