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.
- From the element toolbox within IoT Studio's Embedded workspace, click the GPIO Pin element.
- You should see a new GPIO Pin element appear on your workspace.
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.
- From the element toolbox within IoT Studio's embedded workspace, click the BLE Gatt Characteristic element.
- 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.
- Change Read Data Type to Boolean
- Change Write Data Type to Boolean
- Change Notify Data Type to Boolean
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 Charactertistic Element's properties. Then, click the GPIO element.
Change the connector's ability to Set State.
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.
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.
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.
From the element toolbox under Application Interface, select the Image element.
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.
- 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.
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 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.
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.
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.
- 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.
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.
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.
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.
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).
- 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
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.
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".
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.
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.
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!