# 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

<p class="callout warning">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.</p>

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   
    *&lt;cgi-studio-installation-path&gt;\\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  
    ***&lt;cgi-studio-installation-path&gt;\\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)
    
      
    <p class="callout info">If the API Key is not set, you are still able to run the solution, but the information will not be updated.</p>
- Before executing the Python script, open a command prompt in   
    *&lt;cgi-studio-installation-path&gt;\\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  
    *&lt;cgi-studio-installation-path&gt;\\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 ```
        <cgi-studio-installation-path>\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.

<p class="callout warning">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)</p>

#### 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)

<div id="bkmrk-contaminantlisteleme">ContaminantListElement control – List element, composed of other controls:</div>- 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.

<details id="bkmrk-we-have-a-background"><summary>DayRisk</summary>

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)

</details><details id="bkmrk-this-control-shows-t"><summary>PollenBrief</summary>

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)

</details><details id="bkmrk-for-the-graph-elemen"><summary>MultihourValue</summary>

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)

</details><details id="bkmrk-the-contaminant-leve"><summary>ContaminantLevel</summary>

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)

</details><details id="bkmrk-the-contaminant-desc"><summary>ContaminantName</summary>

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)

</details><details id="bkmrk-contaminantslistelem"><summary>ContaminantsListElement</summary>

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)

<span lang="en-us">The properties of these templates can be exposed in the larger template:</span>

<span lang="en-us">[![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)</span>

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)

</details><details id="bkmrk-this-template-was-de"><summary>Contaminant</summary>

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.

</details><details id="bkmrk-the-country-list-but"><summary>Country</summary>

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)

</details><details id="bkmrk-the-city-button-temp"><summary>City</summary>

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)

</details><details id="bkmrk-contaminants_list-th"><summary>Contaminants\_List</summary>

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)

</details><details id="bkmrk-groupbox_list-this-c"><summary>GroupBox\_List</summary>

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)

</details>#### 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”.

<div id="bkmrk-overview-scene-this-"><details><summary>Overview Scene</summary>

<div id="bkmrk-this-scene-is-the-mo" style="text-align: justify;">This scene is the most complex of the solution, but it can be managed easily by using several of the templates previously described.</div><div id="bkmrk--8" style="text-align: justify;">  
</div><div id="bkmrk-topleft%3A-here-we-jus" style="text-align: justify;">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.</div><div id="bkmrk--9"></div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0">[![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)</div><div id="bkmrk--10"></div><div id="bkmrk-topright%3A-here-we-ha" style="text-align: justify;">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.</div><div id="bkmrk--11"></div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-1">[![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)</div><div id="bkmrk--12"></div><div id="bkmrk-bottom-left%3A-this-di" style="text-align: justify;">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.</div><div id="bkmrk--13"></div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-5">[![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)</div><div id="bkmrk--14"></div><div id="bkmrk-bottom-right%3A-here-t" style="text-align: justify;">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.</div><div id="bkmrk--15"></div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-2">[![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)</div></details></div><div id="bkmrk--16"></div><details id="bkmrk-this-scene-only-cont"><summary>Insights Scene</summary>

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)

</details><details id="bkmrk-in-the-top-bar-we-ha"><summary>TopBar Scene</summary>

[![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)

</details><details id="bkmrk-in-the-bottom-bar-we"><summary>BottomBar Scene</summary>

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)

</details><details id="bkmrk-this-scene-is-very-s"><summary>ContaminantList\_Popup Scene</summary>

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)

</details><details id="bkmrk-this-is-the-largest-"><summary>Location\_popup Scene</summary>

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)

</details>#### Other elements

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

<details id="bkmrk-this-app-is-based-on"><summary>Associated script (WebAPI)</summary>

This app is based on the Web API and data from www.polleninformation.at. <span data-teams="true">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.</span> 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.

<div id="bkmrk--23"></div><div id="bkmrk--24"></div></details><details id="bkmrk-in-the-%E2%80%9Cglobalstatem"><summary>State Machine</summary>

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)

</details><details id="bkmrk-the-only-animations-"><summary>Animations</summary>

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)

</details>