Getting Started with Mozilla Web Things and Atmosphere

This guide teaches you how to get started with creating a Mozilla Web Thing using Atmosphere. This includes creating a Temperature Sensor accessible via the Mozilla Web Thing Gateway.

Prerequisite: You should already have both an Atmosphere account and Mozilla Web Thing Gateway installed and running.

Hardware Requirements

Connect the SHT Click to the ESP32 using the following pins:

ESP32 SHT Click
3.3V 3V3
GND GND
IO22 SCL
IO21 SDA

Software Requirements

Step 1 of 7: Create a New Project

Navigate to Atmosphere and select Atmosphere IoT Studio from the side menu. When you visit IoT Studio for the first time in a session, you are brought to the IoT Studio Projects screen.

  1. Click the New Project button. This displays a New Project window.
  2. Select the ESP32 project type (or whichever project type you’re using) and give the project a name, then click Create. This opens a new project in IoT Studio.

Step 2 of 7: Import the SHT Click Element

Prior to building the project, the proper elements have to be added into IoT Studio’s Element Toolbox. This project involves integrating the SHT click element, which isn’t native to ESP32 projects. So we’ll add it through the IoT Studio Embedded tab’s Element Library.

  1. From the Embedded tab, click the Add Element Add Element button located in the bottom of the Element Toolbox. This opens the Element Library, which includes numerous elements for sensors and other devices that can be incorporated into a project.
  2. In the Element Library, locate the SHT click element, and turn on the enable switch in its row. When done click Save, and the element is added into the Embedded tab’s toolbox.

Step 3 of 7: Create Base Web Thing Description

The first aspect of building this sample project is creating the top level Web Thing base description.

Add the following element to the canvas:

  • Web Thing Description Element Web Thing Description element: The Web Thing Description element describes the your Web Thing at a high level. Set the Capability to TemperatureSensor. The other properties can be left to their default values.

Step 4 of 7: Create Web Thing Temperature Property

The next step is to create the description for your temperature property.

Add the following element to the canvas:

  • Web Thing Description Element Web Thing Property element: The Web Thing Property element describes the your Web Thing Property at a high level. Set the Capability to TemperatureProperty, the Data Type to Floating Point(32-bit), and set the Title to Temperature. The other fields can be left to their default values.

Step 5 of 7: Incorporate the SHT Click

The final step of creating the firmware is to import the SHT click and connect it to your Web Thing Property.

  1. Add the following elements to the canvas by clicking them in the Element Toolbox:
    • Interval Element Interval element: The interval element sets the project to run at the time set in the element’s properties, which by default is set to once per second (1000 ms).
    • Sensirion SHT Click SHT Click element: The SHT click element is an ambient temperature sensor.
  2. Connect the interval element to the SHT Click. This will, by default, execute the Read Temperature ability of the SHT Click every second.
  3. Connect the SHT Click element to the Web Thing Property element. This will, by default, execute the Write ability of the Web Thing Property element whenever the temperature is read from the SHT click.

That’s all for work in the Embedded tab. The Embedded tab’s canvas should resemble the following image:

Embedded Tab Web Thing Property Element
Web Things guide embedded tab Web Thing Property Element

Step 6 of 7: Program and Run the Application

With the temperature application complete, your ESP32 can be programmed to install the new project’s firmware on it. Prior to programming ensure the SHT Click is connected to the ESP32, and that the device is connected to the computer via USB.

  1. Click the Compile button in the project options menu on the top-right of the screen. You’ll see a loading message on the screen indicating compiling has started, and will be notified when the project is compiled. With the project compiled, your ESP32 can be programmed.
  2. From the Embedded tab, click the Program Firmware button from the tab’s toolbar. This will display a programming dialog.
  3. Click Program and your ESP32 will begin programming

Step 7 of 7: Register the Device on Atmosphere

With the application installed on the ESP32, the device can now be recognized and connected to Atmosphere.

To register the ESP32:

  1. Navigate to the Devices area, and click the Register Device Scan button in the top-right of the screen to display the Scan window. When the window opens it automatically starts scanning for available devices within range.
  2. The list of available devices appears. Select the ESP32 you just programmed and click Register. This brings you to the Wi-Fi settings screen.
    • If the device doesn’t show up, try restarting the agent in your system tray. If you do so, refresh your browser and try adding a device again.
  3. Configure your Wi-Fi network settings to connect the device. When Wi-Fi settings are entered, the ESP32 will connect to Atmosphere over Wi-Fi and remain connected as long as the Wi-Fi connection is maintained.

The device is now registered to Atmosphere and it has initialized the Web Thing HTTP server. You should now be able to discover the device via the Mozilla Web Thing Gateway. It should look similar to the following:

Mozilla Web Thing Gateway
Web Things guide embedded tab