Navigation Tabs in the Dashboard

Posted by: Jason Lillywhite

If you want to add navigation tabs to a dashboard, you will need to create multiple dashboards with graphical components that align in order to give the impression that you are switching tabs instead of switching entire dashboard pages. Luckily, with a few simple steps, this is quite easy to do. Follow these basic steps to quickly create your navigation tabs for your dashboard.

We will be using Microsoft Power Point to draw the Navigation graphics for the Dashboard.

Step 1: Establish the Dimensions of the Dashboard

It is time consuming to change the size of your dashboard after you have started to develop the it with navigation tabs. Choose a height and width for the dashboard that will fit within the lowest possible resolution of any display you plan to show it on. For example, if you plan to upload a video of your model to YouTube, you should make it so the application fits within their standard 1600x900 px frame and you need to account for the border and toolbars of the application as well. If you plan to show the model in the GoldSim Player, keep in mind that the size of the toolbar is different from that of GoldSim. Confirm the dimensions by creating a simple GoldSim Player prototype and see how it fits on your display.

For instruction on how to resize a dashboard, please refer to our Help Documentation. For this example, I sized the dashboard to be 600px high by 900px wide.

Step 2: Set Up and Test a Template

Set up a new Power Point presentation file that you can use to generate the navigation graphics.

First we must determine the display scaling factor on your Windows system because this will impact the size of graphics you import to GoldSim from Power Point. You can read more about Windows 10 Display Scaling here. The Windows scaling factor on my computer is 150%. This means that I need to scale up any graphics I create in Power Point by the same amount (150%) before importing them to my dashboard in GoldSim. 

Since my dashboard in GoldSim is sized at 600px by 900px, I need to multiply these values by 1.5, which results in dimensions of 900px by 1200px. 

Start a new Power Point presentation and change the slide dimensions to your scaled up width and height found previously (in my case, it is 900px high by 1200px wide). You can enter the values in terms of pixels and Power Point automatically converts the values to inches (or cm):

Draw a rectangle with the same dimensions as the slide. 

Right-click on the graphic and choose "Save as Picture..." from the context menu.

Save this image as an "EMF" type. 

Insert the EMF file into your GoldSim dashboard. You should see the graphic is exactly the same size as your dashboard. Now you are ready to build the navigation graphics. 

Below is a screen capture showing the inserted graphic placed inside the dashboard. It fits exactly within the extent of the dashboard. 

Step 3: Create the Navigation Artwork in Power Point

With the slides set up to be the exact same size as your dashboard dimensions (with the scaling factor applied), you can easily draw the tabs with main area rectangle below them. Create one slide for each tab. In my case, I have 4 tabs, each with a different color. I matched the border of the main window to match the color of the tab so it is easier to know what tab you have navigated to.

Save the graphics of each slide to their own EMF files. In my example, I will give these 4 tabs the following names:

• Home
• Inputs
• System
• Results

Save each with a similar name and as an EMF file type.

Step 4: Build the GoldSim Dashboards

Now that the artwork is complete, we just need to import the graphics and then start adding dashboard controls to complete the user interface.

In GoldSim, create 1 dashboard element for each tab and name them according to their specific tab. Make sure the dimensions used in each Dashboard are the same as what you found in Step 1.

Open each dashboard and load the background EMF file as you did in Step 2.

Add a navigation button control to the first tab with a command to "Show Dashboard" then connect it to the corresponding dashboard you want to navigate to. Don't forget to add a tool tip.

Change the style to flat and transparent with a "hover color" that matches the tab color. The example shown below uses a "hover color" that matches the Home tab.

The result is a tab that looks the same until you hover over it with the mouse. 

Complete this process for 1 dashboard. Select all the buttons and use the alignment tools to make them horizontally aligned and evenly spaced.

Copy and paste the buttons you just finished for 1 dashboard then paste them into all the dashboards. 

Now you should have a complete set of navigation tabs that appears to seamlessly go between each tab as you click them. Below is a short video showing how this can work.

Download Example Files:

Download a copy of the model and power point presentation file used for this blog post here.