In the real (physical) world we have electrical components, so to represent that on our WipperSnapper device page in Adafruit IO we also have components! They are like digital twins with the real world electrical components, but before you can use them you have to tell your device which ones to use and how!

So now that you have the physical hardware setup, including the electrical components and wiring, it's time to setup your Button component on the WipperSnapper Device page...

Add a Component to Your Device

Connect your board to Adafruit IO Wippersnapper and navigate to the WipperSnapper board list.

On this page, select the WipperSnapper board you're using to be brought to the board's interface page.

Use the New Component button to bring up the Component Picker window.

Select the Push Button component from the New Component window.

The Create Push Button Component window will be shown.

Change the Push Button Pin to match your wiring, if you followed the Wiring guidance above then the pin is D5 (SCK).

Adjust the Return Interval to be On Change instead of Periodically (periodically measures at regular intervals, whereas on-change records a measurement every time the pin value changes)

Enable the option to Specify Pin Pull Direction, and select the Pull Up radio button.

This is to determine if a logic high (1) or logic low (0) should indicate the pressing of the button. This is determined in our circuit by the resistor pulling the button signal line up to 3 volts when not pushed (logic high). When the button is pushed, the internal switch contacts connect, which joins the other side of the switch to the signal wire (ground becomes connected which takes the signal to zero volts a.k.a. low logic level).

You should now be presented with the Push Button component on your device page.

Test the circuit by holding the button down until you see the value on the device page change, then release and watch the state return to Unpressed.

It's worth noting that behind the scenes WipperSnapper + Adafruit IO creates a new data feed for each component. A feed is where new data values are published or subscribed to, you can see all your feeds on your Feeds page.

Great, now that's working as expected, it's on to creating the Adafruit IO Dashboard. Head on over to the Dashboards page.