Thumbnail

Interface Builder

+ How To Add This Control To Your Project (Click to Expand)
  1. Load the most recent release of ARC.
  2. Press the Project tab from the top menu bar in ARC.
  3. Press Add Control from the button ribbon bar in ARC.
  4. Choose the User Interface category tab.
  5. Press the Interface Builder icon to add the control to your project.
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:


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.



Netherlands
#1   — Edited
I try to add more than 1 button... but that seems not to work...
If i copy the button and paste it... I tried to adjust the settings... But the setings will change to the same for every button...
Synthiam
#2  
I tested the interface builder this morning and it works.

The buttons do appear on top of each other at the top left starting position, have you dragged them away from each other? Could this be where your trouble is?

The settings do change and are saved when selecting each button individually. If you are still having trouble please reply with some screenshots.
Synthiam
#3   — Edited
OneDayFlie2 - it seems you wrote this message while using an outdated installation of ARC. In the future, please upgrade before posting - thanks! (And no double posting:) ). Your other duplicate post has been deleted.
#4  
Thank you for the great instructions!