On Variable Changed icon On Variable Changed — Run scripts automatically when specified ARC variables change; define variable-to-script pairs, monitor status, and trigger actions. Try it →
 

Custom UI Screen

A custom UI is your own control panel for the robot: buttons, sliders, joysticks, camera views, gauges and robot skill widgets laid out the way you want. This is the viewer, where a custom UI screen is used live. It fills the whole browser window, without the ARCx menus, and scales the screen to fit whatever shows it, from a monitor to a phone.

Use it to drive the robot from a tablet or phone on the same network, or to give the robot its own touch screen. Screens are designed in Workspaces → Custom UI → Manage Custom UI.

Where to find it: Top bar → Workspaces → Custom UI → the screen's title. The home screen is marked with a house icon. You can also open it with Open viewer or a screen's View button in Manage Custom UI, with Preview in the screen designer, or from a script.

A Custom UI screen in the viewer

Contents

  1. One screen for every browser
  2. The toolbar
  3. Screens without a toolbar
  4. The breadcrumb
  5. Locking the viewer with an exit password
  6. Opening the custom UI from a script
  7. Notes

One screen for every browser

The custom UI has one current screen, shared by every browser. When a button, a script or a control command opens another screen, every browser showing the viewer moves to it. This works like a single control panel that several people can look at.

When the viewer opens, it shows the screen you picked from the menu. If you open it without picking one, it shows the current screen, or the home screen if nothing has been shown yet.

How the screen fits the window depends on the screen's Fit to window setting in the designer:

Setting What you see
Scale to fit, keep proportions The whole screen is shown as large as it fits, centred, without stretching.
Stretch to fill The screen is stretched to fill the window, even if that changes its shape.
Actual size, scroll The screen is shown at its design size. Scroll to see the parts that do not fit.

The toolbar

Screens that have Show the toolbar turned on in the designer show a slim bar across the top.

Button What it does
Back (arrow) Goes back to the previous screen in the breadcrumb. Greyed out on the first screen.
Home (house) Goes to the home screen and clears the breadcrumb.
Breadcrumb The trail of screens that led here. Click an earlier one to jump back to it.
Screens (dashboard icon) A menu of every screen in the project. Pick one to show it.
Microphone and speaker buttons Let this browser be the robot's microphone or speaker. Only shown when Options → Preferences sets the microphone or speaker to a web browser.
Full screen Makes the browser fill the whole display. Press again to Leave full screen.
Design this screen (pencil) Opens this screen in the designer.
Back to the ARCx workspace Leaves the custom UI and returns to the ARCx workspace. Shows a padlock when an exit password is set.

Screens without a toolbar

A screen with the toolbar turned off still has a way out. A small menu button (three dots) sits in the corner of the screen. It holds Back, Home, Full screen (or Leave full screen), Design and ARCx workspace. When an exit password is set, the last two say "(password)".

The breadcrumb

The breadcrumb remembers the path through your screens, starting from the home screen. Opening a new screen adds it to the end. Opening a screen that is already in the trail cuts the trail back to that screen, so moving back and forth between two screens does not make the trail grow. Back removes the last screen, and Home starts the trail again from the home screen.

Locking the viewer with an exit password

If the robot runs its own control panel on a phone or a kiosk tablet, you can stop whoever picks it up from wandering into ARCx. Set an Exit password in Project → Properties, in the Custom UI section. It is digits only, at least 4 and at most 16, and 8 is recommended.

With an exit password set, every way out of the viewer asks for it: the toolbar buttons, the corner menu, the browser's back button, and anything else that would leave the custom UI. Moving between custom UI screens never asks.

The prompt is titled Enter the exit password and says where you are going: the ARCx workspace or the screen designer.

  1. Type the password, or tap it on the keypad. C clears what you entered and the backspace key removes the last digit.
  2. Press Unlock, or press Enter.
  3. A wrong password clears the field and shows "That is not the exit password." You stay on the screen you were on.

Press Stay here or Escape to close the prompt. Tapping outside the prompt does not close it, which stops it being closed by accident on a touch screen.

The exit password stops a passer-by. It is not security: it is saved in the project file as typed.

Opening the custom UI from a script

Scripts can show a screen with UI.showCustomUI("title") or ControlCommand("Custom UI", "Show", "title"). This adds the screen to the breadcrumb and also sends every browser that is not already on a custom UI page to the viewer. Browsers in the viewer or the designer are left where they are, and the viewer follows the new screen.

The Custom UI control commands are:

Command What it does
Show Shows the screen with this title and brings every browser to the viewer.
Back Goes back to the previous screen in the breadcrumb.
Home Goes to the home screen and clears the breadcrumb.
GetCurrentScreen Returns the title of the screen showing now.
GetScreens Returns the titles of every screen in the project.
CanGoBack Returns true when there is a previous screen in the breadcrumb.

To show the custom UI on a monitor plugged into the computer that runs ARCx, a script can call Browser.openCustomUI(). This opens the viewer as a locked down kiosk window on that monitor, in a window called "Custom UI". It can be given a screen title, and a monitor number. Calling it again moves the open window rather than opening a second one. The window stays open when another project is loaded, and shows that project's custom UI. Manage it in Views → Browser Windows.

Notes

  • If the project has no screens, the viewer shows No custom UI screens with buttons for Custom UI screens (the screen list) and Workspace.
  • While a screen is being edited in the designer, open viewers update with the changes a moment later.
  • Widgets can be set to show only while a global variable is true, so parts of a screen may appear and disappear as the robot runs.