August 7, 2020

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.