Quick Start - Vision Client

1. From the Vision Designer, go to the Project Browser and right-click on Windows to create a Main Window . You will be prompted to enter a window name (i.e., Main Window1). Note: 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 your window. 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 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 the Quick Start Guide for 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.
   
   
   
   

Learn more about Working with Vision Components and Property Bindings! 

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 three 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!

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 selected North.  Click OK.
   
   
   
   
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.
   
   

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 NewProject). 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 VisionClientLauncherSetup.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. 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.
   
   
   
7. The Ready to Install window will open. Click Install.
   
   
   
   
8. When the Vision Client Launcher completes the install, click Finish.
   
   
   
   
9. The Vision Client Launcher shortcut icon will be placed on your desktop and looks like the following.
   
   
   
   
10. 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 Vision Client or Add Applications(s). Both buttons will take you to the same window to browse for local and remoter Gateways.
    
    
    
    
    
11. 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 Add a Selected Gateway button.
    
    
    
    
    
12. If there is an issue automatically detecting your Ignition Gateway, you can manually add your Gateway. Select Manually Add Gateway. Enter your Gateway URL or IP address (i.e., localhost:8088), and click Add Gateway.
    
    
    
    
    
13. Once you add your Gateway, the Vision Client Launcher will automatically find all your Vision projects. Select your Vision project(s) and click Add Applications.
    
    
    
    
    
14. 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 launch the client by pressing on the Launch Windowed button, or you can click the down triangle button and select Launch + 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 to open your project in the Vision Client.
    
    
    
    
    
15. Login to the Vision Client using the user credentials you set up when Ignition was installed.
    
    
    
    
    
16. After you log in, you can see your Vision Client window displaying your project. Below, we are showing Main Window 1 which opens up on startup. Try clicking on Main Window 2.
    
    
    
    
    
17. Go back into the Designer, make a change to the window, and click File > Save and Publish. 
    Your Vision Client will show a notification banner stating that there is an update to the project. 
    
    
    
    
    

18. Click on the notification banner and a dialogue box will open stating there is a more recent version of your application available. If you want to run the update, click Update.
    
    
    
    

19. 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 about Vision Client Launcher!