The Porter Tour: Customizing a Particle Device UI
Porter’s core function is automatically generating a User Interface for an IoT device, which you can then customize to make testing more efficient and demos more effective.
Porter builds its initial interface by inspecting the Particle Cloud-exposed functions and variables for a device and presenting them in a standard field display and input form. In this part of the tour, you’ll see how you can customize the default interface that Porter creates.
If you haven’t already, you might want to check out Working with Devices, which explains how to get started with Porter by connecting your Particle Cloud account and selecting your devices.
Also, I’ll be working with the remote temperature monitor project on Hackster in the examples below, if you want to follow along.
Build UI Mode
Upon selecting the device where the temperature monitor project is running, Porter shows all of the cloud functions and variables in default order, and plain text inputs for the functions. While serviceable, it’s not an elegant or efficient way to interact with the project.
To start customizing the UI for this device, click the Customize chevron, which opens a UI builder. Here you can configure function inputs, show and hide variables and functions, and arrange a custom display order.
To me, function input configuration is the most powerful aspect of Porter’s UI customization capabilities, saving time during repetitive testing and helping avoid input errors.
The simplest function input type, other than the default plain text input field, is the button. This function input type will display one or two buttons which call the function using predefined argument values.
A button input saves you from having to remember and re-type input values every time you call the function, making executing functions faster and less error prone and saving me time as you test your project, over and over and over.
To configure the Set Scale function to switch between Farenheit and Celsius, click the Set button next to the function.
Then, choose Button for the input type, which expands the configure dialog box showing two fields.
Set one field to “F” and the other to “C” and click Save.
Like a button, a text list provides pre-defined argument values. However, it allows for an unlimited number of options which appear as a drop down menu.
After choosing the Text (List) input type, you can enter as many options as you require.
And, once you’ve added your input values, you can re-order them by dragging their handles.
The Number (Free Form) type will decorate a text input field with increment and decrement buttons, which add or subtract from the input value.
Note that you can configure the amount by which the buttons step the value.
The Number (Range) type displays a slider, with click and drag input, so you can say goodbye to out of range errors.
You can configure high and low input limits, and the step by which the value will increment as the slider is dragged.
Variable and Function Display
Moving on from function input configuration, you can customize the display of your UI in few other ways.
For instance, you can hide and show the variables and functions you don’t frequently need by clicking the corresponding eye icon.
You can also rearrange functions and variables by dragging their handles.
Porter offers four distinct visual themes which can help quickly identify a device, or type of device.
You can change the theme for a device by clicking the Theme icon in the customize toolbar. As you click on each theme, you’ll see a preview of how the different display elements will appear.
Using Your Custom UI
Once your device is configured, exit customize mode by clicking the Customize chevron again. If it’s not already, make sure that you have the “Custom” option selected in the Device Control Bar.
If, at any time, you need to work with the all of the functions and variables on a device, including the ones you’ve hideen, or just want to use standard text inputs for your functions, you can switch back the Basic view.
Creating a custom UI for your IoT device is really that easy. Want to learn more? Keep exploring back at the Porter Tour Overview.