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

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

Category Component Description
Layout Row Basic layout container
Layout Group Container for related components
Layout Panels Grid of panels
Layout Panel Titled panel within a grid
Layout Pill Status pill with grouped readouts and an icon
Layout Accordion Collapsible content sections
Layout Titlebar Dashboard header with a status lamp and menu toolbar
Layout Footer Dashboard footer bar
Data Lamps Grid of status indicators
Data Lamp Single status indicator
Data Readouts Numerical and text displays
Data Charts Data visualisation
Data State State machine diagram
Data Tables Tabular data display
Data Caption Bound text caption
Content Icon Single icon
Content HTML Custom HTML content or a map that follows a position
Content Redirect Immediate navigation to another location
Interactive Tabs Tabbed views
Interactive Actions Buttons and icons that run actions
Interactive Toggles On/off switches
Image and model Image Image with regions, icons, buttons, and data values
Image and model 3D model 3D model with regions, icons, buttons, and data values
Image and model 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