# Sample Solutions This book describes the sample solutions included in Scene Composer. - Depending on the supported platform and the package type, the set of bundled sample solutions may differ. For details, see the **[Sample/Device Correlation Table](https://doc316en.candera.eu/books/sample-solutions/page/sampledevice-correlation-table)**. - In the **Professional Edition**, the only bundled sample that can be executed on the target is the **[Blood Pressure solution](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)**. - Some of the other samples include data binding definitions intended for the **Enterprise Edition**, and therefore cannot be executed on a **Professional Edition** target. - Before you start, check [**CGI Studio Editions**](https://doc316en.candera.eu/shelves/0-cgi-studio-editions) for edition-specific limitations. # Sample/Device Correlation Table The sample solutions included in Scene Composer vary depending on the platform (package type). This section illustrates the correlation between each platform and its corresponding sample solutions.

	Android OpenGLES30	DrmKms OpenGLES20	DrmKms OpenGLES30	Fbdev OpenGLES20	Fbdev OpenGLES30
[Empty](https://doc316en.candera.eu/books/sample-solutions/page/empty-solution)	○	○	○	○	○
[2D Basic](https://doc316en.candera.eu/books/sample-solutions/page/2d-basic-solution)	○	○	○	○	○
[2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/2d-effects-solution)	○	○	○	○	○
[3D Basic](https://doc316en.candera.eu/books/sample-solutions/page/3d-basic-solution)	○	○	○	○	○
[3D Effects](https://doc316en.candera.eu/books/sample-solutions/page/3d-effects-solution)	○	○	○	○	○
[3D Getting Started](https://doc316en.candera.eu/books/sample-solutions/page/3d-getting-started-solution)	○	○	○	○	○
[ADAS Template](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution)	○	ー	○	ー	○
[Advanced Cluster](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution)	○	○	○	○	○
[Blood Pressure Device](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)	○	○	○	○	○
[GettingStartedControls](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution)	○	○	○	○	○
[glTF Extensions](https://doc316en.candera.eu/books/sample-solutions/page/gltf-extensions-solution)	○	○	○	○	○
[Industrial](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution)	○	○	○	○	○
[Instrument Cluster](https://doc316en.candera.eu/books/sample-solutions/page/instrument-cluster-solution)	○	○	○	○	○
[In-Vehicle Infotainment](https://doc316en.candera.eu/books/sample-solutions/page/in-vehicle-infotainment-solution)	○	○	○	○	○
[Layouter](https://doc316en.candera.eu/books/sample-solutions/page/layouter-solution)	○	○	○	○	○
[Materials](https://doc316en.candera.eu/books/sample-solutions/page/materials-solution)	○	○	○	○	○
[MenuScreens](https://doc316en.candera.eu/books/sample-solutions/page/menuscreens-solution)	○	○	○	○	○
[MixedReality](https://doc316en.candera.eu/books/sample-solutions/page/mixedreality-solution)	○	ー	ー	ー	ー
[OpenGL 2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/opengl-2d-effects-solution)	○	○	○	○	○
[Physically Based Rendering](https://doc316en.candera.eu/books/sample-solutions/page/physically-based-rendering-solution)	○	○	○	○	○
[Post Processing](https://doc316en.candera.eu/books/sample-solutions/page/post-processing-solution)	○	○	○	○	○
[Scripting](https://doc316en.candera.eu/books/sample-solutions/page/scripting-solution)	○	ー	○	ー	○
[Transition](https://doc316en.candera.eu/books/sample-solutions/page/transitions-solution)	○	○	○	○	○

	iMX6 OpenGLES30	iOS OpenGLES30	NullWs OpenGLES20	NullWs OpenGLES30	OpenGlEs20 OpenGLES20
[Empty](https://doc316en.candera.eu/books/sample-solutions/page/empty-solution)	○	○	○	○	ー
[2D Basic](https://doc316en.candera.eu/books/sample-solutions/page/2d-basic-solution)	○	○	○	○	ー
[2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/2d-effects-solution)	○	○	○	○	ー
[3D Basic](https://doc316en.candera.eu/books/sample-solutions/page/3d-basic-solution)	○	○	○	○	ー
[3D Effects](https://doc316en.candera.eu/books/sample-solutions/page/3d-effects-solution)	○	○	○	○	ー
[3D Getting Started](https://doc316en.candera.eu/books/sample-solutions/page/3d-getting-started-solution)	○	○	○	○	ー
[ADAS Template](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution)	○	○	ー	○	ー
[Advanced Cluster](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution)	○	○	○	○	ー
[Blood Pressure Device](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)	○	○	○	○	ー
[GettingStartedControls](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution)	○	○	○	○	ー
[glTF Extensions](https://doc316en.candera.eu/books/sample-solutions/page/gltf-extensions-solution)	○	ー	○	○	ー
[Industrial](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution)	○	○	○	○	ー
[Instrument Cluster](https://doc316en.candera.eu/books/sample-solutions/page/instrument-cluster-solution)	○	ー	○	○	ー
[In-Vehicle Infotainment](https://doc316en.candera.eu/books/sample-solutions/page/in-vehicle-infotainment-solution)	○	ー	○	○	ー
[Layouter](https://doc316en.candera.eu/books/sample-solutions/page/layouter-solution)	○	○	○	○	ー
[Materials](https://doc316en.candera.eu/books/sample-solutions/page/materials-solution)	○	○	○	○	ー
[MenuScreens](https://doc316en.candera.eu/books/sample-solutions/page/menuscreens-solution)	○	○	○	○	ー
[MixedReality](https://doc316en.candera.eu/books/sample-solutions/page/mixedreality-solution)	○	ー	○	○	ー
[OpenGL 2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/opengl-2d-effects-solution)	○	○	○	○	ー
[Physically Based Rendering](https://doc316en.candera.eu/books/sample-solutions/page/physically-based-rendering-solution)	○	○	○	○	ー
[Post Processing](https://doc316en.candera.eu/books/sample-solutions/page/post-processing-solution)	○	○	○	○	ー
[Scripting](https://doc316en.candera.eu/books/sample-solutions/page/scripting-solution)	○	○	ー	○	ー
[Transition](https://doc316en.candera.eu/books/sample-solutions/page/transitions-solution)	○	○	○	○	ー

	OpenGlEs30 OpenGLES30	QnxScreen OpenGLES20	QnxScreen OpenGLES30	RCarD3 OpenGLES30	RCarGen3 2Dover3D OpenGLES30
[Empty](https://doc316en.candera.eu/books/sample-solutions/page/empty-solution)	ー	○	○	○	○
[2D Basic](https://doc316en.candera.eu/books/sample-solutions/page/2d-basic-solution)	ー	○	○	○	○
[2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/2d-effects-solution)	ー	○	○	○	○
[3D Basic](https://doc316en.candera.eu/books/sample-solutions/page/3d-basic-solution)	ー	○	○	○	○
[3D Effects](https://doc316en.candera.eu/books/sample-solutions/page/3d-effects-solution)	ー	○	○	ー	○
[3D Getting Started](https://doc316en.candera.eu/books/sample-solutions/page/3d-getting-started-solution)	ー	○	○	○	○
[ADAS Template](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution)	ー	ー	○	○	○
[Advanced Cluster](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution)	ー	○	○	○	○
[Blood Pressure Device](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)	ー	○	○	○	○
[GettingStartedControls](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution)	ー	○	○	○	○
[glTF Extensions](https://doc316en.candera.eu/books/sample-solutions/page/gltf-extensions-solution)	ー	○	○	○	○
[Industrial](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution)	ー	○	○	○	○
[Instrument Cluster](https://doc316en.candera.eu/books/sample-solutions/page/instrument-cluster-solution)	ー	○	○	○	○
[In-Vehicle Infotainment](https://doc316en.candera.eu/books/sample-solutions/page/in-vehicle-infotainment-solution)	ー	○	○	○	○
[Layouter](https://doc316en.candera.eu/books/sample-solutions/page/layouter-solution)	ー	○	○	○	○
[Materials](https://doc316en.candera.eu/books/sample-solutions/page/materials-solution)	ー	○	○	ー	○
[MenuScreens](https://doc316en.candera.eu/books/sample-solutions/page/menuscreens-solution)	ー	○	○	○	○
[MixedReality](https://doc316en.candera.eu/books/sample-solutions/page/mixedreality-solution)	ー	ー	ー	○	ー
[OpenGL 2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/opengl-2d-effects-solution)	ー	○	○	○	○
[Physically Based Rendering](https://doc316en.candera.eu/books/sample-solutions/page/physically-based-rendering-solution)	ー	○	○	○	○
[Post Processing](https://doc316en.candera.eu/books/sample-solutions/page/post-processing-solution)	ー	○	○	○	○
[Scripting](https://doc316en.candera.eu/books/sample-solutions/page/scripting-solution)	ー	ー	○	ー	○
[Transition](https://doc316en.candera.eu/books/sample-solutions/page/transitions-solution)	ー	○	○	○	○

	RCarH3 OpenGLES30	RT117X OpenGLES20	RZA1H OpenGLES20	SoftwareRenderer2D OpenGLES20	Traveo2 OpenGLES20
[Empty](https://doc316en.candera.eu/books/sample-solutions/page/empty-solution)	○	○	○	○	○
[2D Basic](https://doc316en.candera.eu/books/sample-solutions/page/2d-basic-solution)	○	○	○	○	○
[2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/2d-effects-solution)	○	○	ー	○	○
[3D Basic](https://doc316en.candera.eu/books/sample-solutions/page/3d-basic-solution)	○	ー	ー	ー	ー
[3D Effects](https://doc316en.candera.eu/books/sample-solutions/page/3d-effects-solution)	○	ー	ー	ー	ー
[3D Getting Started](https://doc316en.candera.eu/books/sample-solutions/page/3d-getting-started-solution)	○	ー	ー	ー	ー
[ADAS Template](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution)	○	ー	ー	ー	ー
[Advanced Cluster](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution)	○	ー	ー	ー	ー
[Blood Pressure Device](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)	○	ー	ー	ー	ー
[GettingStartedControls](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution)	○	ー	ー	ー	ー
[glTF Extensions](https://doc316en.candera.eu/books/sample-solutions/page/gltf-extensions-solution)	○	ー	ー	ー	ー
[Industrial](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution)	○	ー	ー	ー	ー
[Instrument Cluster](https://doc316en.candera.eu/books/sample-solutions/page/instrument-cluster-solution)	○	ー	ー	ー	ー
[In-Vehicle Infotainment](https://doc316en.candera.eu/books/sample-solutions/page/in-vehicle-infotainment-solution)	○	ー	ー	ー	ー
[Layouter](https://doc316en.candera.eu/books/sample-solutions/page/layouter-solution)	○	○	ー	○	○
[Materials](https://doc316en.candera.eu/books/sample-solutions/page/materials-solution)	○	ー	ー	ー	ー
[MenuScreens](https://doc316en.candera.eu/books/sample-solutions/page/menuscreens-solution)	○	ー	ー	ー	ー
[MixedReality](https://doc316en.candera.eu/books/sample-solutions/page/mixedreality-solution)	ー	ー	ー	ー	ー
[OpenGL 2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/opengl-2d-effects-solution)	○	ー	ー	ー	ー
[Physically Based Rendering](https://doc316en.candera.eu/books/sample-solutions/page/physically-based-rendering-solution)	○	ー	ー	ー	ー
[Post Processing](https://doc316en.candera.eu/books/sample-solutions/page/post-processing-solution)	○	ー	ー	ー	ー
[Scripting](https://doc316en.candera.eu/books/sample-solutions/page/scripting-solution)	○	ー	ー	ー	ー
[Transition](https://doc316en.candera.eu/books/sample-solutions/page/transitions-solution)	○	○	ー	○	○

	Wayland OpenGLES20	Wayland OpenGLES20 Professional	Wayland OpenGLES30
[Empty](https://doc316en.candera.eu/books/sample-solutions/page/empty-solution)	○	○	○
[2D Basic](https://doc316en.candera.eu/books/sample-solutions/page/2d-basic-solution)	○	○	○
[2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/2d-effects-solution)	○	○	○
[3D Basic](https://doc316en.candera.eu/books/sample-solutions/page/3d-basic-solution)	○	○	○
[3D Effects](https://doc316en.candera.eu/books/sample-solutions/page/3d-effects-solution)	○	○	○
[3D Getting Started](https://doc316en.candera.eu/books/sample-solutions/page/3d-getting-started-solution)	○	○	○
[ADAS Template](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution)	ー	ー	○
[Advanced Cluster](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution)	○	○	○
[Blood Pressure Device](https://doc316en.candera.eu/books/sample-solutions/page/blood-pressure-solution)	○	○	○
[GettingStartedControls](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution)	○	○	○
[glTF Extensions](https://doc316en.candera.eu/books/sample-solutions/page/gltf-extensions-solution)	○	○	○
[Industrial](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution)	○	○	○
[Instrument Cluster](https://doc316en.candera.eu/books/sample-solutions/page/instrument-cluster-solution)	○	○	○
[In-Vehicle Infotainment](https://doc316en.candera.eu/books/sample-solutions/page/in-vehicle-infotainment-solution)	○	○	○
[Layouter](https://doc316en.candera.eu/books/sample-solutions/page/layouter-solution)	○	○	○
[Materials](https://doc316en.candera.eu/books/sample-solutions/page/materials-solution)	○	○	○
[MenuScreens](https://doc316en.candera.eu/books/sample-solutions/page/menuscreens-solution)	○	○	○
[MixedReality](https://doc316en.candera.eu/books/sample-solutions/page/mixedreality-solution)	ー	ー	ー
[OpenGL 2D Effects](https://doc316en.candera.eu/books/sample-solutions/page/opengl-2d-effects-solution)	○	○	○
[Physically Based Rendering](https://doc316en.candera.eu/books/sample-solutions/page/physically-based-rendering-solution)	○	○	○
[Post Processing](https://doc316en.candera.eu/books/sample-solutions/page/post-processing-solution)	○	○	○
[Scripting](https://doc316en.candera.eu/books/sample-solutions/page/scripting-solution)	ー	ー	○
[Transition](https://doc316en.candera.eu/books/sample-solutions/page/transitions-solution)	○	○	○

ソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。プラットフォーム（パッケージ種別）単位で、Scene Composerに含まれているサンプルソリューションは異なります。ここでは、プラットフォームとサンプルソリューションとの相関を示します。 # Empty Solution #### Summary A solution containing basic resources. It contains a 2D scene with a camera and a 3D scene with a camera and light. It is meant to be a basic solution for new ones that should start from scratch. --- # 2D Basic Solution #### Summary This solution represents a basic example that shows the fundamentals of how to compose a 2D scene. This includes the basic node types (SolidColorNode, BitmapNode and TextNode) and a camera that is linked to a render-target. It demonstrates the outstanding possibilities of CGI Studio's TextNode with a welcome text in various languages. This shows that handling of even complex fonts and different text directions is supported. An animation of Vector Graphics adds some gentle motion to this otherwise static 2D scene. #### Description ##### 2D Scene There is one 2D scene in the whole solution.

The scene is composed of three parts: - On the left side you can see a "Menu" with welcome texts in different text styles and languages. - The center displays the CGI Studio logo. - On the right side there are four different Vector Graphics. An animation enhances the static 2D basic solution with motion. Here is an overview of how to map parts of the scene tree to the individual parts of the scene.

##### Camera The camera is linked to a created render-target which is necessary for rendering. The render-target is linked to a display.

##### Animation Details of the animation can be viewed in "Animation Design" mode. To switch to this mode, click the corresponding button in the menu.

In "Animation Design" mode you can view the Animation Configuration, Animation Timeline and Animation Values. They allow you to analyze and modify the animation.

# 2D Effects Solution #### Summary This solution shows various 2D effects applied on different node types in a 2D scene. #### Purpose The user can see how 2D effects are used on various node types in a 2D scene. This solution helps to understand the basic properties of the shown 2D effects. For platforms that support OpenGL, an additional solution for OpenGL 2D effects is available. #### Description This solution contains the following effects applied on different node types:

The final amount of samples depend on the available platforms and also on the kind of package that has been received.(The figure below shows the Android case.)

If the platform is Traveo2, Bitmap Brush Color Mask Blend does not exist in the sample.

#### Information about 2D Effects More information about 2D effects can be found in section [2D Effects](https://doc316en.candera.eu/books/2d-effects). Effects of type Bitmap Brush Blend are described in detail in section [Bitmap Brush Blend Effects](https://doc316en.candera.eu/link/602#bkmrk-page-title) Information about Solid Color Blend effects can be found in section [Solid Color Brush Blend Effects](https://doc316en.candera.eu/link/603#bkmrk-page-title) Information about Bitmap Brush Color Mask Blend effect, the content of [OpenGL Bitmap Brush Mask](https://doc316en.candera.eu/books/2d-effects/page/opengl-bitmap-brush-mask-effects) is helpful. --- # 3D Basic Solution #### Summary This solution represents a basic example of a 3D scene. It demonstrates several key features of 3 dimensional compositing using CGI Studio Scene Composer. #### Purpose The solution includes all elements that are necessary to render a basic 3D scene. It additionally contains a 2D scene, an animation and a state machine. The 3D object's appearance is enhanced using image mapping as well as bump mapping. #### Description This sample solution shows a 3D scene with a rotating cube in front of a 2D scene that acts as background. - The 3D scene contains a 3D model with two textures. - The 2D scene with the Candera logo is rendered in the background. - The cameras of the 3D and 2D scene are configured so that the scenes are rendered correctly. - An Animation rotates the 3D scene's cube around the y-axis. - In the State Machine both scenes are activated and the animation is started.

#### Detailed Description ##### 3D Scene There is a 3D scene in the solution.

The 3D scene consists of - a point light source - a camera - a 3D model that contains 2 textures (one of which is a bump map)

##### 2D Scene There is a 2D scene in the solution that is rendered in the back and acts as a background.

The 2D scene consists of - a 2D camera - a BitmapNode with a background image

##### Cameras and Render Target The cameras are linked to a render-target which is necessary for rendering. The render-target is linked to a display. A correct configuration of the cameras' properties ensures that the 3d foreground scene is rendered over the 2d background scene without any visual side effects. Clearing the buffer and swapping is configured accordingly.

##### Animation An animation rotates the cube around the y-axis. The distance of the 2 key frames define the speed of this rotation.

##### State Machine A State Machine is configured to perform the following actions when entering the State: - activate Scene 3D - activate Scene 2D (as background) - configure and play the animation in replay repeat mode

# 3D Effects Solution #### Summary This solution shows various features of a 3D scene. These are mainly the different node-types including morphing, shadows, level of detail, particles and many more. Animations that illustrate the features are included. The animations also show that control properties can be animated. #### Purpose The user can see how the single 3D features are realized in a scene. Own use cases, based on the features, can be created with the help of the solution and this documentation. #### Description This section describes the single use cases that are represented in this solution. The particle emitters and 3d skinning are in separate scenes. When viewing this solution in the Player, you can switch scenes using the buttons at the bottom (Effects/Particles/Skinning, orange frame in the figure below).

In the Effects tab, you can play the corresponding animations by enabling the toggle buttons for each 3D effect. Once started, an animation will continue to loop until the toggle button is disabled. In the upper-right corner of the screen, various performance parameters are displayed, including FPS (Frames Per Second), FC (Frame Count), and FT (Frame Time). These allow you to monitor the performance impact when multiple animations are running simultaneously. The properties of the particle emitters are animated, which can be seen when starting the appropriate particle animation. Beside the use-cases, a Skybox is used in the scene to create an environment for it. The skybox is also used in the "Glass" use case. Due to the fact that this solution is a sample solution there are labels included in the Skybox (like "Left-Front") that show how it is applied. --- #### Animation Types This use case shows the different animation interpolation types that can be chosen in SceneComposer. Those are from left to right: Step, Linear, Spline, Bezier, Ease. The spheres have the same keyframe values, only the animation type is different.

#### Morphing This use case shows how morphing can be realized in SceneComposer. Basically, all that is needed is a MorphingMesh-node that has the morphing vertex-buffers applied as in the sample scene. The weights of the morphing vertex-buffers are animated as well as the colors of the material. Please see [Morphing](https://doc316en.candera.eu/link/545#bkmrk-page-title) for more information about morphing.

#### Bump Mapping This use case shows how bump mapping can be realized. The node uses the bump-mapping appearance of the construction kit and a custom vertex buffer that has generated tangents and binormals.

#### Fur Multipass Appearance This use case shows how multipass appearances can be realized with SceneComposer. In this case a fur-material is created using multiple passes. Please see [Fur](https://doc316en.candera.eu/link/549#bkmrk-fur) for more information about fur.

#### Point Sprite / Light This use case shows how a PointSprite-node can be used in SceneComposer. In this case it represents a point light which will affect all other use cases by moving it.

#### Glass This use case shows an advanced appearance on a sphere. It uses cube-mapping, reflection and refraction. As cube-map the same one as for the Skybox is used. Please see [Reflection & Refraction](https://doc316en.candera.eu/link/548#bkmrk-reflection-%26-refract) for more information about reflection and refraction.

#### Reflection This use case shows how a reflection can be realized in SceneComposer. This is done by a ReflectionCamera that is assigned to the camera that renders the scene. Note that in this solution scope-masks are used to be able to only reflect the car. In more detail the reflection camera has a scope-mask of 2 as the reflected car has. Objects that should not be affected by the ReflectionCamera have a scope-mask of 1, just as the scene-camera has.

#### Level Of Detail This use case shows how Level of Detail (LOD) can be realized in SceneComposer. A LodNode is placed in the scene with two children that represent the different levels of detail. The lower and upper boundaries are chosen in a way that there is a fade between the different levels. The animation moves the node closer to or further from the camera, causing the models to be exchanged. Please see [Level of Detail (LOD)](https://doc316en.candera.eu/link/544#bkmrk-page-title) for more information about LOD.

#### Shadow This use case shows how a shadow can be realized with SceneComposer. Especially when the light in the middle is moved (for example by playing the light-animation), the shadow-effect can be recognized. There is a PlanarShadow-node attached to the torus-node. The plance-distance of the shadow is chosen in the way that it reflects on the platform below the torus. Please see [Planar Shadows](https://doc316en.candera.eu/link/546#bkmrk-page-title) for more information about planar shadows.

#### Particles This use case can be found in the "Scene\_Particles" scene. It shows how the [Point Sprite Emitter](https://doc316en.candera.eu/link/1167#bkmrk-pointspriteemitter) Control can be used to implement different particle effects. The effects shown in this sample are snow, fire, sparks and a sample for multiple textures. The animation effects for each particle emitter are controllable via the various parameters in the bottom-right section of the screen.

##### Bottom-right screen parameters - **Selected Effect:** A multistate button used to select which effect to edit. - **Emit Particles:** A toggle to start or completely stop the particle emission. - **Max Particles:** A slider to control the maximum number of particles. - **Particles per second:** A slider to control the number of particles generated per second. - **LifeTime:** A slider to control the lifetime of the particles. - **Velocity:** A slider to control the velocity of the particles. - **Gravity:** A slider to control the gravity applied to the particles.

The values for sliders endpoints are different for each effect. They are initially set to a default value for that effect, and moving to 0 will reduce to 50% of the default, and moving to maximum would increase to 200% of the default.

#### Skinning As a sample of skinning, skinning is set on the human body model and a walking motion is set as the animation.

# 3D Getting Started Solution #### Summary This solution shows an innovative sample cluster using 2D and 3D scenes. To enjoy this sample, open it in Scene Composer, save it to your disk and press the "Generate and Play" button in the top toolbar below the menu. The initial scene shows a 3D cluster in an innovative design with a speed gauge on the left and an RPM gauge on the right side. In the middle sits a 3D model of a car rotating slowly. Above this, the words "Air Pressure" are displayed. The tire that comes into focus during the car's movement is highlighted and its current air pressure is displayed as the car continues to turn. Necessary indicators like odometer, battery and fuel status, turn lights etc. are positioned in a clear and intuitive way.

Pressing the 'Space' key (as suggested by the text in the top right corner) switches the mode to Navigation. Now, navigation content is displayed in the center of the cluster instead of the air pressure content from the initial scene. An animation imitates navigation through a 3D scenery, displaying turning instructions. You can press the 'Space' key again to return to the "Air Pressure" context.

#### Android Version In the Android version you can use the buttons to switch the mode to Navigation and back.

#### Content This sample solution includes - 2D and 3D scenes - animations - a global State Machine --- # Advanced Cluster Solution #### Overview This solution shows an advanced 2D cluster example. It consists of various scenes that are necessary to represent an advanced Cluster. The Main Scene consists of gauges that can be manipulated with Controls and Behaviors. Other scenes, like ControlPanel scene, show various interactions within the solution and how this can be achieved with Behaviors. The ControlPanel scene also demonstrates how to switch between display languages. This sample solution serves as an example of how Scene Composer can be used to easily implement an advanced 2D gauge cluster without requiring any coding. For information on how to create the main scenes of this sample solution and how to implement HMI logic using controls, please refer to the [Advanced Cluster Solution tutorial](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution).

--- #### Description The Advanced Cluster solution consists of multiple scenes to display an advanced 2D gauge cluster. Each scene uses controls suitable for the UI. It also uses Behaviors and a State Machine to pass data between scenes and transition between scenes. For more information about the scenes, controls, behaviors, and the state machine used in this solution, please see the following description. ##### Scene The Advanced Cluster solution consists of five scenes, using Scene Composer's versatile built in Controls to display an advanced 2D gauge cluster.

No.	Category	Scene name	Description
(1)	Main	Scene2D\_Main	The main scene of this sample solution. Two gauges are displayed on the left and right side, various indicators are displayed in the top area. In the center some space is reserved to display one of the infotainment scenes Music, Phone or Settings. The following controls are mainly used: - Speedometer: Gauge - Tachometer: Gauge - Top indicators: Tell Tale
(2)	Infotainment	Scene2D\_Music Scene2D\_Phone Scene2D\_Settings	This area displays the active infotainment scene (Music/Phone/Settings). Only the selected scene is displayed in the center of Scene2D\_Main. The following controls are mainly used: - Music contents: CoverFlow
(3)	UI operation	Scene2D\_ControlPanel	A UI for operating the main scene and infotainment scene is displayed. Using this UI, you can change the speedometer/tachometer values, switch infotainment scenes, change the display language, and more. The following controls are mainly used: - D-pad button: Button - Buttons for each infotainment: Button - Buttons for Speedmeter/Tachometer: CircularSlider - Buttons for Fuel gauge/Water temperature gauge: Slider

##### Behaviors/State Machine This solution offers the possibility to change the screen display via UI operation as described in the table below. This kind of interaction is achieved without any coding, but solely by configuring behaviors and a state machine.

	(1)	The left and right arrows switch infotainment (Music/Phone/Settings). The up and down arrows change the content of each infotainment.
	(2)	Click on the Phone/Music/Settings icon to switch the infotainment scenes.
	(3)	The circular slider control changes the tachometer value.
	(4)	The circular slider control changes the speedometer value.
	(5)	The slider control changes the fuelmeter value.
	(6)	The slider control changes the water temperature meter value.
	(7)	Click the language icon to switch between languages displayed on the main screen and infotainment screen.

The user can explore and study the details of each UI's Behavior and State Machine setting using all of Extra Scene Tree, Fusion panel, and State Machine Editor of the target node. The following description and images provide an example on how to explore a specific configuration: One of the ControlPanel's CircularSlider controls (**CircularSlider\_RPM**) is used to remotely control the Main scene's tachometer value. The connection between CircularSlider\_RPM and the tachometer (Scene2D\_Main's **CustomGauge\_RPM**) is a **Forward Value** behavior with CustomGauge\_RPM as TargetNode. When selecting the **CircularSlider\_RPM** in the Scene Tree panel, the **Forward Value** behavior can be seen in the Extra Scene Tree. Pressing on the **Fusion...** button right above the Extra Scene Tree panel, Fusion will be opened displaying the CircularSlider\_RPM's Fusion diagram. This diagram contains a Fusion Node **Forward Value** with a **TargetNode** property that can be confirmed to be set to **Scene2D\_Main's CustomGauge\_RPM.**

##### Play/Operation Using the Player Click the \[ Play selected scenario… \] icon on the toolbar to launch the Player. The Advanced Cluster solution will be displayed in the Player view. The user can operate the display of the main screen using the ControlPanel scene's UI on the right side of the display screen. --- # 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 the [GettingStartedControls tutorial](https://doc316en.candera.eu/books/best-practice/chapter/gettingstartedcontrols-solution).

--- #### Description ##### Scene The GettingStartedControls solution consists of the scenes listed in the table below.

Scene name	Description
SceneHome	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.
SceneClimate	Scene for the car climate settings screen with air conditioning and various heating settings.
ScenePhone	Scene for the phone screen. Displays the phone book and a contact with a call and hang up button.
SceneOptions	A scene for a screen to select one of 4 other options scenes.
ClimateOptions	Scene for the climate-related settings screen to configure the temperature unit and heating time.
SoundOptions	A scene for the audio-related settings screens with extensive possibilities.
TimeOptions	A scene for the time-related settings screen.
PhoneOptions	A scene for the phone-related settings screen.
ConnectionOptions	A scene for the phone connection settings screen.
SceneMenuTabs	Scene for the screen switching tabs of SceneHome/SceneClimate/ScenePhone/SceneOptions.
SceneBack	Background scene.
SceneBreadcrumb	A scene for the breadcrumb list that appears at the top of SceneOptions.

##### Control The following table lists the featured controls used in the GettingStartedControls solution. For more information about each control, please refer to [Predefined Controls](https://doc316en.candera.eu/books/controls-and-behaviors/chapter/predefined-controls).

Control name	Description
BreadCrumb	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.
List	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.
Drawer	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.
Roll	The time-options screen includes three roll controls for setting the time (seconds, minutes and hours).
Keyboard	When clicking on of the time-rolls an on-screen keyboard appears.
Various Core Controls	In the SoundOptions scene, Core controls are used to display various audio-related settings.

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.

##### Behavior Behaviors are configured for each control 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. The 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.

##### State Machine The transitions between 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. The configuration of the State Machine transitions between scenes can be viewed in the State Machine Editor.

##### Transition 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 Variant in the Transition Rule Editor. Transition settings can be viewed in the Transition Rule Editor.

##### Play/Operation using Player 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. 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.

(1)	Each time you click, the display screen will change in the following order: SceneHome -> SceneClimate -> ScenePhone -> SceneOptions (after SceneOptions, you will return to SceneHome).
(2)	When clicked, SceneHome will be displayed.
(3)	When clicked, SceneClimate will be displayed.
(4)	When clicked, ScenePhone will be displayed.
(5)	When clicked, SceneOptions will be displayed.
(6)	When clicked, the SceneMenuTabs will be hidden.

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

--- # Industrial solution #### Summary This solution presents innovative industrial samples using 2D and 3D scenes. Generate and Play\] button in the toolbar to play the solution. In the first scene, the Machine Dashboard will appear. Clicking the "Production" or "Diagnostics" button in the lower left corner will take you to the corresponding scene.

#### Manual Machine Control scene In the Manual Machine Control (Scene2\_Production) scene, which is displayed by pressing the Production button, multiple Button controls are arranged in group nodes. Clicking on the three buttons located in the center of the right side of the scene (red frame in the image below) will take you to the corresponding scene.

1	ButtonR1：Settings（Scene3\_Settings） In this scene, you can switching between the two scenes, the settings such as switching 12/24-hour time display and IP address display sceane are displayed.
2	ButtonR2：Performance（Scene6\_Performance） This scene displays information on machine productivity. Data is displayed using the BarGraph and LineGraph controls, respectively.
3	ButtonR3：Robot Control（Sene5\_Robot\_2D) This scene can activate the 3D model in the center of the screen by pressing the button on the left side of the scene. Pressing the button on the right side of the scene resets the animation playback and the display state of the 3D model.

#### Alarm List scene Alarm List (Scene4\_AlarmList) scene, which is displayed by pressing "Diagnostics" button, shows a list of alarms using the List control. Pressing the button in the upper right corner of the screen returns to the Machine Dashboard scene.

In any of the scenes, you can return to the previous scene by pressing the button in the upper right corner of the screen (see below).

#### Content This sample solution includes - 2D and 3D scenes - animations - a global State Machine # Layouter Solution #### Summary A solution exemplifying the use of the layout. It contains several 2D scenes for all kinds of 2D layout and for central layout properties. An additional 2D scene shows how to configure layouts that automatically resize when the available space changes. It also contains several 3D scenes to show how to work with the different layout on a canvas to position Canvas Texts and Canvas Sprites. 3D scenes that explain the Layout Properties can also be found in this solution as well as the automatic resizing Layouts. #### Purpose The user can see how to use layout in 2D and 3D scenes (with canvas) and gets to know the core properties and how their values affect the layout calculation. The included "use cases" scene uses three different layouts to realize a layout that resizes automatically when the available space is changed. #### Description ##### 2D Scenes for 2D Layout It contains one 2D scene for each of the following layouts to demonstrate their functionalities:

#### 2D Scenes for 2D Layout Properties To show the possibilities of the layout properties there is a 2D scene for each of the following properties:

#### 2D Scene for 2D Layout Use Cases

#### 3D Scenes for 3D Canvas Layout ##### 3D Scenes for Canvas Layout For positioning canvas nodes (canvas texts and canvas sprites) on a canvas the same layouts are available as for 2D scenes. Several 3D scenes show the functionality of these layouts on a canvas.

- Canvas - Layouter - BaseLine Layout - Canvas - Layouter - Default Layout - Canvas - Layouter - Dock Panel Layout - Canvas - Layouter - Grid Layout - Canvas - Layouter - Overlay Layout - Canvas - Layouter - Stack Layout

##### 3D Scenes for 3D Canvas Layout Properties The possibilities of the 3D Canvas layout properties can be seen in separate 3D scenes for:

- Canvas - Properties - Alignment - Canvas - Properties - Margin - Canvas - Properties - Stretch Behavior

##### 3D Scene for 3D Canvas Layout Use Cases

- Canvas - Use Cases - Automatic Resizing Layouter

For more information see: [Layouter](https://doc316en.candera.eu/books/layouter) --- # Materials Solution #### Summary This solution shows various materials in a 3D scene. Those are wood, fur, carbon and cube-mapping-effects for example. All of the shown materials are available as template-appearances in SceneComposer that can be applied to existing nodes. #### Purpose The user gets an overview of which template-appearances are provided with SceneComposer. The different spheres have the appearances attached, hence the user can experiment with their properties and get an instant visual feedback. #### Description This section describes the single materials and which important properties they consist of. ##### Gooch Gooch shading between two colors, configurable via shader parameters.

##### Wood A fully procedural shader to achieve the look of annual rings in wooden objects. The effect can be configured via shader parameters, where the wood center defines a point along the center of the virtual tree trunk, the wood direction defines the direction of the wood grain and the multiplier affects the density of the annual rings.

##### Bump Mapping For structured materials. Bump mapping requires a mesh with tangents and binormals, a color texture as well as a normal map.

##### Carbon Fibre Achieves a carbon fibre look by applying specular highlights to the bright parts of the carbon texture only. The shader parameter "Tile" allows repeating the carbon fibre texture on the object. Also supports cube map reflection.

##### Gradient Linear A simple linear gradient between two colors along a specified axis. Can be configured via the shader parameters: starting position, direction and magnitude.

##### Gradient Radial A simple radial gradient between two colors around a specified center point. Can be configured via the shader parameters: starting position and magnitude.

##### Fur A multiple pass appearance simulating hair or fur. The amount of passes is variable, each pass should be configured separately via an alpha texture (hair position), a color texture (hair color) and shader parameters.

##### Brushed Metal Anisotropic lighting of brushed metal using a strand texture for the diffuse and specular intensities.

##### Car Paint Flip Flop Simulates flip-flop car paint which changes color depending on the viewer's position and the direction of light. Also supports cube map reflection.

##### Car Paint Metallic Simulates metallic car paint using a noise texture. Also supports cube map reflection.

##### Car Paint Metallic Flip Flop Combines the effects of metallic and flip-flop car paint. Also supports cube map reflection.

#### Sphere Mapping Wraps a sphere map around an object.

##### Cube Mapping Wraps a cube map around an object.

##### Cube Mapping Reflection Reflects a cube map in an object.

##### Cube Mapping Refraction Refracts a cube map through an object achieving a lens effect, the refraction ratio shader parameter will affect the amount of distortion.

##### Cube Mapping Reflection Refraction Combines the effects of reflection and refraction on a cube map.

---

# MenuScreens Solution #### Summary A solution exemplifying the use of the Menu Screen Control with DataBinding using sample component.

#### Purpose The user can see how to use the *Menu Screen* Control and gets to know the core properties and how their values affect the Menu Screens' display. #### Description It contains a *Menu Screen* control with several items (to represent two pages). The data model (sample component) contains data representing more than two pages, so MenuItems are re-used on page change. Data model (component) should support:

- Reading items from fixed data storage - Updating MenuScreens when data in storage changes - Deleting items on request from MenuScreens - Reordering items on request from MenuScreens - Storing items to fixed data storage on change - Runtime creation of new items (if needed), is handled on component side ---

# MixedReality Solution #### Purpose This sample shows how to use the AR controls introduced in CGI Studio 3.8: #### Summary can be used to switch between three scenes:

- 2D streaming: Tests if GStreamer is working properly. - City example: 3D over 3D, but a good example to understand how Points of Interest can be used. - 3D streaming: Combines the 3D elements with a background video feed. Camera can no longer be controlled manually, but tracking data must be provided.

#### Description #### 1. 2D streaming

: Streaming feature is disabled by default. It is necessary to build your own SCHost.dll with the respective cmake flag enabled. (see [3. Prerequisites](https://doc316en.candera.eu/link/468#bkmrk-3.-prerequisites) Prerequisits)

#### 2. City example Move around with <W,A,S,D>, rotate with <Q,E>. The path you can see is created dynamically from a file at \\cgi\_studio\_player\\src\\Player\\SampleComponents\\NavigationPathData.csv. As you move closer to a POI you should see how the [alphadistance fading](https://doc316en.candera.eu/link/639#bkmrk-distance-alpha-fadin) is handling the level of detail of the information that is displayed.

##### 2.1 Creating a new PoiControl

- Design the control and safe it - Assign a name and a asset id - Drag a [new config](https://doc316en.candera.eu/link/639#bkmrk-poi-configuration) onto the PoiManager - Add to .csv file and use the name that you just defined in the config. The sample dictionary can be found in cgi\_studio\_player\\src\\Player\\SampleComponents\\PoiDictionary.csv and looks like this:

---

# OpenGL 2D Effects Solution #### Summary This solution shows various OpenGL 2D effects applied on different node types in a 2D scene. Additionally it includes a scene where the Mesh2D is used. #### Purpose The user can see how OpenGL 2D effects are used on various node types in a 2D scene. This solution helps to understand the basic properties of the shown 2D effects and the Mesh2D. There is another solution available for additional 2D effects that are not using OpenGL. #### Description This solution contains the following OpenGL 2D effects applied on different node types:

This sample also demonstrates that effects can be animated. The scene can be switched with a single mouse click. The second scene shows the possibilities of perspective warping with the Mesh2D control. The important properties of Mesh2D in order to realize perspective warping are "Mesh Rotation" and "Rotation Axis".

#### Information about 2D Effects More information about 2D effects can be found in section [2D Effects](https://doc316en.candera.eu/books/2d-effects). Descriptions for OpenGL effects in particular can be found in the following sections:

- [OpenGL Solid Color Brush Mask Effect](https://doc316en.candera.eu/link/604#bkmrk-page-title) - [OpenGL Bitmap Brush Mask Effects](https://doc316en.candera.eu/link/605#bkmrk-page-title) - [OpenGL Gradient Brush Effects](https://doc316en.candera.eu/link/606#bkmrk-page-title) - [OpenGL Flip Effects](https://doc316en.candera.eu/link/607#bkmrk-page-title) - [OpenGL Drop Shadow Effects](https://doc316en.candera.eu/link/608#bkmrk-page-title) - [OpenGL Outline Effects](https://doc316en.candera.eu/link/609#bkmrk-page-title) - [OpenGL Multi Texture Brush Blend](https://doc316en.candera.eu/books/2d-effects/page/opengl-multi-texture-brush-blend) ---

# Physically Based Rendering Solution #### Summary This solution demonstrates Physically Based Rendering (PBR) in CGI Studio done by basic import of GLTF models. #### Purpose The user can see the result of using PBR and how to integrate GLTF models in a Scene Composer solution. #### Description This Solution features a scene that uses an glTF imported Scene as template. To better be able to visualize the effects of using PBR, two models and various environments are included that can be changed in the running application. The first model is the BoomBox, that is also displayed in the Solution Preview.

The second model is a set of spheres with different metallic roughness properties. This Model is included to help visualize how these properties effect the reflection of the environment.

Changing the models and environments is done by using State Machines.

: Please be sure to check the [Import glTF Files](https://doc316en.candera.eu/link/60#bkmrk-page-title) documentation that provides the necessary information about IBL textures and how to import and manipulate the GLTF models.

#### Interaction on Host

- **Change Camera View:** Press and hold the Left Mouse Button and start moving the mouse. - **Switching Environments:** Press and release the Left Mouse Button to change the environment (Skybox and Lighting). - **Switching Models:** Press the tabulator key to change the displayed model.

#### Interaction on Target

- **Change Camera View:** Touch the display and move your finger. - **Switching Environments:** Press and release the Right Mouse Button to change the environment (Skybox and Lighting). - **Switching Models:** Shake your device to change the displayed model. (Only supported by devices with an accelerometer) ---

# Post Processing Solution #### Summary This sample demonstrates how to implement and control post-processing effects in Scene Composer using scripts. It enables toggling effects on and off at runtime and allows property adjustments through UI controls like toggle buttons and sliders.

#### Purpose The goal of this sample is to showcase the simplicity and flexibility of applying post-processing effects via scripts. It provides a practical example of how to enable/disable multiple effects at runtime and animate their properties interactively using UI elements.


Example of post-processing a 3D scene	Example of post-processing a 2D scene

#### Description Key elements of this sample include the cameras in Scene3D\_FX scene (both the main and reflection camera nodes) and in Scene2D\_FX scene (Camera node). These cameras have post-processing scripts attached, taken from the **ConstructionKit** and **SampleKit\_PostProcessing** as Script Components.

The scripting system for the Player can be enabled via the **State Machine** using the **Enable Scripting System** behavior or by **Toggle Scripting System** in the **CGI Panel's** menu bar.

The **`Scene2D_UI`** handles switching between 2D and 3D views and provides toggle buttons for enabling/disabling individual post-processing effects. Each camera has a script (e.g., **`Camera.lua`** for 3D and **`Camera2D.lua`** for 2D) that stores its ID in a global table. Group nodes named after effects (e.g., `BloomDummy`, `FXAADummy`) have attached scripts (**`EnableCameraScript.lua`**, **`EnableCameraScript2D.lua`**) that control the activation of those effects. Post-processing scripts are toggled by enabling or disabling the rendering of these dummy nodes using the **Enable Rendering Action** behavior.

Several post-processing properties are animated and can be modified at runtime using sliders in the UI. Additionally, there's a **Material Control** section where users can adjust the **PBR shader** properties of the 3D model, such as **Base Color (R, G, B)**, **Glossiness**, and the intensity of the baked **Ambient Occlusion** texture, using the same slider mechanism.

For a deeper understanding of the script functionalities, refer to the comments within each script file.

The script system of the Player can be started by typing "start script" into the Player's command window or by Toggle Scripting System in the CGI Panel's menu bar. To stop the script system type "stop script" into the Player's command window or by Toggle Scripting System in the CGI Panel's menu bar.

--- # Scripting Solution #### Summary This solution showcases scripting in SceneComposer. Starting the script system, the scene's camera will perform a fly-through of the city by following the blue arrow objects that are overlayed on the streets. When the camera comes into proximity of the bank/restaurant/hotel building, the respective building will fade into a greenish tint to highlight it. It will also downscale the building's billboard sign so that it does not impair readability when the camera gets close to it. #### Purpose The user gets an impression of what can be done by using a few simple scripts containing very little Lua code. This provides an outlook of SceneComposer becoming an integrated development environment. #### Description The sample solution contains the following 5 scripts:

- **BuildingFader.lua** A script that fades the material of the node it is attached to (bank/restaurant/hotel building) to a greenish color based on the distance of the node to the camera. - **Id.lua** An empty script to identify the node it is attached to, so other scripts can operate on it. It is attached to blue arrow objects to make them accessible for the SplineCameraSetup script. - **SignScaler.lua** A script that scales the node it is attached to (bank/restaurant/hotel sign) based on the distance of that node to the camera. - **SplineCamera.lua** A script that calculates a spline defined by the given ControlPoints, and moves the camera that it is attached to along the spline. - **SplineCameraSetup.lua** A script that sets up the camera and its spline. It gets all the scripts in its subtree, then iterates over them to get nodes called 'arrows.xxx' (where 'xxx' is a number), sorts them, and uses them as control points for the spline.

The script code is documented to provide more details. For general information about Scripting see [Introduction to Candera Lua Scripts](http://dev.jp.doc.cgistudio.at/APILINK/group___lua_tutorial.html#LuaTutorialLuaScript)

--- # Transitions Solution #### Summary This solution showcases Transitions in SceneComposer. Therefore different types of transition are used for replacing a scene with another scene. It shows how using a transition provides continuity so that the scene change is not quite so abrupt. Note that the Player has to be used to run the sample appropriately because only the Player supports Transitions. #### Purpose The user gets an impression of what can be done by using Transitions. #### Tutorial This section explains how to confirm the effect of the transitions set in this solution. ##### Confirmation and editing the set transitions Open the **Transition Rules Editor** via the menu \[ View \] - \[ Transitions \] - \[ Transition Rules Editor \]. Here you can view and edit the configured transition rules.

For details on how to use the Transition Rules Editor, please refer to [Transition Rules Editor](https://doc316en.candera.eu/link/1194#bkmrk-%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E8%A6%8F%E5%89%87%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC).

##### How to confirm the transition effects 1. Click on the play button to \[ Play the scenario... \] - This will open the CGI Panel.

2. In the left panel of the CGI Panel, check "Scene#ClearingScene" and "Scene#SwappingScene" - "Scene#ClearingScene" and "Scene#SwappingScene" will be enabled.

3. Open the "Transition" tab and drag and drop "Scenes#scene1" from the left panel to \[ 'deactivation' scenes... \]. Similarly, drag and drop "Scenes#scene2" from the left panel to \[ 'activation' scenes... \]. - The source of the transition will be set to "scene1" and the destination to "scene2".

4. Click \[ Run \]. - You can check the transition from "scene1" to "scene2" in the Player. 5. Click \[ Swap \]. - The source of the transition will be set to "scene2" and the destination to "scene1".

6. Click \[ Run \] again. - You can now check the transition from "scene2" to "scene1" in the Player.

Also be sure to check [Transitions](https://doc316en.candera.eu/books/scene-design/chapter/transitions) to get detailed information.

--- # 3D ADAS Control Solution #### Summary This solution allows you to check the functions and usage of controls (ADAS-Control) that support the **A**dvanced **D**riving **A**ssistant **S**ystem.

##### Marcket Demand to ADAS - **ADAS visualization in the cockpit**: Helps users intuitively receive information about their surroundings and ADAS decisions. - **Regulations:** Lead to more ADAS components in future cars. - **Automated driving:** Increases the need for ADAS visualization to inform drivers of car decisions and warnings. - **Growing demand:** There is a rapid increase in demand for HMI visualization of ADAS systems. ##### Configuration of ADAS-Control - Adaptive Cruise Control (ACC) - Lane Departure Detection (LDD) - Blind Spot Detection - Drowsiness Detection - Collision Warning - Traffic Sign Recognition --- #### Description ##### Open 3D ADAS Control Solution Open "ADAS Template" from \[Samples and Templates\] in the startup panel. ADAS-Control is used in the 3D\_ADAS\_Control scene.

##### ADAS-Control Properties: In the properties window of the 3D ADAS control, user can activate or deactivate ADAS features and adjust the properties of each feature separately. The following properties are available:

Property Name	Description
Main Car Position (Float type)	Accepts values between 0 and 100. This property adjusts the Road texture u\_OffsetU position to simulate the car moving along the X-axis. The main car remains static while the road texture moves left and right based on this value.
LDD (Boolean type)	Accepts values between 0 and 100. This property adjusts the Road texture u\_OffsetU position to simulate the car moving along the X-axis. The main car remains static while the road texture moves left and right based on this value.
Side Assist (Boolean type)	Activates Blind Spot Detection (BSD). This system uses sensors to detect vehicles in the driver’s blind spot and alerts the driver with visual warnings. BSD is useful for changing lanes, merging, and overtaking. There are two attributes for Side Assist, one for the left side and one for the right side.
ACC (Boolean type)	Activates Adaptive Cruise Control. This system uses radar and cameras to maintain a safe distance from the vehicle ahead and automatically adjusts the speed to keep a safe following distance. ACC is ideal for highway driving, reducing driver fatigue, and helping to prevent rear-end collisions caused by sudden braking.
Set ACC Distance (Float type)	Allows the user to set a safe distance from the front vehicle, ranging from 1 to 4.
ACC Safe distance Indicator (Boolean type)	Activates the rendering of a mesh with a dynamic texture to demonstrate the safe distance to the front vehicle.
Normal Lane Texture	Texture for normal road conditions.
Highlight Center Lane Texture	Optional texture for highlighting the center part of the road lane.
Left Red Lane Texture	Changes the left lane texture to red when LDD is on and the car crosses the left lane.
Right Red Lane Texture	Changes the right lane texture to red when LDD is on and the car crosses the right lane.
Left Yellow Lane Texture	Changes the left lane texture to yellow when LDD is on and the car is close to the left lane.
Right Yellow Lane Texture	Changes the right lane texture to yellow when LDD is on and the car is close to the right lane.
Motorcycle Default Model	Deactivates the rendering of the default motorcycle 3D model, allowing users to assign their own 3D models to the ADAS control anchors.
Minivan Default Model	Deactivates the rendering of the default minivan 3D model, allowing users to assign their own 3D models to the ADAS control anchors.
Car Default Model	Deactivates the rendering of the default car 3D model, allowing users to assign their own 3D models to the ADAS control anchors.
Car Speed (Float type)	Sets the speed of the main car.
Car Minimum Speed (Float type)	Sets the minimum speed of the main car.
Car Maximum Speed (Float type)	Sets the maximum speed of the main car.
Forward Car Speed Value	Sets a target node in a 2D or 3D scene to receive the Car speed value.
Set ACC Speed Value (Float type)	Changes the ACC speed.
ACC Minimum Speed (Float type)	Sets the ACC minimum speed.
ACC Maximum Speed (Float type)	Sets the ACC maximum speed.
Forward the ACC Speed value	Sets a target node in a 2D or 3D scene to receive the ACC speed value.

##### ADAS-Control Anchors: Users can import their 3D models as FBX or glTF files and attach them to the anchors to replace the default ADAS 3D models. For example, a user can import a new 3D mesh for the main car and make it a child of the MainCarAnchor, as shown in the screenshot below.

##### ADAS-Control 3D models and textures: Users can use the default vehicle 3D models (FBX files) as a bounding box and import them into DCC tools like 3Ds Max, Cinema 4D, Blender, etc., to create their 3D meshes at the same scale as the default models. Textures can be exported from the solution explorer window or reimported with the same name and path to replace the existing ADAS control textures. ##### ADAS-Control Data Source: A simple data source is created for ADAS control based on the ADAS properties. Each property in the ADAS control is bound to the target data type. The data source can be written in XML format and stored in an .xhcdl file. It can be extended by users based on their use cases. This is a sample data source file "ADAS.xhcdl" that can be used with the 3D ADAS Control solution: ```xml ``` ##### ADAS-Control details: ADAS-Control is created using Behaviors and Effects from the Scene Composer Toolbox, so you can extend this control based on different use cases by copying ADAS-Control under the Solution folder in the Solution Explorer and double-clicking it.

Additionally, there is a scene called 3D\_ADAS\_ExpandControlNode in the scenes folder, which provides an expanded version of the ADAS control. You can also edit this and save it as their own control.

##### ADAS-Control Shaders: Three shader program is written for ADAS control: 1. **TextureProperties-Shader:** Used in 3D meshes to add texture properties (Tiles and Offsets). 2. **VehicleShader:** Applied to vehicles to change their colors based on the main car's position. 3. **BendMesh\_2TexA\_Shader:** Accepts two textures—one normal texture and one for masking. ##### 2D\_ADAS\_TellTalesControl: This 2D control includes telltales controls and text value. It triggers the rendering of 2D bitmap icons according to the ADAS control conditions, such as altering the Traffic Signs. This control is optional and can be utilized alongside the 3D ADAS control in a 2D scene.

--- # Blood Pressure Solution #### Summary The solution shows a blood pressure measurement device using 2D and various animations. To play the sample asset, open it in Scene Composer, save it to your disk and press the "Generate and Play" Button in the tool bar at the top of the Scene Composer. The samples starts with a flip book animation that transforms to a beating heart and transitions to the measurement scene displayed below. The measurement scene starts a value animation that increases measurement values like oxygen saturation or heart rate gradually. An exemplary MEM button demonstrates a potential saving function of last measurements.

When the value animation has finished, the GlobalStateMachine resets the sample and starts again with the intro animation followed by the value animation.

If the player was build with `CGIAPP_SAMPLE_SOUNDHOUND_ENABLED = ON`, the sample looks and behaves differently, as documented in the Professional Edition [Blood Pressure Sample documentation](https://doc316en.candera.eu/books/cgi-studio-professional-edition/page/blood-pressure-sample "Blood Pressure Sample"). The global state machine has one branch that start the sample normally as described above, if `CGIAPP_SAMPLE_SOUNDHOUND_ENABLED` is `OFF`. If `CGIAPP_SAMPLE_SOUNDHOUND_ENABLED` is `ON` the state machine will start another branch that includes a demo with voice activation, as described in the documentation mentioned earlier.

# Instrument Cluster Solution #### Overview This solutions showcases an automotive instrument cluster covering several features, such as a 3D ADAS control and feature tiles. It demonstrates a solution covering an automotive instrument cluster for an electric vehicle including advanced driving assistance systems visualization. As key feature is the ADAS control in the center of the solution and also the "floating" tiles with features such as music or phone control.

--- #### Feature Description ##### Scene

No.	Category	Scene Name	Description
(1)	ADAS	3D\_ADAS\_DemoScene	3D scene handles several objects visible on the street (such as bikes, pedestrians, trucks, cars and so on). All the objects are handled with a single ObjectControl feature. ADAS (Advanced Driver Assistance System) features were also included. For more details on ADAS features, please refer to [3D ADAS Control Solution](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution "3D ADAS Control Solution").
(2)	ADAS	AdasScene2D	2D ADAS scene links with 3D scene. For instance, if ACC set distance toggle button is enabled, then distance between car and next object on the road must be visible which can be set based on "plus" and "minus" key inputs. In a similar way, all others like LDD, Side assist, ACC indicators and so on were connected to the 3D ADAS demo scene.
(3)	Background	BackgroundScene2D	Background scene
(4)	Main	ClusterHomeScene2D	This scene has mainly cluster (circular slider based) to handle speed, power, charge and range. On increase of speed, power increases and charge (regeneration in this case) doesn't reflect the change. As and when speed starts to decrease, power drops to zero and regeneration increases. Range indicates battery of the car which reduces gradually. Another part of this scene is the car and adas telltales' control which are connected to 3D ADAS DemoScene.
(5)	Tile	MusicScene2D	Slider control indicates progress bar of song and on next or previous button, song information changes. At the end of every song, it automatically shifts to the next song in the list.
(6)	Tile	NavigationScene2D	The navigation scene/tile is a placeholder for a navigation solution integration, as there is no "standard" for navigation integrations and strong depend on the navigation software provider solution.
(7)	Tile	PhoneScene2D	All contacts are listed under the scene. On click of any contact, shifts to outgoing call scene where the user has the option to decline call and go back to contacts list.

##### Control ADAS controls that is used in this solution is same as the one which is added under 3d-adas-control-solution under sample solutions. For details, please refer to [3D ADAS Control Solution](https://doc316en.candera.eu/books/sample-solutions/page/3d-adas-control-solution). All ADAS features added when toggle buttons in ADAS scene are enabled.

The toggle buttons for **ACC Set Speed** and **Highway Assist** are displayed, but the functionalities are not implemented at this time.

##### Transition Transition rules were used with animation as transition type for respective tiles movement and it is cyclic. For example: - MusicScene2D -> NavigationScene2D (MusicDownMove animation is used for movement) - NavigationScene2D -> MusicScene2D (NaviUpMove animation is used for movement) ##### State Machine **GlobalStateMachine** activates common scenes that are used by all the other scenes such as background scene, cluster scene and 3D-ADAS scene. Few animations are configured that needs to be activated during startup like range display in cluster which indicates battery that decreases as per efficiency. **MainCarPositionStateMachine** handles direction of central car movements. Left and Right arrow keys are used for this action. **SetDistanceStateMachine** gets activated when ADAS tiles toggle button is enabled and the lines between central car and another object shows up as shown in below image. Plus and Minus keys are used for this action.

**SetSpeedStateMachine** specifies speed range on which car must be, as per user settings. If set speed initially 80 and when user sets for 90, then speed ranges from 0-90. **TileStateMachine** handles tiles movement with up and down arrow keys among Music player, Contacts, ADAS and Navigation tiles. #### Play/Operation using Player

**3D ADAS area** 1. You can control the position of the main car horizontally by pressing the Left Key and Right Key. 2. The status of LDD (Lane Departure Detection) set in the Tile area is displayed. 3. The status of ACC (Adaptive Cruise Control) set in the Tile area is displayed. **Tile area** 1. The tiles switch by pressing the Up Arrow Key or Down Arrow Key. When the Down Arrow Key is pressed, the tiles switch in the following order: AdasScene2D→NavigationScene2D→MusicScene2D→PhoneScene2D 2. The Add Key ($+$) and Subtract Key ($-$) inputs can be used to set the ACC distance in the AdasScene2D. 3. In the ADAS 2D scene, the Add and Subtract Keys are used to set the ACC speed. # In-Vehicle Infotainment Solution #### Overview The in-vehicle infotainment solution showcases a full feature automotive IVI, which could be used as a solution template. The solution has a interactive 3D digital twin, a dashboard, media phone and HVAC and also an application drawer and car settings pages. It also features a navigation scene with a navigation solution placeholder.

#### Scene

No	Category	Name(s)	Description
(1)	Digital Twin	/DigitalTwin/Porsche\_Macan\_Turbo\_EW /DigitalTwin/Scene2D-UI /Menu/DigitalTwin	The digital twin scenes.
(2)	HVAC	/Menu/HVAC/HVACScene2D /Menu/HVAC/HVACSeatHeating3D	Heat, ventilation and air conditioning related points were covered.
(3)	Media	/Menu/Media/MP3AlbumScene2D /Menu/Media/MP3PlaylistScene2D /Menu/Media/RadioScene2D	The media related playlist, album and radio scenes included
(4)	Phone	/Menu/Phone/CallPopupScene2D /Menu/Phone/ContactScene2D /Menu/Phone/IncomingCallScene2D	The phone connection scenes such as call notification, incoming call and contacts list
(5)	Settings	/Menu/Settings/DisplayInterfaceScene2D /Menu/Settings/DrivingAssistScene2D /Menu/Settings/GeneralSettingsScene2D /Menu/Settings/MaintenanceScene2D /Menu/Settings/PrivacySecurityScene2D /Menu/Settings/SettingScene2D /Menu/Settings/VehicleSettingScene2D	The IVI settings scenes to configure several features of the IVI and car.
(6)	AppDrawer	/Menu/AppdrawerScene2D	The app drawer shows the implementation of external optional applications.
(7)	Home	/Menu/HomeScene2D	The home scene where main options available for quick selection rather than going into main scenes
(8)	Navigation	/Menu/NavigationScene2D	The navigation scene/tile is a placeholder for a navigation solution integration, as there is no "standard" for navigation integrations and strong depend on the navigation software provider solution.
(9)	Background	/BackgroundScene2D	Mainly contains background for IVI where few bitmaps were animated and used masking effects to mimic background movement effects.
(10)	Status	/StatusBarScene2D	The status bar of the IVI. Bottom and top bar provide basic information about the profile, time, temperature, and dashboard icons for transition.

#### Scenes overview **Media**: All media channels are accessible with a single media icon in the bottom bar. Afterwards an overlay screen allows you to select among three icons: media, radio or USB.

Once the Bluetooth button is pressed, music information is displayed with menu button selections among playlist and albums. List control handles displaying song names with scrollbar control and besides that there is specific design which shows album and song time. Slider control along with animation for song time and switch from one song to another with the next and previous button. Albums screen shows coverflow of songs that are added to the playlist.

**Phone**: showcases the following screens along with one incoming call popup. Contact lists are animated to scroll outgoing calls. Keypad also implemented based on keyboard control. Menu buttons (like favorites, contacts) work upon a click. Custom contact button control is used in the contact list.

**AppDrawer and settings screens**: Appdrawer control displays settings and other apps that are supported in the feature. The icons on the drawer can be moved from one place to another via a long press of the button. On press of the Settings icon, it navigates to settings page where a user can select among different settings to be done as per requirement of user. Each settings screen (general, display interface, ...) consists of states as text-based toggle buttons (2 and 3 states). 2 states toggle button can be of yes or no format. The Tri-state toggle button indicates 3 different state selections (for instance, auto, km, miles). Among 10 settings button shown in the settings main page, only 6 of them were implemented and those are General settings, Display interface, driver assistance, vehicle, maintenance and security. Other 4 are left for future addition if required.

**Home**: Dashboard has all the tiles in general such as navigation, weather information, music player and contacts. On click of home button under navigation tile, it leads to navigation screen. Music tile operates in a similar way as there under the main media playlist screen. Under contacts tile, message popup screen overlays on top of the tiles when a user clicks message icon.

Navigation: navigation icon in the bottom bar goes to navigation screen where search voice button receives destination input from user and calculates distance between source and destination timings and finally provides map connection via Turn-by-turn control.

**HVAC component**: is added as code part to handle sync operation. The sync button will synchronize the passenger's temperature as per the driver's temperature. On click of temp increase or decrease button of the passenger side, sync button automatically disables.

#### 3D and 2D scenes interactions Few solutions are providing such link between scenes were: **Heating, Ventilation and Air conditioning (2D HVAC and 3D Seat heating) - **

**HVAC 2D Scene**: HVAC 3D seat heating, air flow motion and its speed uses animations for showing different effects and are linked to 2D HVAC for operating those effects using Value generator behavior and animations along with it.

Sync button is already described above and remaining buttons have following logic:

- AC by default is enabled for all settings.

- When AUTO mode is enabled, temperature set to 24°C, sliders were set to 50 on both sides, Max AC and Max fan disabled, and air recirculation is enabled. Air recirculation is disabled on AUTO mode disable

- When Max AC is enabled, temperature set to 16°C, and Max Fan and AUTO are disabled. When Max AC disabled, AUTO is enabled and temperatures were set to 24°C (normal).

- When Max Fan is enabled, Max AC and AUTO are disabled, and sliders were set to 100 on both sides

- Circulating Air is always a “auto” or “disabled” feature. It enables when the parameters are right (e.g. dust, dirty, smell, etc.). Circulating air is either ON automatic mode or OFF.

**Digital twin (Porsche\_Macan\_Turbo\_EW, Scene2D-UI and DigitalTwin****)** - The **DigitalTwin** scene provides an interactive 3D representation of the Porsche Macan Turbo EW model, fully synchronized with the **Scene2D-UI**. In this 3D environment, users can interact directly with several **3D buttons** placed around the car model to open and close the doors, trunk, and hood, as well as toggle the front and rear indicator lights. In addition, the **2D scene contains a Play button** that triggers a demo animation where the vehicle moves forward in presentation mode. This setup allows users to interact with both **2D and 3D buttons**, seamlessly controlling various features of the digital twin. All interactions are managed using behaviors, value changes, and predefined animations to create a smooth and realistic connection between the 2D UI and the 3D model.

# glTF Extensions Solution #### Overview The glTF Extensions Solution is a sample solution designed to demonstrate the various glTF material extensions newly supported in CGI Studio. Each sample has been crafted to showcase advanced visual effects within the Physical Based Rendering (PBR) framework. The goal of this sample solution is to support graphics engineers and designers in quickly understanding the latest rendering features of CGI Studio and effectively implementing them into their own projects. Each test scene allows users to directly verify the visual impact of various parameters. #### Description ##### Anisotropy Strength Test - Demonstrates the glTF KHR materials anisotropy effect. - Demonstrates how surface reflection changes with anisotropy strength. - Objects use a brushed or directional reflection look. - Compare weak to strong anisotropy on different material surfaces.

##### ClearCoat Test - Demonstrates the glTF KHR materials clearcoat extension using a ClearCoat material. - Shows a transparent, glossy clearcoat layer applied on top of standard PBR materials. - Compares objects with no clearcoat, full clearcoat, and clearcoat-only rendering. - Highlights changes in reflections and surface shine.

##### Iridescence Abalone - Demonstrates the glTF KHR materials iridescence. - Simulates thin-film color shifts like abalone shell or soap bubbles. - Colors change based on viewing angle and light direction. - Shows realistic, view-dependent iridescent surface effects.

##### Iridescence Metallic Spheres - Demonstrates the glTF KHR materials iridescence. - Shows iridescent color shifts on metallic surfaces. - Multiple spheres compare different iridescence intensities and metalness. - Highlights angle-dependent color changes on metals.

##### Metal Rough Spheres - Demonstrates the glTF metallic-roughness PBR material model. - Shows how metalness and surface roughness affect reflections. - Multiple spheres compare different metal and rough material combinations.

##### Point LightIntensity Test - Demonstrates glTF point light intensity and attenuation. - Shows how light strength affects brightness and surface shading. - Multiple lights compare low to high intensity values in the scene.

##### Pot Of Coals - Demonstrates emissive materials in glTF. - Shows glowing coals using emissive textures inside a dark pot with a clearcoat material. - Simulates heat and self-illumination through emissive maps. - Highlights how emissive materials affect scene lighting and mood.

##### SpecularTest - Demonstrates the glTF KHR materials specular. - Shows control over specular intensity and specular color. - Objects compare different specular response values under the same lighting. - Highlights realistic non-metal surface reflections.

##### Texture Transform Multi Test - Demonstrates the glTF KHR texture transformext. - Shows multiple textures with different UV transforms. - Objects display translation, rotation, and scaling of textures simultaneously. - Highlights how texture mapping can be adjusted per material in a scene.

##### Unlit Test - Demonstrates the glTF KHR materials unlit. - Shows materials that do not react to lighting. - Objects display flat colors and textures without shading. - Highlights emissive-like effects and simplified material appearance.

##### Compare Sheen - Demonstrates the glTF KHR materials sheen. - Shows sheen layered on top of materials. - Compares objects with or without sheen. - Highlights changes in gloss.

##### CompareEmissiveStrength - Demonstrates the glTF KHR materials emissive strength. - Shows control over emissivestrength per material. - Compares objects with emissiveversus emissive plus emissive strength. - Highlights changes in luminous intensity.

##### Play/Operation using Player - Use the buttons on the bottom left to switch to the previous or next scene (model). - Drag the display area on the right to change the camera position.

--- # Pollen Infoscreen #### Description The Pollen Infoscreen is a WebAPI based solution that displays allergy risk based on set location and contaminants. To better tailor the user experience, it is possible to set custom contaminants along with the general allergy risk input via WebAPI. #### Run Pollen Infoscreen Sample

This solution requires active WebAPI data binding and can only be properly run via our PlayerConnector. Is not fully functional in the built-in SceneComposer player.

To run the solution with the player connector in **simulation environment** the following steps have to be executed: - [Generate the simulation asset](https://doc316en.candera.eu/books/asset-library-generation/page/generate-asset-library) of the Pollen Infoscreen Sample Solution and save it in *<cgi-studio-installation-path>\\bin\\CommunityEdition\\Python\\Samples\\PollenInfoScreen* - Obtain the API Key from [Polleninformation Datenschnittstelle / API | Polleninformation](https://www.polleninformation.at/datenschnittstelle). Use the [contact form](https://www.polleninformation.at/datenschnittstelle/api-key-anfordern) to request an API Key. - After receiving your API key, replace "PUT\_YOUR\_APIKEY\_HERE" with your API key on line 276 of the script ***<cgi-studio-installation-path>\\bin\\CommunityEdition\\Python\\Samples\\PollenInfoScreen\\PollenInfoScreen.py***, as seen below. [![image (4).png](https://doc316en.candera.eu/uploads/images/gallery/2026-07/scaled-1680-/image-4.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-07/image-4.png)

If the API Key is not set, you are still able to run the solution, but the information will not be updated.

- Before executing the Python script, open a command prompt in *<cgi-studio-installation-path>\\bin\\CommunityEdition\\Python\\Samples\\PollenInfoScreen* and, if it is not already installed, install the CanderaAppConnector Python library using: ``` python -m pip install ..\..\ ``` - Execute the python script *<cgi-studio-installation-path>\\bin\\CommunityEdition\\Python\\Samples\\PollenInfoScreen\\PollenInfoScreen.py* **Example usage:** ``` python PollenInfoScreen.py ^ -lbp ..\..\..\RaspberryPi_Simulation\PlayerConnector\PlayerConnectorLibrary.dll ^ -abp PollenInfoScreen.bin ``` **Parameters:** - **-lbp** (Library Binary Path) Path to the **PlayerConnector** library ``` \bin\CommunityEdition\RaspberryPi_Simulation\PlayerConnector\PlayerConnectorLibrary.dll ``` - **-abp***: (*Asset Binary Path) Path to the asset saved previously The solution has a resolution of 1280 \* 720 and features an overview scene as well as an insights scene where further contaminants are displayed.

To run it on the Target please follow the steps from [Run Sample with Player Connector Library.](https://doc316en.candera.eu/link/1358#bkmrk-run-blood-pressure-s-1)

#### Overview scene: The overview scene features the most important information at one glance. Via clicking the location (in this case Vienna) the user can select different countries and cities. In the top left corner the overview scene shows the general allergy risk (depending on the strongest contaminant that day) and shows the forecast for the upcoming 3 days as well in the box next to it. [![image (2).png](https://doc316en.candera.eu/uploads/images/gallery/2026-07/scaled-1680-/image-2.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-07/image-2.png) In the left bottom corner the forecast for the day is shown on a more granular level in 4-hour intervals. In addition to the general information the users can set up to 4 individual contaminants to also have the most relevant ones available at a glance. **Dynamic Elements:** - Clock control - Air Quality – text value - DayRisk control (4 week days) - MultihourValue control (bars with 10 levels/images) - Pollen\_Brief control (level of preselected contaminant, with 4 levels, triggers list of contaminants) - City Button (triggers location list) - Insights Button (switches to contaminants list scene) #### Insights scene The insights scene features a list of up to 8 available contaminant information available via WebAPI. The list hierarchy is taken over from the WebAPI data and is usually ranked by strongest to weakest contaminant (with the strongest contaminant on the top of the list). [![image (3).png](https://doc316en.candera.eu/uploads/images/gallery/2026-07/scaled-1680-/image-3.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-07/image-3.png)

ContaminantListElement control – List element, composed of other controls:

- ContaminantName control - 4 x ContaminantLevel Since we have many similar elements, we can create a template for each type and instance it several times. #### Controls Below you can find detail explanations of the individual controls and properties as used for the Pollen Infoscreen solution.

DayRisk

We have a background, over which there is a string showing the day, an icon according to risk level, a number representing risk values from 0 to 10, and a second fixed text or icon for risk level. The risk level has only 4 values: none, low, mid, high. [![DayRisk.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/dayrisk.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/dayrisk.png) [![DayRisk_Structure.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/dayrisk-structure.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/dayrisk-structure.png) The Control only needs to receive the day text, and the risk level. For the Icons and risk level text, we can use a “Render Child Nodes” behavior to select which element to make visible, and we can setup with 11 elements, by duplicating the 4 available elements (none, low, med, high) to (none, low, low, low, med, med, med, med, high, high, high). [![DayRisk_RiskIconBehaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/gAAdayrisk-riskiconbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/gAAdayrisk-riskiconbehaviors.png) [![DayRisk_RiskTextBehaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/D6zdayrisk-risktextbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/D6zdayrisk-risktextbehaviors.png) The risk value has a single entry point and is forwarded to the three controls that each need it. This could also have been done with using fewer elements and arithmetic operator behavior. This is a bit more flexible as it allows to easily add new images for each value, if needed. [![DayRisk_Background_Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/dayrisk-background-behaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/dayrisk-background-behaviors.png)

PollenBrief

This control shows the contaminant name (can be multiline and word-wrapped, to handle possible long strings received), and an icon and text group showing level (low, med, high). The contaminant level here is in the interval \[0..4\], but a value of 0 for “Render Child Nodes” will show none of the children, so we added an “Arithmetic Operation” to add 1 and turn this to \[1..5\]. [![PollenBrief_Outline.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/pollenbrief-outline.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/pollenbrief-outline.png) [![PollenBrief_Struct&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/pollenbrief-structbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/pollenbrief-structbehaviors.png)

MultihourValue

For the graph elements we have 10 values and 10 images. If we have no individual properties to set, we can use a “FlipBook” control, to just switch the images. In this case we have to configure the list of images in the FlipBook control. [![Multihour.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/multihour.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/multihour.png) [![Multihour_structure.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/multihour-structure.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/multihour-structure.png) [![Multihour_FlipbookControl.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/multihour-flipbookcontrol.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/multihour-flipbookcontrol.png)

ContaminantLevel

The contaminant level in the insights list is similar to the DayRisk, but slightly different visuals, and no number displayed (the level is shown by color/icon and text, and we only have none, low, mid, high). [![ContaminantLevel.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantlevel.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantlevel.png) [![ContaminantLevel_Structure&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantlevel-structurebehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantlevel-structurebehaviors.png) The risk value is dispatched to the icon and text groups, which have “Render Child Nodes” behaviors. [![ContaminantsLevel_RiskBehaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/ENNcontaminantslevel-riskbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/ENNcontaminantslevel-riskbehaviors.png) [![ContaminantsLevel_IconsBehaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/iTPcontaminantslevel-iconsbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/iTPcontaminantslevel-iconsbehaviors.png)

ContaminantName

The contaminant description in the insights list is very similar to the PollenBrief, with slightly different placement and size of elements. [![ContaminantName_Overview.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantname-overview.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantname-overview.png) [![ContaminantName_Structure&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/bpMcontaminantname-structurebehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/bpMcontaminantname-structurebehaviors.png)

ContaminantsListElement

This template is used to put together a ContaminantName template and 4 ContaminantLevel templates. These can be used as list elements. [![ContaminantsListElement.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantslistelement.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantslistelement.png) [![ContaminantsListElement_NodesStructure.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantslistelement-nodesstructure.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantslistelement-nodesstructure.png) The properties of these templates can be exposed in the larger template: [![ContaminantsListElement_Properties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantslistelement-properties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantslistelement-properties.png) As mentioned, some buttons trigger lists, which have similar designs: contaminants list and locations list. These are meant to allow selection of a list element, which will remain highlighted. [![LocationsList.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/locationslist.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/locationslist.png) [![ContaminantsList.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantslist.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantslist.png)

Contaminant

This template was designed for elements of the contaminants list. The template consists of a “Radio Button”, to allow for a single element to be selected, and a “Text” control. The normal RadioButton text was set to an empty string, and the actual text is set in the “Text” control, to allow more configuration options for it’s properties (font, size, color). The white/red background images are set in the “Radio Button” control properties. The Radio button has a “Value” behavior, which will become true when selected, and false when deselected. Under this value we have 2 “Action On Value” behaviors, one to trigger actions when becoming selected, and one to trigger actions when becoming unselected. When unselected (value = False), we just set text color to black, via a “Set Color” behavior. When selected, we set text color to white, and also trigger 2 actions to send 2 different string values to editable target nodes. This way, the contaminant name and scientific name can be sent to 2 nodes to display them, and, via databinding, these will be available to the controlling application. [![CountryElementStruct&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/countryelementstructbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/countryelementstructbehaviors.png) [![ContaminantElementProperties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantelementproperties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantelementproperties.png) The public properties expose only what we need to configure from the outside.

Country

The country list button template sends an integer to be used as index, to select which list of cities to be shown to the right of the current country, and also a boolean false value to reset the selection in the list of associated cities. This way there will be no city selected for a country until user selects one, and the last city selected by user will be used, regardless of the state of the list, or which country is currently selected. [![CountryElementStruct&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/X6Ecountryelementstructbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/X6Ecountryelementstructbehaviors.png) [![CountryElementProperties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/9bkcountryelementproperties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/9bkcountryelementproperties.png)

City

The city button template has to send the city name, the country code, and the longitude and latitude of the city. These could naturally be represented as floating point numbers, but they will be needed as strings when creating a web request anyway, so we can set them to string type. The country code is sent from here and not the country list, to keep them consistent, in case the country is changed and no new city is selected. [![CityElementStruct&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/mYIcityelementstructbehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/mYIcityelementstructbehaviors.png) [![CityElementProperties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/l9pcityelementproperties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/l9pcityelementproperties.png)

Contaminants\_List

This is simply a List control that was locally expanded so that it’s ScrollBar can be configured with our custom graphical elements. For convenience, there are also setters for the X size and Y size, which is the size after which the list will start cutting of visibility of its elements. The anchor node will be used to set the list elements. [![Contaminants_List_Structure&Behaviors.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminants-list-structurebehaviors.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminants-list-structurebehaviors.png) [![Contaminants_List_Properties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminants-list-properties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminants-list-properties.png)

GroupBox\_List

This control uses the Contaminants\_List, and further sets it into a GroupBox, so that only one radio button element will be selected. An anchor node is added under the Contaminants\_List anchor, to expose it. The properties will allow setting list size and default selected element for the GroupBox. [![GroupBoxList_Structure.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/groupboxlist-structure.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/groupboxlist-structure.png) [![GroupBoxList_Properties.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/groupboxlist-properties.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/groupboxlist-properties.png)

#### Scenes The app has 2 main scenes, the “Overview” and the “Insights” scene, and can switch between them using the buttons on the bottom bar. The “TopBar” and “BottomBar” scenes are always loaded and visible. For selecting items from lists, there are also two smaller scenes always loaded, and their visibility is controlled by triggering animations: “Location\_Popup” and “ContaminantsList\_Popup”.

Overview Scene

This scene is the most complex of the solution, but it can be managed easily by using several of the templates previously described.

TopLeft: Here we just have a number from 0 to 10, showing the allergy risk for today, and some static text around it. A default “Text Value” control is used, and configured with font style, color, format and data binding.

[![Overview_TopLeft.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-topleft.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-topleft.png) [![Overview_TopLeft_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-topleft-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-topleft-tree.png)

TopRight: Here we have a list of allergy risk values for today and the next 3 days. Beside the value and day of the week, each also has an icon and fixed text for none, low, moderate, or high risk. For this we use the DayRisk template, and a StackLayout to allign them automatically.

[![Overview_TopRight.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-topright.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-topright.png) [![Overview_TopRight_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-topright-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-topright-tree.png)

Bottom Left: This displays the allergy risk values during the current day, at 4 hour intervals. The web api provides hourly values, and we display 6 of them, using images associated for value, via the MultihourValue template. The elements are also allligned automatically using a StackLayout.

[![Overview_BottomLeft.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-bottomleft.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-bottomleft.png) [![Overview_BottomLeft_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-bottomleft-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-bottomleft-tree.png)

Bottom Right: Here the user can select a set of 4 contaminants and see the risk level associated with each of them. There are only 4 levels: none, low, mid, high, and no numeric value. We use the PollenBrief template and place them manually. Each element has an associated button, which opens a list from which a user can select a contaminant for the respective slot.

[![Overview_BottomRight.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-bottomright.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-bottomright.png) [![Overview_BottomRight_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/overview-bottomright-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/overview-bottomright-tree.png)

Insights Scene

This scene only contains a list of the contaminants we know of and their level. It is only meant to be viewed, there are no buttons for interaction. The elements of the list are ContaminantListItem templates. The list has a fixed number of 8 elements. The number of received contaminants can be higher or smaller. If Higher, we only show the first 8. If lower, we disable rendering for the unused elements via a “Render Child Nodes” behavior. When there are more elements than visible in the given space, a scroll-bar will appear (and scale as well as move itself appropriately). To customize the “Scrollbar” with imported graphical elements, the Contaminants\_List template is used. [![Insights.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/insights.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/insights.png) [![Insights_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/ufKinsights-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/ufKinsights-tree.png)

TopBar Scene

[![TopBar.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/topbar.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/topbar.png) In the top bar we have some fixed graphical elements, a digital clock, implemented using the default “DigitalClock” control, and a “TextButton”, where we set the name of the currently set city. Pressing this button will trigger an animation that will make the location list popup visible. [![TopBar_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/topbar-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/topbar-tree.png)

BottomBar Scene

In the bottom bar we have buttons to switch between the 2 main scenes. When the button is clicked, the state machine transition occurs. To select between the gray and green versions, a RenderChildNodes behavior is used. [![BottomBar.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/bottombar.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/bottombar.png) [![BottomBar_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/O9fbottombar-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/O9fbottombar-tree.png)

ContaminantList\_Popup Scene

This scene contains 4 lists, one list for each of the front page contaminants. We could have had a single list and configure it with the currently selected one upon opening, but this way each will be opened in the same state in which it was closed. String values are sent from the Contaminant template to nodes with databound values, so new contaminants can also be added without the need to modify and recompile the code. Rendering is disabled for these 2 nodes, but could be enabled for debug purposes. [![ContaminantList_Popup_EventHandler.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantlist-popup-eventhandler.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantlist-popup-eventhandler.png) There is a Transparent\_EventConsumer node, which covers the area behind the list, and has a “Handle Control State” behavior, to avoid touch events going to elements underneath. Under this, but over all other elements, there is a transparent “TopExit\_Button” node, which is used to close the popup when touching outside the list. [![ContaminantList_Popup_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantlist-popup-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantlist-popup-tree.png) [![ContaminantList_Popup_Control.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/contaminantlist-popup-control.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/contaminantlist-popup-control.png)

Location\_popup Scene

This is the largest scene in the solution. There are 2 lists visible, a countries list and a cities list. In the scene there is a list of cities for each country. The Lists of cities are under a node with a “Render Child Nodes” behavior, so only one of the lists of cities is made visible. The index of the list to show is set from the “Country” template of the first list. Like the Contaminants List Popup, this scene has a node to prevent events going to the elements under it, and a full screen button to exit when tapping outside. [![Countries_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/Kb6countries-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/Kb6countries-tree.png) [![Country_Control.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/country-control.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/country-control.png) This setup makes it possible to add new countries and cities just by configuring the asset. For a country, we need the name, the node to which it must be forwarded, the index of it’s cities list in the group of city lists, and the root of the cities list, to reset their selection. [![Cities_Tree.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/cities-tree.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/cities-tree.png) For a city, we need the name to be shown, but more importantly, we need to get it’s geographical coordinates and country code to the app. So we send a Latitude, Longitude, and country code to nodes with databindings. Having this in the asset allows to edit, remove, or add any new city to the list just by editing in SceneComposer. The source code will remain unchanged, it will just use the new values received trough databindings. [![Cities_Control.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/cities-control.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/cities-control.png)

#### Other elements Below you can find more information on the remaining elements not beloning in the controls and scenes chapter.

Associated script (WebAPI)

This app is based on the Web API and data from www.polleninformation.at. At [https://www.polleninformation.at/datenschnittstelle](https://www.polleninformation.at/datenschnittstelle "https://www.polleninformation.at/datenschnittstelle") you can find information about the format of the URL used to retrieve the data, and the format of the response JSON. Here you can also see the data needed for API requests, and the data received. In short, to make a request we need language, country, and geographic coordinates, which we can get from databinding, from strings preset in the asset. [![image.png](https://doc316en.candera.eu/uploads/images/gallery/2026-07/scaled-1680-/image.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-07/image.png) When a response is received, it is parsed and values are set to the bindings to display the danger levels and contaminants.

State Machine

In the “GlobalStateMachine”, only the transition between “Overview” and “Insights” is handled, by deactivating the source scene and activating the destination for each transition. Also, on entry of “Overview”, the other scenes are loaded. [![StateMachine.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/statemachine.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/statemachine.png)

Animations

The only animations used in this solution are for the pop-up lists opening and closing. Each list has an individual animation. Currently they are identical, the list scales up from the center and scales down towards the center of the screen, and a transparent gray background fades in and out. Since each list has it’s own animation, it would also be possible to have it appear from and disappear into the associated element which triggered it. [![Animatoins.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/animatoins.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/animatoins.png)

# Sauna Screen #### Overview This solution showcases a modern smart sauna system featuring advanced control functionalities, real-time monitoring, and an interactive user interface. The smart sauna solution includes digital temperature and time management, ventilation control, lighting management, and automated safety monitoring. A key feature of the solution is the centralized control interface along with integrated feature panels for functionalities such as ambience control, heating management, and system status monitoring.

Please note that due to the display size the solution - when opened with the player - may exceed your computer screen. To adjust the size of the solution please use the "Zoom" options of the player CGI Panel. [![Screenshot 2026-06-02 094734.png](https://doc316en.candera.eu/uploads/images/gallery/2026-06/scaled-1680-/screenshot-2026-06-02-094734.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-06/screenshot-2026-06-02-094734.png)

[![Sauna_Overview.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/sauna-overview.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/sauna-overview.png) --- #### Feature Description Below you can find an overview of all scenes and their individual content.

No	Scene Name	Description
(1)	StartUpScene2D	This initial scene displays the Candera logo and acts as the entry point to the sauna automation solution. It allows touch interaction to transition from the startup screen to the main menu interface.
(2)	BackgroundScene2D	This scene features a background along with a digital time representation.
(3)	OptionScene2D	This scene acts as the main control interface of the sauna automation solution, providing access to different sauna modes such as Sauna, Steam, Infrared, and My Sauna. Each mode is represented through an interactive tile-based layout for simplified navigation between functionalities. In addition, the scene provides real-time environmental monitoring, where temperature and humidity values are displayed through circular indicators.
(4)	SaunaScene2D	This scene handles sauna temperature control through a circular slider–based interface, allowing dynamic adjustment of the sauna environment. It also includes predefined session timing options. In the lower mid section controls for lights (including brightness and RGB settings), ventilation and music can be found. The individual menus can be cycled through via the available navigation arrow controls or swiped through by touch control. A preheat feature is also integrated into the interface, enabling the sauna environment to be prepared before the session starts.
(5)	InfraredScene2D	In addition to the features described for (4) SaunaScene2D this scene also includes panel selection options to enable the users to tailor their infrared experience to their needs.
(6)	SteamScene2D	In addition to the features described for (4) SaunaScene2D this scene also includes a separate circular slider for adjusting the steam level according to the users' needs.
(7)	MySaunaScene2D	This scene provides personalized sauna configuration management through preset-based controls. It allows selection between multiple preset profiles, enabling quick access to predefined sauna, steam and infrared settings and preferences. The interface enables quick transition between customized sauna profiles while maintaining a clean and interactive layout.
(8)	Preset1Scene2D	This scene manages a predefined sauna configuration profile through dedicated controls for temperature, humidity, session timing, and ventilation management. The parameters can be modified dynamically to customize the sauna environment based on the selected preset configuration. Ventilation control and preheating functionality are also integrated to prepare the infrared environment before the session begins.
(9)	Preset2Scene2D	This scene is similar to Preset1Scene2D but features settings tailored more for a steam experience.
(10)	Preset3Scene2D	This scene manages a predefined infrared sauna configuration through dedicated controls for heating intensity, infrared panel selection, session timing, and ventilation management. The intensity level and panel combinations can be configured dynamically to customize the infrared sauna experience. Ventilation control and preheating functionality are also integrated to prepare the infrared environment before the session begins.
(11)	RunningScene2D	This scene provides real-time monitoring and management of the active sauna session by displaying essential operational parameters such as temperature, humidity, selected sauna mode, door status, and configured session duration. The interface presents all session-related information in a centralized layout for continuous tracking of the sauna environment during operation. A session countdown indicator is provided to display the remaining session duration before completion. Additionally, a dedicated stop control allows immediate termination of the active sauna session whenever required.
(12)	PreheatingScene2D	This scene manages the sauna preheating process by monitoring and displaying the progress of the heating cycle. It provides target temperature tracking functionality, allowing the system to indicate the current progress toward the configured sauna temperature before the session begins. A real-time countdown display is provided to show the remaining preheating duration, helping monitor the estimated time required for the sauna environment to reach the desired condition. A dedicated stop control is integrated into the interface to allow interruption or cancellation of the preheating operation whenever required.

#### Controls - The existing controls available in the Scene Composer toolbox are utilized to create this solution such as lists, sliders, radio buttons etc. - A customized On/Off button control is used in the Infrared scene to manage panel selections such as Top, Right, and Left. This control works similarly to a checkbox, but it is customized to display any one image. The control is customized by configuring only the required properties related to state handling, image switching. - An own control was created for the circular sliders in the SaunaScene2D/SteamScene2D/InfraredScene2D, that extends the existing CircularSlider control with the background image and the slider value text and unit. - As the same lists for the settings are displayed in SaunaScene2D/SteamScene2D/InfraredScene2D, it is also provided as control. #### Transitions Transition rules were used with Fade-shade animations are applied to the scene transitions to create smooth and continuous visual movement between Scenes. ##### Animations The following two animations are used: - TimeRemaining: decreases the remaining time displayed in the PreheatingScene2D - PreheatPulsatingAnimation: takes care of the pulsating of the red background in the BackgroundScene2D. Both animations are started in the Statemachine when the "Start Preheat" button in the SaunaScene2D is pressed. #### State Machine The GlobalStateMachine manages the overall navigation and operational flow of the sauna automation solution by controlling transitions between multiple scenes and interface states. It initializes the startup sequence and handles navigation from the initial screen to the main options interface, where users can access different sauna modes such as Sauna, Steam, Infrared, and MySauna. The state machine coordinates transitions between operational scenes including Pre-Heating, Current Session monitoring, and preset configuration screens such as Preset1, Preset2, and Preset3. User interactions including button selections, navigation controls, and preset switching are processed through transition rules and logic conditions to ensure smooth scene transitions. Additionally, the BackgroundScene is globally activated through the GlobalStateMachine to maintain a consistent visual appearance across all scenes while coordinating common interface animations and operational states throughout the overall sauna automation solution. #### Operational Control Elements - Forward and backward navigation buttons are implemented to control movement between different scenes and feature sections within the sauna automation solution. These controls enable smooth transitions across interfaces such as Sauna, Steam, Infrared, Presets, and operation monitoring scenes. - Start buttons are used to initiate functionalities such as sauna sessions and preheating operations and Stop buttons are implemented to terminate active operations and return the system to the required operational state. - Increment (“+”) and decrement (“−”) buttons are used to dynamically adjust operational parameters within the interface. These Buttons are applied for modifying values such as temperature, humidity and time. - Interactive scroll bar controls are incorporated within the interface to manage configurable features such as Lighting, Ventilation, and Music functions. These controls enable precise and fluid parameter adjustment through continuous sliding interaction, with all value changes dynamically reflected during runtime based on the configured operational ranges. # Coffee Machine #### Overview This sample shows an automated coffee machine HMI solution. It is designed to make preparing drinks easier, smarter, and more connected through an advanced user interface. It brings together different functions in one organized way, helping users navigate the machine efficiently and manage the preparation process. The solution includes features such as drink selection, user profiles, drink customization, and coffee machine management. Its main strength is a central interface that connects different modules for drink preparation, maintenance, and settings. These parts work together to create a smooth workflow and a consistent user experience across the entire coffee machine system. [![Screenshot 2026-05-27 132821.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/screenshot-2026-05-27-132821.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/screenshot-2026-05-27-132821.png) --- #### Feature Description ##### Scene

No.	Name	Scene Name	Description
(1)	Background	Scene\_Background	This scene acts as a commonly used layer within the Coffee Machine solution and contains the background and the bottom buttons to switch between the scenes.
(2)	StatusBar	StatusBar	This scene indicates the selected profile and the current time.
(3)	Welcome Screen	Scene\_Welcome	The main screen upon starting the demo. The screen features a "Good Morning" message that is addressed to the selected profile. This scene features three pre-selected coffee types. More coffee variants are available in the Scene\_Selection.
(4)	Profiles	Scene\_Profiles	This screen allows the selection of pre-defined profiles (Marcus, Alice). A "New Profile" button is available, however, non-functional in this demo. The changed profile is also reflected on the other scenes.
(5)	Coffee Menu	Scene\_Selection	This menu shows all available coffee variants. The selection is implemented via a horizontal scrolling list that can be navigated by swiping.
(6)	Adjustments	Scene\_Adjustments	In this scene, the user can individually adapt the previously selected coffee to their needs. It allows the user to adjust the following parameters: - Intensity (amount of coffee beans) - Milk (amount of added milk) - Sugar (low, medium, high) - Foam (none, low, medium, high) The previously selected coffee type is being displayed in the left of the screen.
(7)	Preparing Screen	Preparing Screen	This scene contains the 2D part of the coffee preparation process after the drink configuration is completed. It shows a progress bar to indicate the progress of the coffee preparation.
(8)	Coffee Cup	CoffeeCup3D	This is the only 3D scene and displays a coffee cup that gradually fills up until the process is completed. Upon completion the user is automatically re-directed back to the Welcome Screen.
(9)	Settings	Scene\_Settings	This scene contains various options for the coffee machine maintenance and setup: - Maintenance - Beans - Water - General - Connection The various options are currently implemented as placeholders and lead to the Restriced scene.
(10)	Placeholder	Submenu	This scene is acting as a placeholder for further functionality implementation. It currently displays a lock indicating that there is no further action possible aside from returning to the previous scene.

##### [![3x2CoffeemachineImage.png](https://doc316en.candera.eu/uploads/images/gallery/2026-05/scaled-1680-/3x2coffeemachineimage.png)](https://doc316en.candera.eu/uploads/images/gallery/2026-05/3x2coffeemachineimage.png) ##### Control The solution is designed using the predefined controls available in the Scene Composer toolbox, including lists, buttons, etc. There is one customer control for the progress bar. For this custom control the interpolation behaviour was removed from the default toolbox as it conflicted with the interpolation done by the Preparing animation which also changes the values of the progress bar. ##### Transition The default transition is used for all scenes in this solution ("Cut"). ##### Animations There is one animation that animates the coffee cup in CoffeeCup3D and activates the text in the Preparing Screen. This animation is started when the Start Button in Scene\_Adjustments is pressed. ##### State Machine The statemachine is used to activate/deactivate the different scenes on specific button presses. Additionally correct images and text are set dependent on the button. All scenes except the Background and the StatusBar are activated when the state is entered and deactivated when left. ##### States

State	Activated Scene(s)	Trigger	Additional Actions	Notes
Welcome	Scene\_Background StatusBar Scene\_Welcome	Initial State End of preparing animation Scene\_Adjustments/ReturnButton/Return Welcome		Initial activation of the StatusBar. This state is re-entered when the Preparing animation has finished.
Selection	Scene\_Selection	Scene\_Background/Buttons/Coffee Selection Button
Adjustments	Scene\_Adjustments	Every coffee button in SceneSelection/List and SceneWelcome	Dependent on the button the correct coffee image is activated and different texts are set to the "Preparing your coffee..." TextNode of the StatusBar Additionally the back button is switched.	This state can be entered from 2 different scenes so it is important that the back button triggers the correct one. Therefore 2 back buttons are available and only the required one is activated when the state is triggered.
Preparing	Preparing Screen CoffeeCup3D	Scene\_Adjustments/Start Button	Starts the Preparing animation that fills up the coffee cup in CoffeeCup3D
Settings	Scene\_Settings	Scene\_Background/Buttons/Settings Button
Profiles	Scene\_Profiles	Scene\_Background/Buttons/Profile Button
Settings\_Submenu	Submenu	All buttons in Scene\_Settings/List	Sets different texts dependent on the pressed button