Digi-Key IoT Studio Web and Mobile Applications have been discontinued by Digi-Key. The links and instructions in this guide may be outdated or invalid. For support and more information about the future of the Digi-Key IoT Studio application, please visit https://forum.digikey.com/t/dk-iot-studio-has-migrated/8463

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

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

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
  • Add a connector between IntervalFast and GPIOPin15
  • Change the connector's ability to Read

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
  • In the GPIOPin15 Element's properties, change its trigger to Read
  • Add a new connector between GPIOPin15 and BLECharacteristicDoor

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.

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

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.

  • 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

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

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

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.

  • 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

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.

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.

This guide was first published on Dec 11, 2019. It was last updated on Mar 08, 2024.

This page (Door Alarm) was last updated on Mar 08, 2024.

Text editor powered by tinymce.