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, labels, pads, sliders, drop-downs, checkboxes, and displays to make a 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 images with transparent backgrounds (.png) are used, a very professional and creative UI can be built.

Main Window


Here is an example of a custom user interface for a robot. A number of elements are added to the “page” that perform different functions. Buttons can run custom script that you define. Also, there’s controls with prebuilt functionality, like joysticks and the camera view.


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 touch box that can be added to enable/disable settings, such as color tracking for example.

Create A User Interface


The settings option of this robot skill allows you to begin editing/creating thepage of this user interface. As elements are selected or added, it will display its settings on the right-hand side of the skill when it's actively selected.



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

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

3. Servo Buttons
These buttons consist of a "plus" side and a "minus" side. The plus side will increase the servo position by the increment value set in the settings, and the minus will decrement the position. With the settings on the right-hand side, you can change the dimensions of the buttons, the servo port, the min/max servo position values, the increment value, and customize the background/foreground colors.


4. Servo Slider
This slider will adjust servo positions with a sliding touch interface. With the settings on the right-hand side, you can change the dimensions of the slider, the variable name, the min/max servo position values, customize the background/foreground colors, and add a script.


5. Checkbox
A checkbox is an on/off touch box which can be added to enable/disable settings. With the settings on the right-hand side, you can change the dimensions of the box, the variable name, customize the checked/unchecked images, and add a script.



6. Combobox Drop-down
This Drop-down allows you to create your own list of selectable items. Each item in your list corresponds to an index number starting at 0. When an item is selected in the drop-down the $SelectedIndex variable will hold the value of its index position. For example: the fourth item in the list will have the $SelectedIndex of 3 (since we start at 0).



7. Default Fullscreen Interface Checkbox
This checkbox enables the UI to start in Fullscreen mode instead of windowed mode. This mode is best for tablets and mobile devices. For PC, the fullscreen mode creates a selectable Fullscreen virtual desktop on the very right side of the top menu that you can click on.



Settings Cont...




1. Battery Voltage Display
This display is unique to ezb controllers supporting the voltage capability (for example the EZ-Robot EZ-B v4). It will show the input voltage readout coming into the controller. The value is updated once a second. With the settings on the right-hand side, you can change the dimensions of the box, add a script in the text box, customize the background/foreground colors, and change the font size.


2. Script Label
This label can be simple text or it can be a script (Example: "The Date is:" + $date). With the settings on the right-hand side, you can change the dimensions of the label, add a script in the text box, customize the background/foreground colors, and change the font size.


3. Button
This may be a simple touchscreen button, but it has lots of customization. With the settings on the right-hand side, you can change the dimensions of the button, change the font size, add a script, customize the background/foreground/border colors, change the border radius/width, change the running background color, and add a script on button press. The running color will stay on while the button script is running, once the script is completed the button background will go back to normal.



4. Image Button
This button allows you to create a button with a custom image when stopped and a different image when running (usually a darker hue of the same image). With the settings on the right-hand side, you can change the dimensions of the button, change the stopped/running images, and add a script on button press. The running image will stay on while the image button script is running, once the script is completed the button background will go back to the stopped image.



5. Slider
This slider allows you to create a sliding touch interface for rapid value adjustment. While commonly used for adjusting servo position values, it is not limited to just servos but can be used as a slide adjustment for any value. With the settings on the right-hand side, you can change the dimensions of the slider, change the minimum/maximum/default slider values, customize the background/foreground colors, change the slider variable name, and add a script on slider adjustment.


6. Servo Pad
This pad gives the user the ability to move 180-degree servos in a pan/tilt configuration, using just a finger. With the settings on the right-hand side, you can change the servo settings for the horizontal & vertical servos, change the dimensions of the pad & center button, customize the button/background images, and optionally return the button (and servos) to center when released.



7. Joystick Pad
This pad gives the user the ability to activate a robot's movement panel from an analog joystick-style touch interface. With the settings on the right-hand side you can change the dimensions of the pad & center button, customize the button/background images, enable variable (analog) speed control, disable left/right turning (in favor of variable speed steering), and optionally return the button to center when released (in the stop position).



8. Label
This label is merely for placing text above an element. It's great for adding extra instructions for making your UI clearer to the user. With the settings on the right-hand side, you can change the dimensions of the button, change the font size, and customize the background/foreground/border colors.


Settings Cont...




1. Connection Button/Display
This display/button connects ARC to an EZB I/O controller. It will also show the status of the connection. The button will appear green for successful connection status and red for disconnected status. With the settings on the right-hand side, you can change the dimensions of the box, add a script in the text box, customize the background/foreground colors, and change the font size.


2. Back Button
This button moves the user interface back one interface window (until the root interface is reached). This button only works if you have multiple user interface skills added. To move to a second interface you can have a button activate this script: ShowControl("User Interface 2").


3. Camera Display
This display streams the live camera image that is configured in your ARC project. With the settings on the right-hand side, you can change the dimensions of the display, and select which camera skill you would like to get the camera images from (default is the first camera skill you added).


4. Forward Button
This button activates the forward direction of a movement panel in your ARC project. With the settings on the right-hand side, you can change the dimensions of the button, add a script, and customize the running/stopped images.



5. Right Button
This button activates the right direction of a movement panel in your ARC project. With the settings on the right-hand side, you can change the dimensions of the button, add a script, and customize the running/stopped images.



6. Reverse Button
This button activates the reverse direction of a movement panel in your ARC project. With the settings on the right-hand side, you can change the dimensions of the button, add a script, and customize the running/stopped images.



7. Left Button
This button activates the left direction of a movement panel in your ARC project. With the settings on the right-hand side, you can change the dimensions of the button, add a script, and customize the running/stopped images.



8. Stop Button
This button stops the motion of a movement panel in your ARC project. With the settings on the right-hand side, you can change the dimensions of the button, add a script, and customize the running/stopped images.



9. CPU Temp Display
This display is specific to ezb controllers that support the cpu temp capability. For example, the EZ-Robot EZ-B v4 is supported. It will show the temperature of the onboard CPU. The value is updated once a second. With the settings on the right-hand side, you can change the dimensions of the box, add a script in the text box, customize the background/foreground colors, and change the font size.


How to Use Interface Builder


1) Add the Interface Builder skill to your ARC project (Project -> Add Skill -> User Interface -> Interface Builder).

2) In the skill settings add buttons, pads, labels, displays, checkboxes, drop-downs, or sliders to create your own UI.

3) Save locally or to the cloud and then test our your UI on the computer right away by clicking the interface with your mouse or use the Mobile app and test it with a touchscreen.

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.



Related Content

tutorial
The Robot Program Episode 006: Introducing EZ-Builder

The Robot Program Episode 006: Introducing EZ-Builder

This lesson introduces the EZ-Builder Robot Software by exploring options and describing features. At the end of this...
tutorial
Mobile App Developer Tutorial

Mobile App Developer Tutorial

So, you've built your ez-robot and now you would like to make your own mobile app. Did you know EZ-Robot has a robot...
question

Mobile EZB And USB Connection

Is it possible for EZB-mobile have support for USB connection?  My robot has an embedded pc with USB connection at the moment, but I would rather use...
question
Can We Use The EZ-Builder Mobile App Outside Our Home Network?

Can We Use The EZ-Builder Mobile App Outside Our Home...

Hi, I am trying to use the EZ-Builder mobile app to control my EZ-B v4 using  4G network on my android phone using port...
question

Mobile Interface Compatible Control - Uart Commands?

Hi all, I've been using EZ Builder for years now and can write scripts well enough to get me by. However I've never built or used the mobile...
question

Synthiam Code Object Dropping Square Brackets With An I Inside?

The Synthiam code object is interpreting square brackets [ i ] with an i inside as something else if you don't have any spaces. If you include the...
question

ARC On Startup, Workspace Not Setting Up Right

More of an observation than a question maybe? but  can we get rid of the "Tip&Tricks" window that pops up everytime I open up ARC? I cant seem to turn...
question

Ipad (8Th Generation) Ios 14.2 Not Launching ARC App

Hi,  I have purchased new iPads for each of my JD robots. It appears Version 2020.11.19.00 of the software is not compatible with these devices as the...
question
Sabertooth Control In Mobile App

Sabertooth Control In Mobile App

I have a Sabertooth Movement Panel configured in my mobile app.  But when attempt to use it i receive message "This...
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...
PRO
Canada
#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.
PRO
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.
PRO
USA
#4  
Thank you for the great instructions!
PRO
Netherlands
#5  
Any chance I can run a script to change the background colors of buttons on the user interface e.g. if certain conditions appear.
Or maybe ask it more pragmatically, the default connection button only shows 1 connection, I have 2 ez-b's connected and want to see from both if they are connected. Thought to create a work-aroud to test in a script if ez-b 0 resp 1 is connected and set a button or label on red/green.
PRO
Canada
#6   — Edited
Hi @Charel, you can have 2 EZB's connected you just can't use the standard connection button with a second EZB. It will only work with EZB index 0.

You'll have to use a button (like "button" or "image button") that can run a script to connect to another EZB index.

At the moment you can tell if the robot is connected with: 

Code:

$status = IsConnected(1) 

Where 1 is the EZB index, but you won't be able to change the color of the button based on the status.

You could ask for these features in the feature request section of our site.
PRO
Netherlands
#7  
Hi Jeremy,

Many thanks for the quick reply!
Indeed, I am using "$status = IsConnected(1) " to figure out if the EZ-B is connected, Unfortunately I can't change a color of the button but will use a led or something to indicate it as a workaround.
While we are on the subject, is there a SW command to power cycle an EZ-B? Reason why I ask is because when an EZ-B loses connection it is not enough to simply  reconnect, will not work. You need to power cycle the EZ-B before it lets you connect again.  Now I need to do that manually. Can I do that with a SW command?
PRO
Canada
#8  
Yes I believe we did implement a feature in the webserver that can activate a digital pin on disconnect. I can’t find the info at the moment but I’ll try to find it tomorrow. Go to 192.168.1.1 and search the advanced settings I believe. You can then activate a relay circuit to temporarily remove power (probably need a small timer circuit to turn it back on).