Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata

 

Another popular navigation strategy in Vision 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 representing a plant or factory. The image can have any type of drawing tool component, such as an rectangle, circle, etc., that overlays 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 plant. 

It is a very simple navigation strategy to setup and is popular because it lets users select different areas on an image and drill down to access specific information about that geographic location. The example below uses a US map to get information about facilities sprinkled across the US.



On this page ...



Navigation - Drill Down

 

 

  1. Drag an image on to a Main Window. It can be any type of image including a photo. This example uses an image of a US Map. 
  2. Add a Drawing Tool shape such as a rectangle, circle, polygon over an area on your image. In the example, we use a circle.
  3. Right click your drawing tool 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.  In the Project Browser, 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 so you can navigate back to the main window containing the overview map. (If you have multiple area windows, copy and paste this button on 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. In Preview Mode, test your window navigation by switching between windows.
  9. Save and Publish your project.
  10. Now, try it out. Open your Client, and click on the 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.




  11. Click on the US Map button to go back to the US Map. 



 

  • No labels