Before you start, we assume that you’ve already run through Tutorial 1: Linking Modulo. If not, please start there.
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.
There are several types of UI Controls available, but in this project we will use the Menu control for both.
Click the first attribute, LED Attribute (I/O 0): Menu, to open it for editing.
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.
Notice that we've selected the POPUP 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.