Main Process Panels

Last edit: 2023.08.07

A main process panel is a widget that visualizes the state of an ongoing process. In the default implementation it is displayed on top of the map or navigation UI. It is used for visualizing and controlling ongoing calls, and does the same for current media playback. It can be reused for different use cases.

Main process panel selection

Each app must tell the system to visualize its process in the main process panel. The main process panel's metadata is used by the system UI to determine the priority in which the various main process panels are shown. For example, an ongoing phone call has a higher priority than streaming media. When both frontends provide a main process panel at the same time, the main process panel for phone calls will be shown and not the one for media.

It is also possible to have multiple main process panels visible simultaneously. For example, the media and communication main process panels in different positions.

Priority sorting

Priority per domain:

Communication (1st)
Entertainment (2nd)

Communication audio processes: When multiple communication audio processes are active, these will be prioritized in chronological order, and the newest process is visualized on top.

Expanded process panel

An expanded process panel is a way to visualize all available information and UI controls that will not fit inside a main process panel. It can be shown by tapping the chevron icon or the metadata inside the main process panel and is always positioned on top of the map or the application it is running within.

Collapsed

The main process panel is running inside an application.

Expanded

When the user taps the `Expand` button, an expanded process panel is temporarily overlaid on top of the application.

Anatomy

The main process panel uses a UI template that is comprised of different sections.

Section	Use
1. Main controls	The most important controls for the process (for example, a `Hang up` button for a phone call), as this section is positioned closer to the driver. This is a list of up to 3 buttons (TtButton).
2. Metadata	Information about the ongoing process (TtInformationControl)
3. Secondary controls	An optional secondary list of up to three buttons (TtButton) to perform actions on the ongoing process.
4. Progress	An optional progress indicator along the top of the main process panel. (Note: Coming soon.)

Customization

The main process panel can be freely styled and positioned in the system UI, but for now replacing it requires work for every domain that uses it, such as entertainment and communication. Different formfactors or layouts may be supported later on.

Component	Customizable
Theme	The color, size, background, and animation of the main process panel can be modified using the system theme. The main process panel template also follows the theme.
Position	The position and size of the main process panel can be changed in the system UI. (Note: The main process panel can be removed but this is not recommended as every app has a contract with the main process panel, and frontends may rely on their ongoing processes being accessible. Alternatively, it is possible to 'conditionally hide’ a main process panel.)
Animation	The panel enter and exit animation can be changed in the system UI.
Orientation	Horizontal and vertical layouts are supported in the main process panel template.
Layout	The layout template of the main process panel currently cannot be modified without breaking compatibility with the main process panel implementation for the entertainment app and communication app.
Content	Main process panels created by various applications can be populated according to the main process panel template. However, existing applications may not offer customization of how they populate the process panel. Currently, the communication app offers no customization, while in the entertainment app the primary and secondary actions can be customized on a per source basis.
Priority	It is not possible to customize the main process panel's priority selection.