How to connect ESP32 and ESP8266 with IoT in 5 Minutes | Adafruit IO Tutorial | Internet of Things

How to connect ESP32 and ESP8266 with IoT in 5 Minutes | Adafruit IO Tutorial | Internet of Things

The ESP32 is an affordable, all-in-one, option for connecting your projects to the internet using Adafruit.io IoT platform, Adafruit IO.

Install Libraries

In the Arduino IDE, navigate to Sketch -> Include Library->Manage Libraries…

adafruit_products_adafruit_io_library_menu.png

Enter Adafruit IO Arduino into the search box, and click Install on the Adafruit IO Arduino library option to install version 4.0.0 or higher.

adafruit_products_Library_Manager_and_adafruitio_esp32_s2_pub_sub___Arduino_1_8_13_and_1__fish__Users_brentrubell_Documents_Arduino_libraries__fish_.png

When asked to install dependencies, click Install all.

adafruit_products_Banners_and_Alerts_and_Dependencies_for_library_Adafruit_IO_Arduino_4_0_0_and_Library_Manager_and_adafruitio_esp32_s2_pub_sub___Arduino_1_8_13_and_Adafruit_Learning_System.png

Adafruit IO Setup

If you do not already have an Adafruit IO account, create one now. Next, navigate to the Adafruit IO Dashboards page.

We’ll create a dashboard to visualize and interact with the data being sent between your ESP32-S2 board and Adafruit IO. 

adafruit_products_IO_-_Dashboards.png

Create a New Dashboard

adafruit_products_IO_-_Dashboards.png

Name your new Dashboard

adafruit_products_IO_-_Dashboards.png

Your new dashboard should appear in the list.

  • Click the link to be brought to your new dashboard.

We’ll want to turn the board’s LED on or off from Adafruit IO. To do this, we’ll need to add a toggle button to our dashboard.

adafruit_products_IO_-_My_ESP32-S2.png

Click the cog at the top right-hand corner of your dashboard, click Create New Block.

adafruit_products_IO_-_My_ESP32-S2.png

Select the toggle block.

adafruit_products_IO_-_My_ESP32-S2.png

Under My Feeds, enter led as a feed name. Click Create.

adafruit_products_IO_-_My_ESP32-S2.png

Choose the led feed to connect it to the toggle block. Click Next step.

adafruit_products_IO_-_My_ESP32-S2.png

Change Button On Text to 1
Change Button Off Text to 0
Click Create block

Under Block Settings,

adafruit_products_IO_-_My_ESP32-S2.png

Next up, we’ll want to display button press data from your board on Adafruit IO. To do this, we’ll add a gauge block to the Adafruit IO dashboard. A gauge is a read-only block type that shows a fixed range of values.

adafruit_products_IO_-_My_ESP32-S2.png

Click the cog at the top right-hand corner of your dashboard.
In the dashboard settings dropdown, click Create New Block.
Select the gauge block.

adafruit_products_IO_-_My_ESP32-S2.png

Create a feed named button and Click create

adafruit_products_IO_-_My_ESP32-S2.png

Click the button feed and click next step

adafruit_products_IO_-_My_ESP32-S2.png

Under block settings,

  • Change Block Title to Button Value
  • Change Gauge Min Value to 0, the button’s state when it’s off
  • Change Gauge Max Value to 1, the button’s state when it’s on
  • Click Create block

Your dashboard should look like the following:

adafruit_products_IO_-_My_ESP32-S2.png

Code Usage

For this example, you will need to open the adafruitio_26_led_btn example included with the Adafruit IO Arduino library. In the Arduino IDE, navigate to File -> Examples -> Adafruit IO Arduino -> adafruitio_26_led_btn

Before uploading this code to the ESP32-S2, you’ll need to add your network and Adafruit IO credentials. Click on the config.h tab in the sketch. 

Obtain your Adafruit IO Credentials from navigating to io.adafruit.com and clicking My Key. Copy and paste these credentials next to IO_USERNAME and IO_KEY.

adafruit_products_adafruitio_26_led_btn_-_config_h___Arduino_1_8_13.png

Enter your network credentials next to WIFI_SSID and WIFI_PASS.

adafruit_products_adafruitio_26_led_btn_-_config_h___Arduino_1_8_13.png

Click the Upload button to upload your sketch to the ESP32-S2. After uploading, press the RESET button on your board to launch the sketch.

Open the Arduino Serial Monitor and navigate to the Adafruit IO dashboard you created. You should see the gauge response to the button press and the board’s LED light up in response to the Toggle Switch block.

You should also see the ESP32-S2’s LED turning on and off when the LED is toggled.

Leave a Reply