Create a Main Process Panel

Last edit: 2023.07.27

A MainProcessPanel is a panel that is used to visualize the state of an ongoing process. And like any panel, it needs an IviFragment and a FrontendViewModel to be created.

By extending MainCompactProcessFragment and MainCompactProcessViewModel, you get a default template for the panel. Alternatively, you can still extend IviFragment and FrontendViewModel from scratch to have a custom panel layout. For more information and details about the template look and feel, and the elements which compose the layout, please check Main process panel.

The following sections explain how to add a MainProcessPanel similar to the CallMainProcessPanel implemented by the communication frontend in TomTom Digital Cockpit. An example app is provided in the examples/processpanel/mainprocesspanel directory.

Create a main process panel for calling

In this example, we will create ExampleCallMainProcessPanel using the process panel template offered by extending the MainCompactProcessFragment and MainCompactProcessViewModel. To do so, we need to create the following classes:

ExampleCallMainProcessPanel.
ExampleCallMainProcessFragment.
ExampleCallMainProcessViewModel.
ExampleCallMainProcessViewModelFactory.

Create the panel class

First, add the CompactProcessPanel dependencies to the /build-logic/libraries.versions.toml file:

iviPlatformFrontendApiTemplateCompactProcessPanel = { module = "com.tomtom.ivi.platform:platform_frontend_api_template_compactprocesspanel", version.ref = "iviPlatform"}

Then, create an ExampleCallMainProcessPanel class, extended from MainProcessPanel:

src/main/kotlin/com/example/ivi/example/processpanel/mainprocesspanel/examplecallmainprocesspanel/ExampleCallMainProcessPanel.kt

1import com.tomtom.ivi.platform.frontend.api.common.frontend.FrontendContext
2import com.tomtom.ivi.platform.frontend.api.common.frontend.IviFragment
3import com.tomtom.ivi.platform.frontend.api.common.frontend.panels.MainProcessPanel
4
5internal class ExampleCallMainProcessPanel(
6    frontendContext: FrontendContext,
7    val dismiss: () -> Unit
8) : MainProcessPanel(frontendContext, Priority.HIGH) {
9
10    override fun createInitialFragmentInitializer() =
11        IviFragment.Initializer(ExampleCallMainProcessFragment(), this)
12}

Create the fragment class

Create an ExampleCallMainProcessFragment class, derived from MainCompactProcessFragment:

src/main/kotlin/com/example/ivi/example/processpanel/mainprocesspanel/examplecallmainprocesspanel/ExampleCallMainProcessFragment.kt

1import com.tomtom.ivi.platform.frontend.api.template.compactprocesspanel.MainCompactProcessFragment
2
3internal class ExampleCallMainProcessFragment : MainCompactProcessFragment
4<ExampleCallMainProcessPanel, ExampleCallMainProcessViewModel>(ExampleCallMainProcessViewModel::class)

Create the ViewModel class

Create an ExampleCallMainProcessViewModel class, derived from MainCompactProcessViewModel:

src/main/kotlin/com/example/ivi/example/processpanel/mainprocesspanel/examplecallmainprocesspanel/ExampleCallMainProcessViewModel.kt

1import androidx.lifecycle.viewModelScope
2import com.example.ivi.example.processpanel.mainprocesspanel.R
3import com.tomtom.ivi.platform.framework.api.common.annotations.IviExperimental
4import com.tomtom.ivi.platform.frontend.api.template.compactprocesspanel.MainCompactProcessViewModel
5import com.tomtom.tools.android.api.resourceresolution.string.ResourceStringResolver
6import kotlinx.coroutines.launch
7
8@OptIn(IviExperimental::class)
9internal class ExampleCallMainProcessViewModel(panel: ExampleCallMainProcessPanel) :
10    MainCompactProcessViewModel<ExampleCallMainProcessPanel>(panel) {
11    private val factory =
12        ExampleCallMainProcessViewModelFactory(
13            title = ResourceStringResolver(R.string.ttivi_processcreation_mainprocesspanel_title),
14            doDismissCall = ::closePanel,
15            doEndCall = ::closePanel
16        )
17    override val primaryControlsViewModel = factory.createPrimaryControls()
18    override val metadataViewModel = factory.createMetadata()
19    override val secondaryControlsViewModel = factory.createSecondaryControls()
20
21    private fun closePanel() {
22        viewModelScope.launch {
23            panel.dismiss()
24        }
25    }
26}

Create the ViewModel factory class

Creating the ExampleCallMainProcessViewModelFactory class is optional. Still, it is a good practice to have a central place responsible for creating the CompactProcessViewModel ViewModels.

In this code snippet, we will provide ViewModels for the primary control section, secondary control section, and Metadata section.

src/main/kotlin/com/example/ivi/example/processpanel/mainprocesspanel/examplecallmainprocesspanel/ExampleCallMainProcessViewModelFactory.kt

1import androidx.lifecycle.LiveData
2import androidx.lifecycle.map
3import com.example.ivi.example.processpanel.mainprocesspanel.R
4import com.tomtom.ivi.platform.frontend.api.template.compactprocesspanel.CompactProcessControlViewModel
5import com.tomtom.ivi.platform.frontend.api.template.compactprocesspanel.CompactProcessMetadataViewModel
6import com.tomtom.tools.android.api.livedata.ImmutableLiveData
7import com.tomtom.tools.android.api.resourceresolution.drawable.ResourceDrawableResolver
8import com.tomtom.tools.android.api.resourceresolution.string.ResourceStringResolver
9import com.tomtom.tools.android.api.resourceresolution.string.StaticStringResolver
10import com.tomtom.tools.android.api.resourceresolution.string.StringResolver
11import com.tomtom.tools.android.api.uicontrols.compositeviewmodel.StockVisibilityProvidingCompositeViewModel
12import com.tomtom.tools.android.api.uicontrols.compositeviewmodel.VisibilityProvidingCompositeViewModel
13import com.tomtom.tools.android.api.uicontrols.imageview.ImageDescriptor
14import com.tomtom.tools.android.api.uicontrols.imageview.ImageType
15
16internal class ExampleCallMainProcessViewModelFactory(
17    private val title: StringResolver,
18    doEndCall: () -> Unit,
19    doDismissCall: () -> Unit,
20) {
21    // Add your implementation for the end call control button.
22    private val endCallControl = CompactProcessControlViewModel()
23
24    // Add your implementation for the mute control button.
25    private val toggleMuteControl = CompactProcessControlViewModel()
26
27    // Add your implementation for the close control button.
28    private val closeControl = CompactProcessControlViewModel()
29
30    // Return a list of the primary section ViewModels.
31    fun createPrimaryControls():
32        LiveData<VisibilityProvidingCompositeViewModel<CompactProcessControlViewModel>> =
33        ImmutableLiveData(StockVisibilityProvidingCompositeViewModel(endCallControl))
34
35    // Return a list of the secondary section ViewModels.
36    fun createSecondaryControls():
37        LiveData<VisibilityProvidingCompositeViewModel<CompactProcessControlViewModel>> =
38        ImmutableLiveData(
39            StockVisibilityProvidingCompositeViewModel(
40                toggleMuteControl,
41                closeControl
42            )
43        )
44
45    // Return the Metadata section ViewModel.
46    fun createMetadata() = CompactProcessMetadataViewModel(
47        image = ImmutableLiveData(
48            ImageDescriptor(
49                ResourceDrawableResolver(R.drawable.ttivi_customization_debugtab_icon_thumbnail),
50                ImageType.AVATAR
51            )
52        ),
53        primaryText = ImmutableLiveData(title),
54        onClick = ImmutableLiveData {
55            // Add click action when Metadata section has been clicked.
56        }
57    )
58}

The MainProcessPanel should be positioned on top of the Navigation UI/Home panel. For more details about the order of the MainProcessPanel compared to the other TomTom Digital Cockpit system UI components, please check the Anatomy section in the system UI.