Overview

Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:

Limits: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.
Status: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.
Synchronization: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.

Limits

Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. "Level" limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.

Color only

s-limit-yellow: A yellow limit.
s-limit-red: A red limit.

Color and icon

s-limit-yellow-icon: A yellow limit with icon.
s-limit-red-icon: A red limit with icon.

Upper and lower limit indicators. Must be used with a color limit class to be visible.

s-limit-upr: Upper limit.
s-limit-lwr: Lower limit.

Yellow limit

Red limit

Yellow limit with icon

Red limit with icon

Lower yellow limit

Upper red limit

Red Limit with a custom icon

Some text with an inline element showing a yellow limit.

Name	Value 1	Value 2
ENG_PWR 4991	7.023	70.23
ENG_PWR 4992	49.784	-121.22
ENG_PWR 4993	0.451	1.007

Status

Classes here can be applied to elements as needed.

Color only

s-status-warning-hi
s-status-warning-lo
s-status-diagnostic
s-status-info
s-status-ok

Color and icon

s-status-warning-hi-icon
s-status-warning-lo-icon
s-status-diagnostic-icon
s-status-info-icon
s-status-ok-icon

WARNING HI

WARNING LOW

DIAGNOSTIC

INFO

OK

WARNING HI with icon

WARNING LOW with icon

DIAGNOSTIC with icon

INFO with icon

OK with icon

WARNING HI with custom icon

Synchronization

When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class s-unsynced should be applied to that view.

This element is unsynced

Status Indication

Overview

Limits

Status

Synchronization