Skip to main content
Version: 2.1

Container Temperature

Introduction

This article provides the instruction to complete "Container Temperature Alert Dashboard" tutorial

Exercise 1 - Dashboard app

The goal of this exercise is to create the dashboard app, its two screens (empty for now) and the transition between them.

  1. Open the project [your_name]
  2. Create a new UI app by drag-and-dropping it from the marketplace into your project and name it "Alerts Dashboard"
  3. Open the app (double click on it)
  4. Create a new screen (drag'n'drop from marketplace) and name it "Alerts Screen"
  5. Create a transition from Home Screen to Alerts Screen
  6. Run the app (to preview in real time your progress)

Exercise 2 - Login screen

In the exercise, we will build a simple login screen including username and password fields and a login button.

  1. Open the home screen
  2. Set its Background Color property to "#E9E9E9" (3rd tab)
  3. Add a label and set its Theme Class property to "h4" (1st tab) and its Text property to "Container temperature alerts" (4th tab)
  4. Add a textfield and set its Placeholder property to "Username" (4th tab)
  5. Add a textfield and set its Placeholder property to "Password" and its Type property to "Password" (4th tab)
  6. Add a button and set its Text property to "Login" (4th tab) and its name to "Login Button" (1st tab)
  7. Select the label, the two text fields and the button. In "Selection" menu (top-left) click on group
  8. Select the group and click on "Edit button"
  9. Set the Layout property to "Vertical" (4th tab)
  10. Set its Layout Spacing property to 20 (you may need to scroll a bit after having set layout to "Vertical)
  11. Set its Layout Children Width property to 300
  12. Select the group in the tree (Layers panel at the left-side of the editor, to leave group edition mode)
  13. Set its X property to "Center" (1st tab, use the dropdown menu next to the property)
  14. Set its Y property to "Middle"
  15. Set its Width property to 350
  16. Set its Height property to 280
  17. Set its Background Color property to white (3rd tab)
  18. Set its Border Corner Radius to 30
  19. Set its Shadow Radius property to 30
  20. Set its Shadow Color property to "#00000023"

Exercise 3 - Alerts screen

The goal of this exercise is to create the "Alerts Screen" where alerts that are not "fixd" are displayed in a list.

Transition from Home Screen

In this section, we will trigger the transition from "Home Screen" to "Alerts Screen" when the user click on the "Login" button

  1. Go back to the UI App (screenflow view)
  2. Click on the dot of the transition between "Home screen" and "New screen" to edit the transition
  3. Next to "Event", click on + button (this displays the Home Screen to select the trigger of the transition)
  4. In the tree "Current" (left side of the screen), click on "Login Button" (this displays the list of user actions that can be triggered by the button)
  5. Select "on Click" and click on "Done"

Alerts screen content

In this section, we will build the content of the alerts screen. It will contains a Header and the list of alerts. We will only display alerts that were not already "fixed".

  1. Open the "Alerts Screen"
  2. Set its Background Color property to "#E9E9E9" (3rd tab)
  3. Add a "Header" component
  4. Set its X property to "Center" (1st tab, use the dropdown menu next to the property)
  5. Set its Y property to "Top"
  6. Set its Width property to 100% (1st tab, use the dropdown menu to switch to %)
  7. Set its Height property to 10%
  8. Add a "Alerts List" component
  9. Set its X property to "Center" (1st tab, use the dropdown menu next to the property)
  10. Set its Y property to "Botttom"
  11. Set its Width property to 90% (1st tab, use the dropdown menu to switch to %)
  12. Set its Height property to 90%
  13. Set its Alerts propety to a new function (4th tab, click on f(x) button to create the function). The goal of this function is to return all alerts whose fixed property is false (so we only display alerts that need to be fixed)
  14. Add function "Get Object List" from the marketplace. Set its "model" input to "Alert"
  15. Add function "Filter List Equals" from the marketplace. Set its filter input to "Boolean -> False" and its Property input to "Alert -> Fixed
  16. Connect the two bricks together "object list" output to "Object list" input
  17. Connect the output of "Filter List Equals" to the output of the function (Alerts)

Exercise 4 - Temperature processor

The goal of this exercise is to create a headless service application (e.g. running on a server) that will analyze temperature updates notifications from the third party system and create alerts whenever a temperatuer is too high. For simplify the tutorial, we will use a brick which simulate the third party system and generate randomly temperature updates on several containers.

  1. Create Service App and name it "Temperature Processor" and open it
  2. Add a function in the service app and edit it
  3. Add following bricks in the function:
    • "Get Temperature Updates": A brick which simulates a third party and returns containers with random temperature updates
    • "Get Object property": A brick which returns the property of an object (e.g. The temperature property of a container object)
    • "Is Greater Than": A brick which returns if a number (a) is greater than another number (b). When using it, don't forget to set it "Strictly" input to "true"
    • "Branch": A brick to execute different actions depending on a condition
    • "Create Temperature Alert": A brick which creates an alert and link it to the container
    • "Log" (the one with a mouse icon): A debug brick to log what is doing the service application. We will use it to log the text "Alerts created" each time an abnormal temperature is detected
  4. Connect the bricks together (see video for more details). The goal is to detect containers whose property "last temperature" is aboce 28°C, create an alert and log following debug message "Alert created!"
  5. Go back to the service app, and run it (clicking on play button on the top right screen). This runs the service app in "simulation mode" in the web browser
  6. You should see alerts appearing in your dashboard after a few seconds