Component reference
This reference describes the dashboard components available in Profinity, in four categories: layout components that structure a dashboard, data components that display and visualise data from the Controller Area Network (CAN) bus and system properties, content components that show fixed content or direct the user elsewhere, and interactive components that provide interaction and control.
How to use this reference
In the visual editor you add these components with Add and set the parameters below 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, 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. Pages for components with overlay elements, such as Image and 3D model, cover what differs between the two, and the overlay tables they share are on Overlay elements.
The Parameters tables list every parameter that Profinity accepts on a component, with its type, whether it is required, its default value and a description that includes the allowed values.
A parameter that the web interface ignores is marked Not used by the web interface and can be omitted.
Dashboards that contain a parameter a page does not list are rejected when they are saved.
The bind parameter takes an array of binding objects on every component that lists it, and 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 | 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
Read Data Binding to connect components to data, Core Elements for the structure of a dashboard, Conditional Styling for dynamic visual effects, and the Motor Controller Dashboard Example for a complete dashboard.