Create touchscreen robot control panels with buttons, joysticks, sliders, camera views and scripts; multi-page fullscreen UIs for PC and mobile.
How to add the Interface Builder robot skill
- Load the most recent release of ARC (Get ARC).
- Press the Project tab from the top menu bar in ARC.
- Press Add Robot Skill from the button ribbon bar in ARC.
- Choose the Remote Control category tab.
- Press the Interface Builder icon to add the robot skill to your project.
Don't have a robot yet?
Follow the Getting Started Guide to build a robot and use the Interface Builder robot skill.
How to use the Interface Builder robot skill
The Interface Builder robot skill lets you create a touch-friendly control screen (a “user interface” or UI) for your robot. You can build your own control panel using items like buttons, labels, joysticks, servo pads, sliders, drop-down lists, checkboxes, and camera/video displays.
Interface Builder is designed to be simple: you place controls on a page, size them, and then configure what each one does. You can create multiple pages (full-screen layouts), and the user can switch pages using navigation buttons. Interfaces can be used on a PC and (in different ways) on mobile devices.
Ways to Use Interfaces
Interfaces you create can be shown in a few different places depending on how you want to control the robot. Most people design interfaces for ARC on a PC, but you can also use them with mobile apps.
- ARC on PC (Fullscreen Workspace View): Build interfaces and run them on the same computer that is running ARC. In ARC, you can open the Full-Screen workspace from the File menu.
- ARC Mobile app: A lightweight version of ARC that runs directly on a mobile device and connects to a robot controller. (This is legacy and has feature limitations—details below.)
- ARC Remote UI app: Your phone/tablet becomes a “remote screen” that connects to ARC running on a PC. The mobile device displays the interfaces you designed in Interface Builder.
ARC Mobile
ARC Mobile is a lightweight version of ARC for phones/tablets. It can load ARC projects and connect to the robot directly, which means it can replace a PC in simple setups.
However, ARC Mobile is limited and does not include many advanced features such as speech recognition, object tracking, and most plug-in robot skills. ARC Mobile is kept mainly for legacy use. For most new builds, it’s usually better to run ARC on a PC or an embedded computer (SBC) inside the robot.
Here is a list of currently supported robot skills and features for ARC Mobile:
- Auto Position (Movement Panel)
- Auto Position Real-time Pose
- Auto Position
- Camera
- 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
Here are links to get the ARC Mobile app:
ARC Remote UI
ARC Remote UI lets a mobile device control a robot by connecting to ARC running on a PC. The app shows the Interface Builder screens you designed, and your touches/clicks are sent to ARC.
In simple terms:
- ARC runs on the PC and stays “in charge” of the robot.
- Your phone/tablet becomes the remote control screen.
- You can create multiple pages and multiple Interface Builder skills (multiple screens).
Here are links to get the ARC Remote UI app:
Main Window (Example Interface)
Below is an example of a custom robot interface. Each item on the page is an “element” you can add from Interface Builder. Some elements run your own script (like a button press), and some elements have built-in robot features (like a camera view or joystick movement control).
1. Connection Status Button
Shows whether ARC is connected to the controller and lets you connect/disconnect with a press.
2. Camera Display
Shows the live video stream from a camera skill configured in your ARC project.
3. Button
A standard button with text. Typically used to run a script when pressed.
4. Image Button
A button that uses an image (useful for custom icons).
5. Joystick Pad
Touch joystick for driving a robot through a configured Movement Panel.
6. Servo Pad
Touch pad for controlling two servos (often pan/tilt, like a head or camera mount).
7. Voltage/Temp Display
Displays battery voltage and controller CPU temperature on supported controllers (ex: EZ-B v4). Updates once per second.
8. Checkbox
On/Off toggle (for example, enabling/disabling tracking features). Can store a variable value and run a script when changed.
Create a User Interface (Step-by-Step)
- Add the skill: In ARC go to Project → Add Skill → User Interface → Interface Builder.
- Open the skill settings: Click the gear/settings for Interface Builder to start designing your page.
- Add elements: Insert buttons, sliders, pads, labels, etc. into the editor area.
- Select an element to edit it: When you click an element, its settings appear on the right side (size, colors, scripts, ports, and more).
- Save and test: Save the project (local or cloud) and test using your mouse on PC or touch on a tablet/phone.
1. UI Display Area
This is your design canvas. You drag/place UI elements here and arrange them like a touchscreen control panel.
2. Display Area Settings
Change the interface size (default is 800×480), background color, or background image.
You can also choose from preset templates (helpful if you’re not sure where to start).
3. Servo Buttons
“+” and “–” buttons that nudge a servo position up/down by a set increment.
Configure: button size, servo port, min/max position, increment step, and colors.
4. Servo Slider
A slider that sets servo position by dragging.
Configure: size, variable name, min/max positions, colors, and optional script.
5. Checkbox
An On/Off switch. It can store a variable and run a script when changed.
Configure: size, variable name, checked/unchecked images, and optional script.
6. Combobox (Drop-down)
Create a list of options. When the user selects an option, the $SelectedIndex variable is updated.
Index numbers start at 0.
Example: the 4th item has index 3.
7. Default Fullscreen Interface Checkbox
Makes this interface open in fullscreen instead of windowed mode.
Great for tablets or kiosk-style robot displays. On PC, ARC provides a fullscreen virtual desktop tab.
More Elements (What They Do)
1. Battery Voltage Display
Shows controller input voltage on supported controllers (ex: EZ-B v4). Updates once per second.
Configure: size, colors, font size, and optional script.
2. Script Label
A label that can show plain text or script output.
Example: "The Date is: " + $date
Configure: size, script/text, colors, and font size.
3. Button
A customizable button that can run a script.
Configure: size, font size, colors, border, and a “running” color shown while the script is executing.
4. Image Button
Uses custom images for “stopped” and “running” states.
Configure: size, images, and the script that runs on press.
5. Slider
A general-purpose slider for quickly changing a value.
Often used for servos, but it can control any value by assigning a variable and optional script.
6. Servo Pad
A touch pad for controlling two servos (horizontal and vertical).
Configure: servo ports, min/max, pad size, images, and “return to center” behavior.
7. Joystick Pad
A touch joystick for a Movement Panel.
Configure: pad size, images, optional analog speed control, steering options, and “return to center” (stop) behavior.
8. Label
A simple text label to describe controls (for example: “Head Pan” above a slider).
Configure: size, font size, and colors.
Movement + Connection + Camera Elements
1. Connection Button/Display
Connects/disconnects ARC to your controller and shows status.
Commonly green when connected and red when disconnected (depending on theme/settings).
2. Back Button
Goes back to the previous interface screen (only useful if you have multiple Interface Builder skills/screens).
To switch to another interface by script, you can use:
ShowControl("User Interface 2")
3. Camera Display
Streams live video from a configured camera skill.
Configure: size and which camera skill to pull video from (default is the first camera skill in your project).
4–8. Direction + Stop Buttons
These buttons control a Movement Panel in your project (Forward, Right, Reverse, Left, Stop).
Configure: size, optional scripts, and images for stopped/running states.
9. CPU Temp Display
Shows the controller CPU temperature on supported controllers (ex: EZ-B v4). Updates once per second.
Configure: size, colors, font size, and optional script.
Fullscreen UI (ARC on PC)
ARC on PC includes a special fullscreen interface view on the last virtual desktop tab. If you enable Make this the default fullscreen interface in Interface Builder, that interface will load in the fullscreen tab.
Select the last virtual desktop in ARC to view the fullscreen user interface.
You can also make ARC automatically focus the default interface when the project loads: open Project Details and enable Auto Focus the Default skill When Loading.
Multiple User Interfaces (Multiple Screens)
You can add more than one Interface Builder skill to your project (for example: “Main Screen”, “Camera Screen”, “Settings Screen”). Only one interface can be displayed fullscreen at a time, but you can switch between them using scripts.
Navigation scripts:
ShowControl("User Interface 2")pushes the specified interface on top.CloseControl()returns to the previous interface (like a back stack).
You can find these commands in the Cheat Sheet while editing a script for events such as a button press.
Advanced Scripting (PC Only)
On ARC for PC, you can manipulate interface objects using control commands (for example: show/hide UI elements, change values, etc.). This advanced “control command” feature is not supported on ARC Mobile.
This video demonstrates using control commands to change the visibility of a UI object:
ARC Mobile Video
Related Tutorials
Mobile App Developer Tutorial
The Robot Program Episode 006: Introducing ARC
Related Hack Events
D-0 Droid Live Hack
D-0 Droid Live Hack Part 2
Related Questions
Upgrade to ARC Pro
Your robot can be more than a simple automated machine with the power of ARC Pro!
Hello,
I found another issue (or maybe it's a feature!) With 2 or more checkboxes, you select one and both checkboxes become selected and both scripts are executed.
Steps to reproduce:
Expected: the first checkbox's script is executed. Actual: Both checkboxes' scripts are executed
(Also, both have the same variable name which is not editable.)
QE: Thomas Messerschmidt (Creator of Simone the A.I. Fembot!)
The variable names must be different if you wish to have checkboxes with individual behavior.
Regarding changing the variable name... This strange behavior appeared for some users after a Windows Update a few months ago that we are aware of but rarely arises. This also happens with a few other inputs, such as the combobox variable name field. We have addressed it across the platform in a future update, but there is a workaround until then.
The specific textbox change event is not firing when text is changed, therefore not saving the value. The other textbox fields will raise the save event, keeping the variable name. The workaround is to edit the variable name, then edit any different values, for example, the Name field. Doing so will also save the changes to the variable name field.
Yikes! I'll try to remember that. First the variable and then the name? OK. That works. Thanks.
Before, I was changing the name first and then the variable. That did not work on Windows 11 (HP Pavilion) or Windows 10 (Dell Latitude). ARC would not save the variable names.
@DJ I'm unsure if this is the best place to chat about this but I'm having issues with the following two things:
In my ARC mobile interface on an old phone (iphone 5s) and newer phone (iphone 12), I have a camera icon for taking a snapshot and a microphone icon to launch some microphone-related features.
The code ControlCommand("Camera", CameraSnapshot) doesn't seem to take a snapshot and save it to the phone, if it does I can't seem to find it. When this function is called on my old phone the app crashes. I seem to remember that this worked in the past.
The code ShowControl("Microphone") doesn't seem to trigger the microphone page pop-up any longer, nothing seems to happen. Both old phone and new.
Any advice or insight?
Thanks!
Sorry not sure. The mobile app is deprecated. Sorry I can’t be of help
I'm having trouble with the Combobox Drop-down scripting feature. I have used the variable watcher to discover that the $SelectedIndex does change with each index selected in the dropdown. The issue seems to be that the $SelectedIndex isn't a global variable, I can't reference it in the Script section. Maybe I'm missing something, any advice?
Looks like you’re using JavaScript. See this page how to use global variables: https://synthiam.com/Support/javascript-api/javascript-overview
Thanks, DJ, that was exactly it! I needed to write:
I guess this was a situation of "If you know, you know!"