Skip to main content

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.

The solution has a resolution of 1280 * 720 and features an overview scene as well as an insights scene where further contaminants are displayed.

Overview scene:

MainView.png

Dynamic Elements:

  • Clock control
  • Air Quality – text value
  • DayRisk control (top 4 week days)
  • MultihourValue control (bars with 10 levels/images)
  • Pollen_Brief control (level of preselected contaminant, with 3 levels, triggers list of contaminants)
  • City Button (triggers location list)
  • Settings Button (triggers language list)
  • Insights Button (switches to contaminants list scene)
Insights scene:

ContaminantsList view.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

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

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

DayRisk_RiskTextBehaviors.png        DayRisk_RiskIconBehaviors.png

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.

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                  PollenBrief_Struct&Behaviors.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             Multihour_structure.png           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 low, mid, high). 

ContaminantLevel.png                 ContaminantLevel_Structure&Behaviors.png

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

ContaminantsLevel_IconsBehaviors.png                 ContaminantLevel_Structure&Behaviors.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                 ContaminantName_Structure&Behaviors.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              ContaminantsListElement_NodesStructure.png

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

ContaminantsListElement_Properties.png

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.

LocationsList.png                ContaminantsList.png

Contaminant

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. 

CountryElementStruct&Behaviors.png                ContaminantElementProperties.png

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.

Country:

Country

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. 

CountryElementStruct&Behaviors.png              CountryElementProperties.png    

City

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.

CityElementStruct&Behaviors.png              CityElementProperties.png

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

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

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

 

 

 

 

Back to top