Skip to content

Component reference

This reference describes the dashboard components available in Profinity. The components fall into four categories:

  • Layout components structure a dashboard.
  • Data components display and visualise data from the Controller Area Network (CAN) bus and from system properties.
  • Content components show fixed content or direct the user elsewhere.
  • Interactive components provide interaction and control.

A fifth group, image and model components, is listed at the end of the component tables.

How to use this reference

In the Visual Editor, you add these components with Add and set their parameters in the Inspector. The YAML examples on each page show the same component as it appears in the editor's YAML tab.

Each component page opens with a sentence that defines the component. The page then says when to choose the component and when to choose another, lists its parameters, and gives an example. Where a page has further guidance, it adds a section after the example. The Image and 3D model pages cover what differs between the two. The overlay tables that they share are on Overlay elements.

The Parameters tables list every parameter that Profinity accepts on a component. Each entry gives the type, whether the parameter is required, the default value and a description that includes the allowed values. A parameter that is accepted but has no effect is named in a sentence under the table, and can be omitted. A dashboard that contains a parameter the page does not list at all is rejected when it is saved. The bind parameter takes an array of binding objects on every component that lists it. The Data binding page describes the binding properties and the targets that each component handles.

Component categories

Layout components

Component Description
Row Basic layout container
Group Container for related components
Panels Grid of panels
Panel Titled panel within a grid
Pill Status pill with grouped readouts and an icon
Accordion Collapsible content sections
Titlebar Dashboard header with a status lamp and menu toolbar
Footer Dashboard footer bar

Data components

Component Description
Lamps Grid of status indicators
Lamp Single status indicator
Readouts Numerical and text displays
Charts Data visualisation
State State machine diagram
Tables Tabular data display
Caption Bound text caption

Content components

Component Description
Icon Single icon
HTML Custom HTML content or a map that follows a position
Redirect Immediate navigation to another location

Interactive components

Component Description
Tabs Tabbed views
Actions Buttons and icons that run actions
Toggles On/off switches

Image and model components

Component Description
Image Image with regions, icons, buttons, and data values
3D model 3D model with regions, icons, buttons, and data values
Overlay elements Element parameters, action invocation, layers, icon sources, display types and annotation lines shared by both

Nesting rules

Some components accept only particular components in their items. A Panels component holds panel entries, and a Panel holds a chart, lamps, state, group, readouts, table, HTML, redirect, or caption component, so any other component goes inside a group. A Tab holds panels entries in its items, and an Accordion holds row entries.

Next steps