Interface Builder

The Interface builder skill empowers you to create your own touch-screen user interface (UI) for your robot. Use buttons, sliders, checkboxes, and camera displays to make an interactive control panel to activate features. It's a powerful way to interact with your robot.

With the Interface Builder skill, designing a user interface is very easy, and you can create as many pages as you like. The user can be presented with navigation buttons to switch between pages. The skill allows you to create fullscreen interfaces for the ARC software on a computer monitor or ARC mobile app on a phone or tablet (with limited functionality).

In the interface builder, the UI background, button, and pad images can be completely your own design. Regular images (.jpg and .bmp) can be used but if you use images with transparent backgrounds (.png) a very professional and creative UI can be built.

*Note: If the interface builder is not used for the mobile app, the default Desktop is displayed to users. This may be confusing to users so be sure to use the interface builder with ARC mobile.

Main Window

1. Connection Status Button
This button displays the status of the connection to the EZB and will connect/disconnect on press.

2. Camera Display
This area displays the video image of any camera configured in your ARC project.

3. Button
This button is a standard momentary touch button with a text label.

4. Image Button
This button allows you to create a button with a custom image.

5. Joystick Pad
This pad gives the user the ability to activate a robot's movement panel from a touch interface.

6. Servo Pad
This pad gives the user the ability to move 180-degree servos in a pan/tilt configuration, using just a finger.

7. Voltage/Temp Display
These displays are unique to the EZ-Robot EZ-B v4 and will show the on-board processor's temperature and the input voltage. The values are updated once a second.

8. Checkbox
These checkboxes are an on/off (enable/disable) touch box which can be added to enable settings, such as color tracking for example.

Settings

1. UI Build Area
This is the area where all the interactive elements are placed into to build a UI.

2. Build Area Settings
These fields and buttons allow you to change the settings of the UI build area. You can change the size of the UI (default size is 800x480 pixels), background color, and background image. There is also a drop-down to chose a pre-made background template.

3. Servo Button


4. Servo Slider


5. Checkbox


6. Combobox Drop-down


7. Default Fullscreen Interface Checkbox

Video

Resources

The most common use of the interface builder is designing user interfaces (aka remote control view) in ARC mobile for users to control a robot. However, if you plan to use the interface builder skill on mobile devices, it is important to know that not all of the ARC robot skills are supported on mobile.

Here's a list of currently supported skills and features for Mobile use:

• Auto Position (Movement Panel)
• Auto Position Real-time Pose
• Auto Position
• Camera
  • servo/movement tracking
  • start/end tracking scripts
  • color tracking type
  • multi color tracking type
  • face tracking
  • glyph tracking
  • Single image snapshot
• Connection
• Continuous Rotation Servo Movement Panel
• Custom Movement Panel
• Desktop View
• Script (EZ-Script, Javascript, Blockly, and Python)
• Dual HBridge Movement Panel
• Dual HBridge w/PWM Movement Panel
• Microphone (ezb)
• Notepad
• RGB Animator
• RoboScratch
• Script Monitor
• Sound Board (ezb)
• WiiMote

To learn more about skills, click HERE to view the manual page.

Fullscreen UI

ARC's last virtual desktop is the fullscreen user interface viewer. When editing a user interface, select the Make this the default fullscreen interface option and the interface will load in the fullscreen tab.

To view the fullscreen user interface, select the last virtual desktop in ARC.

When a project loads, the fullscreen interface can be displayed rather than the default robot skills view. View the Project Details menu option and select Auto Focus the Default skill When Loading option.

Multiple User Interfaces

More than one user interface can be created, although only one interface can be viewed fullscreen at a time. To have the user interface change programmatically, or by button presses, use the ShowControl() script command. This command is available in EZ-Script, Javascript and Python.

The ShowControl() script command will push the new specified user interface on top of the stack. That means you can navigate to the previous user interface with CloseControl().

Locate available ShowControl() commands by viewing the Cheat Sheet when editing the script for an event, such as a button press.