General Designer Interface

The Designer User Interface

Watch the video

Designer Spaces

The Designer has a lot of panels and menus that allow you to build out a project tailored to your needs. However, while some of these like the File Menu are shared throughout the Designer, some of the panels and menu options are specific to certain objects and will typically only be displayed when an object of that type is selected. For example, when editing a Vision Window, the Designer has the Property Editor and Component Palette panels, but when editing an Alarm Pipeline, the Pipeline Blocks and Pipeline Block Editor panels are displayed instead. This creates different Designer Spaces that are used for different areas of a project.

There are many dockable and draggable panels that surround the workspace, as well as the familiar menu bars and toolbars. The dockable panels can be rearranged as you wish and will snap into place as you move them around the screen. Each workspace remembers its layout, which is the docking arrangement of the panels around it.

Docking System

The Designer's docking system provides a very flexible user interface, allowing you to customize the layout as you wish. To re-arrange the dockable panels, simply drag on their title bars. As you are dragging the panel, it will try to snap into place and show you a highlighted border. Use the highlighted border that appears to gauge where the panel will be moved to. Hold the CTRL key as you drag these panels to keep them from snapping into place. You can also drag these panels outside of the designer or onto a second monitor.

Dockable panels can be in one of four modes:

• *Docked - The panel is visible, and located somewhere around the perimeter of the workspace. If two panels are docked in the same location, a tab strip will appear to switch between the two panels.
• Floating - A panel can be dragged outside of the workspace perimeter to be floated. The panel can now be positioned anywhere on your desktop.
• Pinned - Pinning a panel makes it minimize to one of the four sides of the Designer, represented by a small tab. Hover over the tab to use the panel.
• Hidden - A hidden panel is not shown. You can open it again by selecting it in the View > Panels menu.

Toolbars can also be rearranged and floated to your liking. Simply drag on the "textured" left edge of the toolbar. If you have re-arranged your panels into a layout that you don't like, you can quickly revert back to the default by selecting the View > Reset Panels option from the menu bar.

tip

Your docking preferences are stored under %USER_HOME%/.ignition/*.layout. If you really want to reset your preferences, remove these files and restart the Designer.

Project Browser

The Project Browser panel allows you to view the different Designer Spaces, and their component hierarchies at a glance. By clicking Project Properties icon you can view or change many of the properties settings in your project. You can expand the folders and navigate down through each folder to see elements of your project such as windows, views, containers, and components. The Project Browser shows the entire tree structure from the project level folder down to the component level. You can navigate within your project in two ways, by selecting nodes in the Project Browser tree or directly clicking on an element like a component in the project workspace. Regardless of how you select an element, properties for that element are displayed in the Property Editor.

Project Resources

All projects have resources, such as Vision Windows, Vision Templates, Perspective Views, project scripts, reports, and named queries. Project resources can be inherited from one project to another. For more information, see Project Inheritance.

Naming Conventions

Project resource names cannot be blank. They must start with a letter, a numeral, or an underscore. The following characters are reserved and cannot be used in names for project resources:

< (less than)
> (greater than)
: (colon)
" (double quote)
/ (forward slash)
\ (backslash)
| (vertical bar or pipe)
? (question mark)
* (asterisk)

In addition,the following names cannot be used as project resource names:

CON, PRN, AUX, and NUL
COM1, COM2, COM3, COM4, COM5, COM6, COM7, COM8, and COM9
LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8, and LPT9

Right-Click Menu

The Project Browser basic functionality is similar to many applications that run on your PC. When you right-click on a project resource in the Project Browser, several options are available like Copy, Paste, and Delete. The presence of certain options will change depending on the type of project resource you are currently editing. For example, inherited project resources have additional menu options that are only visible in inherited projects. The table below lists and describes common right-click menu options:

Function	Description
Close & Commit	Saves the updates made to the project resource and closes it.
Close & Revert	Reverts the project resource to its last saved state. Reverting an unsaved resource is the same as deleting it.
Configure View Permissions	View permissions determine whether or not a user has access to load the view.
Configure Events	Configures an event or action on a component.
Rename	Change the name of the current selection to a new name.
Cut	Cuts the current selection into the clipboard.
Copy	Copies the current selection into the clipboard.
Copy Path	Copies the path of the current selection into the clipboard.
Paste	Pastes the contents in the clipboard to the selected content.
Delete	Deletes the current selection.
Revert Changes	Reverting a modified resource will revert it back to its last saved state, assuming it's been saved before. Reverting new resources deletes them.
Export	Exports resources from the project.
Protect	Protects the Project Resource. For more information, see Protecting Project Resources.
Documentation...	New in 8.1.19 Opens a popup window where you can add notes to the project resource to share the its purpose and any necessary information for interaction. Previously, documentation notes were only available on Vision Windows, Vision Templates, and Transaction Groups.

Tag Browser

The Tag Browser panel, located on the left side of the Designer workspace under the Project Browser, allows you to browse Tags in the Designer and OPC servers. Tags an be created, edited, displayed, exported, and imported directly from the Tag Browser. See Tag Browser for more detailed information.

Menubar

This section addresses only the functionality that the Designer menubar shares between both the Perspective and Vision modules.

For information on the menubar tabs unique to the Vision module, see Vision Designer Interface.

For information on the menubar tabs unique to the Perspective module, see Perspective Designer Interface.

File Menu

The File Menu contains most of your basic options related to saving, similar to many other software applications on your PC.

Function	Description
New	The New menu option allows you to create a new Object. That Object could be a new window, a new template, or even a new project. It can vary depending on what modules you have installed, also providing the ability to make new transaction groups, reports, Sequential Function Charts, and more.
Open	Allows you to Open a previously created project.
Save All	Saves all project changes, but are not pushed out to the client.
Save	Save brings up a popup menu where you can choose what to save.
Save As	Saves the current project as a new project.
Update Project	Merges any changes from the Gateway to the project, if for example there were multiple people working on the same project.
Ignition Exchange	Provides access to resources, templates, and tools that can be shared with various other industries and used in your own Ignition projects.
Import	Allows you to import or export specific resources into or out of the project such as Tags, scripts, and templates, to name a few.
Export	Exports globally scoped resources, such as Alarm Pipelines.
Exit	Exits the project and allows you to save project changes.

Project Menu

About Communications Modes

Watch the video

Communication between the Designer and the Gateway is controlled from the Project Menu. The Designer offers three data communication modes for your projects: Comm Off, Comm Read-Only, or Comm Read/Write. Comm Read-Only is the default mode which does not allow writing from the Designer to Tag or Database sources.

Function	Description
Comm Off, Comm Read-Only, Comm Read/Write	Changes the communication mode for this designer session. See Comm Mode for more details. Note: These settings do not affect the execution of a project's Transaction Groups because Transaction Groups execute on the Gateway, not in the Designer
Properties	Opens up the Project Properties window, allowing project settings to be changed. See also: Project Properties
Event Scripts	Opens up the appropriate event script window, either client, session, or Gateway. These can also be accessed from the Project Browser. See also: Client Event Scripts and Gateway Event Scripts.
Preview Mode	Puts the Designer into Preview Mode, allowing you to interact with it like a client. See also: Previewing the Project.
Preview Language	Determines the language that the Designer will revert to when in Preview Mode. See also Localization and Languages and Localization in Vision.

Comm Mode

The Designer, and Vision Clients, have a communication mode ("comm mode") that determines if the Designer/Client is able to read and write to tags and databases. The comm mode is determined per Designer/Client instance, and changing the comm mode in one running instance will not impact any other running instance's comm mode setting. The comm mode can be set to the following:

• Comm Off: In this mode all database query traffic and Tag subscriptions and writes are blocked. This can be useful to temporarily disable polling component bindings.
• Comm Read-Only: Tag subscriptions and SELECT queries work, but Tag writes and UPDATE/INSERT/DELETE queries requested by the Designer/Client are ignored by the Gateway.
• Comm Read/Write: The Designer/Client can write to tags. In addition UPDATE/INSERT/DELETE queries requested by the Designer/Client will be processed by the Gateway.

In addition to changing the comm mode from the Project Menu, it can be changed in the following ways.

Setting the Comm Mode from the Main Toolbar

If the Main Toolbar is enabled, go to Project, and you'll see a corresponding button for each Comm Mode. The currently selected Comm Mode will have its button highlighted in gray.

Setting the Comm Mode from the Project Propertied Window

This will set the default Comm Mode that the Designer starts up in for the current project.

1. In the Designer, either double-click on the Project > Properties node in Project Browser, or click on the Project > Properties command on the top menu. The Project Properties window is displayed.

2. Go to Project > Designer.

3. Under Startup Options, for the Initial Gateway Comm Mode, choose from the dropdown Comm Off, Comm Ready-only, or Comm Read/Write.

   note

   These property settings are saved on a per-project basis.

   

Communication Error Message

If a user is attempting to write to a project in the Designer or from a Client, and the Comm Mode is not enabled for Read/Write, a dialog box will popup stating the Designer is not in Read/Write Mode.

If your Tag is not being written too, there are a couple places to check:

• From Main Toolbar go to Project, and make sure the Comm Mode is set to Read/Write.

• If Comm Read/Write is checked, you may have a Client Event Script enabled that could be preventing you from writing to a project or a Tag, as shown in the error message example below. You may need to edit your Client Event Script.

  

Previewing the Project

Many times, it is useful to test the components on the screen to ensure that certain bindings or scripts are working the way that was intended. The Designer can go into Preview Mode that will allow you to interact with the currently opened window as though you were working in a client. This means that instead of clicking between components and seeing their properties, you will be able to interact directly with the components such as clicking on a button to execute its script, or entering a value into a text field to update a Tag value.

Preview Mode

The window workspace operates in two distinct modes: Design Mode and Preview Mode. There are three different ways you can switch between Design and Preview Mode:

• One of the easiest ways is from the Main Toolbar using the Preview icon or the Design icon to switch between modes.

  

• From the Main Toolbar using the Project > Preview Mode menu item.

• Using the F5 key to toggle between the two modes.

In Design Mode, your mouse is used to manipulate components in a window. You can select, drag, and resize them. You can alter data bindings and event script configuration. Data bindings are active in Design mode, but event handlers are not.

In Preview Mode, you are interacting with a "live" version of the window. Property bindings and event handlers will run, just like in the Client.

note

Some of Ignition's functionality will not work in Preview Mode, for example, the retarget and openWindowInstance scripting functions must be tested in a Client.

Preview Mode is useful for a quick check of the operation of a window, but it becomes cumbersome when trying to test a whole project. For that, we recommend having a launched Client up as well, and doing testing in the true Client. You can quickly launch a client in one of the following two launch modes via the Tools > Launch Project menu.

Tools Menu

The Tools Menu provides some tools to help you when creating projects.

Each of the tools are described here.

Function	Description
Console	The Output Console is a dockable panel prints system messages that are coming from the designer. This can vary from simple info messages that show when things are loaded, to error messages when something goes wrong. The Console is also used frequently to test and debug Python scripts, as print statements on components that are run in the designer are printed here.
Image Management	The Image Manager is available from the Tools > Image Management menu. This tool is a drag-and-drop browser that helps manage the images that are stored on the Gateway. It is important to realize that these images are shared across all projects: they are not stored inside a project itself. Use the Image Management tool to do common tasks like uploading new images and creating folders. You can drag images and folders from your computer's desktop or hard drive into this window to easily upload new images to the Gateway. You can also get to this tool by putting an Component Palette > Display > Image component on a window, and clicking the browse button on the image's Image Path property. See Images and SVGs in Vision and Images and Icons in Perspective.
Script Console	Opens up the Script Console. window. This is where you can test scripts out.
Database Query Browser	Opens up the Database Query Browser panel, which allows you to run SQL queries against your database connections.
Translation Manager	Opens up the Translation Manager panel, which allows you to configure translations. See Localization and Languages.
Symbol Factory	If you have the Symbol Factory module installed, you'll be able to open the Symbol Factory browser under the Tools menu in the Designer. You can browse through the symbols or use the convenient search function to find the symbol you need. Once you find a symbol, you can drag-and-drop it into a window. Each symbol is dropped as a shape group. You will be able to un-group it or double-click into the group just as if you had drawn the symbol yourself using fundamental shapes. This means that you can alter the shape if you need to, or bind any colors inside the shape to a Tag to make the shape dynamic.
Launch Project	Allows you to launch the project directly from the Designer.

Help Menu

The Help Menu provides online assistance when looking for information or troubleshooting an issue.

Function	Description
Help	Opens up your web browser and takes you to this User Manual for quick reference.
Diagnostics	The Help menu in the Designer and the Vision Client has a Diagnostics window that contains a number of tabs each providing a useful troubleshooting feature. You can right-click on any of the tabs to show or hide the other tabs. For more information on these tabs and the troubleshooting features, go to Designer Diagnostics.
About Ignition Designer	Provides information about the Designer such as the versions of the modules, Java version, and Gateway IP Address that the Designer is using.