Navigation - Drill Down

Navigation - Drill Down

Watch the video

Another popular navigation strategy in Ignition is to drill down into various areas of your project using a map. The Drill Down navigation strategy is ideal if you have different geographical locations. A good example is to have a main window that has an image like a map or a background image representing a plant. The image has various components such as boxes, circles, etc., that overlay the image. When the user selects one of the overlay components, the Client swaps windows with a window that displays information that pertains to the selected area of the map or plant.

It is a very simple navigation strategy to setup and is popular because it lets people orient themselves on where they are located in the factory, and they can drill down into all these different sections very easily from one place.

To Create a Navigation Drill Down in Designer

1. Drag an image on to a Main Window (this example uses a US Map).

2. Create a component such as a box, circle, star, etc., over an area on your image.

3. Right click the component (box, circle, etc.,) and select Scripting.

4. Select the mousePressed event handler, and with the Navigation tab selected:

   1. Select the Open/Swap radio button.

   2. From the Window drop-down box, select the window that relates to the selected area.

   3. Click OK.

      

5. Select your US Map window and set it to Open on Startup.

   

   Area windows already created

   This example assumes you already have your area windows created in your Project Browser.

6. On your area window, add a Button component to navigate you back to the main window (if you have multiple area windows, copy and paste this button to each window).

   1. Open your area window.

   2. Add a Button component.

   3. Right click on the Button component and select Scripting.

      

7. Select the mousePressed event handler, and with the Navigation tab selected:

   1. Select the Open/Swap radio button.

   2. From the Window drop-down box, select the window that is your overview map.

   3. Click OK.

      

8. To test your window navigation in the Designer, use the Preview Mode to switch between windows.

9. Save and Publish your project.

10. Now, try it out! Open your Client, and click on your special shape to navigate to the area selected. You'll notice that in the following example the Mouseover Text property was used to display the location information when you hover over one of the circles.

    Drill Down Navigation with Mouseover Text

11. Click on the US Map button to take you back to the US Map.

    Area Window with US Map Back Button