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.
Connect the SHT Click to the ESP32 using the following pins:
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.
- Click the button. This displays a New Project window.
- 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.
- From the Embedded tab, click the 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.
- 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: 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 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.
- Add the following elements to the canvas by clicking them in the Element Toolbox:
- 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).
- SHT Click element: The SHT click element is an ambient temperature sensor.
- Connect the interval element to the SHT Click. This will, by default, execute the Read Temperature ability of the SHT Click every second.
- 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|
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.
- Click the 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.
- From the Embedded tab, click the button from the tab’s toolbar. This will display a programming dialog.
- 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:
- Navigate to the Devices area, and click the Add Device button in the top-right of the screen to display the Add Device window. When the window opens it automatically starts scanning for available devices within range.
- 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.
- 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|