Lesson 3 - Creating a Simple Dashboard

In this Lesson we are going to build a simple Dashboard so you can start to get familiar with the process.

We are going to add a simple Dashboard to one of the Exercises we worked on in a previous Unit.  In particular, we are going to add a Dashboard to the model we created for Exercise 7. Open Exercise 7 now (you can find it as Exercise7_Evaporating_Pond.gsm in the “Exercises” subfolder of the “Basic GoldSim Course” folder you should have downloaded and unzipped to your Desktop).  The model looks like this:

We are going to do the following:

1. Add a Dashboard;
2. Add some explanatory text;
3. Add two input controls to the Dashboard (one for Inflow and one for Evaporation_Fraction);
4. Add an output control to display the Pond as a “thermometer”; and
5. Add a button to display the Result element.

Let’s start by adding a Dashboard (just to the right of the Result element).  Since we will only have a single Dashboard in this model, there is no need to change its name (or Title):

A Dashboard is the “canvas” on which you are creating a user interface.  The Dashboard Size input field determines the size (in pixels) of the canvas on which the controls and graphics are placed, and subsequently the size of the Dashboard window when viewed in the Player. If the Dashboard size is too large to fit on the Player user’s screen, scroll bars appear, allowing the user to scroll around the Dashboard. For now, let’s change this to a very small Dashboard (640 x 480).

Close the dialog and enter the Dashboard (by clicking on the triangle in the upper left-hand corner).  If you have moved the Controls toolbar down to the bottom of the screen (as instructed in the previous Lesson), the window will look similar to this:

Let’s start by adding some very simple explanatory text at the top of the Dashboard.  All of the text and graphics tools that we discussed in the previous Unit are also available in Dashboards.  Let’s add a Text Box that looks like this (give it a border and lock the position):

We are now going to add a Slider input control to represent the Inflow. To do that, click on the Slider button in the Controls toolbar:

Then click the cursor where you want to place it (on the left side of the Dashboard below the Text Box):

The control is outlined in red, indicating that it has not been properly defined yet (i.e., linked to an element in the model). Double-click on the control to view its Properties dialog:

We are going to do the following:

1. First we need to link this to an element.  Input controls can only be linked to Data elements. If you click on <click to select> it will open a dialog listing only the Data elements in the model.  Select Inflow.
2. Set the Default to 10, the Minimum to 5 and the Maximum to 20 (this defines the range of the slider).
3. Set the Smallest allowed increment to 1.  This determines the precision of values that the slider will jump between.  In this case, the values will always be integers.
4. Define a Header that says “Inflow (m3/day)”.  As we shall see, this is a label that appears on the slider.
5. Define the following Tool Tip: “Enter a value for the inflow (in m3/day) to the pond.”

When you are done, the dialog should look like this:

Close the dialog.  You will note that we can’t see the Header.  This is because the slider is not tall enough.  Drag the bottom (or top) of the slider until the Header appears:

Now copy and paste the slider, placing the copy directly beneath it (you will note that it will snap to a grid, making it easy to align the two sliders).  Next double-click on the bottom slider and edit it so that it looks like this:

Next we are going to add a Thermometer output control to view the volume of water in the pond. To do that, click on the Thermometer button in the Controls toolbar:

Then click the cursor where you want to place it (just to the right of the two slider controls):

The control is outlined in red, indicating that it has not been properly defined yet (i.e., linked to an element in the model). Double-click on the control to view its Properties dialog:

We are going to do the following:

1. First we need to link this to an element.  Output controls can link to outputs.  So in this case, if you click on <click to select> it will open a dialog showing all the elements in the model. Select Pond (its primary output).
2. Bar Minimum and Bar Maximum define the extent (top and bottom) of the thermometer.  Set these to 0 and 1000, respectively.
3. Set the Number of significant figures displayed to 3. 
4. Since this represents water, let’s set the Fill Color to blue.
5. Define a Header that says “Volume (m3)”.  As we shall see, this is a label that appears on the thermometer.
6. Define the following Tool Tip: “This is the water volume in the pond (in m3).”

When you are done, the dialog should look like this:

And the thermometer should look like this:

The final thing we are going to do is add a Button control that will open the result element so we can view a time history of the result.

To do that, click on the Button in the Controls toolbar:

Then click the cursor where you want to place it (just to the right of the thermometer control):

The control is outlined in red, indicating that it has not been properly defined yet (i.e., assigned an action). Double-click on the control to view its Properties dialog:

We are going to do the following:

1. First let’s change the Button Label to “View Result”.
2. Next we need to specify the action that will be executed when the button is pressed.  The Command drop-list provides a long list of possible actions. Select “Show Result”.
3. After doing so, you will be prompted for the result to display. You can only specify a Result element here.  So in this case, if you click on <click to select> it will open a dialog showing all the Result elements in the model (there is only one).  Select it.
4. Let’s also check the Show hand cursor box.  This will change the cursor to a hand when it hovers over the button.
5. Define the following Tool Tip: “Click to view a time history of the volume in the pond.”

When you are done, the dialog should look like this:

And your Dashboard should look similar to this:

Congratulations!  You have built your first Dashboard. This Dashboard is very simple and we could have added more explanatory text and perhaps some images to make it more attractive, but it is sufficient for our present purposes.

Save the model now to the “MyModels” subfolder in the “GoldSim Course” folder, as we will revisit it again in the next two Lessons.

So now that we have created a Dashboard, how do we actually use it?  We will start to discuss that in the next Lesson.