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:

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:

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

       

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.

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

                 

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.

                       

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

               

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

               

ContaminantName

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.

               

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. 

               

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:

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.