Toolbar Widget

Widget Type: rc-toolbar

Toolbar Widget

Configuration

timeoutMs Timeout until the timeout frame is displayed, defaults to 5000ms

display Can be row or column - defaults to row which will display the toolbar horizontally. If set to column, the toolbar will be displayed vertically (stacked).

params (optional) Map of values made available to button actions kscript expressions as ctx, and to embedded input-buttons' defaultValueExpression — see Script Context. On a rocos-console dashboard this is injected by the host (the dashboard URL's query parameters) and cannot be set in the widget config.

widgets An array of child widget configs. Supported types are:

battery: Battery remaining indicator
signal: Signal strength indicator
estop: Estop available indicator
latency: Latency indicator
spacer: A separator between left and right side of the toolbar
button: A button that runs robot actions (see Buttons)
buttonGroup: A group of buttons, visually joined; each entry in its buttons array is a button config
control: A stateful button, where state is either the service call result or a telemetry source
status: A stateful icon (with optional text) widget
input-button: An embedded Input Button (same configuration, plus id)

{
  "widgets": [
    {
      "id": "unique id here",
      "type": "child widget type here"
      // ... type-specific configuration
    }
  ]
}

source Telemetry or service path

sourceType telemetry or service

expression A stringified JavaScript function where the props are the result of the source and that returns a boolean value

payload The payload for the service call

Buttons

A button (standalone, or inside a buttonGroup's buttons array) has:

label Button label.

icon (optional) Icon to show on the button.

buttonType (optional) primary, panic, default, outlined, yellow, or grey.

width (optional) default or full.

plus exactly one dispatch configuration:

actions (preferred) Array of robot actions run in order when the button is pressed — the same action format as the Input Button: each entry is a service call (source, payload) or a control message (target, payload, meta), with optional allowFailure. String fields may be kscript expressions (ctx) => …, evaluated with the toolbar's root params as ctx. Success is reported when every service action reaches a successful terminal result (within timeoutMs per action), not merely when the request is acknowledged.

service + payload (deprecated — use actions) A single service call, resolved on acknowledgement.

target + payload + meta (deprecated — use actions) A single control message.

services (deprecated — use actions) Array of { service, payload } calls run in order.

messages (deprecated — use actions) Array of { target, payload, meta } messages sent in order.

Script Context

Several string fields accept a stringified arrow function instead of a literal. Each function is called with a single argument; this table is the reference for what that argument contains in each case.

Expression field	The function receives
Source `expression` with `sourceType: telemetry` (on `status`, `control`, `battery`, `signal`, `estop`, `latency` sources)	The telemetry message: the value is under `msg.payload`, alongside metadata such as `msg.source` and `msg.createdAt`.
Source `expression` with `sourceType: service` (on `control` and `status` sources)	The raw service response payload.
Button action `source`, `target`, `payload`, and each `meta` value	The toolbar's root `params` object, provided by the host under `config.params`. On a rocos-console dashboard this is the dashboard URL's query parameters (not overridable in the widget config). One entry per parameter: `string`, or `string[]` when the parameter is repeated.
Embedded `input-button` expressions	See the Input Button script context. Its `defaultValueExpression` receives this toolbar's `params`; its action expressions receive the input values.

Example: button running a robot-action sequence

{
  "params": { "site-id": "rome" },
  "widgets": [
    {
      "id": "start-mission",
      "type": "button",
      "label": "Start Mission",
      "buttonType": "primary",
      "actions": [
        { "kind": "service", "source": "/robot/prepare" },
        {
          "kind": "message",
          "target": "/robot/notify",
          "payload": "mission starting",
          "allowFailure": true
        },
        {
          "kind": "service",
          "source": "/flow-engine/startFlow",
          "payload": "(ctx) => ({ site: ctx['site-id'] })"
        }
      ]
    }
  ]
}

Example

Spot toolbar example

Note: the buttons in the examples below use the deprecated single-service form; prefer actions for new configurations.

{
  "timeoutMs": 5000,
  "display": "row",
  "widgets": [
    {
      "id": "status-0",
      "type": "status",
      "source": {
        "sourceType": "telemetry",
        "source": "/spot/control/held?int=1s",
        "expression": "(msg) => msg.payload ? 'true' : 'false'"
      },
      "states": {
        "default": {
          "color": "grey-dark",
          "icon": "control-off",
          "label": "Unknown"
        },
        "false": {
          "color": "red",
          "icon": "control-off",
          "label": "Released"
        },
        "true": {
          "color": "green",
          "icon": "control-on",
          "label": "Lease Held"
        }
      }
    },
    {
      "id": "control-1",
      "type": "control",
      "source": {
        "sourceType": "service",
        "source": "/spot/spotcam/lighting/getLedBrightness",
        "expression": "(msg) => Boolean(msg.brightnesses[0]) ? \"on\" : \"off\""
      },
      "states": {
        "on": {
          "service": "/spot/spotcam/lighting/setLedBrightness",
          "payload": "{\n              \"brightness\": {\n                \"0\": 1,\n                \"1\": 1,\n                \"2\": 1,\n                \"3\": 1\n              }\n            }"
        },
        "off": {
          "service": "/spot/spotcam/lighting/setLedBrightness",
          "payload": "{\n              \"brightness\": {\n                \"0\": 0,\n                \"1\": 0,\n                \"2\": 0,\n                \"3\": 0\n              }\n            }"
        }
      }
    },
    {
      "id": "status-1",
      "type": "status",
      "source": {
        "sourceType": "telemetry",
        "source": "/spot/robot_state/power_state?int=1s",
        "expression": "(msg) => {  switch (msg.payload?.motor_power_state) {    case 2:      return \"on\";    case 3:      return \"powering_on\";    case 4:      return \"powering_off\";    case 5:      return \"error\";    default:      return \"default\";  }}"
      },
      "states": {
        "default": {
          "color": "grey-dark",
          "icon": "cog",
          "label": "Idle"
        },
        "on": {
          "color": "green",
          "icon": "cog",
          "iconAnimation": "spin",
          "label": "Running"
        },
        "powering_on": {
          "color": "yellow",
          "icon": "cog",
          "iconAnimation": "spin",
          "label": "Powering On"
        },
        "powering_off": {
          "color": "yellow",
          "icon": "cog",
          "iconAnimation": "reverse-spin",
          "iconSize": "large",
          "label": "Powering Off"
        },
        "error": {
          "color": "red",
          "icon": "cog",
          "label": "Error"
        }
      }
    },
    {
      "id": "spacer-2",
      "type": "spacer"
    },
    {
      "id": "latency",
      "type": "latency",
      "latencySource": {
        "source": "/rocos/agent/telemetry/heartbeat?int=1s&ttl=10s&dl=500ms",
        "sourceType": "telemetry",
        "expression": "(msg) => new Date(msg.createdAt).getTime()"
      },
      "throughputSource": {
        "source": "/rocos/agent/telemetry/cloud/wiresizeUp?int=1s&ttl=10s&dl=500ms",
        "sourceType": "telemetry",
        "expression": "(msg) => Number(msg.payload) << 3"
      }
    },
    {
      "id": "signal",
      "type": "signal",
      "source": {
        "source": "/spot/robot_state/wifi_stats?int=1s",
        "sourceType": "telemetry",
        "expression": "(msg) => msg?.payload?.devices?.[0]?.associations?.[0]?.rx_signal_avg_dbm"
      }
    },
    {
      "id": "battery",
      "type": "battery",
      "source": {
        "source": "/spot/robot_state/battery_states?int=1s",
        "sourceType": "telemetry",
        "expression": "(msg) => msg.payload?.[0]?.charge_percentage?.value"
      }
    },
    {
      "id": "estop",
      "type": "estop",
      "source": {
        "source": "/spot/robot_state/estop_states?int=1s",
        "sourceType": "telemetry",
        "expression": "(msg) => msg?.payload || []"
      }
    },
    {
      "id": "button-1",
      "type": "button",
      "label": "E-Stop",
      "service": "/spot/ESTOP",
      "buttonType": "panic"
    },
    {
      "id": "foobar",
      "type": "buttonGroup",
      "buttons": [
        {
          "id": "button-ping",
          "type": "button",
          "label": "Ping",
          "icon": "cog",
          "service": "/rocos/agent/ping",
          "buttonType": "primary"
        },
        {
          "id": "button-pong",
          "type": "button",
          "label": "Pong",
          "icon": "blk-arc-line",
          "service": "/rocos/agent/ping",
          "buttonType": "yellow"
        },
        {
          "id": "button-pow",
          "type": "button",
          "label": "Pow",
          "icon": "exclamation",
          "service": "/rocos/agent/ping2",
          "buttonType": "panic"
        }
      ]
    }
  ]
}

Stacked buttons displayed as a column

{
  "timeoutMs": 5000,
  "display": "column",
  "widgets": [
    {
      "id": "button-1",
      "type": "button",
      "label": "E-Stop",
      "service": "/spot/ESTOP",
      "buttonType": "panic",
      "width": "full"
    },
    {
      "id": "button-2",
      "type": "button",
      "label": "Ping",
      "icon": "cog",
      "service": "/rocos/agent/ping",
      "buttonType": "primary",
      "width": "full"
    },
    {
      "id": "button-3",
      "type": "button",
      "label": "Pong",
      "icon": "blk-arc-line",
      "service": "/rocos/agent/ping",
      "buttonType": "yellow",
      "width": "full"
    },
    {
      "id": "button-4",
      "type": "button",
      "label": "Pow",
      "icon": "exclamation",
      "service": "/rocos/agent/ping2",
      "buttonType": "panic",
      "width": "full"
    }
  ]
}

Configuration​

Child widget config props​

Buttons​

Script Context​

Example​

Configuration

Child widget config props

Buttons

Script Context

Example