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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 15 Next »


Overview

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

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, 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 Window 1). Note: You have the option to create folders for organizing your windows.




  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." Select the Text Field component and click-and-drag the arrow handles to resize the component.




  4. 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.




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




  6. 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 to go into Preview Mode.



Learn more about Working with Vision Components and Property Bindings


2. Showing Tag History in an Easy Chart

Display Tag History using an Easy Chart.  Showing Tag History requires that you have Tag History already setup.  Refer to the Quick Start Guide, Add History to Tags

 Displaying History in an Easy Chart

In this example, create a second Main Window (i.e., Main Window 2), 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 Window 2).



  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. Save your project.

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: Tab StripTree ViewMenubarForward and Back Buttons, and Drill Down. The Naviation 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 from any of the positions listed depending on where you want to position it on your Vision Windows. Select North and click OK.



  3. Right click on your new Docked Window and check Open on Startup. Your Docked winodw will open on startup in the client and will be on all windows in the Vision Client.



    Your Docked Window look like the following in the Designer.


  4. Now, let's drag 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. Rename the Buttons to something meaningful (i.e., Main Window 1 and Main Window 2).



  5. 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.



  6. 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 (i.e., Main Window 1), and then opens the other window (i.e., Main Window 2) in its place. Use the following steps to apply your script to the button:
    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 / SwapOpenand Center.
    4. From the Window dropdown, select the Main Window1.
    5. Click OK.



  7. 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 / SwapOpenand Center.
    4. From the Window dropdown, select the Main Window2.
    5. Click OK.

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


4. Launching a Vision Client

Now that we created a project, let's launch a Vision Client. There are three ways to launch a Vision Client:

  1. Home tab of the Gateway webpage under Vision Client Launchers.  This method must be used after you create your first project, typically on a new installation of Ignition.
  2. Vision Designer on the menubar under Tools > Launch Project > Windowed (Published). This method is great if you are both a designer and a user.
  3. Open a new browser window and enter the IP address of the project Gateway.



 Launch a Client


  1. If you haven't already, make sure you have a project created. (The project in this example is called NewProject). If this is your first time launching a Vision Client after installing Ignition, use the Vision Client Launcher on the Gateway webpage.

  2. Go to the Gateway webpage and select the Home tab.
    Scroll down the page to see the Vision Client Launchers. Select Download for the operating system you are using and click the VisionClientLancher.exe file. (This example is using the Vision Client Launcher for Windows).




  3. The Setup - Vision Client Launch wizard will open. You'll notice that a desktop shortcut will be created so you don't have to run client launch after this first time. Click Next.



  4. The Ready to Install Window will open. Click Install.



    An installing screen will pop up briefly before the client opens. 


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



  6. The Ignition Vision Client Launcher will open for you to select your Gateway. It shows you all the Ignition Gateways on your network, all the previously used Gateways to select from. If you don't see your Gateway, you can add it manually.
    Select your Gateway, and click Add Selected Gateway.



    If you don't see your Gateway, select Manually Add Gateway. Enter your Gateway URL or IP address and click Add Gateway.



  7. Once you selected your Gateway, the Vision Client Launcher will find all your Vision projects. Select your Vision project(s) and click Add Applications.




  8. Select the Vision project you want to open in the Client. You can simply Launch the client by pressing on the Launch Windowed or Launch and Create a Shortcut. The shortcut will be placed on your desktop so you don't have to run the Vision Client Launcher from the Gateway webpage each time you want to launch a project.



    The Vision Client Launcher Shortcut icon looks like the following:




  9. Login to the Vision Client using your user credentials.





  10. After you log in, you can see your Client window displaying your project. We are showing Main Window 1 which opens up on startup.




  11. Go back into the Designer, make a change to the window, and click File > Save and Publish
    Your Vision Client will show a notification saying that there are updates to the project. 



  12. Click on the notification and then the Update banner and the Vision Client will update itself!

You can launch as many Clients as you want! If you've got 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 Launching Clients!





  • No labels