ENVYSION User Guide
Acuity Brands | One Lithonia Way Conyers, GA 30012 Phone: 800.535.2465 www.acuitybrands.com © 2017 Acuity Brands Lighting, Inc. All rights reserved. 5/16/18 Document Revision History 1. Version 1.0 - June 2018 - Release to Market
ENVYSION-AC_UG_10_EN
©, Acuity Brands Inc., 2017. All rights reserved.
While all efforts have been made to verify the accuracy of information in this manual, Acuity Brands is not responsible for damages or claims arising from the use of this manual. Persons using this manual are assumed to be trained lighting professionals and are responsible for using the correct wiring proce- dures, correct override methods for equipment control and maintaining safe working conditions in fail- safe environments. Acuity Brands reserves the right to change, delete or add to the information in this manual at any time without notice.
Acuity Brands, Distech Controls, the Acuity Brands logo, and the Distech Controls logo are registered trademarks of Acuity Brands, Inc. BACnet is a registered trademark of ASHRAE. All other trademarks are property of their respective owners. TABLE OF CONTENTS
CHAPTER 1 Projects and DG5 Files ...... 5 Creating New Projects ...... 6 Opening Projects ...... 7 Launching a Project ...... 8 Importing and Exporting Projects ...... 9 Importing a Project ...... 9 Exporting a Project...... 10
CHAPTER 2 Quick Start ...... 11 Creating a Project...... 12 Creating a Navigation Tree...... 14 Creating a Welcome Page ...... 17 Creating a Hyperlink Area ...... 19 Adding Charts ...... 21 Creating a Floor Plan Page ...... 24 Creating data type layers ...... 25 Adding Layer Tabs...... 26 Adding Widgets in Layers ...... 27 Creating a Floor Heat Map...... 29 Results ...... 31
CHAPTER 3 ENVYSION ...... 33 About ENVYSION...... 34 Using the ENVYSION Main Page ...... 34 User Management ...... 35 User Permissions in ENVYSION ...... 35 Giving Read or Write Access ...... 36 Enabling or Disabling Help Tips ...... 37 Setting the Landing Page for a User ...... 37 Limiting the Content Available to a User ...... 38 Setting up a Welcome Page in the ECLYSPE Web Interface ...... 39 Assigning User Permissions in the ECLYPSE Web Interface ...... 41 Getting Started ...... 43 Requirements and Installation ...... 43 Installing or Updating ENVYSION ...... 43 Updating the Build of an Existing ENVYSION Project ...... 43 ...... 45 ENVYSION Editing Environment ...... 46 Page and Data Creator ...... 46 Location Node ...... 46 Template Node...... 47 Styles ...... 49 Applying a Style ...... 49 Cloning and Editing a Style ...... 50 Style Properties ...... 51 Navigation Builder ...... 54 Important Concepts ...... 54 Adding Template Nodes...... 56 Adding Devices Using an Existing Template ...... 59
ENVYSION User Guide 1 Table of Contents
Managing Device Templates ...... 59 Module Nodes...... 61 Page Include Module ...... 63 Navigation Icons ...... 65 Pages and Pop-ups...... 66 Page and Data Creation ...... 68 Zones ...... 70 Creating a Zone ...... 70 Redrawing a Zone ...... 72 Editing Zone Properties ...... 73 Binding to a Zone ...... 74 Layers ...... 77 About Layer Groups ...... 77 Opening the Layer Manager...... 78 Creating a New Layer...... 79 Adding a New Layer Group ...... 81 Deleting a Layer or Layer Group ...... 81 Editing Pages Using Layer Group Tabs ...... 81 Images ...... 83 Adding an Image ...... 83 Adding Image Paddings ...... 84 Widgets ...... 85 Adding a Widget ...... 85 ENVYSION Widgets ...... 87 Layer Selection Widget...... 87 Date Range Widget ...... 87 Data DVR Widgets ...... 88 Weather Widget ...... 89 Image Widget ...... 89 Plain Text Widget ...... 90 Styled Text Widget ...... 91 Node Callout Widget...... 91 Node List Widget ...... 92 Data Action Widgets ...... 93 Slider ...... 93 Combo Box...... 93 Toggle Switch ...... 94 Button Widget ...... 95 nLight Widgets ...... 96 Photocell Widget...... 96 Switch Widget...... 97 Occupancy Sensor Widget ...... 98 Light Widget ...... 98 Chart Widgets ...... 103 Line Chart Widget...... 103 Area Chart Widget ...... 104 Column Chart Widget ...... 106 Bar Chart Widget ...... 107 Pie Chart Widget ...... 108 Radial Gauge Widget ...... 109 Global Date Range ...... 110 Changing the Global Date Range...... 110 Bindings ...... 111 Binding Sources ...... 111
2 ENVYSION User Guide Table of Contents
Binding Targets ...... 112 Typical Binding Behavior ...... 112 Conversion Bindings ...... 113 Opening and Closing the Binding Dialog or Property Inspector...... 114 Creating a Drag-and-Drop Binding...... 114 Changing a Drag-and-Drop Binding into a Conversion Binding...... 114 Using Conversion Binding Types ...... 115 Conversion Binding Properties...... 118 Binding Data to Widgets...... 119 Binding Data to the Widget's Background Color ...... 121 Binding Data to an Image Widget ...... 122 Previewing a Binding ...... 123 Deleting a Binding ...... 124 Actions ...... 125 Adding an Action to an Object ...... 125 Adding an Action to a Series ...... 126 Editing an Action ...... 126 Deleting an Action ...... 127 Actions Properties ...... 127 Multiple Actions in Response to the Same Event ...... 128 Creating an Action with a Node Callout ...... 128 Creating an Action with a Text Callout ...... 133 Creating an Action with a Node List ...... 135 Device Templates...... 139 Creating a Device Template...... 139 Reports Module ...... 142 Creating Reports ...... 142 Editing Reports...... 146 Alarms Module ...... 149 Interacting with Alarms...... 149 Filtering Alarms ...... 149 Filtering with the Alarm Widget ...... 150 Schedules Module ...... 151 Creating an Event ...... 151 Editing an Event Status ...... 152 Filtering with the Schedule Widget...... 152 Trends Module ...... 153 Working with Trends ...... 153 Viewing Projects ...... 154 Previewing Projects ...... 154
ENVYSION User Guide 3 Table of Contents
4 ENVYSION User Guide Projects and DG5 Files CHAPTER 1 Projects and DG5 Files
This chapter provides information regarding ENVYSION projects and files.
Topics Creating New Projects Opening Projects Launching a Project Importing and Exporting Projects
ENVYSION User Guide 5 Creating New Projects
You can create new projects from a profile. Creating a project using the xpressENVYSION profil creates an xpressENVYSION project.
1. Do one of the following:
• If ENVYSION is already open, choose Project > New Project and from the Create Project section select the xpressENYSION Profile .
• If the Welcome screen is open, click on the Create Project section (1), select the desired profile (2), and select the desired profile thumb- nail on the right of the screen (3). Click Choose (4). See figure below. Figure 1: Select XpressENVYSION profile
2. Type a name for the project.
6 ENVYSION User Guide Projects and DG5 Files
Opening Projects
ENVYSION can open or import projects that were created with ENVYSION.
To open a project:
1. In the menu bar, select Project > Open Project 2. In the Welcome screen, select Open/Import. 3. Select a project, and click Open.
To open a recent project from the Project menu:
1. In the menu bar, select Project > Recent. The recent projects for your user account are listed. 2. Choose the file.
ENVYSION User Guide 7 Launching a Project
Once a project has been created or opened, you can launch it in the project viewer.
1. Double-click the index.dg5 file to open it. 2. Right-click Preview and select Open Viewer Link.
Figure 2: Open the index.dg5 file and select Open Viewer Link
8 ENVYSION User Guide Projects and DG5 Files
Importing and Exporting Projects
You can export a project that you have created and save it to your local com- puter as a .zip file. You can also import a previously exported project in your current project.
Importing a Project
1. Click the gear icon on the bottom right corner of the page and select Import. The Project Import dialog box is displayed.
2. Drag and drop the previously exported xpressENVYSION_export.zip file in the Import Project dialog box. The dialog box shows the content of the exported file you are importing (e.g. ). 3. Click Import. The browser page will refresh and update the build auto- matically.
ENVYSION User Guide 9 Exporting a Project
You can export a project that you have created and save it to your local com- puter as a .zip file. This allows you to send the project to a colleague to import into another instance of ENVYSION.
4. Click the gear icon and select Export Files. The Project Export dia- log box is displayed:
5. Check the project items you want to export (e.g. ) and click Export. A .zip file is exported.
10 ENVYSION User Guide Quick Start CHAPTER 2 Quick Start
This chapter includes quick steps for getting started with ENVYSION. Its pur- pose is to help you get accustomed to some of the typical procedures that are necessary to know when working with the ENVYSION graphical interface. Through a simple example, this guide broadly covers the process of creating a new project that includes a building page with energy information and a floor plan with multiple layers.
For the purposes of this guide, it is already assumed that the ECLYPSE web interface has already been connected to a device and launched.
Topics Creating a Project Creating a Navigation Tree Creating a Welcome Page Creating a Floor Plan Page Results
ENVYSION User Guide 11 Creating a Project
In ENVYSION, you do all of your design work within a project, so the first thing you need to do is create a project to work in. To create a new project:;
1. Log in to the ENVYSION designer interface through the ECLYPSE web interface.
2. Select Project > New Project.
12 ENVYSION User Guide Quick Start
3. In the Welcome dialog, select the xpressENVYSION template and click Choose in the bottom right section of the popup window.
4. In the Create Project dialog, name your project and click OK.
5. In the browser, double-click the index.dg5 file to open it.
6. Right-click Preview and select Open Viewer Link to launch the project.
ENVYSION User Guide 13 Creating a Navigation Tree
1. Right-click Preview in the top right section of the window and select Open Viewer Link to open your project in the ENVYSION viewer.
Your Project will switch in full window design mode. 2. Click the Navigation Builder button to start creating the Navigation tree.
For more information on the Navigation Builder screen and concepts, see Navigation Builder.
14 ENVYSION User Guide Quick Start
3. In the Navigation tab, select the Location node for the Building page and drag-drop it in the left navigation area.
4. Right-click on the Location node and choose Edit. Rename the Location (e.g., Head Office).
ENVYSION User Guide 15 5. Add a floor to your building by dragging-dropping another Location over the Building node.
When you create multiple levels of navigation, you can use the blue line that appears when nodes overlap as a guide: • If the line is above the existing node, the new node will be located above, on the same navigation level. • If the line is in the middle (see image above), the new node with be nested under the existing node. • If the blue line is below the existing node, the new node will be located under, on the same navigation level.
6. Repeat step 4 to rename your floor (e.g., Floor 1).
16 ENVYSION User Guide Quick Start
Creating a Welcome Page
1. On the home page, click the Page and Data Creator button (1), or click the Page and Data Creator banner button located at the top of the screen (2).
2. Select your Building node (e.g., Jean_Building) in the Navigation tree by
clicking the icon next to your Building.
For more information on the Page and Data Creator screen and concepts, see Page and Data Creation.
ENVYSION User Guide 17 3. To import a background image, open File Explorer by clicking in the Image tab. Select an image from your computer and drag-drop it on the center of the page.
4. In the Image tab, click the icon to open the Property Inspector so you can add paddings around the image. For this example, add 400 pixels on the right and 200 pixels at the bottom.
18 ENVYSION User Guide Quick Start
Creating a Hyperlink Area
1. In the Zone tab, click the icon and draw a zone over the first floor.
2. From the palette, click the icon to create a hyperlink. 3. In the navigation tree, drag-drop your floor node on the zone over the building’s first floor.
4. Right-click on the created zone and select Edit Properties (or click on the
icon from the upper left palette to access the Property Inspector for the selected zone.
ENVYSION User Guide 19 5. In the Property Inspector, add some hover and color animations on the zone. For this example: a. Choose red as a background color by clicking on the colored square icon. b. Adjust the default opacity to the minimum, so by default no color will be visible. c. Adjust the opacity duration to 0.5. A lower duration means that the selected background color will be visible faster when you mouse over the zone. d. Adjust the Opacity Mouseover to the level you want for the back- ground color when you mouse over the zone.
20 ENVYSION User Guide Quick Start
6. Click the icon in the upper left palette and mouse over the created zone.
Adding Charts
1. Click on the Widget tab on the working area top tab. From the Bottom pal- ette, expand the Widgets category.
ENVYSION User Guide 21 2. Select the Weather widget and drop it in the upper right portion of your screen.
3. Right-click the widget and select Edit Properties. In the Properties Inspec- tor, enter your zip code and country information.
22 ENVYSION User Guide Quick Start
4. From the palette located at the bottom of the screen, expand the Charts category.
5. Select the Area Chart widget and drag-drop it underneath the weather widget. To bind data to the chart, right-click it and select Bind (or click the
icon from the upper left palette). 6. In the Binding window, open the Data tab, find the Lighting folder under Metering, and drag it on the chart.
ENVYSION User Guide 23 Creating a Floor Plan Page
1. In the Page and Data Creator navigation tree, select the floor node by
clicking on the icon. 2. To import a background image, open File Explorer by clicking in the Image tab. Select a floor plan image from your computer and drag-drop it on the page.
3. In the Image tab, click the icon to open the Property Inspector so you can add paddings around the image. For this example, add 400 pixels on the right and 200 pixels at the bottom.
24 ENVYSION User Guide Quick Start
Creating data type layers
1. Open the Zone tab and click the icon to open the layer manager.
2. Delete the Occupancy layer by clicking on the trash icon next to it.
ENVYSION User Guide 25 3. To change and adjust the color scale of the layer, click the color gradient bar: • To change the color, click on the bottom marker and change it to another color from the color palette. • To add a marker, click below the color bar where the marker should be. • To remove a marker, right-click it. • To change the default color, click the default color square beside the gradient bar.
4. Enter the gradient data scale in the min and max fields underneath the gradient bar for the Space Temperature and Lighting Level layers. Click Save to apply your changes before switching layers.
Adding Layer Tabs
To work with multiple layers, you have to add Layer tabs on the top of the worksheet. When you open the drop-down list for a layer, you can see all the layers available in the project. To add general common components that would be used in all the layers (e.g., the weather widget) you have to use the default layer. If you want to show specific components for specific layer, then choose the appropriate layer tab before adding it.
26 ENVYSION User Guide Quick Start
To add layers on a page, proceed as follows:
1. Click the + sign beside the last tab and assign a layer to it. For this Quick Start guide, we will use the Default, HVAC, and Lighting layers.
Adding Widgets in Layers
1. In the Widgets tab, add the HVAC and Lighting layers, as explained above. 2. Select the Default layer and add the Weather widget from the Widget pal- ette at the bottom of the screen. Place it on the top right part of the screen, like on the Building page. 3. Also add the Layer Selection Tool under the weather widget. Right-click it and select Edit Properties to set the Default Layer.
ENVYSION User Guide 27 4. Select the HVAC tab and add a Gauge from the Chart palette at the bot- tom of the screen. Place it on the bottom right of the screen.
5. Right-click the Gauge widget and select Bind Data. In the Data tab, locate the for ChilledWaterTemp points under the Plant folder and drag- drop it on the widget.
28 ENVYSION User Guide Quick Start
6. Select the Lighting tab and add Light widget from the nLight palette at the bottom of the screen. Bind it to the OccupiedP1_00712D43 point under nLight BACnet.
Creating a Floor Heat Map
1. In the Zone tab, select the HVAC layer.
2. In the palette located in the upper left corner of the screen, click the icon and draw two random office zones on your floor and bind them to Office1_Temp and Office2_Temp (found in the Data tab under Zones > Zone1 and Zone2, respectively).
ENVYSION User Guide 29 3. Repeat the previous step to draw two zones in the Lighting layer, and bind them to Office1_Lights and Office2_Lights.
4. Save your project by clicking on the icon in the palette located in the upper left corner of the screen. 5. Click the Home button located in the top white tab and select the Viewer button on the home screen to see your project results.
30 ENVYSION User Guide Quick Start
Results
Below are samples of pages you can obtain using the xpressENVYSION fea- tures.
ENVYSION User Guide 31 32 ENVYSION User Guide ENVYSION CHAPTER 3 ENVYSION
This chapter provides information on how to work with ENVYSION, including requirements, getting started, and creating a project.
Topics About ENVYSION User Management Getting Started ENVYSION Editing Environment Styles Navigation Builder Module Nodes Page Include Module Navigation Icons Pages and Pop-ups Page and Data Creation Zones Layers Images Widgets ENVYSION Widgets Data Action Widgets nLight Widgets Chart Widgets Global Date Range Bindings Actions Device Templates Reports Module Alarms Module Schedules Module Trends Module Viewing Projects
ENVYSION User Guide 33 About ENVYSION
ENVYSION is a web-based, easy to use interface designed to quickly and simply create visualization for lighting, BMS, and energy management sys- tems. Use ENVYSION with nLight and/or XPoint Wireless lighting controls systems and visualize your lighting system operations like dimming levels, light status, occupancy, and device status. Gain complete insight into your building performance and energy consumption.
Figure 3: ENVYSION main page
Using the ENVYSION Main Page
The ENVYSION version number is displayed in the bottom left cor- ner of the main window.
The main page display the four main menu components that allow you to design and develop typical building user interface requirements using a sim- plified "step-by-step" approach to the creation of your project through style selection, navigation builder, page and data creation, and finally creating and viewing your entire project.
The gear icon located on the bottom right corner of the ENVYSION main page is used to access the Project Users Permissions menu and to import and export files. See User Management.
34 ENVYSION User Guide ENVYSION
User Management
User Permissions in ENVYSION
User management is the control of who can access the controller by enforcing the authentication credentials users need to access ENVYSION.
Users who can access ENVYSION are managed in the ECLYPSE controller (see Assigning User Permissions in the ECLYPSE Web Interface).
In ENVYSION, the Project User Permissions window is used to define the portions of the project tree that users can have access to. To access the Proj- ect User Permission window:
1. Click the gear symbol on the bottom right corner of the main page and select Permissions.
The Project User Permissions window is displayed:
• The users are added manually (+ Add User) to match the users in the User Management of the ECLYPSE Web Configuration Interface. See Adding new users in ENVYSION.
ENVYSION User Guide 35 Adding new To add new users in ENVYSION: users in ENVYSION 1. Click the + Add User, located on the bottom left corner of the main page. A data entry field is displayed. 2. Enter the exact username from the ECLYPSE controller and click the checkmark to add the user to the User List. 3. To define the user permissions, select the user name from the list and change the select the user permissions as needed. .
• To delete a user, click the "x" next to the user name.
Giving Read or Write Access
To set a user's read or write access for the project:
1. In the User List section, select the user you want to define permissions for. 2. In the Mode drop-down list, select Edit to assign read/write permissions or View to assign read-only permissions for viewing information only.
Any Edit permissions you set in ENVYSION will only apply to users who have an Administrator role in the ECLYPSE controller. Users with any other role will only be able to view ENVYSION pages regardless of the mode you specify.
3. Click Save.
36 ENVYSION User Guide ENVYSION
Enabling or Disabling Help Tips
To control whether help tips are displayed when the selected user edits the project:
1. In the Project User Permissions dialog box, select a user. 2. Click the Help Tips toggle button, as shown in the following image. If Help Tips is enabled, help tips are displayed when this user edits the project.
3. Click Save.
Setting the Landing Page for a User
To set a landing page to open when the selected user logs in:
1. In the Project User Permissions dialog box, select a user. 2. Drag the node from the Project Tree to the Landing Page field, as shown in the following image. The node becomes the selected user's landing page.
ENVYSION User Guide 37 3. Click Save.
To remove the selected user's landing page, select the user and click the X that appears on the field.
Limiting the Content Available to a User
To limit the content available to the selected user:
1. Drag nodes from the Project Tree to the Nodes field, as shown in the fol- lowing image.
• If the Nodes field is empty, the selected user can see and access all content.
• If the Nodes field contains nodes, the user can see and access only those nodes and their children.
If your landing page is not part of the Nodes, it will be available only at login. Make sure the landing page is also part of the nodes.
2. Click Save.
To remove a node from the Nodes field, click the x that appears next to that node, as shown in the following image.
38 ENVYSION User Guide ENVYSION
Setting up a Welcome Page in the ECLYSPE Web Interface
The following procedure will show you how to setup a welcome page for a user to access a particular page in ENVYSION when connecting through the ECLYSPE Web Interface.
1. In ENVYSION, open a project and select the page (.dg5) in the project that will become the landing page. Right-click Preview and select Copy Viewer Link, to open a dialog with the viewer link.
2. Copy part of the URL, only the section after the IP address as shown in the image below.
3. Go to your ECLYPSE controller’s Web Interface and click Users.
ENVYSION User Guide 39 4. To edit a user, check the checkbox on the left and click .
5. In the User Details dialog, click Next twice to navigate to the Welcome Page parameter. Copy the URL in the text box. Click Save.
6. Go back to the login page and login in as that specific user. The welcome page is displayed rather than the ECLYPSE Web Interface.
If a user does not have the adequate permissions, an error mes- sage will be displayed when trying to login. If this is the case, refer to Assigning User Permissions in the ECLYPSE Web Interface to configure the permissions for the user.
40 ENVYSION User Guide ENVYSION
Assigning User Permissions in the ECLYPSE Web Interface
1. Create the user in the ECLYPSE Web Interface. For more information, see the ECLYPSE User Guide. 2. In the Roles parameter of the User Details dialog, assign the user’s per- missions. The minimum required permission is Viewer.
Table 1: User permissions in ENVYSION for ECLYPSE roles
ECLYSPE Role Admin Admin Operator Operator Viewer Viewer
ENVYSION Mode View Edit View Edit View Edit
Has access to ECLYPSE Yes Yes Yes Yes Limited Limited
Has access to ENVYSION Yes Yes Yes Yes Yes No Designer
Sees all projects Yes Yes No Yesa No N/A
Has access to XPE Designer Yesb Yesb No No No No
Access to XPE Permissions Yes Yes N/A N/A N/A N/A
Add Location Yes Yes N/A N/A N/A N/A
Add Template Yes Yes N/A N/A N/A N/A
Add Modules Yes Yes N/A N/A N/A N/A
Edit Location Graphics Yes Yes N/A N/A N/A N/A
Edit Template Graphics Yes Yes N/A N/A N/A N/A
Add Reports Yes Yes Yesc Yes Yesc Yesc
Edit Reports Yes Yes Yesc Yes Yesc Yesc
Can Set Point Values Yes Yes Yes Yes No No
Can Override Point Values Yes Yes Yes Yes No No
Can Emergency Override Yes Yes No No No No Point Values
ENVYSION User Guide 41 ECLYSPE Role Admin Admin Operator Operator Viewer Viewer
Can Edit Schedules Yes Yes Yes Yes No No
Can Acknowledge Alarms Yes Yes Yes Yes No No a. Can only see projects they are assigned to in the ENVYSION Project User Permissions b. Must manually Change mode=edit in URL c. A new Report can be created/edited, but it cannot be saved
42 ENVYSION User Guide ENVYSION
Getting Started
Requirements and Installation
Before using ENVYSION, make sure you have the following:
• Required: ENVYSION studio.
• Recommended if you are using an EC-BOS: EC-BOS-7AX or EC-BOS-8.
• ENVYSION requires sufficient space on your server. You must have one of the following:
• To install the xpressENVYSION project template and widget library, you need 28 MB.
xpressENVYSION is a template that might be included as part of your ENVY- SION installation. If xpressENVYSION is part of your installation, you will be able to do the steps on the next page. For some installations, for example EC- BOS installations and other core installations, the xpressENVYSION template is not installed.
Installing or Updating ENVYSION
xpressENVYSION is an ENVYSION project that you download and then import into ENVYSION. If xpressENVYSION is not installed, you first need to install it.
1. Ensure the device has sufficient space. 2. In your web browser, log in to ENVYSION. 3. If you have an earlier version of xpressENVYSION installed, delete the old xpressENVYSION project (optional).
Warning: If your project was stored in the template, this deletes your project!
4. Select Project > Export/Import > Import Project. 5. Click Choose File, and select the xpressENVYSION zip file. 6. Click OK. The xpressENVYSION template is now installed.
Updating the Build of an Existing ENVYSION Proj- ect
You can update any existing project created in ENVYSION.
1. Update an existing project created with ENVYSION template (see Install- ing or Updating ENVYSION). 2. To open the project, select Project > Open Project and select xpressENVYSION and click Open.
ENVYSION User Guide 43 3. In the Project panel, double-click index.dg5 to open the project.
4. Right-click Preview and select Open Viewer Link.
The ENVYSION home page opens in Viewer mode where you can now start creating your project:
5. Click the gear icon and select Export Files. The Project Export dia- log box is displayed:
44 ENVYSION User Guide ENVYSION
6. Check only the Core item and click Export. A .zip file is exported. 7. Re-open the project to be updated in the index.dg5 page (see step 2).
8. Click the gear icon on the bottom right corner of the page and select Import. The Project Import dialog box is displayed.
9. Drag and drop the previously exported xpressENVYSION_export.zip file in the Import Project dialog box. The dialog box shows the content of the exported file you are importing (e.g. ). 10. Click Import. The browser page will refresh and update the build auto- matically.
ENVYSION User Guide 45 ENVYSION Editing Environment
When you build a project, you can create or customize the following aspects:
• Pages that typically represent locations.
• Templates that represent a device or group of devices depending if you are using ENVYSION or embedded in an ECLYPSE controller.
• Bindings from data to objects.
• Layers and layer groups that affect project content.
• Actions that a user can execute.
Page and Data Creator
You view pages and templates in the Page and Data Creator. In the leftmost portion of the Page and Data Creator, the Project Tree lets you select and open content. In the rightmost portion of the Page and Data Creator, you can preview the currently selected content. The following image demonstrates the two portions of the Page and Data Creator.
Location Node
Location nodes are typically used to represent campus buildings, single build- ings, or floor plans. You edit each location node in the Page and Data Creator. The following image shows the Page and Data Creator.
46 ENVYSION User Guide ENVYSION
The Page and Data Creator has three tabs, and each tab has the following specific purpose:
• Image-For adding and editing the background image only
• Zones-For adding and editing zone color mapping only
• Widgets-For adding and editing callouts, charts, gauges, and widgets only.
If you try to select an object in your page and can't select it, make sure you have the selected the tab where you added that object.
Template Node
The Template Node has three tabs: Layout, Equipment, and Widgets. Unlike the Page Editor, the Template Editor lets you choose how to categorize objects in tabs. The exception is that zones can be added to templates only in the Equipment or Widgets tab.
By default, expanding a group of objects at the bottom of the screen causes the default tab for that group to be selected. For example, expanding the Ducts group selects the Layout tab. Symbols that you add to new .dg5 files do not have a default tab.
You edit each template in the Template Editor. The following image shows the Template Editor.
ENVYSION User Guide 47 • If you use tabs when you create templates, it is easier to select and edit objects as you work.
• If you try to select an object in your template and can't select it, make sure you have the selected the Template Editor tab where you added that object.
• The Widget Scale slider only affects objects in the Widgets tab.
48 ENVYSION User Guide ENVYSION
Styles
A project's Style primarily affects visual aspects of the project, such as colors, opacity levels, rounded corners, and logos. The Style of a project also affects the header content, navigation menu style, and pop-up panels. This page describes how to edit the current project Style and manage Styles in ENVYS- ION. This page also contains a reference for Style properties.
To edit your project's Style, you use a pop-up window called the Style Man- ager. The following image shows the ENVYSION Style Manager.
Applying a Style
1. Click Style Manager. The Style Manager dialog is displayed. A preview of your project is displayed in the background.
2. Select a style in the Style Manager.
This style is now applied to your project.
Behind the Style Manager, you can interact with a preview of your project to view the effects of your changes.
ENVYSION User Guide 49 Cloning and Editing a Style
You can customize the visual style of your project at any time. To clone an existing style and edit the clone:
1. Click Style Manager.
2. In the Style Manager dialog, select an existing style and clone it by selecting Clone.
3. Click either the original or the copy, and click Edit .
4. Edit the style accordingly using the Style Properties dialog. See Style Properties for a description of each style.
50 ENVYSION User Guide ENVYSION
5. Click Save. Your changes are saved. Close your browser, or go to a dif- ferent part of ENVYSION. 6. To cancel your changes, click the Back arrow at the top of the Style Man- ager and select Close without Saving:
7. To apply the style to this project, make sure it is selected when you leave this part of ENVYSION.
To delete a style, in the Style Properties dialog, select the style and click the Delete icon next to the selected style.
Style Properties
The style properties that can be modified are the following:
•Project
• Header
•Tree
• Panels
• Callouts
Project Project properties affect the entire project. properties Default Layout Specify whether your project is laid out with a desk- top-style or mobile-style layout when it is viewed on a desktop computer. On a mobile device, your project always appears with mobile layout.
Navigation Choose whether desktop layout uses a navigation tree or hierarchical breadcrumbs.
Background Color Select a background color for pages in your project.
Background Set a background image to use behind your project. Image Drag the image file from your computer to the area specified. Background images appear in desktop lay- out.
Image Opacity Set the opacity for your background image. Back- ground images appear in desktop layout.
ENVYSION User Guide 51 Header Header properties affect the header that is always at the top of the project. properties
Header Color Select a fill for your header. The fill can be a solid color, gradient, or image.
Main Title Enter a title for your header.
Title Font Color Select a font color for your title.
Sub-Title1 Enter a sub-title for your header. This text appears directly below the header.
Sub-Title Font Select a font color for your sub-title. Color1
Main Logo Set the main logo image to appear next to your project title. Drag the image file from your computer to the area specified.
Main Logo Size Set the width of your main logo image, in pixels. The image keeps its aspect ratio and cannot be taller than the Header Height.
Main Logo Set the opacity of your main logo image. Opacity
Secondary Set the secondary logo image for your header. Drag Logo1 the image file from your computer to the area specified.
Secondary Logo Set the pixel width of the secondary logo image for your Size1 header. The image keeps its aspect ratio and cannot be taller than the Header Height.
Secondary Logo Set the opacity of the secondary logo image for your Opacity1 header.
Header Height1 Set the pixel height of your header.
1Affects the header in the desktop layout only. Choose between the desktop and mobile layouts in the Project Properties.
52 ENVYSION User Guide ENVYSION
Tree properties Tree properties affect the navigation menu appearance for tree, breadcrumb, and mobile navigation. Choose between navigation types under Project Prop- erties.
Inherit Style Set whether your navigation menu uses the same prop- from Panels erties you define for panels.
Background Set the background color for your navigation menu. Color
Font Color Set the font color for your navigation menu.
Selected Item Set the highlight color for the currently selected item in Color your navigation menu.
Selected Font Set the font color for the currently selected item in your Color navigation menu.
Rounded Cor- Set how much to round the corners of your navigation ners menu, and the box that highlights the selected item.
Stroke Border Set the color of the outline for your navigation menu.
Stroke Weight Set the thickness of the outline for your navigation menu.
Panels Panels properties affect the appearance of the panels that display devices properties and alarm consoles.
Header Color Set the header color for your panels.
Header Font Color Set the header font for your panels.
Background Color Set the background color for your panels.
Content Font Color Set the font color for the content of your panels.
Rounded Corners Set how much to round the corners of your panels.
Stroke Color Set the color of the outline for your panels.
Stroke Weight Set the thickness of the outline for your panels.
Popup Type Specify whether your popups are free-floating or tabbed. Free-floating popups can be moved by the user. Tabbed popups are in a fixed location and can be selected using tabs. A popup is a panel that dis- plays a device.
Popup Width Set the width for popups that display devices.
Popup Height Set the height for popups that display devices.
Callouts Callouts properties affect the appearance of widgets. Widgets include charts, properties lists, and callouts.
ENVYSION User Guide 53 Navigation Builder
Project navigation is the hierarchy of information in a project. The hierarchy is displayed as a Project Tree, and items in the hierarchy are called nodes. To add nodes to the Project Tree, use the Navigation Builder.
The following image shows the Project Tree and Navigation Builder.
Important Concepts
These are some important concepts about creating navigation.
Node types A project's navigation can contain the following kinds of nodes:
• Location nodes: For example, these nodes can represent campuses, buildings, or floors.
• Device nodes: For example, these nodes can represent various HVAC equipment.
• Reports module: This node is used to generate reports.
• Alarms module: This node is used to view and acknowledge alarms.
• Schedules module: This node is used to view and edit events.
• Page Include modules: These nodes allow you to include an existing ENVYSION dg5 file or external web page in your project.
Adding location A location node represents location content in your project. A module node nodes represents other content such as reports, alarms, schedules, and external content. Use location nodes to make the project structure reflect your loca- tions.
54 ENVYSION User Guide ENVYSION
To add a location node to your project:
1. Click Navigation Builder.
2. In the Navigation Builder, select the Navigation tab, and drag the Loca- tion node into the Project Tree.
3. In the Project Tree, either double-click the node, or right-click the node and select Edit, to rename it. The Node Editor dialog is displayed.
4. You can enter a name and assign an icon to appear in the Project Tree and in navigation menus. 5. Repeat steps 3-4 to continue adding nodes. 6. In the Project Tree, drag location nodes to change their order and nesting. Watch the blue line indicator in order to drop the nodes where you want them.
ENVYSION User Guide 55 In the example below, these nodes will be children of the node on which they are dropped. The blue line is vertically centered on the text.
In this example, this node will be a sibling of the node it is dropped on. The blue line is aligned below the text.
Adding Template Nodes
Each device in your Project Tree is tied to a dynamic graphic called a device template. Make sure that similar devices share the same template.
To create a new device template node and also add some device nodes asso- ciated with it:
1. Click Navigation Builder.
56 ENVYSION User Guide ENVYSION
2. In the Navigation Builder, select the Template tab, and drag the New Template node onto the Project Tree.
3. In the Template Node dialog you can specify a name and an icon to appear in the Project Tree and in the navigation menu. If you don't specify an icon, a default icon is used.
The name entered in the Template Node dialog will be the name of the tem- plate. However, the name of the nodes in the Project Tree by default will reflect the names of the devices (in the Device Selection list or in the ENVYS- ION data tree folder structure if working on an ECLYPSE device). You can rename the node names in the Project Tree as needed (right-click to edit or double-click to rename only).
4. Under Device Selection, select some devices to use this template
ENVYSION User Guide 57 5. To specify a master device, click the key icon next to that device.
Next to each device, a green or red bar shows the number of met- rics that match the master device, followed by the total number of metrics.
6. Click Add. The device nodes appear in the Project Tree. 7. Under Device Selection, select some devices to use this template.
8. In the Project Tree, drag device nodes to change their order and nesting. 9. Right-click each device node to edit it in the Node Editor:
58 ENVYSION User Guide ENVYSION
The template you created is represented by a new node in the Navigation Builder. You can drag this node to the Project Tree later to add more devices that use the same template.
Adding Devices Using an Existing Template
To add device nodes using an existing device template:
1. In the Navigation Builder, select the Template tab. 2. Drag the template's node from the Navigation Builder to the Project Tree. A Template Node dialog appears. 3. Specify the device or devices that you want to add. 4. Click Add. The device nodes appear in the Project Tree.
Managing Device Templates
You can preview, duplicate, edit, or delete a device template:
1. In the Navigation Builder, select the Template tab. 2. Hover over the device template, and either right-click or click the Settings icon to display the pop-up menu.
3. Select the desired option:
• Edit to display the Template Editor dialog and edit the properties.
ENVYSION User Guide 59 • Preview to preview the device template
• Duplicate to duplicate the device template node in the Navigation Builder. The graphical device template associated with that node is also duplicated. This saves time if you need two similar graphical templates.
• Delete to delete the device template from the Navigation Builder.
60 ENVYSION User Guide ENVYSION
Module Nodes
Use the Navigation Builder to add pre-built modules to your project. Avail- able modules include: Reports, Alarm consoles, Weekly schedules, Calendar schedules, and Page Include nodes.
Module Type Description
Page Include Enables you and your users to embed other ENVYS- ION pages in the current page. This feature is useful for creating tabbed navigation.
Eclypse Alarms Enables you and your users to view and acknowledge alarms from the ECLYPSE controller. To use this fea- ture, you must first configure alarms in EC-gfxProgram.
Eclypse Sched- Enables you and your users to view and create sched- ules ules for the ECLYPSE controller. To use this feature, you must first configure schedules in EC-gfxProgram.
Eclypse Trends Enables you and your users to build and save custom charts using ENVYSION widgets. Using these charts, users can view logged trend data in real-time. To use this feature, you must first configure trend logs in EC- gfxProgram.
Reports Enables you and your users to build and save custom reports using ENVYSION widgets. Using these reports, users can visualize real-time and historical data. To use this feature, you must first configure data in EC-gfxPro- gram.
1. Click Navigation Builder.
2. In the Navigation Builder, select the Module tab.
ENVYSION User Guide 61 3. Drag a module node into the Project Tree on the left. A Node Editor dia- log box opens. 4. If needed, provide details in the Node Editor dialog:
• You can specify an icon to represent this node. If you don't specify an icon, a default icon for the module type is used.
• If this is a schedule, alarm, or page include module, you can specify whether the module appears as a popup panel or a page.
• If this is a schedule module, you can change the locale and the path to the schedule.
• If this is an alarm module, you can select whether alarms are rolled up on opening the module. The user can also select whether alarms are rolled up.
• If this is a Page Include node, see Page Include Module. 5. If needed, drag nodes in the Project Tree to change their order and nest- ing. 6. If needed, right-click each module node to edit its name, icon, and other details.
62 ENVYSION User Guide ENVYSION
Page Include Module
If you want your project to include a page that you created in ENVYSION with- out using xpressENVYSION, use the Navigation Builder to add a page.
The Page Include module allows you to include a page from ENVYSION (.dg5 file) and display it in xpressENVYSION. For instance, this page can also be an HTML file, PDF file, or any other type of file that a browser can display.
1. Make sure the .dg5 file is in your xpressENVYSION project. You can import it from another ENVYSION project, as explained here. 2. Click Navigation Builder.
3. In the Navigation Builder, select the Module tab, and drag the Page Include module to the Project Tree.
4. Right-click the node and select Edit to display the Node Editor dialog.
ENVYSION User Guide 63 5. In Include Type, select the type of file: iframe or .dg5. 6. In Include Path, enter the data path and .dg5 file name to associate with this node. This is useful if this page is used more than once for different data paths. 7. In Name, enter a name for the node, which will appear in the Project Tree and navigation menus. 8. In Icon, drag and drop an image file of icon to represent this node. 9. Right-click the node if you want to edit it.
64 ENVYSION User Guide ENVYSION
Navigation Icons
You can use the Node Editor dialog to edit the node icon that represents a node in the Project Tree and in the navigation menus:
1. Click Navigation Builder.
2. In the Project Tree, right-click a node, and select Edit.
3. Drag an icon to the Icon property in the Node Editor dialog.
4. The icon will be used in the Project Tree and navigation menus.
ENVYSION User Guide 65 Pages and Pop-ups
In ENVYSION, you can use the Node Editor dialog to specify whether a loca- tion or device has a regular page or a pop-up. Pop-ups open in floating or tabbed panels in front of the currently open page. Pop-ups can be viewed only in the Preview or Launched modes.
To change page and pop-up settings:
1. Click Navigation Builder.
2. In the Project Tree, right-click a node and select Edit.
3. Set As Popup to TRUE or FALSE.
See the following images for an example.
66 ENVYSION User Guide ENVYSION
Figure 4: This is an example of a regular page:
Figure 5: This is an example of a page with pop-ups:
ENVYSION User Guide 67 Page and Data Creation
To create or modify pages:
1. Click Page and Data Creator.
2. In the Project Tree, click the "image" icon next to a location node. The location page editor opens.
3. Make sure the Image tab is selected and drag the image file to the speci- fied area. Your page is created, and your image appears in the canvas.
4. At any point, you can click the Widgets tab and then click Submit to save your changes to this page.
68 ENVYSION User Guide ENVYSION
By default, the image fills the whole page. If you want empty space around the image for the widgets, click the settings icon to add padding around the image.
ENVYSION User Guide 69 Zones
This section covers how to add, select, move, duplicate, edit, and delete zones.
Creating a Zone
1. Click Page and Data Creator.
2. In the Project Tree, click the white button next to a location node. The location page editor opens.
3. Select the Zones tab. 4. Use the drop-down menu to select the layer group for the zone.
For example, if this zone is for navigation and a temperature overlay, select Temperature. If you are not sure which group to select, see Layers.
5. Add zone polygons to the image:
a. Select the Draw Zone tool. b. Draw the zone:
• Click to add vertices.
• Double-click to add the last vertex and finish the shape.
70 ENVYSION User Guide ENVYSION
• Right-click anywhere in the canvas to undo the last vertex.
Press ESC to cancel the entire polygon.
c. If needed, click the Edit Zone tool and edit the zone:
• Double-click to add a new vertex.
• Right-click a vertex to delete it.
• Drag a vertex to move it.
6. At any time, you can click the Widgets tab and then click Submit to save your changes to this page.
ENVYSION User Guide 71 Redrawing a Zone
The Redraw command deletes the selected zone and chooses the Draw Zone tool automatically. The zone that you immediately draw has the bindings of the deleted zone.
If you cancel the redraw action by right-clicking, the deleted zone reappears.
To redraw a zone 1. Right-click the zone, and select Redraw. 2. Draw the new zone.
To move a zone 1. With the Select tool as the active tool, click one of the selected zones and drag to move.
To copy and Zones are pasted with the same positions as copied objects. You can copy in paste zones one tab and paste in another tab. To copy and paste the currently selected zone or zones:
1. Use the Select tool to select the zone. 2. Right-click the zone and choose Copy. 3. Use the layer group tabs to choose the layer group where you want to paste the zone. 4. Right-click in the canvas, and choose Paste.
72 ENVYSION User Guide ENVYSION
To duplicate Zones are duplicated with the same position, layer group, and Editor tab as zones the original zone. To duplicate the currently selected zone or zones, right-click the zone and choose Duplicate.
Deleting zones The following interactions delete the currently selected zone or zones:
1. Right-click a selected zone, and choose Delete.
2. In the toolbar, click the Delete tool.
Editing Zone Properties
The following interactions open the Property Inspector so that you can edit zone properties.
1. Right-click the selected zone, and choose Edit Properties OR with the zone selected, toggle the Property Inspector icon in the toolbar. The Property Inspector is displayed. 2. Select the desired background color. The color is applied to the selected zone as shown in the following image.
ENVYSION User Guide 73 The Property Inspector options are displayed in the following table:
Property Purpose
Background Color Specifies how the background color is determined. The value of (default property) Background Color can be one of the following: • None: There is no background color. • Value: The color is determined by the layer. • Status: The color is the status color of the bound metric. • Custom: This color is defined in the Property Inspector. It can be a binding or a selected color.
Background Custom If the Background Color property is set as Custom, this property determines the color of the zone background. This property can also be used to set opacity.
Border Color Specifies how the border color is determined. The value of Border Color can be one of the following: • None: There is no border color. • Value: The color is determined by the layer. • Status: The color is the status color of the bound metric. • Custom: The color is defined in the Property Inspector. It can be a binding or a selected color.
Border Style Specifies the type of line used for the border. The Border Style can be None, Dotted, Dashed, or Solid.
Border Size Specifies the width of line used for the border.
Border Custom If the Border Color property is set as Custom, this property deter- mines the color of the zone border. This property can also be used to set opacity.
Opacity Default Sets the relative opacity when the cursor is not over the zone.
Opacity Mouseover Sets the relative opacity when the cursor is over the zone.
Opacity Duration Sets the length of time that the opacity takes to change. If Opacity Duration is set as the minimum, the opacity changes immediately on mouse-over.
Binding to a Zone
You must bind a Project Tree node to a zone in order to:
• Create layers that show real-time data as colors
• Create navigation using clickable areas that open other pages and pan- els.
74 ENVYSION User Guide ENVYSION
To achieve either effect, you must bind a Project Tree node to the zone.
1. Click Page and Data Creator.
2. In the Project Tree, click the image icon next to a location node. The location page editor opens.
3. Select the Zones tab, and click Edit Bindings. A Project Tree dialog appears.
4. Use the tabs to select the layer group for which to show zones.
5. In the Project Tree dialog, choose the node that you want to bind to the zone, and drag it onto the zone.
ENVYSION User Guide 75 6. To close the binding tree dialog, click again on Edit Bindings.
7. To check the binding, choose the Select tool and then mouse over the zone (in Preview mode). A tooltip displays information about the bound node.
8. At any time, you can click the Widgets tab and then click Submit to save your changes to this page.
76 ENVYSION User Guide ENVYSION
Layers
Layers determine which data metrics are displayed in a page or template. For example, a page can display occupancy data during lighting layer selection and temperature data during heating layer selection. Layer selection affects any object whose binding source is a project tree device node.
You configure layers in a dialog called the Layer Manager. In the leftmost por- tion of the Layer Manager, you can organize layers into groups. These groups affect the text that appears in the Layer Selection Widget. In the rightmost portion of the layer manager, you can edit settings for each layer, including the data metric path to use for each device root and the color values to map onto data values. The color map accepts number and Boolean values. For Boolean values, FALSE corresponds to the minimum value's color and TRUE to the maximum value's color.
The following image shows the two portions of the layer manager.
About Layer Groups
You control layer groups in two places. First, in the Layer Manager, you must control which layers are in which group, which affects the text in the Layer Selection Widget. Secondly, in the layer group tabs in the Page Editor, you can optionally control which objects appear in which group.
You should use layer groups tabs sparingly and only for the purpose of hiding objects based on selection. Do not copy objects and paste them in multiple layer groups for the purpose of displaying different data points. Multiple instances of an object must be loaded by the browser and can negatively affect runtime performance, even if performance speeds are fast in the Edi- tor. Unless you want to hide objects, always create objects using the Default
ENVYSION User Guide 77 layer group tab, and then use layers to change the data values displayed. An item in the Default layer group will always appear, regardless of layer selec- tion. For example, if you want to show HVAC diffusers only when certain lay- ers are selected, and hide the diffusers otherwise, put those diffusers in a non-default layer group and all other items in Default.
Opening the Layer Manager
The following interactions open the Layer Manager:
1. From the Dashboard Manager, click the Layer Manager icon above the Project Tree, as shown in the following image.
2. From the Dashboard Manager, with a node selected that has no page cre- ated yet, click the large Manage Layers button, as shown in the following image.
3. From the Zones or Widgets tab of the Page Editor, click the Layer Man- ager icon, as shown in the following image.
4. Click any of the layer group tabs at the top of the page editor, and select New Layer Group, as shown in the following image.
78 ENVYSION User Guide ENVYSION
Creating a New Layer
To create a new layer in the Layer Manager:
1. In the Layer Manager, click Layer, as shown in the following image.
2. Create a name for the new layer, as shown in the following image, and click Apply.
3. In the leftmost portion of the Layer Manager, drag the new layer and drop it in the appropriate layer group, as shown in the following image.
4. In the rightmost portion of the Layer Manager, define the Point Map for the layer, as shown in the following image.
ENVYSION User Guide 79 You can select one data metric path for each device template root.
5. Optionally, edit the scale minimum and maximum for any zone groups using this layer, as shown in the following image.
6. Optionally, edit the default color and gradient for any zone groups using this layer, as shown in the following image.
To change a color gradient in ENVYSION, first click in the gradient, and then do one of the following: • To change a color value, click the small square below the track in the dialog, and then use the color picker. • To add a color to the gradient, click below the track in the dialog. • To delete a color from the gradient, right-click the small square. • Drag colors to move them.
80 ENVYSION User Guide ENVYSION
Adding a New Layer Group
Layer groups determine which objects appear on a page. Layer groups do not affect device templates.
1. In the Layer Manager, click Group, as shown in the following image.
2. Create a name for the new layer group.
Deleting a Layer or Layer Group
To delete a layer or layer group, in the rightmost portion of the Layer Man- ager, click the Delete icon next to the layer or layer group.
Editing Pages Using Layer Group Tabs
You manage layer groups in the Layer Manager. As you edit pages, you can change which layer group you are editing via tabs in the Page Editor. The fol- lowing image shows an example set of these tabs.
By default, when you create a new page, only the Default layer group tab is included. The following interactions use layer groups when you edit pages:
• To add objects to the Default group, leave the Default tab selected, as shown in the following image.
• To transfer all objects from group A into group B, click the group A tab and choose group B. The following image demonstrates how to move all objects from the Default layer group into the HVAC layer group.
• To add a new layer group tab, click the plus sign, as shown in the follow- ing image.
ENVYSION User Guide 81 • To view objects in group C or add new objects to group C, you can click the group C tab. In the following image, the Energy Usage tab is selected.
• To remove a layer group tab, and delete all of the objects associated with that layer group, click the X, as shown in the following image.
• Objects in the Default layer group appear in all layers. • Objects in non-Default layer groups appear only when the user selects a layer in that group. • The currently selected tab is a lighter color than the unselected tabs.
82 ENVYSION User Guide ENVYSION
Images
Typically, an image of a location serves as the background to a page. You can add images to your location page or device template.
Adding an Image
1. Click Page and Data Creator.
2. In the Project Tree, click the "image" icon next to a location node. The location page editor opens.
3. Select the Image tab. 4. Drag and drop an image file or click to upload an image:
ENVYSION User Guide 83 5. To resize the image, click the properties icon and adjust the padding accordingly. See following procedure: Adding Image Paddings.
6. Click Save .
For information on how to bind data to an image widget, see Binding Data to an Image Widget.
Adding Image Paddings
If you want empty space around the image for widgets, you can set paddings around the image.
1. To set paddings around the image: 2. Open the page in the Page Editor. 3. Select the Image tab.
4. Click the Properties icon , or right-click the image and choose Edit Properties. 5. Edit the padding values.
Paddings are based on the image pixel size, not the page size, so the same numbers might not create the same visual effect for all pictures.
To create a page with no background image, do not add an image, and set right and bottom padding values.
84 ENVYSION User Guide ENVYSION
Widgets
You can add dynamic widgets such as callouts, charts, gauges, and lists to your location page or device template. You also bind data to these different widgets.
Adding a Widget
1. Click Page and Data Creator.
2. In the Project Tree, click the image icon next to a location node. The location page editor opens.
3. Select the Widgets tab. 4. Use the drop-down menu or the tabs to select the layer group for which to edit widgets.
• If you select Default, the widget appears in all layers.
• If you select any other layer group, the widget appears in only that layer group.
ENVYSION User Guide 85 5. Drag a widget onto the page or template.
For location pages, the image always fills the whole page. If you want empty space around the image for widgets, use an image edi- tor to add the space and then re-upload the image.
6. Click Edit Bindings. 7. Drag and drop one of the following onto the widget:
• A device node from the Project Tree. The widget displays the real- time or historical value for the currently visible layer and the bound device. You can change the displayed value by changing the layer.
• A node from the Data Tree. The widget displays the real-time or his- torical data for the node.
• (Device templates only) A data metric from the Points list. The widget displays the real-time or historical value for the bound metric and the current device. You can change the displayed value by opening a dif- ferent instance of the template. 8. If you want, edit the widget:
• Drag the edges of its container to resize it.
• Right-click to delete, copy, paste, duplicate, or arrange the widget.
• Right-click and select Edit Properties to edit the widget's properties.
See also Global Date Range.
86 ENVYSION User Guide ENVYSION
ENVYSION Widgets
Layer Selection Widget
The Layer Selection widget allows the user to control which layer on the image is currently active. You can add this widget to the Default layer to make sure it always appears regardless of the selected layer.
When a layer is selected:
• Zones and widgets for this layer group are visible.
• For color-coded data layers, zones use the data metrics, gradient, and range specified for this layer.
• Widgets use the data metrics specified for this layer.
See Layers.
Date Range Widget
The Date Range Selection widget allows the user to control the global date range. The user specifies a date range and clicks the left or right arrow to go to the previous or next range.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed, or use the sizing handles.
Label Specify a label text or name for the callout. By default, the label will be the name of the Project Tree or Data Tree node.
Display Status Show or hide the graphic that indicates the status.
ENVYSION User Guide 87 Data DVR Widgets
There are two Data Validation and Reconciliation (DVR) widgets, also referred to as the Playback, that push historical data to all zones, callouts, real-time charts, and lists.
The DVR widgets contain a Pause/Play button that the user can click to begin data playback. It also contains a Realtime/Playback toggle; Realtime causes the current values to be displayed and Playback causes values from the global date range to be displayed.
These widgets do not work in edit mode. Click Submit to preview the page and test the widgets.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Range Select a predefined range setting: current, previous, or next range.
Interval Select a time interval.
Rollup Select the rollup interval based on date and time ranges.
88 ENVYSION User Guide ENVYSION
Property Description
Delta Select whether to display the same date range as the widget (none), the next date range relative to the widget (with Next), or the previous range relative to the widget (with Previous).
Speed Adjust the playback speed.
Update Interval Select the update interval time.
Weather Widget
The weather widget displays weather information for a specific location.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing handles.
Postal Code Enter the postal code to display weather information for.
Country Enter the country that goes with the postal code.
Units Choose either Fahrenheit or Celsius.
Image Widget
The Image widget displays an image that you upload.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
ENVYSION User Guide 89 Property Description
Image Drag and drop an image file to this field to upload it or click in the field to select and insert an image.
Button mode To view image as a button. • TRUE: the cursor changes to a pointing hand when the cursor is over the image, to show that the image can be clicked. • FALSE: the cursor does not change to a hand.
This property is useful when you have a Project Tree node bound to the Image widget to create navigation.
Plain Text Widget
The Plain Text and Styled Text callouts are text boxes. The phrase "plain text" does not refer to text-only content. Rather, certain visual aspects of the Styled Text callout are determined by the Callouts Properties in the Style Manager, whereas these aspects of the Plain Text callout cannot be modified.
The following image shows examples of the Plain Text and Styled Text call- outs. In this example, the Styled Text callout inherits its background color and rounded corners from a custom Style.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Display Text Manually enter the text to appear in this widget.
Text Font Select a font for the widget.
Text Size Set a font size for the widget.
Text Color Set a font color for the widget.
Horizontal Align- Set whether the text is left-aligned, centered, or right-aligned. ment
Vertical Alignment Set whether the text is top-aligned, aligned to the vertical center, or bot- tom-aligned.
Padding Set a number of pixels of empty space to enforce between the text and the border of the text box.
Background Set a background color for the text box.
Stroke Set an outline color for the text box.
90 ENVYSION User Guide ENVYSION
Property Description
Stroke Style Set an outline type for the text box.
Stroke Size Set a pixel width for the text box outline.
Round Corners Set a pixel radius for the widget's rounded corners.
Ellipsis Show an ellipsis whenever the text in the text box is too long and is trun- cated.
Button mode To view image as a button.
Visible Turn on or off the visibility of the widget.
Styled Text Widget
The Styled Text widget is a text box that appears by default in the selected style. You can edit the Display Text property to manually enter text, or bind a value to the widget. To edit the widget properties, right-click on the widget and edit the properties as needed:
Display Text Manually enter the text to appear in this widget.
Text Font Select a font for the widget.
Text Size Set a font size for the widget.
Horizontal Align- Set whether the text is left-aligned, centered, or right-aligned. ment
Vertical Alignment Set whether the text is top-aligned, aligned to the vertical center, or bot- tom-aligned.
Padding Set a number of pixels of empty space to enforce between the text and the border of the text box.
Ellipsis Show an ellipsis whenever the text in the text box is too long and is trun- cated.
Button mode To view image as a button.
Node Callout Widget
The Node Callout object displays a formatted value. At the top of the object is a label and a color-coded graphic indicating the status of the data metric.
ENVYSION User Guide 91 For information on how to bind data to a text widget, see Bindings.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed.
Label Specify a label text or name for the callout. By default, the label will be the name of the Project Tree or Data Tree node.
Display Status Show or hide the graphic that indicates the status.
Button Mode Turn on or off the visibility of the widget.
Node List Widget
The Node List widget displays the names, values, and statuses of a list of nodes that you specify. Each item in the list displays information for the bound Project Tree node and layer, or for the bound Data Tree node.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Label Specify a label text or name for the widget.
Display Value Show or hide the graphic that indicates the value.
Display Status Show or hide the graphic that indicates the status.
Series Sets the name, color, data path, and order for each item in this list. You can also change the item order by dragging and dropping items. You can also delete items.
92 ENVYSION User Guide ENVYSION
Data Action Widgets
The Data Action widgets include the following:
• Slider • Combo Box • Toggle Switch • Button Widget
Slider
The slider widget allows you to drag a handle to select a specific value from a range.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Label Specify a label text or name for the widget.
Min and Max Specify the minimum and maximum values of the range slider.
Step Specify the increment values on the slider scale.
Gradient Select the gradient color of the slider handle.
Show Limits Toggle on or off the range slider minimum and maximum values.
Source Displays the point path (i.e., /Data/LocalDevice/AnalogValues/…)
Point Displays the point name.
Value Displays the point's current present value.
Action Select the type of point action from the dropdown list.
Styles Specify if the widget style is inherit or not.
Combo Box
The combo box widget allows you to create a list of selectable items displayed in a dropdown list.
ENVYSION User Guide 93 To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Label Specify a label text or name for the widget.
Source Displays the point path (i.e., /Data/LocalDevice/MultistatesValues/…)
Point Displays the point name.
Value Displays the point's current present numeric enumeration value. A string enumeration can be created in the Value Map section as described below.
Action Select the type of point action from the dropdown list.
Value Map Specify the list of values in the dropdown list. Click the add icon to add a label and value. Click the delete icon to remove a label and value.
Styles Specify if the widget style is inherit or not.
Toggle Switch
The toggle switch widget allows you to change a setting between two states (TRUE and FALSE).
94 ENVYSION User Guide ENVYSION
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Label Specify a label text or name for the widget.
Source Displays the point path (i.e., /Data/LocalDevice/BinaryValues/MyPoint- Name.
Point Displays the point name.
Value Displays the point's current value.
Label True Specify a label text for the TRUE state (On, True, Yes, etc.)
Label False Specify a label text for the FALSE state (Off, False, No, etc.)
Action Select the type of point action from the dropdown list.
Styles Specify if the widget style is inherit or not.
Button Widget
The button widget allows you to perform an action when the button is clicked. To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing handles.
Label Specify a label text or name for the widget.
Source Displays the point path (i.e., /Data/LocalDevice/BinaryValues/…)
Point Displays the point name.
Value Displays the point's current value.
Action Select the type of point action from the dropdown list.
Default Enter the default output value.
Map Select the Map checkbox to enter input/output mapping values.
Styles Specify if the widget style is inherit or not.
ENVYSION User Guide 95 nLight Widgets
The nLight widgets are used with the nLight system in xpressENVYSION, as well as with ECLYPSE. These widgets are used to interface with standard control devices such as luminaires (light), switches, occupancy sensors, and photocells.
• Photocell Widget • Switch Widget • Occupancy Sensor Widget • Light Widget
Photocell Widget
The photocell widget displays the lux level and the photocell status.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Source Displays the point path.
Point Displays the point name.
Value Displays the point's current value.
Widget Style Select various widget styles: • Select the unit suffix (lux). • Select the outline color of the widget. • Select the status colors when the widget is OK, in alarm, overridden, or in fault. The color changes according to the device status and can be modified.
Tooltip Style Select the tooltip's background and foreground colors as well as toggle on and off the point name.
Using the 1. From the nLight library, drag and drop the widget on the page. photocell widget 2. Open the Binding dialog . 3. In the Data tab, locate the photocell object that will be bound (i.e., nLight system: 0106BFD5 - nWSX-LV-DX - Measured Light Level).
96 ENVYSION User Guide ENVYSION
4. Select the object and drag and drop it on the widget. The widget is now linked.
Switch Widget
The switch widget displays the physical status of the switch.
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Source Displays the point path.
Point Displays the point name.
Value Displays the point's current value.
Widget Style Select various widget styles: • Select the text that will be displayed when the device is on (On Text) and off (Off Text) • Select the outline color of the widget. • Select the status colors when the widget is OK, in alarm, overridden, or in fault. The color changes according to the device status and can be modified.
Tooltip Style Select the tooltip's background and foreground colors as well as toggle on and off the point name.
Using the switch 1. From the nLight library, drag and drop the widget on the page. widget 2. Open the Binding dialog . 3. In the Data tab, locate the switch object that will be bound (i.e., nLight system: 0106BFD5 - nWSX-LV-DX - Online). 4. Select the object and drag and drop it on the widget. The widget is now linked.
ENVYSION User Guide 97 Occupancy Sensor Widget
The occupancy sensor widget displays the occupancy status.
Unoccupied Occupied
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Source Displays the point path.
Point Displays the point name.
Value Displays the point's current value.
Widget Style Select various widget styles: • Select the text that will be displayed when the status is occupied and unoccupied. • Select the outline color of the widget. • Select the status colors when the widget is OK, in alarm, overridden, or in fault. The color changes according to the device status and can be modified.
Tooltip Style Select the tooltip's background and foreground colors as well as toggle on and off the point name.
Using the 1. From the nLight library, drag and drop the widget on the page. occupancy sensor widget 2. Open the Binding dialog . 3. In the Data tab, locate the occupancy sensor object that will be bound (i.e., nLight system: 0106BFD5 - nWSX-LV-DX - Occupied P1). 4. Select the object and drag and drop it on the widget. The widget is now linked.
Light Widget
The light widget displays the light value (On/Off), the status of the light (alarm, fault, ok), and the light dimming status (50%).
98 ENVYSION User Guide ENVYSION
Figure 6: Types of light widgets
On Off Widget color can also change to show widget status
Depending on the nLight object that is bound to the widget, the widget will dis- play a dynamic pop-up menu that is used to set the desired status. The widget works in three different ways:
1. On/Off
Clicking the Light On or Light Off button will respectively turn on and off the light.
Figure 7: Light widget - On/Off only
See Using the light widgets with an nLight device and Using the Light widgets with ECLYPSE or EC-Net objects.
2. On/Off and Dimming
• Clicking the Light On or Light Off button will respectively turn on and off the light.
• Using the slider or up/down buttons will dim the light by 5% increments (configurable).
See Using the light widgets with an nLight device and Using the Light widgets with ECLYPSE or EC-Net objects.
3. Dimming Only
• Clicking the Light On or Light Off button will respectively set the light to 100% and 0%.
• Using the slider or up/down buttons will dim the light by 5% increments (configurable).
For Dimming Only, see Using the Light widgets with ECLYPSE or EC-Net objects.
ENVYSION User Guide 99 Figure 8: Light widget - On/Off and Dimming or Dimming only
To edit the widget properties, right-click on the widget and select Edit Proper- ties:
Property Description
Position & Size Resize and position the widget as needed or use the corner sizing han- dles.
Priority Dim Source Displays the priority dimming point path. Used with ECLYPSE points.
Priority Relay Source Displays the priority relay point path. Used with ECLYPSE points.
Eclypse Write Priority Select the ECLYPSE write priority value.
Step Increment Select the step increment.
Write Delay Seconds Select the number of seconds for the write delay.
Reset Bindings Select Invoke to reset the bindings.
Relay Source Displays the relay point path.
Relay Point Displays the relay point name.
Relay Value Displays the point's current value.
Dimming Source Displays the dimming point path.
Dimming Point Displays the dimming point name.
Dimming Value Displays the dimming point current value.
Widget Style Select various widget styles: • Select the text that will be displayed when the device is on (On Text) and off (Off Text). • Show or hide the icon text. • Select the outline color of the widget. • Select the status colors when the widget is OK, in alarm, overrid- den, or in fault. The color changes according to the device status and can be modified.
Callout Style Select the different callout styles: background and foreground colors, highlight background and foreground colors, and accent color.
100 ENVYSION User Guide ENVYSION
Using the light The following procedure is used to bind both On/Off and On/Off and Dimming widgets with an points. See Light Widget. nLight device 1. From the nLight library, drag and drop the Light widget on the page.
2. Open the Binding dialog . 3. In the Data tab, locate the nLight device or the object that will be bound. For an nLight Device, the device node must be linked directly to the wid- get. 4. Select the device node and drag and drop it on the widget. The widget is now linked to the nLight device.
Using the Light The following procedure is used to bind On/Off, Dimming, and On/Off and widgets with Dimming points. See Light Widget. ECLYPSE or EC- Net objects When using objects other than nLight BACnet objects such as an ECLYPSE standard BACnet objects (e.g., AV, BV, MSV, etc.), you cannot drag and drop a value to the widget directly. You must drag and drop it to the pertaining field in the Property Inspector as shown in the following instructions:
1. From the nLight library, drag and drop the widget on the page.
2. Open the Binding Dialog and the Property Inspector . 3. In the Data tab, locate the object that will be bound. (Boolean Value (On/ Off) and/or Analog Value (0-100)). 4. Select the object and drag and drop it on the fields in the Property Inspec- tor as shown below.
5. Click the blue dot at the right of the blue binding box.
ENVYSION User Guide 101 6. In the Input Field dropdown list, select Path to link the widget to the object.
7. Repeat steps 4 to 6 as needed for the relay or dimming source.
102 ENVYSION User Guide ENVYSION
Chart Widgets
The Line Chart and Area Chart widgets overlay the historical values for speci- fied data metrics. In an area chart, by default the Series Type is set to Stacked, so that the series show contributions to a total.
All historical charts-that is, line charts, area charts, and charts where the Show Current Value property is FALSE-use the global date range. See Global Date Range.
• Line Chart Widget • Area Chart Widget • Column Chart Widget • Area Chart Widget • Column Chart Widget • Bar Chart Widget • Pie Chart Widget • Radial Gauge Widget
Line Chart Widget
The Line Chart widget overlays the historical values for specified data metrics. To enable the user to set a date range for historical data widgets, including the line chart, add a Date Range widget.
Property Description
Custom Range Select a custom date range.
Historic Delta Select whether the chart will show: • The same date range as the Date Range widget (none) • The next date range relative to the Date Range widget (with Next) • The previous range relative to the Date Range widget (with Previous)
ENVYSION User Guide 103 Property Description
Range Select the range: current, previous, or next
Interval Select the time interval.
Delta Select whether to display the same date range as the widget (none), the next date range relative to the widget (with Next), or the previous range relative to the widget (with Previous).
Rollup Set the interval for the chart rollup. One point is plotted per instance of the interval.
Label Enter the label text or name of the chart.
Legend Show or hide the chart legend.
Legend Click Define the legend action when clicking: None, toggle, action, or navigate.
Update Interval- Set the axis range minimum to zero to decrease unused space on the Replace asBase chart. at Zero
Export CSV Export the chart data to a .csv format.
Visible Turn on or off the visibility of the widget.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
Area Chart Widget
The Area Chart widget overlays the historical values for specified data met- rics. It is like the line chart, except that the area below the line is filled in.
To enable the user to set a date range for historical data widgets, including the area chart, add a Date Range widget.
104 ENVYSION User Guide ENVYSION
Property Description
Custom Range Select a custom date range.
Historic Delta Select whether the chart will show: • The same date range as the Date Range widget (none) • The next date range relative to the Date Range widget (with Next) • The previous range relative to the Date Range widget (with Previous)
Range Select the range: current, previous, or next
Interval Select the time interval.
Delta Select whether to display the same date range as the widget (none), the next date range relative to the widget (with Next), or the previous range relative to the widget (with Previous).
Rollup Set the interval for the chart rollup. One point is plotted per instance of the interval.
Label Enter the label text or name of the chart.
Legend Show or hide the chart legend.
Legend Click Define the legend action when clicking: None, toggle, action, or navigate.
Update Interval Select the update interval time
Replace as To replace the current chart by another type of chart
Base at Zero Set the axis range minimum to zero to decrease unused space on the chart.
Export CSV Export the chart data to a .csv format.
Visible Turn on or off the visibility of the widget.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
ENVYSION User Guide 105 Column Chart Widget
The Column Chart widgets display the historical or real-time values for speci- fied data metrics.
Property Description
Custom Range Select a custom date range.
Historic Delta Select whether the chart will show: • The same date range as the Date Range widget (none) • The next date range relative to the Date Range widget (with Next) • The previous range relative to the Date Range widget (with Previous)
Range Select the range: current, previous, or next
Interval Select the time interval.
Delta Select whether to display the same date range as the widget (none), the next date range relative to the widget (with Next), or the previous range relative to the widget (with Previous).
Rollup Set the interval for the chart rollup. One point is plotted per instance of the interval.
Show Current Show or hide the current value in the chart. Value
Label Enter the label text or name of the chart.
Legend Show or hide the chart legend.
Legend Click Define the legend action when clicking: None, toggle, action, or navigate.
Update Interval Select the update interval time
Replace as To replace the current chart by another type of chart
Base at Zero Set the axis range minimum to zero to decrease unused space on the chart.
Export CSV Export the chart data to a .csv format.
106 ENVYSION User Guide ENVYSION
Property Description
Visible Turn on or off the visibility of the widget.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
Bar Chart Widget
The Bar Chart widgets display the historical or real-time values for specified data metrics.
Property Description
Custom Range Select a custom date range.
Historic Delta Select whether the chart will show: • The same date range as the Date Range widget (none) • The next date range relative to the Date Range widget (with Next) • The previous range relative to the Date Range widget (with Previous)
Range Select the range: current, previous, or next
Interval Select the time interval.
Delta Select whether to display the same date range as the widget (none), the next date range relative to the widget (with Next), or the previous range relative to the widget (with Previous).
Rollup Set the interval for the chart rollup. One point is plotted per instance of the interval.
Show Current Show or hide the current value in the chart. Value
Series Type Show the series in clustered, overlaid, stacked, or 100% mode.
Label Enter the label text or name of the chart.
Legend Show or hide the chart legend.
ENVYSION User Guide 107 Property Description
Legend Click Define the legend action when clicking: None, toggle, action, or navigate.
Update Interval Select the update interval time
Replace as To replace the current chart by another type of chart
Base at Zero Set the axis range minimum to zero to decrease unused space on the chart.
Export CSV Export the chart data to a .csv format.
Visible Turn on or off the visibility of the widget.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
Pie Chart Widget
The Pie Chart widget displays relative values for specified data metrics.
Property Description
Label Enter the label text or name of the chart.
Legend Show or hide the chart legend.
Legend Click Define the legend action when clicking: None, toggle, action, or navigate.
Replace as To replace the current chart by another type of chart
Visible Turn on or off the visibility of the widget.
Export CSV Export the chart data to a .csv format.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
108 ENVYSION User Guide ENVYSION
Radial Gauge Widget
The radial gauge displays the real-time value of the data metric using a semi- circular gauge.
Property Description
Label Set the title text at the top of the widget.
Min Set the minimum of the gauge range.
Max Set the maximum of the gauge range.
Legend Show or hide the chart legend.
Legend Click Sets what happens when the user clicks an item in the legend. The value of Legend Click can be one of the following: • None: Nothing happens. • Toggle: Clicking an item shows or hides that item's series. • Action: Clicking an item does data actions on that item's data metric. • Navigate: Clicking an item opens a location in the project.
Replace as Replaces this gauge with the specified chart type when a menu item is selected. The new chart will have the same data and properties that this gauge had, where possible.
Export CSV Sets whether this gauge has an Export CSV button in the top right corner that allows the user to export its data as a CSV file.
Series In this area, you can rename the binding data, change the data color as it appears in the chart, and click the button to remove the binding data.
ENVYSION User Guide 109 Global Date Range
This page covers the global date range for xpressENVYSION.
The project has a global date range that affects what data is displayed. The user can change the global date range in the following contexts:
• Date Range Selection widgets
• Alarms modules
The global date range affects the above contexts and also the following con- texts:
• DVR widgets
• Line and area charts
• Bar and column charts for which the Show Historical property is set to TRUE
You can override the global date range for a particular object using that object's Custom Range property.
Changing the Global Date Range
To change global date range for all relevant contexts:
1. Navigate to a Date Range Selection widget or an Alarms module 2. Click the current date range, and then choose a range. The following image demonstrates how to click the current date range in an Alarms console.
The following image demonstrates how to click the current date range in a Date Range Selection widget.
3. Use the arrows next to the date range to choose the next or previous range.
110 ENVYSION User Guide ENVYSION
Bindings
When you create a binding to a property, you force that property to assume the value of the binding source. The target property then updates in real time as the source value changes.
Properties can control appearance and behavior. There are several kinds of properties. For example:
• Numerical can display a numerical value such as a set point.
• Boolean can display a value that can be True or False, On or Off, etc.
• Text can display the path of an image asset.
• Enumeration (Enum) lets you select from a set of options such as in a combo box or drop-down list.
As part of configuring the objects in your pages and templates, you create bindings. You create a binding by dragging a binding source and dropping it on a binding target.
Binding Sources
You find binding sources in the Binding Dialog. The Binding Dialog is not available in the Image tab of the Page Editor. The following image shows the Binding Dialog.
The Binding Dialog contains three tabs that hold the following four kinds of binding sources:
Source Type Description
Points (Templates Represents a relativized data metric available to this template. only) This binding retrieves a metric that is determined by the template instance. Auto action: Data Action List.
ENVYSION User Guide 111 Source Type Description
Project Tree non- Represents a page or module in this project. device nodes This binding retrieves a project path. Auto action: Navigation.
Project Tree Represents a device in this project. device nodes This binding retrieves a project path that is determined by the template instance and a metric that is determined by the layer. Auto action: Data Action List.
Data Represents an absolute path in the data source. Retrieves a data node. Auto action: Data Action List.
Binding Targets
Binding targets can be divided into the following three categories:
Target type Description
Single Metric Includes zones and callouts, except for the Node List callout. These targets hold multiple pieces of information about one metric. A new Single Metric binding overrides the old one.
Series Metric Includes charts, gauges, and Node List callouts. These targets have series; they hold multiple pieces of information about one or more metrics. A new Series Metric binding adds another series.
Property Includes any single property of an object. These targets determine a single property based on a single piece of infor- mation. If the target is an object, the binding source value determines the value of the object's default property. If the target is a property, the binding source value determines the value of that particular property. Conversion bindings can be created with this kind of binding target.
Typical Binding Behavior
Generally, a binding retrieves information from the source, displays that infor- mation in the target, and creates a default action called an Auto action.
You can override default actions by using custom actions.
The following image shows an example of a Node List callout that has five metrics bound to it. The Node List callout displays metric information, and clicking a node list item invokes the default action type.
112 ENVYSION User Guide ENVYSION
The following image demonstrates an example of a binding. Because the binding in this image has a Point source, this binding retrieves the Damp- er_Position metric for the currently open template and creates a Data Action List action. Because the binding in this image has a Property target, the met- ric value affects the HVAC tile's default property.
The following image demonstrates another binding example. Because this binding has a Point source, this binding will retrieve information for the cur- rently open template, and a Data Action List action is created. Because this binding has a Series Metric target, the metric will be added as a series.
Conversion Bindings
If the binding target is in the Property category, you can optionally change that binding to a conversion binding. In a conversion binding, the target value is determined as the result of performing calculation, formatting, or mapping on the source value.
A binding that can be changed to a conversion binding is surrounded by a blue rectangle in the Property Inspector, as shown in the following image.
ENVYSION User Guide 113 Opening and Closing the Binding Dialog or Prop- erty Inspector
The Binding Dialog is not available in the Image tab of the Page Editor. The following interactions open or close the Property Inspector.
• Right-click the selected object, and select Edit Properties.
• With the object selected, toggle the Properties icon in the toolbar.
To display the properties for a different object, you can keep the Property Inspector open and select different objects.
Creating a Drag-and-Drop Binding
To create a drag-and-drop binding:
1. If this is a page, choose a layer group tab, or leave the layer group as Default. See Layers. 2. In the Binding Dialog, select the Points, Project, or Data tab. 3. Drag the binding source, and drop it on the binding target. The binding has been created. You can click Preview in the toolbar to preview it.
The following image demonstrates dragging a binding source to a binding tar- get.
Changing a Drag-and-Drop Binding into a Conver- sion Binding
You can change any drag-and-drop binding into a conversion binding, except for bindings where the target is a zone, chart, gauge, or callout. In other
114 ENVYSION User Guide ENVYSION
words, any binding where the target is of the Property type can be changed to a conversion binding.
To create a conversion binding, first you must create a drag-and-drop binding as described above.
To change a 1. In the Property Inspector, click the blue dot next to the property, as shown binding into a in the following image. This opens the Conversion Binding popup win- conversion dow. binding
2. In the Conversion Binding popup window, specify the following:
• Input Field: This input field is an aspect of the binding source, such as name, status, or value.
• Conversion: A conversion type.
• The required information for the conversion type: Each type of con- version binding requires different information. See Using Conversion Binding Types. 3. Close the Property Inspector. The conversion binding is created.
Using Conversion Binding Types
The following are the possible types of conversion bindings:
• None-No conversion is used. The binding target equals the binding source.
• Value Map-The binding compares the source value to one or more Input values in order from top to bottom, until it encounters a true statement. Then, it returns the Output associated with the true statement. If none of the statements is true, it returns the Default value.
The following image shows an example of a Value Map conversion. In this example, the zone is green if the source value is true, then red if the source value is false, and then black if the source value is neither true nor false.
ENVYSION User Guide 115 For numbers, a Value Map conversion evaluates whether the source value is less than or equal to each Input value. For other data types, a Value Map conversion checks whether the source value is equal to each Input value.
To create a Value Map conversion, you must define the following: Input Field, Inputs, Outputs, and Default. To add more inputs and outputs, click the green dot. To delete an Input and Output pair, click the red dot.
Expression A custom expression determines the string that displays the value. The expression can include a number formatting string within square brackets. The expression can also include other strings, such as unit names. To create an Expression conversion, you must define the following: Input Field and Expression.
The following image shows an example of an Expression conversion.
An Expression conversion can also call the value of other key/value pairs associated with this metric. For example, to call the status, use [status]. The following can be called:
116 ENVYSION User Guide ENVYSION
• status • formattedValue • updateTime •valueName • type • icon •path •point •meta •value •vFormatted • vTooltip • status • update (DVR time or the last update time)
Number offset The target value is calculated based on the source value, an operator, and a number. To create a Number Offset conversion, you must define the following: Input Field, Offset, and Offset Val.
The following image shows an example of a Number Offset conversion. In this example, the gauge maximum is set as the current value plus 20.
Number scale Based on the source value's relationship to a scale, the target value is calcu- lated as the corresponding value on a different scale. To create a Number Scale conversion, you must define the following: Input Field, Input Min and Max, and Output Min and Max.
Gradient scale Based on the source value's relationship to a scale, the target value is calcu- lated as the corresponding value on a color gradient. To create a Gradient Scale conversion, you must define the following: Input Field, Input Min and Max, and Gradient.
ENVYSION User Guide 117 Conversion Binding Properties
The following are properties that you configure as part of a conversion bind- ing.
Property Relevant Bindings Purpose
Input Field All Specifies the aspect of the input data metric that is used for the binding. For example, this might be Sta- tus, Value, or Name.
Binding Path All Specifies the absolute path to the data metric. For templates, if the original binding source is a Point, then when you edit the Binding Path property you change the binding source to an absolute location.
Conversion All Specifies the type of conversion.
Inputs Value Map Specifies each test value to compare with the source value.
Outputs Value Map Specifies each value to assign to the target if the expression with the corresponding Input evaluates to TRUE.
Default Value Map Specifies a value to assign to the target if none of the expressions evaluate to TRUE.
Expression Expression Specifies the string to use to format the source value. This creates the target value as a formatted string. The Expression can include a number for- mat pattern. The Expression can also include other strings, such as units. Number format patterns must be in square brackets ([]). The string value enclosed in square brackets becomes the exact source value, as a string.
Offset Number Offset Specifies the offset operator that is used to modify the target value. The value of the Offset property can be one of the following: • Add: The source value and Offset Value prop- erty are added together. • Subtract: The Offset Value property is sub- tracted from the source value. • Multiply: The source value and Offset Value property are multiplied together. • Divide: The source value is divided by the Off- set Value property. A decimal value is returned.
Offset Val Number Offset Specifies the number that is used to modify the tar- get value.
118 ENVYSION User Guide ENVYSION
Property Relevant Bindings Purpose
Input Min Number Scale, Gra- Specifies the lower bound of the original scale. dient Scale
Input Max Number Scale, Gra- Specifies the upper bound of the original scale. dient Scale
Output Min Number Scale Specifies the lower bound of the new scale.
Output Max Number Scale Specifies the upper bound of the new scale.
Gradient Number Scale Determines the colors for a gradient. To add colors, click below the track in the dialog box. To delete col- ors, right-click them in the dialog box.
Binding Data to Widgets
To bind a data value to a text widget:
1. Drag a Plain text widget onto the page or template.
2. Click the bindings icon or right-click on the widget and select Bind Data. The binding dialog is displayed.
3. Click properties icon or right-click on the widget and select Edit Prop- erties. The Property Inspector dialog is displayed. 4. Drag and drop a node from the Data Tree onto the Display Text field in the Property Inspector to bind that value to the widget.
The widget displays the real-time or historical data for the node. You can also bind to a device node from the Project Tree.
ENVYSION User Guide 119 5. To edit the binding path, click on the blue dot next to the binded value. The binding properties are displayed.
6. Select the Value Formatted property in Input Field. The value will appear formatted (e.g., 71.2ºF). You can also edit the other binding prop- erties as needed:
Property Description
Binding Type Shows the data type of the value.
Binding Path Shows the data path of the bound metric.
Input Field Select the type of input to display (formatted value, status, name of data point, path, etc.).
Input Value Shows the value associated with the data point.
Conversion Select the value conversion as a value map, expression, number offset, number scale (range), or a color gradient scale.
Output Value Shows the output value.
Unbind To unbind the data.
120 ENVYSION User Guide ENVYSION
Binding Data to the Widget's Background Color
You can also bind a value to other properties:
1. Drag the data point to the text widget Background.
The default value color is assigned to the background and the binding proper- ties are displayed.
2. In the Conversion field, set the conversion property to Value Map to assign different color outputs to different input values.
ENVYSION User Guide 121 Binding Data to an Image Widget
To bind a data value to an image widget:
1. Drag an image widget onto the page or template.
2. Click properties icon or right-click on the widget and select Edit Prop- erties. The Property Inspector dialog is displayed. 3. Drag and drop an image file in the image property.
4. Right-click on the widget and select Bind Data. The binding dialog is dis- played. 5. Drag and drop a data point onto the image property and click the blue dot to edit the binding properties.
122 ENVYSION User Guide ENVYSION
6. In the Input Field property, select Value Formatted. 7. In the Conversion property, select Value Map. 8. Drag and drop an image file to output when input is at True and another image to output when input is at False.
You can bind various types of data other than data points, but also simple information such as colors and font size.
Previewing a Binding
To view tooltips that indicate the sources of all bindings, and to preview user interactions with target objects, you can preview the page or template.
ENVYSION User Guide 123 Deleting a Binding
You can't delete a binding to a Single Metric binding target. Instead, you can replace the old binding with a new one. To delete other bindings:
1. Click the blue dot next to the property. This opens the Conversion Bind- ing popup window. 2. In the popup window, click Unbind.
124 ENVYSION User Guide ENVYSION
Actions
Actions are application behaviors that occur in response to events. For exam- ple, an action can navigate to a project node when the user clicks an object. An action can also affect a value in the data source or open an external link.
When you create a binding to the Single Metric or Series Metric binding target types, an action is automatically created. You can override these automati- cally created actions. You can also create new actions. Actions are applica- tion behaviors that occur in response to user events such as clicking.
You can create an action for an object or for a series. If you create an action for a series, then clicking the series in the legend triggers the action.
When an action exists on an object of the Series Metric type, that object has a "hamburger" menu icon in its title bar, as shown in the following image. This is because individual series in the object can also have actions.
Adding an Action to an Object
1. Select the object and open the Property Inspector. 2. Click the Add Action button in the Property Inspector, as shown in the following image.
3. Specify an event to trigger the action, as shown in the following image.
4. Specify a target, if different from the default, as shown in the following image. See Actions Properties.
ENVYSION User Guide 125 5. Specify an action type, as shown in the following image.
6. If necessary, specify property values for the action. See Actions Proper- ties. The action is created.
Adding an Action to a Series
1. Select the object and open the Property Inspector. 2. Click the Binding icon next to the series, as shown in the following image.
3. Using the popup dialog, follow steps 3-6 from Adding an Action to an Object.
Editing an Action
1. Select the object and open the Property Inspector. 2. Edit the action properties. See Actions Properties.
126 ENVYSION User Guide ENVYSION
Deleting an Action
1. Select the object and open the Property Inspector. 2. Click the red X, as shown in the following image.
Actions Properties
The following are editable properties of an action.
Property Purpose
Event Sets the user interaction that triggers the action. The value of the Event property can be Click, Right Click, or Double Click.
Target Sets the project tree node, data node, or relativized point that this action affects. See Binding Sources.
Action Sets the action type. The value of the Action property can be one of the following: • None: No action occurs. • Auto: The default action for this binding source occurs. See Binding Sources. • Data Action List: The Data Action List opens. The user can configure and invoke an action. See also: Edit Actions property. • Data Action: The specified Data Action occurs. See also: Type and Edit Parameters properties. • Navigation: The specified project content opens. See also: Target property. • Hyperlink: The specified external page opens.
Path (Hyperlink Sets the path to open for a Hyperlink action. The Path property must only) begin with a prefix such as http:// or https://
Type (Data Action Sets the type of data action that occurs, such as Set or Override. only)
Edit Parameters Sets the parameters of the data action that occurs, such as an override (Data Action only) value.
Edit Actions (Data Sets which actions appear in the drop-down. You can also use this prop- Action List only) erty to set the names that appear to represent the actions to the user.
ENVYSION User Guide 127 Multiple Actions in Response to the Same Event
You can create multiple actions in response to the same event. This is useful for creating objects such as a button that overrides all of the space tempera- ture values on a floor. If multiple actions are invoked by the same event, they will occur in the following order:
1. The bottommost Auto action in the list. 2. The bottommost Data Action List action in the list. 3. All Data Actions. If there are multiple Data Actions on the same metric, only the bottommost action for each metric will occur. 4. The bottommost Navigate action in the list. 5. All Hyperlink actions in the list.
Creating an Action with a Node Callout
To create an action, you must first select an existing widget or add a new one. See Adding a Widget. This example is based on a Node Callout widget.
1. Drag a Node Callout widget onto the page or template.
2. Click the bindings icon or right-click on the widget and select Bind Data. The binding dialog is displayed.
3. Click properties icon or right-click on the widget and select Edit Prop- erties. The Property Inspector dialog is displayed. 4. Drag and drop a point from the binding dialog onto the Node Callout wid- get. The data value appears in the widget.
The associated data is displayed in the node callout:
128 ENVYSION User Guide ENVYSION
5. In the Property Inspector, enter a name for the callout in the Label prop- erty.
6. In the Actions section, select the Event that invokes an action: Click, Right click or Double click.
7. In the Target parameter, the binding path is displayed. You can drag a point to the Target parameter to change the binding. 8. In the Action parameter, select one of the following depending on the desired action:
ENVYSION User Guide 129 Property Description
None Disable the action.
Auto Default action based on the bound target.
Data Action List Define a list of actions and rename them as needed. See Defining a data action list.
Data Action Select a type of action and for configure the different parameters for some action. See Defining a data action.
Navigation Set the action to go to the bound target in the navigation tree.
Hyperlink Enter a URL to open the Web page directly, for example http://www.dis- tech-controls.com
Continue with the following procedures:
Defining a data 1. In the Action parameter, select Data Action List and click Edit Actions. action list A list of predefined commands is displayed.
2. Unselect the commands that you do not need by clicking the checkmark, and rename the desired commands as needed, for example:
130 ENVYSION User Guide ENVYSION
3. If needed, click Add Action if you wish to add an additional action. You can assign multiple commands to be sent by different actions (e.g., click to display a menu, double-click to open a URL). Or one click can launch an action to multiple data points for example, to reset all points to factory defaults.
4. To test the actions you configured, click Save and click Preview . 5. Navigate to your location or widget and perform the action you config- ured: Click on the node callout, the data action list you defined is dis- played.
ENVYSION User Guide 131 Defining a data 1. Select Data Action. The Type field appears where you can select the action type of action.
2. Select the type of action required from the list. 3. For the purpose of this procedure, select Override. The Edit Parameters option is displayed. 4. Click Edit Parameters. The options displayed will change according to the type of action you selected. 5. For the Override type, you can set the values as required.
You can also bind data to any other type of property such as font size, colors, display name, etc. by dragging the data point onto the property you wish to bind to.
132 ENVYSION User Guide ENVYSION
Creating an Action with a Text Callout
To create an action, you must first select an existing widget or add a new one. See Adding a Widget. This example is based on a Text Callout widget.
1. Drag a Plain Text or Styled Text widget onto the page or template.
2. Click the bindings icon or right-click on the widget and select Bind Data. The binding dialog is displayed.
3. Click properties icon or right-click on the widget and select Edit Prop- erties. The Property Inspector dialog is displayed. 4. Drag and drop a point from the binding dialog onto the Display Text prop- erty in the Property Inspector. The data value appears in the widget.
5. Next to the Display Text parameter, click the blue dot to configure the binding properties.
Property Description
Binding Type Shows the data type of the value.
ENVYSION User Guide 133 Property Description
Binding Path Shows the data path of the bound metric.
Input Field Select the type of input to display (formatted value, status, name of data point, path, etc.)
Input Value Shows the value associated to the data point.
Conversion Select the value conversion as a value map, expression, number offset, number scale (range), or a color gradient scale.
Output Value Shows the output value.
Unbind To unbind the data.
6. In the Properties section, you can edit the widget properties as needed such as the font, alignment, text color, background color, etc. 7. Select Visible if you wish to make this widget invisible. When turning off the visibility, the binding data still remains so you can easily make the wid- get visible again without redoing the binding. For example, when cooling is off, you can hide the widget and make it visible only when cooling is back on.
8. To add an action to this text widget, in the Actions section, click Add Action. 9. Select the Event that invokes an action: Click, Right click or Double click.
10. In the Target parameter, the binding path is displayed. You can drag a point to the Target parameter to change the binding. 11. In the Action parameter, select one of the following actions depending on the desired action:
134 ENVYSION User Guide ENVYSION
Property Description
None Disable the action.
Auto Default action based on the bound target.
Data Action List Define a list of actions and rename them as needed. See Defining a data action list.
Data Action Select a type of action and configure the different parameters for some action. See Defining a data action.
Navigation Set the action to go to the bound target in the navigation tree.
Hyperlink Enter a URL to open the Web page directly, for example http://www.distech- controls.com
Creating an Action with a Node List
To create an action, you must first select an existing widget or add a new one. See Adding a Widget. This example is based on a Node List widget.
1. Drag a Node List widget onto the page or template.
2. Click the bindings icon or right-click on the widget and select Bind Data. The binding dialog is displayed.
3. Click properties icon or right-click on the widget and select Edit Prop- erties. The Property Inspector dialog is displayed. 4. Drag and drop a point from the binding dialog onto the Node List widget.
ENVYSION User Guide 135 The associated data is displayed in the widget.
5. In the Property Inspector, enter a name for the node list in the Label prop- erty. You can edit the other properties as needed. In Series, you can view the name, color, and path of the data point.
Property Description
Label Specify a label text or name for the widget.
Display Value Show or hide the graphic that indicates the value.
Display Status Show or hide the graphic that indicates the status.
Visible Turn on or off the visibility of the widget.
Series Click the button to remove the most recently added list item.
136 ENVYSION User Guide ENVYSION
6. Click the link icon to assign an action for the node list series.
7. Select the Event that invokes an action: Click, Right click or Double click.
8. In the Target parameter, the binding path is displayed. You can drag a point to the Target parameter to change the binding. 9. In the Action parameter, select one of the following actions depending on the desired action:
Property Description
None Disable the action.
Auto Default action based on the bound target.
Data Action List Define a list of actions and rename them as needed. See Defining a data action list.
ENVYSION User Guide 137 Property Description
Data Action Select a type of action and configure the different parameters for some action. See Defining a data action.
Navigation Set the action to go to the bound target in the navigation tree.
Hyperlink Enter a URL to open the Web page directly, for example http://www.dis- tech-controls.com
10. To add an action to the node list widget, in the Actions section, click Add Action. 11. Complete the fields as needed to create a node list action.
138 ENVYSION User Guide ENVYSION
Device Templates
A device template is a dynamic, graphical panel that represents certain devices. Each instance of the panel shows information for a particular device.
Creating a Device Template
1. Click Page and Data Creator.
2. In the Project Tree, click the image icon next to a location node. The location page editor opens.
This workspace has three layers: Layout, Equipment, and Wid- gets. If you use the tabs when you place items, it becomes easier to select and edit items later on. By default, expanding certain groups at the bottom of the screen selects certain tabs. For example, expanding the Ducts group selects the Layout tab.
3. Drag and drop duct pieces from the collection at the bottom of the screen and combine pieces to create a device shape.
ENVYSION User Guide 139 Tips for laying out a device: • Some duct pieces can stretch. To stretch a piece, drag its edges. • To delete a piece, right-click it and select Delete. • Use the Shrink to Fit option in the lower right corner of the screen to make the graphic size fit the workspace. • Use the Snapping option to make pieces snap to one another.
4. Drag and drop the appropriate equipment pieces from the collection at the bottom of the screen.
140 ENVYSION User Guide ENVYSION
5. Associate data with equipment pieces as appropriate:
• To associate data with a piece of equipment, click Binding Tree and drag the relevant device point onto the equipment. Some graphics animate depending on the bound points. For example, a fan graphic will animate if the Boolean point bound to it is TRUE.
6. Add widgets to the page as described in Adding a Widget. 7. To save your work, click Exit, and then Save & Close.
ENVYSION User Guide 141 Reports Module
The Reports module allows you to build and save custom reports using ENVYSION widgets such as charts, callouts, etc. You can bind data to the widgets in order to visualize real-time and historical data in a dashboard view.
To add this module to the project, drag a Reports node into the Project.
Creating Reports
1. Click Page and Data Creator.
2. Select the Reports node in the Project Tree.
3. On the splash page, click Create a New Report. The report layout win- dow is displayed.
142 ENVYSION User Guide ENVYSION
4. Click the layout icon to select the layout for the report (widget place- ment) in the Layout Options dialog.
5. In the Pad V and Pad H fields, indicate the vertical or horizontal spacing between widgets in the report layout. 6. Click Apply to apply your layout selection. 7. Drag a widget from the bottom of the page to one of the specified areas in the layout.
ENVYSION User Guide 143 8. To bind data to the widget, drag and drop one of the following onto the widget.
• A node from the Project Tree. The widget displays the real-time or historical value for the currently selected layer and the bound node. You can change the displayed value by changing the layer. Add a Layer Selector widget to easily change layers. With some widgets, you can bind more than one node.
• A node from the Data Tree. The widget displays the real-time or his- torical data for the node. With some widgets, you can bind more than one node.
9. At any time or when you have finished creating or editing your report, click
Save As .
10. Enter the following information:
Property Description
Name Enter a report name.
Desc Enter a description for the report.
Global Specify whether you want the report to be globally available (public) or pri- vate. Private reports can only be seen by this user in the My Reports sec- tions.
144 ENVYSION User Guide ENVYSION
11. Click Home to return to the Reports Module main page. There you will see the newly saved report in My Reports or Public Reports, depending on the Global setting.
You can right-click on the report to display the pop-up menu to View, Edit, or Delete the report:
For more details on how to edit a report, refer to the next section: Editing Reports.
ENVYSION User Guide 145 Editing Reports
1. To view or edit an existing report, select the Reports node in the project tree and click on the report to display the report dashboard.
2. Click the Edit button at the top of the dashboard as shown below:
3. To edit the widgets in the report, click the edit icon located at the top right corner of each widget or right-click on the widget and select Edit Properties. The Property Inspector dialog appears. The properties in this dialog will change according to the selected widget.
146 ENVYSION User Guide ENVYSION
4. Make the changes accordingly. Then close the Property Inspector and
save the report.
The properties available in this dialog will change according to the type of wid- get you are editing. For example, bar chart properties will differ from the gauge properties.
Zoom in on charts by dragging a rectangle. Zoom out by double clicking.
5. While always in Edit mode , you can also do the following:
• To remove a widget from the report, right-click on the widget and
select Delete or click the delete icon located at the top right cor- ner of the widget.
ENVYSION User Guide 147 • To copy a widget from the report, right-click on the widget and select Copy. Then right-click where you want to paste the copied widget and select Paste.
• To edit the widget properties, right-click on the widget and select Edit Properties.
• To delete widget data, right-click on the widget and select Edit Prop- erties. In the Series section, click on the red "x" to delete the binding data.
• To edit the binding widget data, drag additional data from the Data tree onto the widget.
6. When you have finished editing, click Save .
148 ENVYSION User Guide ENVYSION
Alarms Module
The Alarms module is used to access the alarms console from within ENVYS- ION.
To add this module to the project, drag an Alarms node into the Project Tree when creating the navigation tree. See also Module Nodes.
Interacting with Alarms
In ENVYSION, you can acknowledge (ack) alarms and add notes.
Acknowledging 1. Select the check box at the far left next to one or more alarms. an alarm 2. Click Ack Alarms at the top right.
Adding a note 1. Select the check box next to one or more alarms. 2. Click Add Note at the top right. 3. Enter the note text.
Viewing alarm Hover over items in the grid to read messages, notes, source paths, and information alarm data. The information appears as tooltips.
Filtering Alarms
To filter your alarms, you can change the date range, columns, filters, and rol- lup.
To change the date range of the alarm console, do one of the following:
• Click the date range in the top left corner and select a range.
• Use the arrows next to the date range to select the next or previous range.
ENVYSION User Guide 149 To change the columns that appear in the console:
1. Hover over the three dots at the right of the page. 2. Use the check boxes to specify which columns to include.
To filter the alarms that appear in the console, by class, priority, state, ack state, date range, or a custom search:
• Click the arrow in the top right corner to view and use filter options.
To rollup alarms:
• Click the box next to Rollup Alarms in the bottom right corner.
• To see individual alarms, click the box next to Rollup Alarms again.
Filtering with the Alarm Widget
In the Navigation Builder you can filter using the Edit option when opening the Alarms widget node:
With ECLYPSE, you can filter the following: Timestamp, State, and Priority.
150 ENVYSION User Guide ENVYSION
Schedules Module
The Schedules module enables you and your users to access your calendar schedule from within ENVYSION.
To add this module to the project, drag a Schedules node into the Project Tree when you create navigation.
Creating an Event
1. Right click on the schedule on the area where you wish to create an event and select Create Event.
2. Drag up and down the event on the schedule to determine the exact time and/or drag the edge of the shaded bar upwards and/or downwards to obtain the exact time frame you wish to assign to that weekday.
ENVYSION User Guide 151 3. Click Save to save your changes.
Editing an Event Status
1. Right-click the event in the event list. 2. Select Edit Value. A drop-down list appears. 3. Select the status value you wish to assign to the event: Occupied, Unoc- cupied, Bypass, and Standby.
4. Click Save to save your changes.
Filtering with the Schedule Widget
In the Navigation Builder you can filter using the Edit option when opening the Schedule widget node. This allows you to select a specific schedule or all schedules from a list. The selected schedule will be displayed when clicking on the Schedule node. The locale schedule setting can be set to US or EU (Europe), which determines the first day of the work week.
152 ENVYSION User Guide ENVYSION
Trends Module
The Trends module allows you to view all trend log objects that reside in the data tree of the ECLYPSE controller by plotting the data of the selected trend on the chart, along the x and y axes.
To add this module to the project, drag a Trends node into the Project Tree when you create navigation.
Working with Trends
ENVYSION User Guide 153 Viewing Projects
You can preview your project directly in ENVYSION with the Viewer. This lets you test the functionality of your application, while giving you the option to quickly return to the design environment by clicking the options at the top of the page.
There are 3 ways to view projects:
• Preview mode using the Preview option while in Page and Data Cre- ator. It works as a toggle button to switch from Edit mode to View mode.
• Viewer mode using the Viewer located in the top bar .
• Launch mode using the Launch option located at the top right corner on the browser.
Previewing Projects
While in the Page and Data Creator, use the Preview option to switch from edit mode to preview mode
OR
Select Viewer while on the home page to view your project.
OR
• Select the Viewer located in the top bar while working on your project.
OR
• Select the Launch mode using the Launch option located at the top right corner of the browser
Whichever viewing option you choose, the project appears in view mode where you can test the functionality of your project:
154 ENVYSION User Guide ENVYSION
When using the Launch option to view your project, the only way to return to the edit mode is by logging out. A shortcut used to avoid having to logout and login again, is simply to replace "view" in the URL by "edit" and press ENTER.
ENVYSION User Guide 155 156 ENVYSION User Guide ENVYSION User Guide ENVYSION-AC_UG_10_EN