Toolbar Widget

Widget Type: rc-toolbar

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).

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 calls a service
• buttonGroup: A group of buttons that call a service
• control: A stateful button, where state is either the service call result or a telemetry source
• status: A stateful icon (with optional text) widget

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

Child widget config props

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

Example

Spot toolbar example

{
  "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",
    },
  ]
}