Lesson 2: Creating a Device Profile
Before you start, we assume that you’ve already run through Lesson 1: Linking Modulo. If not, please start there.
If you haven’t already, download the Afero Profile Editor, for Windows or macOS. Open and sign in to the Profile Editor. The Startup window appears:
- For the purposes of this tutorial, we’re going to save you some typing by providing a pre-configured Modulo project.
- Please download the appropriate project to your local file system:
- If you’re working with a Modulo-1, download this file.
- Or, for Modulo-2, download this file.
- Decompress the downloaded zip file to a convenient location.
- In the Afero Profile Editor Startup window, select the Open button, navigate to the directory where you unzipped the project, and select the directory to open the project.
- Once the project is open, click Device Type in the Navigation pane in the left of the window, to be sure we’re all starting in the same view.
Once the project is open, click Device Type in the Navigation pane in the left of the window, to be sure we’re all starting in the same view. Your window should look something like this:
Notice the Module Type of the profile is specified right at the top of the pane (in the example, we’re working with a Modulo-2.) This module type was specified in the pre-built profile you downloaded; when creating a profile from scratch, you must specify the module type right from the beginning. Doing so is the first step in the New Profile window. It’s critical that the module type in the profile match the hardware you’re using in your project!
In the Device Type view, you can set the device name, type a detailed device description, and set the device icon. Of these items, only the icon will be visible to the end-user. Notice the Preview panel on the right of the view – it shows the selected device icon as it will appear in the mobile app.
Since we’re working with a pre-configured profile, you don’t need to make any changes, but if you like, feel free to do so. When you’re finished, click Save to save any changes you might have made.
Click Attributes in the left-hand Navigation pane. You’ll see that the four Modulo GPIO pins are listed. Only two GPIO pins are needed for this project, pins 0 and 3. Click the On/Off switch to ON for these two pins; you’ll see them highlighted in the right-hand Preview pane:
For this project, we’ve defined two attributes: one for GPIO 0, which is connected to the LED on the Modulo; and one for GPIO 3, which is tied to the pushbutton. We’ll take a detailed look at the attributes now. Note that selected values are shown in white letters on an orange background.
Click LED Attribute, the attribute name for GPIO 0, to open its detailed view:
- Attribute Name is a required field for all attributes. We’ve named this one LED Attribute but you can change it in this field.
- To control the LED from the mobile app, Operation Mode must be Output. This is because Outputs are Read/Write, and sending a command from the mobile app requires writing to an attribute.
- GPIO 0 is given a Default Logic Level of 1, which sets the default state of the LED to OFF.
- Leave both Options, PWM (pulse-width modulation) and Pulse, deselected.
- Leave the Active selector set to High.
- Don’t select any of the Bind to Attributes buttons.
Click Button Attribute, the attribute name for GPIO 3, to open its detailed view:
- Attribute Name is a required field for all attributes. We’ve named this one Button Attribute but you can change it here.
- Leave GPIO3 Operation Mode set to Input. This will display the state of the button when pressed in the mobile app.
- The Pull Up setting is required for pushbutton operation in this project.
- With Is Toggle set, the status displayed by the mobile app will switch with every momentary button push. If Is Toggle is not set, the state displayed will always reflect the current button state.
- Leave the Debounce Time set to 0, the Active selector set to High, and don’t select any of the Bind to Attributes buttons.
- Click Save when you are finished defining project attributes.
To move on to defining the mobile app UI for this project, click UI Controls in the left-hand Navigation pane.
You will probably not be surprised to find that two UI controls have been defined, since our project uses two attributes. It’s common (though not a rule) to have one UI control for every attribute.
There are several types of UI Controls available, but in this project we will use the Menu control for both.
Click UI Control Groups in the left-hand Navigation pane to group your controls.
Click the first attribute, LED Attribute (I/O 0): Menu, to open it for editing.
- The LED control is selected as Primary Operation, which means you can control the LED from the main screen of the mobile app by double-tapping the associated hex icon.
- Note that two value options have been defined. These represent the two different states the on-board LED can have: 0 is On, 1 is Off. You can edit the labels if you want, but keep the values as defined.
Click Button Attribute (I/O 3): Menu to open it.
This control happens to have the same value options as the LED control, but is not set as the Primary Operation.
- Click Save when you are finished defining UI controls.
- On the left, you’ll see a ring of icons, similar to what will display on the mobile app. We’ve already set up two groups, represented by circles and labeled Button and LED. The dotted circles are used for creating new UI Control Groups. (We’ve already created groups for this project, but if we hadn’t, you would click a dotted circle to start defining a group.) Notice the two default system groups, Automation and Settings .
- On the right, you’ll see all the controls you defined on the UI Control window, identified by their Default Label. These are the controls available for grouping.
Click the circle labeled LED to open the UI Control Group. The selected circle will change from black to orange, as shown below.
Below the icon ring, you’ll see a dotted rectangular box appear labeled LED. This rectangle represents a group. We’ve already set up the LED group, but if we hadn’t, you would add controls by dragging them from the Available UI Controls list on the right into a dotted group rectangle.
To remove a control from a group, simply drag it back to the Available UI Controls list.
Important! A control can appear in multiple groups, but must appear in at least one group or it won’t appear at all in the mobile app UI. That means that even if you have just one UI control, you’ll need to create a UI Control Group to contain it.
- Click Save when you are finished defining UI Control Groups.
Now that your device profile is complete, click Publish in the left-hand Navigation pane to install it on your Modulo.
If you intend to perform the next steps yourself (and you should!), you’ll need to set up some hardware:
- You should have your Modulo connected to USB (for power only at this time).
- You should have the Afero app running and open on your smartphone.
Before we get started, take a look at the Publish window:
- This window shows you all the developer devices on your account. For each available device, the Status displays the Bluetooth signal strength, e.g. -40dBm, in an orange badge.
- The Device Activity log will show all attribute-related communication between device and service in real-time. It is initially populated by the latest cached values from the Cloud.
OK, time to Publish:
- Select the device(s) you want to update by selecting the corresponding orange checkbox(es).
- Click Publish.
- The update can take up to one minute. You’ll see an update message in the Device Activity and the SW Version will change once the update has completed.
Try out the new mobile app UI for your device!
You should be able to control the Modulo LED using the LED buttons on your smartphone, and the pushbutton on the Modulo board should toggle the On/Off Button control in the app UI.