Pollen Infoscreen

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 3 values, low, mid, high.

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 10 elements, by duplicating the 3 available elements (low, med, high) to (low, low, low, med, med, med, med, high, high, high). 

The risk value has a single entry point and is forwarded to the there 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.

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].

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.

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 low, mid, high). 

The risk value is dispatched to the icon and text groups, which have “Render Child Nodes” behaviors.

The contaminant description in the insights list is very similar to the PollenBrief, with slightly different placement and size of elements.

ContaminantsListElement

This template is used to put together a ContaminantName template and 4 ContaminantLevel templates. These can be used as list elements.

The properties of these templates can be exposed in the larger template:

As mentioned, some buttons trigger lists, which have similar designs: language list, very similar to contaminants list, and locations list. These are meant to allow selection of a list element, which will remain highlighted.

This template was designed for elements of the contaminants list, but could then be reused for the language selection list, since it has the same functionality. 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. 

The public properties give expose only what we need to configure from the outside. This can be reused for languages, by setting the language code as ScientificNameString, and the normal language string as NormalNameString.

The country list button template is similar to the Contaminant/Language one, but instead of sending out 2 strings, it send one string with country code, and an integer to be used as index, to select which list of cities to be shown to the right of the current country. 

The city button template is similar to the Country template, but instead of sending an index, it has to send 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 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 some smaller scenes always loaded, and their visibility is controlled by triggering animations: “Location_Popup”, “ContaminantsList_Popup” and “Language_Popup”.

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.

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 move itself appropriately). To customize the “Scrollbar” with imported graphical elements, the “List” control was expanded here, then configured.

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.

In the bottom bar we have buttons to switch between the 2 main scenes. We can also add a “Settings” button, it is currently disabled. When the button is clicked, the state machine transition occurs.

This scene is very similar to the Language_Popup, but multiplied 4 times, 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, as before, so new contaminants can also be added without the need to modify and recompile the code.

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.

This makes it possible to add new countries and cities just by configuring the asset. For a country, we need the name, the 2-letter code, the index of it’s cities list in the group of city lists, and the nodes to which to forward the index and the string.

For a city, we need the name to be shown, but more importantly, we need to get it’s geographical coordinates in the code. So we send a Latitude and Longitude to nodes with databindings. Having this in the asset allows to add any new city to the list just by editing in SceneComposer. The code will remain unchanged, it will just use the new values received through databindings.

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.

This app is based on the Web API and data from www.polleninformation.at. The API is not public, but a free api key can be obtained for various usecases. More info is available at: https://www.polleninformation.at/datenschnittstelle. 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.

When a response is received, it is parsed and values are set to the bindings to display the danger levels and contaminants.