# GettingStartedControls Solution

#### Overview

The GettingStartedControls solution is a sample solution for a gauge cluster and a center cluster. Various controls are used to realize an advanced gauge cluster and a center cluster. In addition, interactions between those controls are built to realize HMI logic.

For information on how to create the main scenes of this sample solution and how to implement HMI logic using controls, please refer to<span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(185, 106, 217);"><span style="color: rgb(0, 0, 0);">the</span> </span>[<span style="color: rgb(230, 126, 35);">GettingStartedControls tutorial</span>](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution).

<div drawio-diagram="8451"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-7-1749621545.png" alt=""/></div>

---

#### Description

##### Scene

The GettingStartedControls solution consists of the scenes listed in the table below.

<table border="1" id="bkmrk-%E3%82%B7%E3%83%BC%E3%83%B3%E5%90%8D-%E8%AA%AC%E6%98%8E-scenehome-sc" style="border-collapse: collapse; width: 100%; height: 420.953px;"><colgroup><col style="width: 19.1895%;"></col><col style="width: 80.8105%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td class="align-center" style="background-color: rgb(230, 126, 35); height: 29.7969px;">**<span style="color: rgb(255, 255, 255);">Scene name</span>**</td><td class="align-center" style="background-color: rgb(230, 126, 35); height: 29.7969px;">**<span style="color: rgb(255, 255, 255);">Description</span>**</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">SceneHome</td><td style="height: 63.3906px;">Scene for the main screen. The speedometer is displayed in the center of the screen, and navigation information, time, display, various indicators, etc. are displayed around it. In addition, the SceneMenuTabs scene is overlaid at the bottom of the display area.

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SceneClimate</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">Scene for the car climate settings screen with air conditioning and various heating settings.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ScenePhone</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">Scene for the phone screen. Displays the phone book and a contact with a call and hang up button.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SceneOptions</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">A scene for a screen to select one of 4 other options scenes.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ClimateOptions</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">Scene for the climate-related settings screen to configure the temperature unit and heating time.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SoundOptions</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">A scene for the audio-related settings screens with extensive possibilities.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">TimeOptions</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">A scene for the time-related settings screen.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">PhoneOptions</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">A scene for the phone-related settings screen.</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ConnectionOptions</td><td style="height: 29.7969px;">A scene for the phone connection settings screen.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SceneMenuTabs</td><td style="height: 29.7969px;">Scene for the screen switching tabs of SceneHome/SceneClimate/ScenePhone/SceneOptions.

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SceneBack</td><td style="height: 29.7969px;">Background scene.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">SceneBreadcrumb</td><td style="height: 29.7969px;">A scene for the breadcrumb list that appears at the top of SceneOptions.</td></tr></tbody></table>

##### Control

The following table lists the featured controls used in the GettingStartedControls solution. For more information about each control, please refer to [<span style="color: rgb(230, 126, 35);">Predefined Controls</span>](https://doc316en.candera.eu/books/controls-and-behaviors/chapter/predefined-controls).

<table border="1" id="bkmrk-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E5%90%8D-%E8%AA%AC%E6%98%8E-breadcrum" style="border-collapse: collapse; width: 100%; height: 370.938px;"><colgroup><col style="width: 19.1921%;"></col><col style="width: 80.8079%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td class="align-center" style="background-color: rgb(230, 126, 35); height: 29.7969px;">**<span style="color: rgb(255, 255, 255);">Control name</span>**</td><td class="align-center" style="background-color: rgb(230, 126, 35); height: 29.7969px;">**<span style="color: rgb(255, 255, 255);">Description</span>**</td></tr><tr style="height: 13.375px;"><td style="height: 13.375px;">BreadCrumb</td><td style="height: 13.375px;"><span style="color: rgb(0, 0, 0);">The collection of Options scenes was mainly introduced to demonstrate the capabilities of the BreadCrumb control. There is a separate sub chart in the MenuStateMachine that handles scene transitions between the option scenes. Whenever an option scene is entered (after a transition) the BreadCrumb control will be notified to update.</span>

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">List</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">The phone screen contains a dynamic list. It is important to know that in the Player some code had to be implemented that allows phone-book entries and adding them.</span>

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Drawer</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">The drawer is used twice in the sample. First of all the menu in the bottom of the screen appears as a drawer if the user hovers over the corresponding Control (at the bottom of the screen). To close the menu-drawer the "X"-Button in the right side of the menu has to be pressed.</span>

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Roll</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">The time-options screen includes three roll controls for setting the time (seconds, minutes and hours).</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Keyboard</td><td style="height: 29.7969px;">When clicking on of the time-rolls an on-screen keyboard appears.</td></tr><tr><td>Various Core Controls</td><td>In the SoundOptions scene, Core controls are used to display various audio-related settings.</td></tr></tbody></table>

<p class="callout info">This Core Controls sample solution showcases a lightweight Control Set optimized for low-end devices. It includes only essential controls, enabling safe performance testing and validation on memory-constrained platforms.</p>

##### Behavior

Behaviors are<span style="color: rgb(0, 0, 0);"> configured for each c</span>ontrol to exchange data with other nodes as needed. Behavior settings can be viewed in the Extra Scene Tree or Fusion panel of the relevant node.

The image below shows an example of behavior settings for Button\_TempInc (Button control) in the SceneClimate scene. <span style="color: rgb(185, 106, 217);">The </span>Button\_TempInc is a button to increase the air conditioner's temperature setting in 0.5°C increments. Due to the behavior settings, each time Button\_TempInc is pressed, a value of 0.5 is passed to Slider\_Temperature (Slider control), synchronizing the button press action with the slider display.

<div drawio-diagram="8523"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-7-1755139836.png" alt=""/></div>

<div drawio-diagram="8522"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-7-1755139348.png" alt=""/></div>

##### State Machine

The transitions between<span style="color: rgb(0, 0, 0);"> different scenes are configured using a State Machine (MenuStateMachine). Transitions of the Options scenes are encapsulated into a separate Subchart to keep everything neatly arranged.</span>

<span style="color: rgb(0, 0, 0);">The configuration of the State Machine transitions between scenes can be vie</span>wed in the State Machine Editor.

<div drawio-diagram="8524"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-7-1755139949.png" alt=""/></div>

##### Transition

<span style="color: rgb(0, 0, 0);">The Transition Type is set to **Slide** for transitions between SceneHome, SceneClimate, ScenePhone, and SceneOptions scenes. This causes a scene to slide from left to right to reveal the next scene. A Fade transition is set for transitions between option-related scenes. This is achieved using a Varia</span>nt in the Transition Rule Editor.

Transition settings can be viewed in the Transition Rule Editor.

<div drawio-diagram="8525"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-7-1755140117.png" alt=""/></div>

##### Play/Operation using Player

<span style="color: rgb(0, 0, 0);">Click the \[ Play Selected Scenario... \] icon on the toolbar to launch the Player and the Advanced Cluster solution will be displayed in the Player view.</span>

<span style="color: rgb(0, 0, 0);">The initial screen of the GettingStartedControls solution is the SceneHome scene. If you move the cursor to the bottom of the screen, a tab menu will appear, and you can move to each scene from the tab menu. In each scene, you can check the operation of various controls used in the GettingStartedControl solution.</span>

<div drawio-diagram="8452"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-7-1749621596.png" alt=""/></div>

<table border="1" id="bkmrk-%281%29-%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E5%BA%A6%E3%81%AB%E3%80%81sceneho" style="border-collapse: collapse; width: 91.6667%;"><colgroup><col style="width: 4.94081%;"></col><col style="width: 95.0592%;"></col></colgroup><tbody><tr><td>(1)</td><td>Each time you click, the display screen will change in the following order: SceneHome -&gt; SceneClimate -&gt; ScenePhone -&gt; SceneOptions (after SceneOptions, you will return to SceneHome).</td></tr><tr><td>(2)</td><td>When clicked, SceneHome will be displayed.</td></tr><tr><td>(3)</td><td>When clicked, SceneClimate will be displayed.</td></tr><tr><td>(4)</td><td>When clicked, ScenePhone will be displayed.</td></tr><tr><td>(5)</td><td>When clicked, SceneOptions will be displayed.</td></tr><tr><td>(6)</td><td>When clicked, the SceneMenuTabs will be hidden.</td></tr></tbody></table>

From the SceneOptions scene, you can transition to scenes for various options.

<div drawio-diagram="8453"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-7-1749621689.png" alt=""/></div>

---