The best tools to make your project dreams come true

Login or Signup
USD


Digi-Key IoT Studio Mini Smart Home

By Adafruit Industries

Courtesy of Adafruit

Guide by Brent Rubell

Overview

You'll be automating an adorable paper maché house. The small size of this build lets us explore wiring, user interaction, and firmware deployment without having to get a ladder out.

house_1

After building this project, you can re-purpose this project for your home or apartment. We've specifically selected components and sensors which are common in real-world IoT projects. You can also go further with this project, adding sensors to monitor different rooms in your house.

studio_2

Digi-Key IoT Studio IDE

Unlike most other IoT platforms, Digi-Key IoT Studio is code-less - all sensor interaction and storage is done automatically by the drag-and-drop IDE. You do not need to install toolchains, code editors or compile any code on your computer! Digi-Key Studio runs in your web browser, handles all aspects of developing an Internet-of-Things project, and even compiles your code remotely.

app_3

Digi-Key IoT Studio Mobile App

You'll build and program a mobile application to monitor and interact with your IoT Home over the Bluetooth Low Energy protocol. The Digi-Key IoT Studio Mobile App also acts as a bridge, sending your home's data to the free Digi-Key IoT Studio Cloud for long-term storage.

hub_4

Modular Smart Home Hub

You'll start by building a hub for your smart home. We designed a modular smart-home hub which uses the Feather form factor. If you want to add more sensors or actuators onto your smart home hub, just snap on a new FeatherWing!

Parts

This tutorial uses the ESP32 Feather as the microcontroller brains, it can use both secure WiFi and Bluetooth LE as transports.

To build the smart home's hub, you'll use a Quad 2x2 FeatherWing Kit. This kit contains four identical sets of headers for Feathers/FeatherWings and two prototyping areas.

For inputs, you'll use the Analog Devices Featherwing to obtain precision temperature readings and the Bosch BME680 to obtain humidity, barometric pressure, and air quality.

We’ll add a magnetic door sensor to detect when someone opens a door or window and add a buzzer to make a a loud 2KHz BEEEEEEEEEP when someone opens the door.

For outputs you'll use a Non-Latching Mini Relay FeatherWing to control a DC motor - that’s our way of simulating an HVAC unit that turns on when it gets too hot or too cold.

You'll also connect some LED lights to a GPIO pin on the HUZZAH32, so you can turn on or off the lights from the DK IoT Mobile App, or when someone opens the door.

You'll need a few JST-PH cables for this build. These cables will allow you to easily remove sensors connected to the IoT Home Hub from the enclosure with a nice click.

Tools and Materials

You also may want to pick up the following materials and tools to complete this project.

What is Digi-Key IoT Studio?

Developing IoT Projects, Visually

Unlike most other IoT platforms, Digi-Key IoT Studio is code-less - all sensor interaction and storage is done automatically by the drag-and-drop IDE. You do not need to install toolchains, code editors, or compile any code on your computer! Digi-Key Studio runs in your web browser, handles all aspects of developing an Internet-of-Things project, and even compiles your code remotely.

home_5

sensor_6

IOTHome_7

IoT projects involve programming firmware into a device, sending data from a device to "the cloud" and then interacting with the data and device using a website or application. Digi-Key IoT Studio comprises of three workspaces which simplify development:

  • Embedded Workspace to build logic which runs on your device
  • Application Workspace to design, build, and program an application for your device
  • Cloud Workspace to construct flows for sending data to the free DK IoT Studio Cloud or Amazon Web Service

boards_8

This high-level integration is possible because IoT Studio has built in support for a range of transport boards, and sensors. Note that not all boards and devices are supported - lucky for us, there’s plenty of Adafruit products supported, including our series favorites: the ESP32 Feather and the Analog Devices FeatherWing.

However, instead of just a simple temperature sensor data logger, we’ll make a complete home automation system that you can follow along by picking up our IoT Studio Kit.

Wiring

wiring_9

wiring_10

BME680 Wiring

You'll be soldering and wiring the BME680 directly on the prototyping grid on the bottom right side of the Quad 2x2 FeatherWing.

Make the following connections between the FeatherWing's prototyping grid and the BME680:

  • FeatherWing 3V to sensor VIN
  • FeatherWing GND to sensor GND
  • FeatherWing SCL to sensor SCK
  • FeatherWing SDA to sensor SDI

Adding a Buzzer to the Quad FeatherWing

There's another prototyping grid on the bottom left of the Quad 2x2 FeatherWing. You will be adding the buzzer to this grid.

grid_11

grid_12

grid_13

Place the buzzer on the prototyping grid. Make sure the buzzer's negative (short) lead is placed on the ground rail. Also, ensure the stacking headers will be able to fit besides the buzzer.

Solder the buzzer's negative (short) lead to the ground rail.

Solder a wire between GPIO Pin 12 and the positive (long) lead from the buzzer.

Mini Relay FeatherWing Wiring

relay_14

Solder the 3-Pin terminal block to the Non-Latching Mini Relay FeatherWing.

Solder a wire between the Signal pin and header pin 33.

Then, solder a red wire to the 3V header on the Non-Latching Mini Relay FeatherWing. Connect this wire to the NC pin on the 3-pin terminal.

Attaching Female JST Connectors to Quad FeatherWing

You'll use female JST connectors to connect the IoT Hub's base to the fan, LEDs, and door sensor.

attach_15

Start by cutting a JST-PH cable in two. Make sure there's an even length of cable between both connectors.

attach_16

Then, strip off 5mm from the red and black cables.

You may want to tin ends of the cables with a bit of solder at this point.

connections_17

On the top left side of the Quad FeatherWing, make the following connections between the JST-PH connector and the header pins on the FeatherWing:

  • JST-PH Red to FeatherWing GPIO 15
  • JST-PH Black to FeatherWing GND

connector_18

Just like before, cut and strip another JST-PH connector.

On the top right side of the Quad FeatherWing, make the following connections between the JST-PH connector and the header pins on the FeatherWing:

  • JST-PH Red to FeatherWing GPIO 12
  • JST-PH Black to FeatherWing GND

Solder all four sets of Feather headers to the Quad FeatherWing.

wiresthrou_19

wiresthrou_20

wiresthrou_21

Before placing the Feather Huzzah32 and FeatherWings on the Quad FeatherWing, make sure that all the female JST connectors are routed through the middle and out the top of the Quad FeatherWing.

You may want to use tape to secure the cables to the FeatherWing's PCB.

Then, connect both FeatherWings and the Feather Huzzah32 to the Quad FeatherWing.

You've successfully built the IoT Home's Hub! Let's move on to building the rest of the IoT Home.

Assembly

Assembling the Door

Is anybody home? To detect when the door is either open or closed, you'll be using a reed switch. These super simple sensors operate on the principle that when a magnet is less than 0.5" away, the reed switch internally closes. We'll detect this change using a HUZZAH32 and send the door's status to the Digi-Key IoT Studio Project.

These switches aren't just for a cardboard home, they've been used in real-world projects such as the Adafruit IO Door Detector project.

glue_22

Using a hot glue gun, glue the reed switch to the left side of the door-frame.

If you don't have a hot glue gun handy, you can substitute a piece of double-sided tape instead.

You will want to ensure the switch is firmly in place and does not move around any.

box_23

Next, grab the closest empty Adafruit/Amazon/Digi-Key box (We know you have some around, we do!).

Using a ruler, sketch a door on this piece of cardboard. Then, cut it out using a pair of scissors or a knife.

magnet_24

Using double sided tape or hot glue, affix the magnet to the door.

hinge_25

hinge_26

There's many ways to assemble a door hinge, we'll use tape to act as a hinge. Place a strip of tape on the door's edge and line it up with the doorway in the house. You should be able to open and close the door without it falling off.

For a more permanent option, you may want to use a bamboo skewer like we did in the IO Home: Security Learning System Guide.

Cable_27

Strip 3mm of the rubber coating from the door sensor cable. Then, strip 3mm from the male JST header cable.

Cable_28

Slide two narrow lengths of heat shrink down each cable for the door sensor. Then, slide a wider length of heat shrink over both cables.

solder_29

Using a soldering iron, tin the ends of both cables. Then apply heat with the soldering iron to connect them together.

solder_30

Once connected, slide the heat shrink over the soldering joint and apply heat.

solder_31

Repeat this for both cables (red and black). Once you're done, slide the larger piece of heat shrink over both of the cables and apply heat.

Assembling the Fan

In order to attach the DC spindle motor to the roof of the home, you'll build a rafter-like-support using a popsicle stick.

stick_33

With a pencil, mark a line 0.5" from the curved portion of the popsicle stick.

stick_32

Using wire snips or scissors, cut along the line you marked. To avoid splitting the wood, take small "snips" instead of a large cut.

stick_34

After cutting, you may want to use a file or some coarse sandpaper to sand down uneven edges.

popscicle_36

  • Insert one end of the popsicle stick in the inside corner of the roof.

popscicle_37

  • With a pencil, mark the popsicle stick at where the inside roof ends
  • Using wire snips or scissors, cut along the line you marked. To avoid splitting the wood, take small "snips" instead of a large cut
  • After cutting, you may want to use a file or some coarse sandpaper to sand down uneven edges

popscicle_38

  • Test-fit the popsicle stick into the roof

glue_39

  • Add a dab of glue (or hot glue) to either side of the popsicle stick. If the stick in your kit is bowed a little, add the glue to the bowed side. The motor will be mounted the flat side of the roof

glue_41

  • Insert the popsicle stick into the roof and press down on it until it sets

Let's leave this piece alone to dry.

fan_42

Modify the propeller by cutting ~0.4mm off each end of the propeller with a pair of scissors or wire cutters.

fan_43

Press-fit the propeller onto the DC Spindle Motor. You may need to press hard, it's a tight fit.

fan_44

strip_45

strip_46

Strip 3mm of the rubber coating from the door sensor. Then, strip 3mm from the male JST header cable.

Slide two narrow lengths of heat shrink down each cable for the door sensor. Then, slide a wider length of heat shrink over both cables.

connect_47

Using a soldering iron, tin the ends of both cables. Then apply heat with the soldering iron to connect them together.

connect_48

Once connected, slide the heat shrink over the soldering joint and apply heat.

connect_49

connect_50

Repeat this for both cables (red and black). Once you're done, slide the larger piece of heat shrink over both of the cables and apply heat.

motor_51

Apply a small dab of glue (or hot glue) to the back of the motor. We've marked on the image where the glue could leak into the motor.

center_52

Center the motor above the popsicle stick.

Before pressing down to set the glue, give the fan a spin to ensure it has clearance on all inside sides of the roof. 

center_53

Press down on the motor to set the glue. Let's leave the roof to dry while we work on the LEDs

Adding LEDs

You're going to use five Adafruit LED Sequins (in Digi-Key red) to add some lights to your home. These small LEDs only show a single color and don't have digital control, making them simple to add to your home.

JST_54

Using a JST cable with a male header, strip off a length of the rubber coating. Twist the stranded wire together and tin the bare wire using a soldering iron.

Slide a sequin LED over each end of the cable. Be sure to line up the red JST cable with the positive end (+) of the sequin.

JST_55

Solder the front and back of the sequin's copper pads to secure the sequin in-place.

chain_56

Add a second sequin to the chain and solder it to the cable.

chain_57

Five sequins are included with the Digi-Key IoT Home Kit. You may use all five or less (we used two here). Connect and solder the rest of the sequins.

roof_59

Using hot glue, secure the fan's cabling to the roof.

Then, apply hot glue to the JST cable connected to the LED sequins. You may glue the LED portion down, but, these LEDs are not too bright and adding glue may diffuse them too much.

roof_58

Assembling the Smart Home Hub

Connect the Feather HUZZAH32 to the FeatherWing Quad Kit along with the ADI FeatherWing and the Non-Latching Relay FeatherWing.

Make sure the orientation reflects the image below.

feather_60

Add a hole for the USB Cable

We'll need to cut a hole on the bottom left side of the home for a USB cable.

USB_63

This portion is more tricky than it appears. The IOT House is made out of paper maché, not cardboard. If you cut this material slowly with a dull knife or scissors, it will de-laminate. You will want to use a very sharp X-Acto knife or something like the Slice Craft Knife which has a ceramic blade.

USB_61

USB_62

  • On the bottom left side of the home, measure and mark a hole 20.8mm x 17.4mm
  • Using a sharp blade, cut a hole for the USB cable from the bottom left side of the home.

Smart Home

USB_64

  • Slide the Smart Home Hub into the smart home

Connect up all the JST connectors and close the roof of the home.

close_65

With the Home fully assembled, let's move on to programming it!

How Digi-Key IoT Studio Works

We've previously written about end-to-end services which take care things like of data storage, event messaging, and APIs like Particle and Electric Imp. Digi-Key has entered the field of end-to-end Internet-of-Things services with their own service, Digi-Key IoT Studio.

However, unlike Particle and Electric Imp, Digi-Key IoT Studio includes built-in board support for dozens of development boards which Digi-Key sells and drag and drop elements for breakouts, sensors, radio modules, and more!

Digi-Key IoT Studio is a web-based integrated development environment (abbreviated IDE) that allows people of all skill levels to easily construct IoT Projects. You do not need to install software toolchains, code editors, or compile any code on your computer! Digi-Key Studio runs in your web browser, handles all aspects of developing an Internet-of-Things project, and even compiles your code remotely.

Internet-of-Things projects involve programming firmware into a device, interacting with the device (possibly using a website or application), and sending data from a device to "the cloud". Digi-Key IoT Studio comprises of three workspaces which simplify development: an embedded workspace to build device logic, an Application workspace to build an application for your device, and a cloud workspace to construct a method to send data to the cloud.

Embedded Workspace

workspace_66

The Embedded Workspace in Digi-Key IoT Studio allows you to build embedded firmware which runs on your microcontroller. You'll be using this tab to program your HUZZAH32. Digi-Key IoT Studio supports two types of transports - Bluetooth Low Energy (BLE) and WiFi.

You may configure data to be sent directly to the Digi-Key IoT Cloud over WiFi or send data to an Application on a device (like a phone or tablet) over BLE.

Once you've finished building up your project's firmware, you can move on to building an application to interact with it.

Application Workspace

Application_67

The Application Workspace allows you to design an interface to interact with your microcontroller from a tablet or smartphone. This workspace is split into two sides - a visual "App Builder" which allows you to drag and drop interface elements onto an application and a workspace for building the application's logic.

Once you've built up an application, it's time to send data to the Digi-Key IoT Cloud Service!

Cloud Workspace

cloud_68

The Cloud Workspace uses WiFi and the MQTT protocol to send data from your IoT Project to the internet. As with most end-to-end solutions, Digi-Key provides their own Cloud Storage which can store up to 10MB of data per-device. If your IoT project requires a large amount of cloud storage - you can still use Digi-Key IoT Studio. Digi-Key IoT Studio supports sending data from your project to larger cloud storage providers like Amazon AWS.

Getting Started

Before you can use Digi-Key IoT Studio, you'll need to install two applications: DK IoT Studio Mobile and IoT Agent.

Install DK IoT Studio Mobile App

The Digi-Key IoT Studio app is an app which works with microcontrollers such as the Adafruit Feather ESP32 Huzzah and the Digi-Key IoT Platform. It lets you monitor your connected projects from your phone or tablet.

Download Digi-Key IoT for iOS

Download Digi-Key IoT for Android

Install IoT Agent

You'll need the IoT Agent to program your HUZZAH32 from Digi-Key IoT Studio. The IoT Agent is a local application that's used to program hardware from your web browser. It runs on every major desktop operating system:

Download Digi-Key IoT Agent for Windows

Download Digi-Key IoT Agent for macOS

Download Digi-Key IoT Agent for Linux

If you encounter an issue with running the IoT Agent, post up on the Digi-Key Tech Forum for support.

Creating a Digi-Key IoT Studio Project

Once you installed both the Digi-Key IoT Mobile App and IoT Agent, navigate to the Digi-Key IoT Studio website. You'll be prompted to log in with your Digi-Key account or create one if you haven't yet.

project_70

You'll be brought to the Studio Projects screen. From the Studio Projects screen, create a new project by clicking the + button.

board_71

You'll be creating a project using the Adafruit HUZZAH32 board. Select the Huzzah32 and name the project IoT Home.

workspace_72

Once the project is created successfully, you'll be brought to the Embedded Workspace for your project.

The embedded workspace in Digi-Key IoT Studio Project allows you to build embedded firmware. You'll be using this workspace to program your HUZZAH32.

Let's get started by building a project which can turn on or off the smart home's LEDs from the mobile app.

Turning on the Lights

Step-by-Step: Embedded Workspace

You're going to create a mobile application to turn on the IoT Home's lights from an application on your phone.

You'll start by adding embedded elements to your workspace. Earlier, you connected the LED lights to a pin on the Feather Huzzah32. You'll use a GPIO Pin Element to read or write the state of a GPIO pin.

app_73

  • From the element toolbox within IoT Studio's Embedded workspace, click the GPIO Pin element.

app_74

  • You should see a new GPIO Pin element appear on your workspace.

element_75

Click the GPIOPin element in the workspace to bring up the element's properties.

  • Later in this project, you'll be adding another GPIO element. To avoid confusion, rename the element to GPIOPin14.

Your IoT Home uses the Feather Huzzah32's GPIO Pin #14 for the LEDs.

  • Change the GPIO Pin to IO14.

Congrats - you've set up your first IoT Studio Element. Now, you need a way to interact with the LEDs.

Digi-Key IoT Studio provides two different types of transports for your Feather Huzzah32 - Bluetooth Low Energy (BLE) and WiFi ("Cloud").

Since you'll be sending a small amount of data (a binary 1 or 0) to the IoT Home from the mobile application, and want it to respond quickly, you're going to use Bluetooth Low Energy as a transport.

bluetooth_76

  • From the element toolbox within IoT Studio's embedded workspace, click the BLE Gatt Characteristic element.

bluetooth_77

  • You should see a new element in your embedded workspace named BLECharacteristicCustom.

Click the BLE GATT Characteristic Element to bring up its properties. Later, you'll be connecting this element to a toggle switch on the mobile application. The toggle switch element can only send a 1 or a 0, you'll need to change the Data Type to a boolean.

BLE_78

  • Change Read Data Type to Boolean
  • Change Write Data Type to Boolean
  • Change Notify Data Type to Boolean

configure_79

With the BLE GATT element and GPIO element configured, let's connect them together!

  • Scroll down in the BLE GATT Characteristic Element Properties until you see Add Event.
  • Click the + Symbol to create a new connector.

You're going to create a connector from the BLE Characteristic Element to the GPIO Pin.

Click the + Symbol above Add Event in the BLE Characteristic Element's properties. Then, click the GPIO element.

Change the connector's ability to Set State.

state_80

Step-by-Step: Application Workspace

With the firmware portion of the project completed, it's time to build a mobile application to interact with the embedded project. Click the Application Tab underneath your project's title to be brought to the Application workspace.

IoT_81

The Application Tab is different from the cloud or embedded tabs - it contains an Application Builder to design the project's interface and an Application Workspace to construct the application's interface and logic.

device_82

device_83

Let's begin by changing the display size to match the device you're using.

  • On the Application Builder, click the Add Layout button
  • Click the toggle switch to select the display size that best matches your device's display
  • Click Save

Let's add a background image for the application. We created one for the iPhone X display size. You may need to crop/resize the image to fit your device's display.

Download the background image by clicking the button below and save it to your Desktop.

Download iot-home-background.png

interface_84

From the element toolbox under Application Interface, select the Image element.

properties_85

An image element should appear on the workspace and the application builder.

  • From the workspace, click the Image Element to bring up its element properties.

properties_86

 

  • From the Image Element's properties, click Browse and select the iot-home-background.png image you downloaded earlier.

You can move the background image around and resize it to fit the size of the display you're using.

properties_87

You'll notice that there is a BLE Characteristic Element on the Application Workspace - this isn't a mistake. In fact, this is the same element you added to the embedded workspace. Bluetooth and WiFi elements in IoT Studio often create mirror elements in other workspaces. One purpose of this is to send data bi-directionally between a mobile application and the embedded firmware.

You'll be writing the state of the toggle switch from the app to the BLE characteristic element. The firmware will read this element's value and set the pin to the state of the toggle switch.

toggle_88

Digi-Key IoT Studio has an element which is perfect for controlling the lights in your home. The Toggle Switch element is bi-directional and can be used to send either 1 or 0 to the lights to turn them on or off.

From Application Interface, select the Toggle Switch element.

Since you'll be sending data from the Toggle Switch element to the BLE Characteristic Element, change the order of the elements by dragging and dropping them such that the toggle switch is placed before the BLE Characteristic.

  • Click the Toggle Element on the Workspace to bring up its element properties and click Add Event.
  • Drag a connector from the toggle element to the BLE Characteristic element on your workspace.

drag_89

execute_239

Each connector can execute different events based on a trigger. We'll want to write the state of the toggle switch (on or off) to the BLE Characteristic Element, so we'll use the Toggle Element's Changed trigger.

  • From the Application Workspace, click the Toggle Element to bring up its properties
  • Verify that the Toggle Element trigger you are modifying is the Changed trigger
  • Set the Ability to Write
  • Set the Value to value

You might be wondering why the Toggle element is not appearing on the application builder. The element is on the builder, but it's located in the background layer. The Application Builder supports two layers for images. The background is in front of the toggle element.

Let's bring the toggle element to the top layer so we can interact with it.

top_90

  • From the Application Workspace, click the Toggle Element
  • From the Application Builder Toolbar, click the Send to Front button
    • The Toggle Button should appear on the interface

snap_91

To make sure you'll align this element correctly, you'll use Application Builder's Snap-to-Grid feature.

  • From the Application Builder Toolbar, click the # icon
  • Click the toggle element and drag it underneath the lightbulb icon on the background image

Step-by-Step: Uploading Firmware

You just created embedded firmware and a mobile application. Now, let's program the firmware onto the Feather Huzzah32 and control the IoT Home from your device.

compile_92

Click the Compile button at the top of your project to compile the project. This will take anywhere from a few seconds to a few minutes, depending on how complicated your project is and how busy the build servers are.

IoT_240

Once compiled successfully, a green status bar across the bottom of the screen will appear telling you that your project is compiled.

If there is a compilation error, a window with a descriptive compiler error will appear over the workspace.

Next, plug your Huzzah32 into a port on your computer and make sure the IoT Agent application is running in the background (it should be visible in your system tray).

plug_93

  • From the Embedded Tab, click the Program Firmware Icon
  • Select the Serial Port your Huzzah32 is connected to and select a serial speed
  • Click Program

plug_94

plug_95

 plug_96

The Program Firmware window will update when the programming is complete.

If your program uploaded successfully, move on to using the Digi-Key IoT Mobile Application to interact with your IoT Home's lights.

Step-by-Step: DK IoT Studio Mobile App

The DK Studio Mobile app "works in conjunction with a wireless device (your cell Phone) and the Digi-Key IoT Platform (cloud service) to monitor your custom-built connected things".

device_97

logon_98

Open the application from your device. Click the Login button and log into your Digi-Key account.

View_99

The DK IoT Studio Mobile App is a pared down version of the web-based Digi-Key IoT Studio. You can't edit or modify code, but you can connect to your devices and view their status.

  • From the sidebar, tap the Cube icon. This will bring up the Devices screen.
  • From the top of the Devices screen, tap the cube with a plus icon (+) to bring up the Add Device screen.

Add_100

Add_101

Your IoT Home should appear as a device in range, along with its MAC address and transport (BLE).

  • Tap the device name
    • Make sure not to unplug the Feather while the app is in the middle of the provisioning process.

settings_102

The WiFi Provisioning screen will appear. Since you are using BLE instead of WiFi, tap the cancel button.

The app should load its Application View. Tap the toggle button - the lights should turn on and off!

lights_103

Monitoring your Home

Now that you can turn on the lights inside your home - you may be asking what else can you do? One popular feature people add to their smart-homes is environmental monitoring. Tracking your home's environmental data is useful for both short-term alerts (if the temperature in a room is too low, or the concentration of gas is too high) and long-term logging (logging data over a long period of time can help us detect abnormalities within the data).

You're going to use the Embedded Workspace to build firmware for obtaining precision temperature readings from inside your home using the Analog Devices FeatherWing. Then, you'll add the Bosch BME680 to obtain readings for the relative humidity and the gas level.

Then, you'll use the Application Workspace to enhance your mobile application by adding labels to display readings from the sensors inside your home.

Finally, you'll switch to the Cloud Workspace to send data from your DK IoT App to DK IoT Studio's Cloud Storage.

Step-by-Step: Embedded Workspace

You'll begin by adding an interval element to your project. Digi-Key IoT uses interval elements to trigger connected elements. You can specify an interval in milliseconds. When the timer expires, it will trigger all elements connected to it.

Embedded_104

 

  • From the element toolbox within IoT Studio's Embedded workspace, click the Interval element.

Embedded_105

Embedded_106

  • Move the Interval Element underneath the BLECharacteristic Element.

Elements for the BME680 or the Sensor FeatherWing are not within the default element toolbox - you'll have to manually add them from within the Element Library.

toolbox_107

  • From the element toolbox within IoT Studio's Embedded workspace, click Add Element

toolbox_108

  • From the Element Library, search for the BME680

toolbox_109

  • Enable the BME680 library elements by clicking the toggle button
  • From the bottom of the Element Library, click Save

You will also need to import the ADT7410 sensor library.

  • From the element library, search for the ADT7410FEATHERWING
  • Enable the ADT7410FEATHERWING library
  • From the bottom of the Element Library, click Save

imported_110

The ADT7410 and BME680 sensors should now appear in your Element Toolbox under Imported. Let's add the ADT7410 temperature sensor to the workspace.

  • From the element toolbox within IoT Studio's Embedded workspace, click the ADT7410 Temperature Element to add it to the Workspace
  • Move the ADT7410 element underneath the GPIO element

Make a new connection between the Interval Element and the ADT7410 Element.

interval_111

Every time the interval executes, the interval will trigger the ADT7410FeatherWing element to read the sensor's temperature in degrees Celsius.

Let's create a new BLE GATT Characteristic to read the temperature sensor's value.

value_112

value_113

  • From the element toolbox within IoT Studio's Embedded workspace, click the BLE GATT Characteristic Element to add it to the Workspace
  • Click the BLECharacteristicCustom Element on the Embedded workspace to bring up its properties
  • Change the element's name to BLECharacteristicTemp

Let's add a new event to write data to the BLE Characteristic each time the temperature is is read.

  • Click the ADT7410FeatherWing Element
  • Click Add Event
  • Add a connector between the ADT7410FeatherWing Element and the BLECharacteristicTemp Element

IoT Home

IOTHOME_114

debug_115

debug_116

The debug print element. This element will print the sensor value to the Huzzah debug UART console (on your computer). This is useful for checking if the sensors are operating correctly, independently of the BLE connection.

  • From the element toolbox within IoT Studio's Embedded workspace, click the Debug Print Element to add it to the Workspace
  • From the Debug Print Element's properties, name the element DebugPrintTemp

You can add a label to differentiate which value is being printed to the console:

  • Under Prepend Text, add the text Temperature (*C):
    • The temperature reading in the UART terminal will look something like: Temperature (*C): 25.23

Make a new connection between the ADT7410FeatherWing element and the DebugPrintTemp Element.

New_117

To summarize - every time the interval's timer expires, the ADT7410 will read the temperature. Once the temperature is read from the sensor, it'll be sent to the BLECharacteristicTemp element and printed to the UART console.

Next, re-do these steps, but for the BME680 sensor.

humidity_118

humidity_119

  • From the element toolbox within IoT Studio's Embedded workspace, click the BME680 Element to add it to the Workspace
  • Click the BME680 element to bring up the properties
  • Change the I2C Address to 0x77
  • Change the trigger to Humidity Read

read_120

read_121

  • Add a connector from the Interval Element to the BME680 Element
  • In the Interval Element's Properties, change the BME680's ability to Read Humidity (%RH)

sensor_122

sensor_123

Let's add some elements to receive and print the data from the sensor.

  • From the element toolbox within the IoT Studio Embedded workspace, click the BLE GATT Characteristic Element to add it to the Workspace
  • Change the name of this element to BLECharacteristicHumid
  • From the element toolbox within IoT Studio's Embedded workspace, click the Debug Print Element to add it to the Workspace
  • Change the name of this element to DebugPrintHumid
  • Modify the Prepend Text to Humidity (%RH)

printelement_124

  • Click the BME680 element to bring up its properties
  • Under the Humidity Read trigger, click Add Event
  • Add a connector between the BME680 element and the BLE Characteristic Element
  • Add a connector between the BME680 Element and the Debug Print Element

temp_125

temp_126

Next, let's read data from the BME680's gas sensor. This sensor will read its resistance in ohms.

  • From the element toolbox within IoT Studio's Embedded workspace, click the Interval Element to bring up its properties
  • From the Interval Properties, click Add Event
  • Add a connector between the Interval Element and the BME680 Element
  • Change the ability of the connector to Read Gas Resistance (Ohm)

click_127

Click the BME680 Element in the Embedded Workspace to bring up its properties.

Change the Trigger from Humidity Read to Gas Resistance Read.

You'll notice that there are no events defined for this trigger, but there are connectors from the BME to other elements. Those connectors are specific to the Read Humidity trigger. You'll be adding similar events for the Gas Resistance Read trigger.

element_128

element_129

Let's add some elements to receive and print the data from the sensor.

  • From the element toolbox within IoT Studio's Embedded workspace, click the BLE GATT Characteristic Element to add it to the Workspace
  • Change the name of this element to BLECharacteristicGas
  • From the element toolbox within IoT Studio's Embedded workspace, click the Debug Print Element to add it to the Workspace
  • Change the name of this element to DebugPrintGas
  • Modify the Prepend Text to Gas (ohms):

Once the Elements are configured, make a connection between the BME680 Element and both elements.

Make sure your embedded workspace looks like the following before moving on.

moving_130

 

Step-by-Step: Application Workspace

The Mobile Application allows you visually display the sensor values. You'll add label elements to the interface to display the values read from the sensors.

navigate_131

navigate_132

Navigate to the Application Tab. The BLE Characteristics you created in the embedded tab may be cluttered. Move them around to organize your workspace.

applications_137

applications_136

With an organized workspace, you're ready to start programming the application's logic.

  • From the Element Toolbox, add an Interval Element
  • Click the Interval Element in the Application Workspace
  • From the Interval Element's Properties, click Add Event
  • Connect the Interval Element to the BLECharacteristicTemp Element
  • Connect the Interval Element to the BLECharacteristicHumid and BLECharacteristicGas elements

labels_138

logic_134

logic_135

You'll want to add labels to display the values read by the BLE Characteristic Elements.

  • From the Element Toolbox, click the Label button three times to add three Label elements
  • Rename the first label element to LabelTemp
  • Rename the second label element to LabelHumid
  • Rename the third label element to LabelGas

connector_140

connector_141

Let's add a connector between the BLE Characteristic Element and the Label Element. This will set the label's text to the value of data read by the BLE Characteristic.

  • Click the BLECharacteristicTemp element to bring up its properties
  • Click Add Event
  • Add a connector between BLECharacteristicTemp and LabelTemp

Next, you'll format the temperature to display on the label with its value and respective unit. The label's text can be formatted using Javascript.

  • Click the connector between the BLECharacteristic Element and the Label element to bring up its properties
  • Under abilities, change the text to readData+"°C"

humid_142

humid_143

  • Add a connector between BLECharacteristicHumid and LabelHumid
  • Click the connector between BLECharacteristicHumid and LabelHumid to bring up the connector's properties
  • Under abilities, change the text to readData+"%RH"

gas_144

gas_145

Finally, you'll set up the connection between the gas sensor reading and its label on the mobile application.

  • Make a connection between BLECharacteristicGas and LabelGas
  • Click the connector between BLECharacteristicGas and LabelGas to bring up the connector's properties
  • Under abilities, change the text to readData/100+"Kohms"

Let's take a short break from configuring our application's logic and configure the application's design

LabelTemp_146

LabelTemp_147

Click and drag LabelTemp underneath the thermometer icon.

front_148

  • Bring the humidity label to the front and move it underneath the % symbol icon
  • Bring the gas label to the front and move it underneath the gauge icon

Placeholder_149

Placeholder_150

Let's add some placeholder text to our interface and center the labels to format our text.

  • Click LabelTemp to bring up the element's properties
  • Change the label's text to 25°C
  • Change the label's alignment to Center

Repeat this for the humidity and gas labels.

While data will display on the application, this data is not stored. To store this data, you'll need to add Cloud elements to our Application Workspace. These elements will create mirrored elements in the Cloud Workspace.

rename_151

rename_152

rename_153

rename_154

  • From the Element Toolbox, click Cloud Event
  • Rename the Cloud Event to CloudEventTemp
  • Click BLECharacteristicTemp to bring up its properties
  • Click Add Event
  • Add a connector between BLECharacteristicTemp and CloudEvent
  • Create a new element named CloudEventHumid and connect it to BLECharacteristicHumidity

cloud_155

  • Create a new Cloud Event element
  • Name the element CloudEventGas
  • Add a connector between BLECharacteristicGas and CloudEventGas
  • Click the gear element on the connector
  • Change the value to readData/1000

You've programmed your mobile application to read values from BLE Characteristics and designed and interface to display these formatted values. Make sure your interface looks similar to the following screenshot before moving on.

display_156

Step-by-Step: Cloud Workspace

The Cloud tab is a workspace in DK IoT Studio for enabling an IoT project's connectivity over WiFi with cloud services (Digi-Key IoT Cloud or Amazon Web Services).

tab_157

tab_158

  • Click the Cloud Tab underneath your project's name to be brought to the Cloud Workspace
  • Your cloud workspace should contain the three cloud events you created in the application workspace: CloudEventTemp, CloudEventHumid, CloudEventGas

You may want to organize the elements in the Cloud Workspace.

send_159

send_160

You'll need somewhere to send this data. Luckily, Digi-Key IoT offers up to 10 megabytes of cloud storage per device. To add data to this cloud storage, use the Cloud Storage Element.

  • From the Cloud Element Toolbox, click the cloud storage element to add it to your Cloud Workspace
  • On the Cloud Workspace, click CloudEventTemp. Then, click Add Event
  • Make a connector between the CloudEventTemp and CloudStorage elements

While you could send raw data to the cloud storage element, it would be hard to discern which data is the temperature data and which is the gas data. To help identify which value is being sent to the cloud storage, you'll associate each value with some metadata (information about the data).

between_161

between_162

Click the connector between the cloud event and the cloud storage.

Under the Add Data ability, change the value to {temperature:value}.

repeat_163

repeat_164

repeat_165

 

Repeat the steps above to add connectors and labels for the humidity and gas values.

Code Usage

Compile the project. Then, upload the project to the Feather HUZZAH32.

code_167

code_168

code_166

  • Open the DK IoT Studio Mobile App on your device
  • Tap the Devices tab on the sidebar
  • Add a new device to the devices page by tapping the + icon
  • Your IoT Home should appear as a device in range. Tap the IoT Home Project
  • On the Configure WiFi Settings screen, tap CANCEL

load_169

The Application's interface should load and populate with values from the sensors.

Try breathing directly on the Sensor FeatherWing's ADT7410 sensor to increase its temperature or humidity. You should observe the values on the application view change.

Keeping it Cool

While monitoring your home's temperature is useful, your home will not be able to respond to changes in temperature. While you could open a window (or remove the roof) to air it out, it'd be useful to control the fan inside your home to regulate temperature.

You'll be building code to self-regulate the temperature inside the home to your preferred temperature.

Step-by-Step: Embedded Workspace

This section builds on the previous section, Monitoring your Home. You'll be adding a comparison element to evaluate the temperature and a GPIO element to control the relay's state.

basic_170

basic_171

The ADI FeatherWing reads the temperature as a floating point value. At the time of writing, Digi-Key IoT Studio is unable to use floating point values with comparison elements. To resolve this, convert the floating point value into an integer value.

  • From the Embedded Workspace's Element Toolbox, click the Type Conversion element
  • Click the DataTypeConvert Element to open its properties
  • In the Type Conversion Element's properties, change the output type to Integer

conn_172

Add a new connector between the ADT7410FeatherWing Element and the DataTypeConvert element.

firmware_173

firmware_174

With the temperature reading converted to an integer, it's time to add some logic to our embedded firmware.

  • From the Embedded Workspace's Element Toolbox, click the Comparison element
  • Change the Comparison Element's condition to Greater Than
  • Change the Target Value to the maximum temperature value
    • If the temperature sensor reads a value greater than the Target Value, the relay will switch and turn on the motor

elements_175

Add a new connector between the DataTypeConvert Element and the EmbeddedComparison Element.

GPIO_176

GPIO_177

Next, you need to add a GPIO element to control the relay. The relay is connected to GPIO Pin 33 on the ESP32 Huzzah.

  • From the Embedded Workspace's Element Toolbox, click the GPIO Pin element
  • From the GPIOPin Element's properties, change the Name to GPIOPin33
  • Change the GPIO Pin to IO33

condition_179

condition_178

You'll turn on the relay when the Comparison Element evaluates that the expression is True.

  • Click the EmbeddedComparsion Element to open its properties
  • Under Triggers, ensure the trigger is set to Condition True
  • Add a connector between the EmbeddedComparison Element and GPIOPin33

pin_180

pin_181

To turn on the relay if the Target Value is reached,

  • Click the connector between the comparison element and the GPIO pin
  • Change the GPIO Pin's Ability to Set Pin High

fan_182

fan_183

False_241

Our IoT Home turns on the fan when the temperature increases past a target value, but what if it the home cooled off? You'll need to turn off the relay.

  • Click the EmbeddedComparsion element to open its properties
  • Switch Condition True to Condition False
  • Add a connector between the EmbeddedComparison Element and the GPIO Pin Element
  • Change the GPIO Pin's ability to Set Pin Low

Your "code" for the ADT7410 temperature sensor should look like the following...

temp_184

Code Usage

Compile the project. Then, upload the project to the Feather HUZZAH32.

DK_185

DK_186

DK_188

DK_187

 

  • Open the DK IoT Studio Mobile App on your device
  • Tap the Devices tab on the sidebar
  • Add a new device to the devices page by tapping the + icon
  • Your IoT Home should appear as a device in range. Tap the IoT Home Project
  • On the Configure WiFi Settings screen, tap CANCEL

Once connected, the application view will display the temperature sensor's value. Try holding your finger over the ADT7410 (or use a hair-dryer outside to the IoT Home) turn on the fan.

The fan will turn off after the temperature decreases below its target value.

off_189

Door Alarm

door_190

Intruder alert! You'll be using the magnetic door sensor to detect when someone opens or closes the front door. You'll program your IoT Home to sound an alarm when someone opens the door.

But what if someone enters our home while you're away? You'll add the ability to monitor your home's status remotely to your mobile app.

Step-by-Step: Embedded Workspace

step_191

step_192

If someone enters your house, you would want the home security system to notify you as quickly as possible. You'll be adding an interval with a shorter timer to the embedded workspace to read the status of the door sensor.

  • From the Embedded Workspace's Element Toolbox, click the Interval element
  • Name the interval IntervalFast
  • In the Interval Element's properties, set the time to 50 milliseconds

security_193

You'll need to read the state of the GPIO Pin connected to the door sensor, GPIO Pin 15.

  • Add a new GPIO Element to the Workspace
  • Change the name of the GPIO Pin Element to GPIOPin15
  • Change the GPIO Pin to IO15
  • Change the GPIO Mode to Input Pull Down

fast_195

fast_196

  • Add a connector between IntervalFast and GPIOPin15
  • Change the connector's ability to Read

mobile_197

mobile_198

Next, you will write the state of the door to a BLE Characteristic so that it can be read in the mobile application.

  • Create a new BLE GATT Characteristic element
  • Name the element BLECharacteristicDoor
  • Change the Read Data Type to Boolean
  • Change the Write Data Type to Boolean
  • Change the Notify Data Type to Boolean

trigger_199

trigger_200

  • In the GPIOPin15 Element's properties, change its trigger to Read
  • Add a new connector between GPIOPin15 and BLECharacteristicDoor

next_201

trigger_201

trigger_200

Next, let's add an element to evaluate if the door is open or closed.

  • From the Element Toolbox, select the Comparison Element
  • In the comparison element's properties, change the element's name to EmbeddedComparisonDoor
  • Change the target value to 1
  • Then, add a connector between the GPIOPin15 element and the embedded comparison element

buzzer_203

buzzer_204

You need a way to notify our neighbors that an intruder has entered our home. Luckily, you installed a buzzer (conveniently connected to ESP32 Pin 12) in the smart home hub!

  • Add a GPIO Pin Element
  • Name the element GPIOPin12
  • Change the GPIO Pin to IO12

true_205

true_206

true_207

Using the comparison element, your code will evaluate if the door is open or not. Based on the door's state, the buzzer will turn on or off.

  • Click the EmbeddedComparisonDoor element
  • Under triggers -> Condition True, click Add Event
  • Add a new connector between the embedded comparison element and GPIO Pin 12
  • Change the connector's ability to Set Pin High
  • Next, change the EmbeddedComparisonDoor Element's trigger to Condition False
  • Change the connector's ability to Set Pin Low

Step-by-Step: Application Workspace

Let's add an icon to the mobile application to let us know if the door is open, even if you're away from home.

icon_209

icon_210

icon_208

  • From the Application Workspace, add a new interval element
  • Name this interval IntervalFast
  • Change the time to 50 milliseconds
  • Add a new connector between IntervalFast and BLECharacteristicDoor

open_211

open_212

To evaluate if the door is open or closed, a comparison element needs to be added.

  • Add a Condition Element to the Application Workspace
  • Add a new connector between the BLECharacteristicDoor and Condition elements

Download the two door images by clicking the buttons below. Save them to your desktop.

Download door-closed.png

Download door-open.png

ok_213

Ok, here comes the tricky part. Two icons are used to display the door's status - one for if it is closed, and one for if it is open. This will look great in our application, but is a bit tricky to implement as you will need to build some code to show one icon at a time.

  • Add two image elements to the Application Workspace
  • Name the first image element ImageDoorOpen
  • Underneath Image, click Browse
  • From the files you downloaded earlier, select Door-Open.png

open_214

In the Application Builder Workspace, bring the door open image to the front of the application and move it to the bottom right of the application's interface.

open_215

  • Click the second image element on the workspace
  • From the Image Element's properties, name the element ImageDoorClosed
  • Click the Browse button
  • From the files you downloaded earlier, select Door-Closed.png

image_215

In the Application Builder Workspace, bring the door closed image to the front of the application and move it to the bottom right of the application's interface. It should overlap the door open image.

False_216

False_217

Let's set up the condition element to selectively show and hide images based on the state of the door.

  • From the Workspace, click the Condition Element
  • Under triggers, select Condition True
  • Add a new connector between the Condition Element and ImageDoorOpen
  • Change the ability of the connector to Show
  • Add a new connector between the Condition Element and ImageDoorClosed
  • Change the ability of the connector to Hide

Now, let's set up the condition element for the opposite condition.

  • Under triggers, select Condition False
  • Add a new connector between the Condition Element and ImageDoorClosed
  • Change the ability of the connector to Show
  • Add a new connector between the Condition Element and ImageDoorOpen
  • Change the ability of the connector to Hide

Code Usage

Compile the project. Then, upload the project to the Feather HUZZAH32.

Open the door on your IoT Home. You should hear a loud BEEEEEEP from the buzzer. The icon on the mobile application should show the door's state.

Closing the door on your IoT Home should turn off the buzzer. The icon on the mobile application should display the door's status.

complie_218

Dashboards

Now that data is streaming into both your device over Bluetooth and it's connected to Digi-Key IoT Cloud Storage, you can now visualize our home's data in real-time. While you could use an API or framework to display this data, there's an even simpler way.

Digi-Key IoT Studio is an all-in-one solution and includes a Dashboard front-end. You're going to build a dashboard to help visualize the sensors in your home over time. Just like before, there's no programming. You'll drag and drop widgets to create a dashboard.

As mentioned before, IoT Studio provides 10.49MB of data per-device. You can verify how much data your device is using by navigating to the device panel.

devices_220

devices_221

devices_219

Before jumping into building a dashboard, it's important to know where our data is located. IoT Studio provides 10.49MB of data per-device, for up to 5 devices.

To verify how much data your IoT Home is using,

  • Navigate to the Device Manager
  • From the Device Manager, click the IoT Home device
  • Click Storage from the device to navigate to the device storage page

The storage page will display how much data your device uses and which database its stored on. Data is stored in the CloudStorage element you created in the Monitoring your Home page.

You may also download or delete all your device's data at any point. Also, you may verify how much data your device is using by navigating to the device panel.

Step-by-Step: Building a Dashboard

Digi-Key IoT Studio's Dashboard "allows you to display your devices data through a variety of widgets". Widgets are visual components that allow you to display device data in different forms. There are widgets for displaying data as a gauge, a text block, a graph, or even as a pie chart.

chart_222

chart_223

Let's start by adding a gauge widget to display the temperature from the ADT7410 temperature sensor in the IoT Home.

  • From Digi-Key IoT Studio, navigate to the Dashboard page
  • Click the Gear button on the right-hand side of the page to bring up the configuration menu
  • Click the Data Gauge widget

data_224

data_225

A new Data Gauge widget will appear on your dashboard.

  • Click the ... button to bring up a dropdown for configuring its settings
  • Click Settings to bring up the widget's properties

guage_226

guage_227

In the widget's properties window,

  • Change the title to Data Gauge - Temperature
  • Change the unit to degrees C
  • Change the number of decimal places to 2
  • Under Data Source, click Select

select_228

select_229

select_230

select_231

  • Select IoT Home as the device
  • Select CloudStorage as the Cloud Storage Provider
  • Select Temperature as the value
  • Click Confirm to configure the data source
  • Then, click Save

The gauge will automatically appear, and the needle will move, reflecting the value read by your temperature sensor.

dashboard_228

let_229

let_230

Let's add another element type to display the resistance of the gas sensor.

  • From the Configure Dashboard menu, select the Data Glance widget
  • Click the ... button to bring up a dropdown for configuring it settings
  • Click Settings

glance_231

  • Change the title to Data Glance - Gas
  • Change the unit to ohms
  • Change the icon to reflect what is being measured. In this case, it's the air quality
  • You may also optionally change the update interval, ranging from 1 to 30 seconds
  • Under data source, click select

glance_232

glance_233

glance_234

glance_235

  • Under Select Device, click IoT Home
  • Under Select Cloud Storage, click CloudStorage
  • Under Select Value, click gas (string)
  • Click Save

The data glance widget should populate with the IoT Home's gas reading.

widget_234

widget_235

widget_236

Let's complete this dashboard by adding a second Data Glance widget to display the relative humidity in the IoT Home.

  • Add a Data Glance Widget to your dashboard
  • In the Data Glance configuration, change the title to Data Glance - Humidity
  • Change the unit to %RH
  • Change the icon to Humidity
  • Set the data source to humid
  • Click Save

You've successfully created a dashboard to display data about your IoT Home's sensors! You can view this dashboard on any web browser or mobile device, from anywhere in the world.

developer_238

For more information about the DK IoT Studio Dashboard and its elements, visit the developer documentation pages.

Key Parts and Components

Add all Digi-Key Parts to Cart
  • 1528-2515-ND
  • 1528-4253-ND
  • 1528-1907-ND
  • 1528-1658-ND
  • 1528-1525-ND
  • 1528-2682-ND
  • 1528-1494-ND
  • 1528-1744-ND
  • 1742-1146-ND
  • KE1106-ND
  • 1691-1083-ND
  • 243-1005-ND
  • 1528-2181-ND
  • 1528-2444-ND
  • 1528-2880-ND