Skip to main content

Status Widget

Widget Type: rc-status

Status Widget

Allows you to configure multiple statuses with different colors, icons, and labels. The status will be determined by the result of the expression from a telemetry topic.

Configuration​

Source​

timeoutMs Timeout until the timeout frame is displayed

source Telemetry topic or service path - ensure you have a interval set for topics (e.g. int=1s)

sourceType telemetry and service supported. When service is used can provide optionally a payload to execute.

expression A string containing a javascript function where args is the source output and returns a boolean value.

{
  "config": {
    "source": {
      "sourceType": "telemetry",
      "source": "/spot/robot_state/power_state?int=1s",
      "expression": "(msg) => msg.payload > 1 ? 'on' : 'off'"
    },
    "states": {
      "default": {
        "color": "grey-dark",
        "icon": "cog",
        "iconSize": "large",
        "iconAnimation": "spin",
        "label": "Idle"
      },
    }
  }
}

States​

Define different states that will be set based on the result of the expression.

You should have at least a default state. This will be used as a fallback whenever a state can't be matched based on the output of the expression.

color Color of the status, can be any of the theme colors defined by the icon component.

icon Icon of the status, can be any of the icons defined by the icon component.

iconSize default, small, large

iconAnimation none, spin, reverse-spin, pulse, bounce

label (Optional) text that will appear on the right of the icon when defined.

e.g. "Running"

The label can also be an expression that uses the payload from the source telemetry.

e.g. '(msg) => "CPU at " + Math.round((msg?.payload?.cpu ?? 0) * 100) + "%"'

labelColor (Optional) color of the label, can be any of the theme colors available similar to the the icon component.

Example​

This is an example of a status widget that will display Spot's motor state.

{
  "config": {
    "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",
        "iconSize": "large",
        "label": "Idle"
      },
      "on": {
        "color": "green",
        "icon": "cog",
        "iconAnimation": "spin",
        "iconSize": "large",
        "label": "Running"
      },
      "powering_on": {
        "color": "yellow",
        "icon": "cog",
        "iconAnimation": "spin",
        "iconSize": "large",
        "label": "Powering On"
      },
      "powering_off": {
        "color": "yellow",
        "icon": "cog",
        "iconAnimation": "reverse-spin",
        "iconSize": "large",
        "label": "Powering Off"
      },
      "error": {
        "color": "red",
        "icon": "cog",
        "iconSize": "large",
        "label": "Error"
      }
    }
  }
}

This is an example of using it for a service call:

{
  "source": {
    "sourceType": "service",
    "source": "/spot/spotcam/lighting/getLedBrightness",
    "expression": "(msg) => Boolean(msg.brightnesses[0]) ? \"on\" : \"default\"",
    "payload": "{}"
  },
  "states": {
    "default": {
      "color": "white",
      "icon": "light"
    },
    "on": {
      "color": "yellow",
      "icon": "light"
    }
  }
}