Skip to end of metadata
Go to start of metadata


Vision Windows are the basic building blocks for all your Vision projects. Each window can contain any number of components that can display Tag values, run scripts, write values to the database, display Tag History data on an Easy Chart, and more. When you publish your project, these windows are loaded into the Vision Client where any number of windows can be opened at one time. 

On this page, we'll walk you through how to add components to a Vision Window and bring them to life by showing live values, displaying Tag History data on an Easy Chart,  and launching a project in a Vision Client.

1. Adding Components to Vision Windows

Windows are the  primary unit of design  for Vision Clients and can be displayed as a whole page, as a popup, or docked across the top, bottom or sides of a Client. Components can do everything from displaying text, to showing Tag values, to displaying reports, and more. You can bind components to each other, to Tags, to values in the database, or any combination. Let's drag a few components into your project windows and show some live values.

 Add Components to Your Project
  1. From the Vision Designer, you can either go to the Project Browser and right-click on Windows to create a Main Window, or click on the Main Window image in the Designer workspace, enter a window Name (i.e., Main Window1) and click Create.  You have the option to create folders for organizing your windows. This first window you create will automatically open when a client starts, but that can be changed. We will talk more about that later.

  2. The window will refresh and you can begin clicking and dragging components from the Component Palette on the right onto the Designer workspace. Add a Label and a Text Field component.


  3. Double-click on the Label component to type directly into it, or go to the Text property of the Label in the Property Editor, and rename it to say "Enter Text."

  4. Select the Text Field component and click-and-drag the arrow handles to resize the component.


  5. Now let's add some Tag values to the window. 

    Note: This step assumes you are already connected to Generic simulator. Refer to Connecting to a Device.

    The simplest way to add Tag values is to go into the Tag Browser and drill down to the Tag(s) you want and drag them onto the window. Select a few Tags (i.e., Sine Tags) and drag them into the window. You will see a popup asking you what type of components you want to use to show these Tag values. Select LED Display.


  6.  Now you can see some live values on your window. Don't forget to Save your project.


  7. You can Preview your project in the Designer by clicking the Preview Mode button in the top menubar. This allows you to interact with your windows as if you were using a Vision Client.  The Preview Mode button changes between a gray triangle and a gray square depending on which mode you are currently in. Look for the gray triangle and click on it to go into Preview Mode. In this example, we entered "Hello World!" in the Text Field. You can see Property Editor, "Hello World!" also appears in the Text property of the Text Field. 


Learn more about Working with Vision Components and Vision Property Bindings.

2. Showing Tag History in an Easy Chart

Next we'll display Tag History from our Tags using an Easy Chart.  Showing Tag History requires that you have Tag History already setup (See step 7 on the previous Startup Guide page). Refer to the Configuring Tag History page.   

 Displaying History in an Easy Chart

In this example, create a second Main Window (i.e., Main Window2), add an Easy Chart component to show history on the values of the LED Displays.

  1. Once you have your second Main Window created, drag an Easy Chart component on to your window (i.e., Main Window2).


  2. In the Tag Browser, the first five Sine Tags are logging data. Drag these Sine Tags to the Easy Chart. The Easy Chart will immediately fetch the results and trend the history. When you first drag Tags to the Easy Chart, not much data will be displayed because you just started logging data.


  3. To show more data, set the Chart Mode property from Historical to Realtime in the Property Editor.

  4. From the top menubar, save your project by clicking File > Save.

Learn more about the Vision Easy Chart.

3. Navigating in a Vision Client

It's important to have a navigation strategy that allows you to navigate seamlessly between different windows in the Vision Client. You can choose from several types of navigation strategies, such as a Tab Strip, or Tree View. The Navigation Strategies in Vision page provides some things to consider to help you determine the best navigation strategy for your project and your users.

 Navigating in the Vision Client

In this example, we are going to use a simple Docked window and two Button components to switch between the two windows we created in the previous sections.

  1. First, let's create our docked window. In the Project Browser, right click on Windows and select Docked Window.


  2. A New Dock Window will appear for you to select the Docked Position. You can choose to display a Docked Window across the top, sides or bottom of your Vision window. In this example, we named our window Docked Window and selected North.  Click Create Docked Window.


  3. Right click on your new Docked Window and check Open on Startup. Your Docked window will now open on startup in the client and will be shown above all main windows in the Vision Client. You can do the same to any window to toggle this option on any window. For now, we only want two windows with this set, the first window from above (Main Window 1) and this Docked Window.

    Your Docked Window will look like the following in the Designer.


  4. Now, let's drag a couple of Button components from the Component Palette to the Docked Window, or you can duplicate (Ctrl D) the first button to create the second button. We'll use these Button components to navigate from one window to another in the Vision Client.

  5. Change the Text property of the Buttons to something meaningful (i.e., Main Window 1 and Main Window 2).


  6. Now you need to add scripting to each of your Buttons so they know what window to open when pressed. Right click on your first Button component (i.e., Main Window 1) and select  Scripting.


  7. This opens the Component Scripting [Button] window. Here you have to tell the buttons to swap one window for the other when the Button is pressed. In other words, it closes the current window you have open, and then opens the other window in its place. Use the following steps to apply your script to your first button (i.e., Main Window 1):
    1. Select the Main Window 1 button.
    2. Under Event Handlers, expand the action folder, and select actionPerformed.
    3. Select the Navigation tab, select Open / Swap, then Open, then and Center.
    4. From the Window dropdown, select the Main Window1.
    5. Click OK.


  8. Repeat Step 6 for your second button (i.e., Main Window 2):
    1. Select the Main Window 2 button.
    2. Under Event Handlers, expand the action folder, and select actionPerformed.
    3. Select the Navigation tab, select Open / Swap, then Open, then and Center.
    4. From the Window dropdown, select the Main Window2.
    5. Click OK.

  9. The image below shows how your Docked Window will look in the Designer. Remember to Save your project.

4. Launching a Vision Client

The Vision Client Launcher option can be installed as an "all user" application on a Windows operating system providing launcher access to all users on the same machine from a single installation. If the Vision Client Launcher was already installed, subsequent install attempts are treated as an upgrade and you will not be prompted to select the install mode. This option will only appear on new launcher installations or after uninstalling a prior version of the installer. You will see this in the example below. 

Vision Client Launcher Destination Folder
When installing for "all users," the installer will be placed in the following folder: "%Ignition Installation Directory%\Program Files\Inductive Automation"
When installing for "me only," the installer will be found under the "\AppData\Roaming\Inductive Automation" folder. 

Now that we created a project with a few windows and some basic navigation, let's launch a Vision Client. There are three ways to launch a Vision Client:

  1. From the Gateway webpage under the Vision Client Launcher logo, click the Downloads button. This method must be used after you create your first project, typically on a new installation of Ignition and a new release of the Vision Client Launcher application.
  2. From the Vision Client Launcher executable or a desktop shortcut, if you have used them previously.
  3. From the Designer  on the menubar, click Tools > Launch Project > Launch (windowed or full-screen). This method is great if you are both a designer and a user.

 Launch a Vision Client

Launching a Vision Client from the Gateway Webpage

  1. Open a new browser window and enter the IP address of the project Gateway . You can use 'localhost:8088'.

  2. If you're not already logged into Ignition, enter the credentials for the administrator or user with full privileges for the Gateway. You must have a project created. (The project in this example is called Controller). If this is your first time launching a Vision Client after installing and designing in Ignition, use the Vision Client Launcher on the Gateway webpage.

  3. From the Home tab on the Gateway webpage, click Download Vision Client Launcher.

  4. Select the Download button for the platform you are running on: Windows, Mac OS, or Linux. This example shows the installation steps for a Windows operating system.


  5. Run the downloaded file VisionClientLauncher.exe (found on the lower-left of the window if using Chrome), or go to your Downloads folder and double-click the file to run it.

  6. If this is the first time installing the Vision Client Launcher, you will be prompted to select an install mode. Select either  "Install for me only,"  or  "Install for all users."


  7. The Install Wizard will select a default destination location folder for the Vision Client application files. If you are "installing for me only", the destination folder will be different from the "all users" destination folder. You also have the option to select a different folder. Click Next.

  8. The Setup - Vision Client Launcher wizard will open. You'll notice that a desktop shortcut is checked and will be created so you don't have to run the Vision  Client  Launcher each time you want to open a client. Click Next.

  9. The Ready to Install window will open. Click Install.


  10. When the Vision Client Launcher completes the install, click Finish .


  11. The Vision Client Launcher shortcut icon will be placed on your desktop and looks like the following.

  12. The Ignition Vision Client Launcher will open, but you won't have any Vision Clients (applications) available if this is your first time using the Vision Client Launcher. Click Add Application. This will take you to the same window to browse for local and remote Gateways.


  13. The window will refresh and show your local Gateway. It will also check for other Gateways on your network. Select a Gateway and click the Select Gateway button.


  14. If there is an issue automatically detecting your Ignition Gateway, you can manually add your Gateway. Select Manual tab at the top of the window. Enter your Gateway URL or IP address (i.e., localhost:8088), and click Select Gateway.


  15. Once you add your Gateway, the Vision Client Launcher will automatically find all your Vision projects, but as we mentioned earlier, if this is your first time using the launcher, you won't have any applications available. Select your Vision project(s) and click Add Application(s).


  16. The following image is what you will see the next time the Client Launcher is opened. The Vision Client Launcher is installed and opens the same way you open any program. Simply click the application and click Open Application.  

    You can also launch the client by clicking on the three dot menu and selecting Create Shortcut.  The project shortcut will be placed on your desktop so you don't have to run the Vision Client Launcher each time you want to launch a project.


    Next time, you can double click the shortcut on your desktop to open your project in the Vision Client.

  17. Login to the Vision Client using the user credentials you set up when Ignition was installed.


  18. After you log in, you can see your Vision Client window displaying your project. Using the example we created in the Adding Components to Vision Windows, we are showing Main Window 1 which opens up on startup. Then click on Main Window 2 to see the Easy Chart from Showing Tag History in an Easy Chart section. 


  19. Without closing the Vision Client window, go back into the Designer and make a change your project, and click File > Save.
    Your Vision Client will show an orange notification banner stating that there is an update to the project.  Click on the banner and a dialogue box will open stating there is a more recent version of your application available. If you want to run it, click Update

  20. The Vision Client will then update itself.

You can launch as many Clients as you want! If you have other computers on the same network as the Gateway computer try launching on them too. Make sure that your Gateway computer doesn't have a Firewall enabled, or it is allowing traffic on port 8088 - the default port for the Ignition web server. The address to use on other computers is http://ipaddress:8088 where ipaddress is the IP address of the computer Ignition is installed on.

Learn more on the Vision Client Launcher page. 


  • No labels