Before you start, we assume that you’ve already run through Tutorial 1: Linking Modulo. If not, please start there.
This tutorial is designed for the Modulo-1 and Modulo-2 dev boards, but not for the Modulo-1B.
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:
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:
Click LED Attribute, the attribute name for GPIO 0, to open its detailed view:
Click Button Attribute, the attribute name for GPIO 3, to open its detailed view:
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. As examples: some attribute values will be used “behind-the-scenes” to calculate the values of other attributes, and you can assign the same control to multiple attributes and multiple controls to the same attribute.
There are two steps to defining the UI controls: a) we first define the “attribute options” for each attribute; and b) we then assign UI controls to each attribute.
You might be wondering why defining attribute options is separate from assigning controls. The reason is so you can easily assign multiple controls to the same attribute without having to retype a lot of details (although that doesn’t apply to this Tutorial). To learn more about attribute options, read Define the Mobile App UI > Define the Attribute Options.
You will see that we have defined the following:
Now, again in the far-right pane, click the pencil icon in the Button:Button Attribute box to open its Attribute Option Details dialog:
Now we will assign a UI Control to each attribute. There are many types of UI Controls available, but in this project are using the Menu control for both.
Click the first attribute, LED Attribute (I/O 0): Menu, to open it for editing.
Now click Button Attribute (I/O 3): Menu to open it.
Notice that we’ve also selected the INLINE View Style.
Click UI Control Groups in the left-hand Navigation pane to group your controls.
The left-hand pane, Define the UI Control Groups, displays a representation of the device mobile app UI. At the top of both the mobile app and the Profile Editor is the “groups ribbon”; below are the controls for the selected group. Note that device Settings is a selection only shown in the mobile app groups ribbon, not in the Profile Editor.
We’ve already set up two groups, shown in the groups ribbon and labeled LED and Button. (We’ve already created groups for this project, but if we hadn’t, you would clickto create a new group.)
Click the group labeled LED to make it active and ready for editing. The group will be highlighted in orange:
Below the selected group, you’ll see the LED menu control. We’ve already moved the LED menu into the LED group, but if we hadn’t, you would add a control by dragging it from the Available UI Controls pane on the right into the controls display on the left, below the groups ribbon.
To remove a control from a group, simply drag it back to the Available UI Controls pane.
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.
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:
Before we get started, take a look at the Publish window:
OK, time to Publish:
Try out the new mobile app UI for your device! Notice that the LED is on, which is indicated on the Home screen. Because it’s the Primary Operation defined with a Boolean attribute, tapping the large device icon on the Home screen will toggle the LED on and off.
You should now 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 mobile app UI.