enteliVIZ Designer

Application Reference Guide

Edition 1.3
Contents
Introduction ................................................................................................................................4
Additional Resources .................................................................................................................. 4
Basic Workflow ..........................................................................................................................5
The enteliVIZ Designer Work Space ............................................................................................ 5
Canvas ..................................................................................................................................... 5
Panes ....................................................................................................................................... 7
Station Tree .......................................................................................................................... 7
Metrics ................................................................................................................................. 7
Palettes ................................................................................................................................ 7
Property Inspector ............................................................................................................... 7
Outline .................................................................................................................................. 8
Design and View Modes ............................................................................................................... 8
Viewing the Graphic in enteliWEB ............................................................................................... 9
Toolbars......................................................................................................................................10
Drawing Toolbar .....................................................................................................................10
Graphic Toolbar ......................................................................................................................12
File Menu ................................................................................................................................16
Additional Buttons ......................................................................................................................17
Grids ...........................................................................................................................................19
Show Grid................................................................................................................................19
Set Up a Grid ...........................................................................................................................19
Layout Palette ..........................................................................................................................20

Layout Elements .................................................................................................................20

Layout Templates ................................................................................................................22

Dashboard Palette ....................................................................................................................24

Charts ..................................................................................................................................24
Chart Axis and Series Accordions ..........................................................................................25
Chart Axis Accordion...........................................................................................................25
Series Accordion .................................................................................................................27
 Gauges ................................................................................................................................28
Gauge Accordion .....................................................................................................................29
Data Control Palette .................................................................................................................30
Data Control Elements ...............................................................................................................30
Text Palette ..............................................................................................................................37

Text Elements ......................................................................................................................37

Indicator Accordion.................................................................................................................39
Data Grid Header and Data Grid Accordions ..........................................................................39
Data Grid Header ................................................................................................................39
Data Grid .............................................................................................................................40
Media Palette ...........................................................................................................................41

Multimedia elements ...........................................................................................................41

Video Accordion ......................................................................................................................42
Image Accordion .....................................................................................................................42
Graphics Palette .......................................................................................................................44

Graphics elements...............................................................................................................44

Components elements .........................................................................................................45

Form Elements Palette ............................................................................................................47

Form Elements ....................................................................................................................47

Slider Accordion (Sliders Form Element) ..............................................................................49
Date Range Editor Accordion..................................................................................................50
Drop Down Accordion .............................................................................................................51
AHU, HVAC and HVAC2 Palettes ...............................................................................................52

Ducts Elements ...................................................................................................54

Connector Tool ....................................................................................................................55
Duct Mode ...........................................................................................................................55
Image Accordion .....................................................................................................................56

Equipment.............................................................................................................56
Frame Animator Accordion ....................................................................................................57

enteliVIZ Designer Application Reference Guide Page 2 of 68

Document Edition 1.2
Introduction

Image Accordion .....................................................................................................................57

Piping ......................................................................................................................58

Zones ...................................................................................................................................58
Plant Palette.............................................................................................................................59
Zone Palette .............................................................................................................................61
Data Palette ..............................................................................................................................62

Operation Elements .............................................................................................................62

Table Operations Accordions..................................................................................................66
Group By Accordion ................................................................................................................67
CSV, XML and JSON Accordions .............................................................................................67
Document Revision History ......................................................................................................68

Page 3 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Introduction
This quick reference guide introduces the common toolbars, icons, palettes and menu options
available in the enteliVIZ Designer, a graphics WYSIWYG editor available as an additional
licensed feature in enteliWEB 2.1 and higher. Using this guide, you’ll develop a basic
understanding of the enteliVIZ Designer interface and how to use it to create the graphics you
need for your system dashboards.

Additional Resources
If you do not find the information you need from this reference guide, there are additional Delta
Controls resources to help you use the enteliVIZ Designer:

• How-to video tutorials

http://support.deltacontrols.com/Support/Howto/EnteliVIZDesignerVideoTutorials
• enteliVIZ webinars
http://support.deltacontrols.com/Support/Webinar/EnteliVizBasicFundamentals
• Delta Forums: forums.deltacontrols.com
• Delta Controls Technical Support department
• Delta Controls live classroom training
http://support.deltacontrols.com/Support/Training/WebHome#ClassroomTraining
• Delta Controls George University enteliVIZ self-paced courses
http://training.deltacontrols.com

enteliVIZ Designer Application Reference Guide Page 4 of 68

Document Edition 1.2
Basic Workflow

Basic Workflow
The basic workflow in enteliVIZ Designer is to create graphics on the canvas by drawing or
dragging elements from the palettes, bind data and object properties (from the Station Tree and
Metrics panes) to the graphics in the Property Inspector. And you see the order of all the items
in the Outline pane. All work is previewed either in Design or View Mode.

The enteliVIZ Designer Work Space

Canvas
The largest space in this window is the Canvas where you draw and create your graphic. When
you create a new enteliVIZ file, you can choose from 3 canvas types: Absolute Layout, Dock
Layout or a customized template that you’ve saved. The Absolute Layout is the default layout
displayed every time you open the enteliVIZ Designer application.

To select a canvas other than Absolute, go to File > New File and then select the canvas option
you want.

Page 5 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
The differences between absolute layout and dock layout are explained in the table below:

Features Absolute Layout Dock Layout

Positioning Graphics and elements can be Positioning on the canvas is

placed anywhere on the handled by enteliVIZ Designer.
canvas.

Layering Graphics and elements can be Items on the canvas occupy

placed on top of each other. their own window on the
The order of items can be canvas, and they all exist on
customized in the Outline the same layer.
pane.

Resizing and repositioning in In View mode, graphics and Item windows can be made
View Mode elements cannot be resized larger or smaller, and moved
nor can their positions be to different locations on the
changed. dashboard.

Dock layouts are ideal if you need to create a simple dashboard quickly whereas absolute
layouts are more suited for complex dashboards with multiple objects.

enteliVIZ Designer Application Reference Guide Page 6 of 68

Document Edition 1.2
Basic Workflow

Panes

The main window has five panes:

Station Tree
The Station Tree displays a list of controllers on your site’s network.

Metrics
The Metrics pane displays the objects and object properties of the controller that is selected in
the Station Tree pane.

Palettes
The Palettes pane displays all the palettes in a long horizontal list. Use the arrow heads to
scroll through the list. Each palette contains ready-made graphics (referred to as elements)
that you drag and drop onto the canvas.

When a palette is selected, all the elements in that palette are displayed; some are organized
into their own functional subgroup. The number of elements in a group appears at the top left
corner of the group icon.

Property Inspector
The Property Inspector displays the read-only and editable properties of the element or graphic
currently selected on the canvas. These properties are organized into Accordions.

Page 7 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Outline
This pane shows you the hierarchical structure of all the elements and graphics on the canvas.
Use the Outline to select, duplicate, delete or reorder the items on the canvas.

All panes are dockable (except the Palettes pane) and can be moved around to customize your
workspace.

Design and View Modes

There are 2 main viewing modes in enteliVIZ Designer: Design and View.

The enteliVIZ Designer opens in Design mode by default. In Design mode, all 5 panes are active
which you use to create and make changes to your graphic. In View mode, you can see what the
final dashboard will look like to the user.

To toggle between modes, use the toggle button at the top right corner of the screen.

In Design mode, there is a preview button at the top of the screen. The preview button allows
you to quickly preview the graphic as you work. The preview button does not allow you to see the
final dashboard.

enteliVIZ Designer Application Reference Guide Page 8 of 68

Document Edition 1.2
Basic Workflow

Viewing the Graphic in enteliWEB

Any graphic that is saved in enteliVIZ Designer is accessible on the Graphics Accordion in
enteliWEB.

You can also add your graphic to your personal dashboard.

1. From the enteliWEB Administration page, click Create Widget.

2. Click the Create button next to the Graphic icon.
3. Give your widget a unique name in the Widget Title field and browse for your enteliVIZ
graphic file in the File Name field. When you have completed all the other fields, click
Create.
4. Go back to your personal dashboard and click Add Widget. Your enteliVIZ graphic should
appear in the list of widgets. Select your graphic and click Add to Dashboard.

Page 9 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Toolbars
Drawing Toolbar
The tools in this toolbar enable you to create shapes and lines. If you mouse over the toolbar,
the name of each tool appears in a tool tip over its icon.

After drawing a shape or a line, edit its properties in the Property Inspector.

Drawing Tool Function

Selection Tool By default, this tool is selected as it allows you to select a graphic or element on the
canvas.

Skewing Use this tool to skew a selected item in three-dimensional space. Using your mouse, click
on a point on the selected item and drag in the direction of skew.

Additional Resources: For more information about using the Skewing Tool, see Using the
Skew Tool how-to video on the Delta Controls Support web site.

Pan Use this tool to “click and drag” your way around the canvas when you have zoomed into
the canvas. This tool is only displayed when the Show Zoomer tool is being used.

enteliVIZ Designer Application Reference Guide Page 10 of 68

Document Edition 1.2
Basic Workflow

Drawing Tool Function

Rectangle Click and drag this tool to draw a rectangle.

If you press the Shift key while dragging, the shape will be constrained to a perfect
square.

To turn off fill, use the Default Pen and Fill tool to change your drawing preferences. The
new settings will only be applied to new drawings.

Rounded Rectangle Click and drag this tool across the canvas to draw a rectangle object with round corners.

Ellipse Click and drag this tool across the canvas to draw a elliptical shape.

If you press the Shift key while dragging, the shape will be constrained to a perfect circle.

Polygon Click to add points that connect to form a polygon. To close the shape, hover over the first
point until it turns green, and then click on it.

You can copy the coordinates of a point and paste it onto another polygon using the
keyboard shortcuts SHIFT + C (for copy) and SHIFT + V for paste.

Additional Resources: For more information about using the polygon drawing tool, see
the Polygons 101 how-to video on the Delta Controls Support web site.

Quadratic Bezier This tool is similar to the polygon except that it produces vector shapes with Bézier
curves.

Line Use this tool to create a single straight line.

If you press the Shift key, the tool will guide you in creating a true straight line.

Polyline Use this tool to create lines using multiple points. Press Enter to exit the tool after you
finish drawing.

You cannot create a closed shape using this tool. Use the polygon tool instead.

Default Pen and Fill Click this tool to bring up the stroke and fill global preferences window. In this window,
you can change the default stroke and fill, and the pen weight, caps and joints. The new
settings will only be applied to new drawings.

Show Zoomer Use this tool to zoom in or out of the canvas.

To begin drawing at the desired zoom level, simply select the drawing tool that you want
to use and begin drawing. See also the Pan tool above.

Page 11 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Graphic Toolbar
The tools in this toolbar enable you to manipulate your graphics and their elements. If you
mouse over the toolbar, the name of each tool appears in a tool tip over its icon.

Graphic Tool Function

Bring Forward Use this tool to move a selected item in front of another item. This change in the
hierarchical order of items can be seen in the Outline pane.

Bring to Front Use this tool to move a selected item in front of all the other items. This change in the
hierarchical order of items can be seen in the Outline pane.

Send Backward Use this tool to move a selected item behind another item. This change in the hierarchical
order of items can be seen in the Outline pane.

Send Back Use this tool to move a selected item behind all the other items. This change in the
hierarchical order of items can be seen in the Outline pane.

Group Combines all selected graphics and elements into a single group so that they can be
treated as a single unit.

enteliVIZ Designer Application Reference Guide Page 12 of 68

Document Edition 1.2
Basic Workflow

Graphic Tool Function

Ungroup Ungroups all members in a selected group.

Full Size Sets the width and height of the element to 100% of its original size and its X and Y value
to 0 relative to its parent container. If the element is larger than its parent container, part
of the element will be obscured. Scroll bars will appear to allow you to scroll through the
element.

Additional Resources: For more information about how to create graphics that scale
proportionally, see Scaling an Element Using FitRatio how-to video on the Delta Controls
support web site.

Align Use this tool to align selected items within the same container.

When you click this button, additional commands are displayed that provide these
different ways to align the items.

Vertical and Horizontal Alignment Buttons

Use these buttons to align selected items along a single edge or along a midline. For
example, you can choose to align items along the left vertical edge of the item on the
farthest left, or along the midline of the middle-most item.

Vertical and Horizontal Distribution Buttons

Use these buttons to space selected items equally between their midlines, or their left,
right, top or bottom edges.

Page 13 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Graphic Tool Function

Space Distribution Buttons

Align items so that there is equal distance between all items. You can align items
horizontally or vertically.

Lock Children (also You can lock the children elements in a parent container to prevent them from being
Unlock Children) selected or edited. When you select a parent container with unlocked children elements,

the Lock Children tool is displayed in the toolbar:

Click the Lock Children tool to lock the children elements.

When you select a parent container with locked children elements, you’ll see the Unlock

Children tool displayed in the toolbar:

In the Outline pane, a parent container with locked children elements has the Unlock
Children symbol displayed. Here, you can click the symbol to unlock the children
elements.

enteliVIZ Designer Application Reference Guide Page 14 of 68

Document Edition 1.2
Basic Workflow

Graphic Tool Function

Copy Use this tool to copy the properties of a graphic or element that is selected on the canvas.
When you click this tool, additional commands are displayed that allow you to choose
what you want to copy, including specific object properties that are found in the Property
Inspector.

All: Copies all the settings in the Property Inspector, except the Content Area accordion.

Properties: Copies all the settings from the Layout and Container accordions.

Dynamic Properties: Copies all the settings from the Dynamic Properties accordion.

Behaviors: Copies all the settings from the Behaviors accordion.

Bindings: Copies all the Property-to-Property and Data-to-Property bindings.

Filters: Copies all the settings from the Filters accordion.

Size: Copies the size set up in the Layout accordion.

Position: Copies the position coordinates set up in the Layout accordion.

Size and Position: Copies both the size and position set up in the Layout accordion.

Additional Resources: For more information about copy and paste, see Copying and
Pasting how-to video on the Delta Controls support web site.

If you are copying a container with multiple elements, it’s recommended that you
lock the children elements before copying to ensure the data bindings associated
with the container are retained.

You can also use the keyboard shortcut SHIFT+ D to duplicate items.

Paste The Paste tool is used to copy properties from one element to another similar element.
Example, from one button to another. The tool appears in the toolbar only when there is
something on the Copy clipboard that can be pasted.

Additional Resources: For more information about copy and paste, see Copying and
Pasting how-to video on the Delta Controls support web site.

Page 15 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Graphic Tool Function

Undo Property Change Click to undo up to the last 10 property changes that were made.

Redo Property Change Click to redo up to the last 10 property changes that were made.

File Menu
In the upper left corner of the window, the File menu allows you to open, organize and save your
graphic files. You can also view or change global settings for enteliVIZ Designer.

The Templates Manager allows you to create new template categories into which you can drag
and drop saved template files. You can also preview a template in the Template Manager.

The File Manager allows you to upload, download, rename, copy and paste files from one folder
to another.

Use the Export options to save DGML files on your computer and not on the enteliWEB server.
Click Export > Save Dashboard to Disk and select a location on your computer to save the
DGML file. Click Import > Open Dashboard From Disk to open a DGML file on your computer.

enteliVIZ Designer Application Reference Guide Page 16 of 68

Document Edition 1.2
Basic Workflow

Additional Buttons
These buttons are displayed at the top right corner of the window.

Buttons Function

Play The Play button and its related buttons are disabled in Delta Controls’ enteliVIZ Designer
and will be removed in a later version of enteliVIZ Designer.

Design/View Mode Allows you to toggle between Design and View Mode with one click.
Toggle

Portrait Icon There are 3 buttons that are accessible from the Portrait Icon.

Edit Navigation: Opens the Navigation Builder tool. This allows you to create or edit a
Navigation tree view for the end-user that provides links to dashboards, documents or
websites. The Navigation tree can only be previewed in View Mode.

License: Displays the details about the enteliVIZ Designer license, including product ID
number.

Logout: Do not use this button to log out of enteliVIZ Designer. To log out of enteliVIZ
Designer, simply save your work and exit the enteliVIZ Designer browser window.

Page 17 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Buttons Function

Star Icon There are 3 buttons that are accessible from this icon:

Export: Clicking this button brings up additional export commands.

You can export your dashboard as PDF or PNG image file. The Excel export function is
used to export the data in your dashboard.

Annotation Mode: The Annotation Mode provides the tools to mark up or add comments
to the dashboard or graphics. You can share these notes with team members by taking a
screenshot of the marked up dashboard.

The Annotation tool bar includes an Arrow Tool, Pen Tool, Highlighter Tool, Text Box and
Shape tool.

There are also Redo and Undo buttons if you need to change your review notes and also a
Delete button which deletes the mark up or comments that you've selected.

While in Annotation Mode, the canvas and panes are locked to prevent you from making
any changes to the graphic. To exit Annotation Mode, press the Annotation Mode button
once more. Once you exit this mode, your notes will be hidden until the next time you’re in
Annotation Mode.

Additional Resources: For more information about the Annotation tool bar, see the
Annotation Mode video on the Delta Support web site
http://support.deltacontrols.com/Support/Howto/EVizAnnotationMode.

enteliVIZ Designer Application Reference Guide Page 18 of 68

Document Edition 1.2
Basic Workflow

Grids
There are 2 kinds of grids in enteliVIZ Designer that are used to align objects on your canvas: a
dot-based grid and a line-based grid. You can customize how the grid appears on the canvas
and whether objects snap to grid.

Show Grid
By default, the grid is not displayed on the canvas. To show a grid, at the top left corner of the
window, click Options > Grid > Show Grid. To hide the grid, click Show Grid to uncheck it.

Set Up a Grid
Use the grid settings to set up a grid for enteliVIZ Designer.

1. At the top left corner of the window, click Options > Grid > Grid Settings.
2. Turn on Enable Grid.
3. Use the following settings to set up your grid:
Grid Setting Description
Type Type of grid, either dots or lines.
Color Color of grid lines. You can select a color by clicking on the
swatch to bring up a color wheel or by entering a HEX code.
Thickness Thickness of the dots or lines.
Alpha The opacity of the dots or lines on the grid.
Step The amount of space between dots or lines in pixels.

4. Turn on Overlay if you want the grid to be displayed as the uppermost layer in the
graphic (see the example screenshot below).

5. Turn on Snapping Enabled if you want the objects on the canvas to snap to gridlines.
6. Click Save to save your settings or Cancel to exit without saving.
To restore the original factory grid settings, click Default.

Page 19 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Layout Palette
There are 2 subgroups of elements in the Layout palette: Layout and Layout Templates.

Layout Elements
There are 10 elements in this Layout subgroup. To add an element to the canvas, double-click
on the element icon or drag an element onto the canvas using your mouse.

Layout Element Function

Containers Use these container elements to create a basic frame for your
dashboard objects, especially with multi-object systems like menus
and data-grids.

The vertical, horizontal, vertical tile and horizontal tile containers

automatically arrange the dashboard objects using containers’ built-
in styles. To modify these built-in styles, select the container and
open the Content Area accordion in the Property Inspector.

1. Absolute. Adds an absolute layout container onto the canvas. The

position of items in this canvas are based on their x,y coordinates.
1. Absolute 2. Vertical
3. Horizontal 4. Tile Vertical 2. Vertical. Items in this container will automatically align items
5. Tile Horizontal vertically based on the item’s position in the Outline pane. The
container will create scroll bars when objects extend outside of the
container.

3. Horizontal. Items in this container will automatically align items

horizontally based on the item’s position in the Outline Pane.

enteliVIZ Designer Application Reference Guide Page 20 of 68

Document Edition 1.2
Layout Palette

Layout Element Function

4. Tile Vertical. Items in this container will automatically align in

vertical rows starting from top to bottom, left to right. However, if
the container isn’t large enough, items will move to the next
available spot in a new row.

5. Tile Horizontal. Items in this container will automatically align in

horizontal rows starting from left to right, top to bottom. However, if
the container isn’t large enough, items will move to the next
available spot in a new row.

Dockable Layout This element is disabled. To add a dock layout to the canvas, got to
File > New File > Dock Layout.

Divided Box The Divided Box element will automatically arrange items vertically
or horizontally based on the direction set in its Container Accordion.

You can adjust the size of items in this element in both Design and
View modes by resizing the windows in the box.

DGML Include Use this item to bring in DGML files that you would like to
incorporate and use in your graphic.
Additional Resources: On the Delta Controls Support web site, see
Creating a Drop-Down Navigation Menu video
https://support.deltacontrols.com/Support/Howto/EVizNavigationDr
opDown to learn how to use DGML Include to make a dynamic drop-
down menu.

View Stack Each item in this element is assigned an index number

automatically based on its hierarchical position in the Outline pane
(zero starting at the bottom position). The user can then view an
item by selecting its index number in the Selected Index property in
the Container Accordion.

Additional Resources: For more information about View Stack, see

the View Stack Element video on the Delta Controls Support web site
http://support.deltacontrols.com/Support/Howto/EVizViewStacks.

Page 21 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Layout Element Function

Tab Navigator Use this element to create a graphic with a tab for each item in the
container. The user can switch between different tabs to view its
content.

Accordion Use this element to create a graphic with an accordion for each item
in the container. The user can switch between different accordions
to view its content, similar to the Property Inspector.

Horizontal Coverflow Use this element to give each item a horizontal panning movement
effect when the user clicks on each item.

Each item in this element is assigned an index number

automatically based on its hierarchical position in the Outline pane
(zero starting at the bottom position). The index numbers can be
accessed through the Selected Index property in the Container
Accordion.

Vertical Coverflow Use this element to give each item a vertical panning movement
effect when the user clicks on each item.

Each item in this element is assigned an index number

automatically based on its hierarchical position in the Outline pane
(zero starting at the bottom position). The index numbers can be
accessed through the Selected Index property in the Container
Accordion.

Carousel Use this element to give each item a circular panning movement
effect as the user clicks on each item. Items move as if on they’re on
a carousel.

Each item in this element is assigned an index number

automatically based on its hierarchical position in the Outline pane
(zero starting at the bottom position). The index numbers can be
accessed through the Selected Index property in the Container
Accordion.

Layout Templates
These absolute layout templates offer a quick way to create dashboards:

• Objects can be placed anywhere using x,y coordinates.

• Built-in nested containers provide a quick way to add common dashboard items like
menu items, headers and footers.
There are 5 elements in this layout subgroup. To add an element to the canvas, double-click on
the element icon or drag an element onto the canvas using your mouse.

enteliVIZ Designer Application Reference Guide Page 22 of 68

Document Edition 1.2
Layout Palette

Before you can add any objects to these templates, you need to unlock
each pane by clicking on the Unlock symbol next to it in the Outline pane.

Layout Template Function

Vertical Layout This element is a container with individual top and bottom panes.

Horizontal Layout This element is a container with left and right panes.

Left Sidebar Layout This element is a container with a left sidebar for menu items and a
larger right pane for graphics and objects.

Right Sidebar Layout This element is a container with a right sidebar for menu items and a
larger left pane for graphics and objects.

Page Layout This element has top and bottom panes that can act as a header and
footer, as well as a 2-pane middle section for menus, graphics and
objects.

Page 23 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Dashboard Palette
The Dashboard palette contains chart and gauge elements that present data in a more
meaningful way.

Charts
To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Chart Function

Column Chart Data is arranged in columns or rows in this chart.

Line Chart Data is plotted as points on this chart, and is commonly used to show
continuous data over time (like trend data).

Area Chart Like the line chart, data is plotted as points on this chart. However, with
area charts, the sum of the plotted values is highlighted so that the user
gets a sense of the total trend value.

Bar Chart Data is arranged in columns or rows in this chart. Unlike the column
chart, categories are typically organized along the vertical axis.

Pie Chart Pie charts show the size of each data group as a slice of a larger pie
which represents the sum of all the data.

enteliVIZ Designer Application Reference Guide Page 24 of 68

Document Edition 1.2
Dashboard Palette

Chart Function

Radar Chart Data is displayed as points radiating from a center point. Lines connect
all the values in the same data set and the area is filled with color. See
the example below:

Bubble Chart Bubble charts can be considered a variation of the scatter plot where
the data points are replaced with 3D bubbles. Each bubble represents 2
variables by its location on the chart, and a 3rd variable by the bubble’s
size. See the example below:

Chart Axis and Series Accordions

Chart Axis Accordion
When you create a chart, you can choose between these types of axes: linear (to represent
numerical data), category (to display data groups) and date/time (commonly used for historical
or trend information). For all 3 types, the Axis accordion displays options to customize the
appearance of these axes. This section will use the linear axis as an example to highlight the
common options available on the Chart Axis accordion.

Page 25 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Depending on your chart type, you can change the Axis
Type between the 3 axis types (some charts offer a
logarithmic type).

Vertical Title Align is only available for linear y-axes. It

changes the direction of the text in your title.

When Show Line is turned off, the line representing the

axis is removed. When Show Line is turned on, you can
customize the look of this line by changing its color, its
transparency (Alpha) and its weight in the Line Stroke
section.

Ticks are the line intervals on the axis. You can customize
the placement of these ticks and their appearance by
changing its color, length, transparency (Alpha) and weight.

Labels are the numbers on the axis. There are several ways
to customize the display of these labels. Labels Mode
allows you to show all labels or only pick the smallest and
biggest values to display. Label Gap is the space between
the labels and the axis. You can also change the label font
and placement.

Turn on Thousands Formatting to use a comma as a

thousand separator, example 1,000.

enteliVIZ Designer Application Reference Guide Page 26 of 68

Document Edition 1.2
Dashboard Palette

Series Accordion
The Series Accordion controls how data is displayed on the chart. This section will use the
column series type as an example to highlight the common options available on the Series
accordion.

Depending on your chart type, you can change the Series

Type between the 3 series types (Line, Column and Area).
Line series type corresponds to the Line Chart, Column
series type to the Column Chart, and Area series type to the
Area Chart.

Display Name is the text displayed next to the legend on

your chart.

You can drill down on specific parts of the chart by

dragging and selecting the part of the chart you want (see
screenshot below). A magnified chart section is then
presented.

Show Effect controls the style which the drilled-down

section is presented to the user. For example, with the
SeriesInterpolate style, everything except the drilled-
down section appears to collapse into the x-axis. With
SeriesZoom, the drilled-down section zooms into view
while everything else disappears. Hide Effect on the other
hand determines how the chart leaves the screen.

Page 27 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Gauges
The enteliVIZ Designer offers a large collection of analog- and digital-style gauges to suit most
dashboards. Whichever gauge you choose, all gauges:

• Display the value of a monitored property in real time, as a readout or as a

measurement indicated by the gauge needle
• Can be configured to display the lower and upper value limits
• Can be animated to display real time changes

Round Gauges Semi-Round Gauges

1. Gauge – Semi-Circular 2. Curve

1. Gauge - Black 2. Black Onyx Gauge 3. Gauge – Grey 4.
Spectrum Gauge 3. Futuristic
High Tech Gauge 5. Gauge – White 6. Icon Gauge 7. Tech
Semi Gauge
Gauge 8. Futuristic Gauge 9. White Pearl Gauge 10. White
Pearl 2 - Track Gauge 11. Gauge - Circular

Quarter Gauge Gauge Horizontal

Vertical Gauges

1. Gauge – vertical 2. Beaker Gauge 3. Arrow Gauge

enteliVIZ Designer Application Reference Guide Page 28 of 68

Document Edition 1.2
Dashboard Palette

Gauge Accordion
The properties in the Gauge Accordion vary depending on the gauge selected. This section
describes the properties that are shared among different gauges, using the Tech Gauge (see
screenshots below) as an example.

Gauge needle

The track

In most cases, you would bind the value property

of your object to the Value field in the Gauge
Accordion. This ensures the gauge will always
display the latest data.

The minimum and maximum values here

determine the lowest and highest value displayed
on the gauge’s scale.

Ticks allow you to change the look of the gauge’s

scale. You can change the number of the divisions
on the scale (in this example by entering a number
in the Labels Count field). With other gauges, it is
also possible to modify the font type and color of
text that is displayed on the dial face.

Most analog gauge styles allow you to

change the color of the gauge needle
(Hue).

The Track refers to the colored part of the scale.

Use these options to change how the track is
displayed on the dial face.

Page 29 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Data Control Palette
Data Control Elements
Data control elements are used to display or control object values on a dashboard. To start,
simply bind the object to the appropriate ords on the Dynamic Properties Accordion.

This group of custom Delta Controls elements was created by combining elements from
different palettes. You can view the component elements in the Outline pane, but in most cases
there is no need to modify them.

To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Data Control Function

Element

Edit Boxes Use the Edit Boxes elements to enter or change object values on a
dashboard. Each element is specific to the object type being controlled:

• Analog Edit Box. Use this element to change an analog object

value. In the white text field, enter a new value and click Apply.
Click Auto to command the object back into Auto Mode. The
current object value is displayed at the top of the element.

• Binary Edit Box. Use this element to change a binary object

1. Analog Edit Box
value. The green button displays the ActiveText property value,
2. Binary Edit Box
and the red button displays the InactiveText property value. The
3. MV Edit Box
current object value is displayed at the top of the element. Click
Auto to command the object back into Auto Mode.

• MV Edit Box. Use this element to control a multi-state variable

(MV) object. You can select one of the multiple object states from
a drop-down list. The current object value is displayed at the top
of the element. Click Auto to command the object back into Auto
Mode.

For the Analog Edit and Binary Edit boxes, there is an additional option to
display the hand icon in Manual mode.

enteliVIZ Designer Application Reference Guide Page 30 of 68

Document Edition 1.2
Data Control Palette

Data Control Function

Element

Drop Down Edit Boxes Use the DropDown Edit Boxes to enter or change object values on a
dashboard. The control options are only displayed when you mouse over
the object value. Each element is specific to the object type being
controlled:

• Drop Down Analog Edit Box. Use this element to change an

analog object value. In the white text field, enter a new value and
click Apply. Click Auto to command the object back into Auto
Mode. The current object value is displayed at the top of the
1. Drop Down Analog Edit
element.
Box
2. Drop Down Binary Edit
• Drop Down Binary Edit Box. Use this element to change a
Box
binary object value. The green button displays the ActiveText
3. Drop Down MV Edit Box
property value, and the red button displays the InactiveText
property value. The current object value is displayed at the top of
the element. Click Auto to command the object back into Auto
Mode.

• Drop Down MV Edit Box. Use this element to control a multi-

state variable (MV) object. You can select one of the multiple
object states from a drop-down list. The current object value is
displayed at the top of the element. Click Auto to command the
object back into Auto Mode.

For the Drop Down Analog Edit and Binary Edit boxes, there is an
additional option to display the hand icon in Manual mode.

Equipment Table Provides a quick way to create a table template for your VAV controllers.
This template can be reused by changing its associated data path.

To set up this element for your dashboard, do one or more of the

following steps:

Page 31 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Data Control Function
Element

• To change the column header text and table header row colors,
in the Outline pane, select Equipment Table. On the Dynamic
Properties Accordion, change color and title text in the fields
provided.

• To change the table’s ord data path, in the Outline pane, select
Values Container. On the Dynamic Properties Accordion, drag
the new VAV controller from the Station Tree pane to VAV Path.
The fields should all automatically update with new values.

enteliVIZ Designer Application Reference Guide Page 32 of 68

Document Edition 1.2
Data Control Palette

Data Control Function

Element

• To add more rows, in the Outline pane, select Values Container

and click the Duplicate icon.

• To delete a column, you should delete the same child component

in the Title Container and in all Values Containers.

Heat map Use the heat map element to place an overlay over shapes or tables that
changes color when the value exceeds or falls below the setpoint.
There are 2 kinds of heat map elements. The deadband polygon element
contains points that allow you to change the shape of the overlay. The
deadband container element is a scalable rectangle shape.
To set up this element for your dashboard:

1. On the Dynamic Properties Accordion, enter the deadband value

in the Deadband field. Note that the deadband spans both sides
of the setpoint.
2. Bind the input object and the input setpoint object to the
Accordion as shown in the red boxes in the above screenshot.

Page 33 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Data Control Function
Element

By default, if there is positive differential, the overlay will turn blue. For a
negative differential, the overlay will turn red. Differential values close to
zero will be white. You can change the colors by clicking on the chain icon
next to Color Gradient.

Setpoint Differential Bar Provides a quick way to add a graphic that shows the setpoint differential.

On the Dynamic Properties Accordion, bind the input object to

Temperature and the setpoint object to Setpoint. Changing the bar
height value will change the highest and lowest numbers on the bar scale.

Drag the controller node from the Station Tree and bind it to Value Path.

enteliVIZ Designer Application Reference Guide Page 34 of 68

Document Edition 1.2
Data Control Palette

Data Control Function

Element

Crescent Gauge The Crescent gauge graphic complements the other Data Control palette
elements by providing modern-looking gauges that you can use to create
a dashboard with a distinct visual style.

On the Dynamic Properties Accordion, you can change the minimum and
maximum values on the gauge scale as well as its thickness and total
length. The Start Angle determines where the scale is positioned in the
gauge’s circular area.

When you change the Start Angle, you may need to move the position of
the minimum and maximum numbers on the scale. You can do this by
going to the Outline pane and selecting the relevant text Indicator
elements. With the text indicator is selected, use your mouse or keyboard
arrow keys to move it to its new location on the graphic.

Object Buttons Opens up a specific BACnet object’s enteliWEB page in a new browser tab.
For example, the EV button opens the event object dialog.

The supported objects are listed below:

• Event object (EV)

• Trend Log object (TL)

1. TL Button
2. SCH Button • Calendar object (CAL)
3. CAL Button 4. EV Button
5. EC Button 6. MT Button • Schedule object (SCH)

• Elevator Controller (EC)

• Multi-trend object (MT)

Popup Boxes Displays a popup box that displays object values when a user mouses over
the plus sign icon. You can display up to 4 analog values and 1 binary
value. All values are read-only.

1. Popup Box Left

2. Popup Box Top The analog values are visually represented by a colored bar whose length
3. Popup Box Right is directly proportional to the value displayed.
4. Popup Box Bottom
To display an analog object value, drag and bind the analog object from
the Metrics pane to one of the 4 Dynamic Properties Accordion Path ords.
To display the name of the object, in the same row section, either enter
the name in the Label field or drag and bind the object’s Name property
to the Label field.

Page 35 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Data Control Function
Element

To display a binary object value, drag and bind the object’s value property
to the Value field.

To display the name of the object, in the same row section, either enter
the name in the Label field or drag and bind the object’s Name property
to the Label field.

Spin Box Allows you to change an analog value by pressing up and down arrows.

To set up this element on your dashboard,

1. On the Dynamic Properties Accordion, drag and bind the analog

object that you want to control to the accordion.

2. In the Up Increment and Down Increment fields, enter the

value to be added or subtracted when you click the Up or Down
arrows respectively.

enteliVIZ Designer Application Reference Guide Page 36 of 68

Document Edition 1.2
Text Palette

Text Palette
Text Elements
The text elements enable you to add text, numbers and tables to your dashboard. When bound
to object properties, this element can be used to display real time values. In most elements, the
options to style the text are found in the Indicator Accordion in the Property Inspector.

To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Text Element Function

Indicator Displays text. Using the different filters in the Property Inspector, you can
create stylized text with a few simple clicks. The example below was
created by combining Glow and Drop Shadow filters. You can also select
the type of font you want to use.

Additional Resources:

For more information about how to bind a text indicator to an object, see
Data Binding 101 video on the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizDataBinding

For more information about how to bind the color of a text indicator to an
alarm status, see Alarm Annunciation Using Font Color Changes video on
the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizAlarmAnnunciation

Flip Numeric Indicator Displays whole numbers. Number changes are animated to display a
split-flap effect.

Alpha Numeric Indicator 3 Displays letters, numbers and punctuation marks like decimal points and
commas. This element simulates a flip-clock style display with a gloss
overlay.

Page 37 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Text Element Function

Alpha Numeric Indicator 1 Displays letters, numbers and punctuation marks like decimal points and
commas. This element simulates a LED style display.

Alpha Numeric Indicator 2 Displays letters, numbers and punctuation marks like decimal points and
commas. This element simulates a LED style display.

Real Time Table The Real Time Table is a quick way to create and display a table of real
time property values on your dashboard. Drop the object property values
Historic Table into the table and a new Data Providers Accordion appears in the Property
Inspector. The Data Providers Accordion lists all the properties and their
nodes.

When you are using the Historic Table, the history associated with the
object property is automatically detected and displayed when you drop a
property value into the table.

Additional Resources: You can create a chart using the Real Time Table
element. See the Creating a Chart that Allows You to Sort Data video on
the Delta Controls Support web site
http://support.deltacontrols.com/Support/Howto/EVizSortChartValues.

Rich Text Area This element offers additional formatting to the options on the Indicator
Accordion, like bulleted lists, hyperlinks and paragraph alignment. You
can also enter text directly on the Rich Text Area element without opening
the Property Inspector.

enteliVIZ Designer Application Reference Guide Page 38 of 68

Document Edition 1.2
 Text Palette

Indicator Accordion
All the indicator-type text elements display this accordion in the Property Inspector. In the
Indicator Accordion, you can make style changes to the text and customize the text positioning
and alignment (see screenshot below).

Indicator elements with more complex style components have more options to change the
appearance of the element. For example, the LED alpha numeric text element has a Text
Overflow option that deals with cases where the number of characters exceeds the allowed
character space.

You can display an

object’s property value
Fit to Full Size when by binding the property
enabled will resize the to the Text field or the
text to fit the indicator Value field (as seen in
frame. other Text elements.)
You can also drag the
Auto-Size when enabled
property value directly
will resize the indicator
on the Text element on
frame to fit the text.
the canvas.

Padding refers to the space

(in pixels) between the
frame and the text. For
Letter Spacing is the space example, Padding Right
between individual letters refers to the space between
in the indicator frame. the indicator frame and the
right side of the text.

Data Grid Header and Data Grid Accordions

Instead of the Indicator Accordion, the Real Time and Historic Table elements display these data
accordions in the Property Inspector:

Data Grid Header

Allows you to customize the style of the header row by changing the font, name, fill colors and
position of text.

Page 39 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Data Grid
Convert the data in the table into a chart or a gauge
by selecting the appropriate element in the Replace
By drop-down list. Before replacing the table, you
can use columnMode to select how the data should
be organized.

In the Styling section, use the options to change the

table style.

Border Thickness and Border Color: Controls the

border around the table.

Background Alpha and Background Color: Us

these options to change the background
transparency and color respectively.

Alternating Colors: Gives your table rows

alternating colors.

Roll Over: Determines the mouse-over behavior.

Selection Color: Determines the color of the row

when it is selected.

There are 3 options in Scroll Policy: Off turns off

scroll bars and the table automatically tries to
accommodate all rows and columns in the current
table size. On enables scroll bars, and Auto enables
scrolling when data display exceeds the current
table size.

enteliVIZ Designer Application Reference Guide Page 40 of 68

Document Edition 1.2
Media Palette

Media Palette
Multimedia elements
To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Multimedia Element Function

Media Use this element to add an image or flash file to your graphic. The
image scales or resizes proportionally by default.

Additional Resources: For more information about using the Media

element, see Importing Images video on the Delta Controls Support web
site https://support.deltacontrols.com/Support/Howto/EVizMedia.

Image Use this element to add an image to your graphic. The image will not
scale or resize proportionally because the image’s size is dependent on
the number of its pixels. In the example below, the same image is
displayed using both media and image elements. The image element is
ideal if you want to preserve the original image size and pixel number.

Frame Animator Creates an animation based on a series of images. For more

information, see the Frame Animator section on page 57.

Video Use this element to add a video to your graphic. Supported files include
AVI, FLV, M4V, MOV, MP4, MPEG and WMV formats. Note that files can
only be accessed through external web addresses.

DGTube Allows you to embed a YouTube video hyperlink in your graphic.

Page 41 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Multimedia Element Function

Sound Allows you to embed a link to a sound file.

MapQuest Map Inserts a MapQuest map in your graphic.

Portlet Inserts a browser window that displays a web page within the graphic.
This is different from adding a behavior that has an Open Web action,
which only opens a web page in a new tab.

Webcam Allows you to embed a webcam feed in your graphic.

Video Accordion
In the Source field, enter the web address of
the video file.

If Active is enabled, the video file will auto-

play when the user views the graphic. Auto
Repeat will replay the video automatically at
the end of the file. Smoothing will make the
playback smoother.

Volume gives you the ability to control the

sound volume between 0 and 1.

Image Accordion
The options available on the Image Accordion make the Image element different from the Media
element. Even though you can use either one of these elements to add an image file to your
graphic, the Image element offers more ways to customize how the image looks on the canvas
and allows you to add text as well. See the example in the screenshots.

enteliVIZ Designer Application Reference Guide Page 42 of 68

Document Edition 1.2
Media Palette

Blink when enabled makes your image blink on and off each
second. Background Blink will cause the image background
blink with the image.

Duct Mode tiles the image horizontally as many times as

needed to fill the image frame. Text-Icon Gap is the gap
between the text and the image in pixels. Text-Icon Align
controls the text relative to the image. The Horizontal and
Vertical Align controls image alignment.

Over Effect determines what happens when you mouse over

the image.

Complex Text Fill changes the color of the text by adding a

fill. You can select a gradient or solid fill, or an fill made up of
an image.

Page 43 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Graphics Palette
Graphics elements
To save time, enteliVIZ Designer provides some ready-made graphics that you can use on your
dashboard. All elements are scalable by default.

To maintain the aspect ratio of the element, press the SHIFT key when you drag the element to
change its size, or enable Maintain Aspect Ratio on the Media Accordion.

Graphic Element Function

Color Themes There are currently 49 themes which all feature an upper colored
border that divides the element into 2 sections. This is a fast way to
create a simple home page container.

To expand the image so that it fills the entire dashboard, select the

element on the canvas and click the Full Size button .

Patterns Patterns can be used as attractive dashboard backgrounds.

To expand the image so that it fills the entire dashboard, select the

element on the canvas and click the Full Size button .

Shadow This is a collection of different types of drop shadows.

Callouts This is a collection of different callout shapes. To add text to the callout,
add an Indicator text element on the callout.

Elements This is a group of common dashboard interface components like

lozenges, switches, buttons, bars and labels.

Icons This is a group of ready-made icons that include common navigation

icons like back and forward arrows and close window buttons. enteliVIZ
Designer has also provided some energy- and nature-themed icons.

Backgrounds This is a variety of different images that you can use as dashboard
backgrounds. The styles range from abstract contemporary to photos.

enteliVIZ Designer Application Reference Guide Page 44 of 68

Document Edition 1.2
Graphics Palette

Graphic Element Function

Glass Effect enteliVIZ Designer provides 11 different glass effects to give your
dashboard a glossy glass-like effect.

Components elements
Component elements are a combination of different basic palette elements in a single widget.

To maintain the aspect ratio of the element, press the SHIFT key when you drag the element to
change its size. To add an element to the canvas, double-click on the element icon or drag an
element onto the canvas using your mouse.

Component Function

Shadow Panel This is a ready-made drop shadow for a rectangular or square object.

The color of the shadow is dependent on the color of the dashboard

background. The shadow will contain a complementary color of the
dashboard. For example, if the background is yellow, the shadow will be
purple.

Button Bar The Button Bar is a horizontal row of buttons. It provides a quick and
easy to create a navigational menu bar. To modify this Button Bar
element, first unlock the children in the Outline pane.

The padding and spacing between buttons is controlled by the styling

options in the Content Area Accordion.

Weather Widget This widget displays the current weather conditions and a 5-day
forecast.

To indicate which city you would like displayed, enter the city’s zip
code/postal code in the Zip Code field on the Weather Accordion. This
widget supports most large cities worldwide.

Page 45 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Component Function

Calendar This element displays the current date set up on the computer on which
the dashboard graphic is installed.

Interactive Globe The globe element is an object that can be animated by changing its
frame numbers. When animated, the globe rotates on a vertical axis.

Additional Resources: For more information about how to use the

Interactive Globe element to create a gradient map, see Gradient
Mapping video on the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizAnalogGradient

enteliVIZ Designer Application Reference Guide Page 46 of 68

Document Edition 1.2
Form Elements Palette

Form Elements Palette

Form Elements
Form elements are used on graphics that require a user decision to start or complete an action.
In these cases, these forms elements help users to enter or modify values, or select an option
on the dashboard.

To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Form Element Function

Sliders A slider element provides a way to input or change values on your

dashboard. The range of values that can be entered using a slider
is limited by the minimum and maximum values at both ends of the
slider track.

Additional Resources: For more information about how to link the

slider element to a gradient map, see Gradient Mapping video on
the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizAnalogGradi
ent

Buttons Buttons are commonly used to trigger events on a dashboard.

Buttons can also help a user navigate through a dashboard,
especially if there are multiple layers of graphics.

Additional Resources: For more information about how create a

button template using a Simple Repeater, see the Repeaters 101
video on the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizSimpleRepe
aters

To change the default button display label, go to the Button

Accordion. For those buttons without a Button Accordion,
label fields are found on the Dynamic Properties Accordion.

Radial Button These elements are used to select an option from a list of options.
Radial buttons belonging to the same group are identified by their
Group Name on the RadioButton Accordion. Only one button in a
group can be selected at any time.

You can bind a binary object property to the Selected property on

the RadioButton Accordion and create a click Data Action behavior
to command the binary object.

Page 47 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Form Element Function

Check Box This element is used to turn on or off or select an option from a list
of options. Unlike Radial Buttons, these check boxes work
separately from each other.

You can bind a binary object property to the Selected property on

the RadioButton Accordion and create a click Data Action behavior
to command the binary object.

Color Picker Use this element to provide a way for the user to select a color
from a palette.

Date Picker The Date Picker allows the user to select a date by using the arrow
keys to move through the dateline or by clicking the date to bring
up a calendar.

In the Time Picker Property Inspector, you can change the

following properties on the Dynamic Properties Accordion: font
color, the Date Picker’s background color, buttons and arrow
colors.

In order to set up how a user selects a date using the Date Picker,
unlock the children elements in the Outline pane so that you can
select the DateRange Picker.

enteliVIZ Designer Application Reference Guide Page 48 of 68

Document Edition 1.2
Form Elements Palette

Form Element Function

Drop Down Use this element to allow users to select an item from a list.

Additional Resources: For more information about how to create a

drop-down navigation menu, see the Creating a Drop-Down
Navigation Menu video on the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizNavigationD
ropDown

Text Input The Text Input element is an editable field that allows the user to
enter text and numbers.

For example, you can set up the element so that any value entered
in the field would be the new value for an object. This would involve
binding the object to the Text property and creating a Enter
behavior with data action.

Text Area This element displays read-only text in your graphic. The element
can also be configured to allow your users to enter text.

Open File This element allows the user to access the source file directory
from a dashboard so that you can upload, open or delete files.

Slider This is a more stylized version of the slider element mentioned

earlier in this table: it is made up of several children elements.

The options to customize this element are available on the

Dynamic Properties Accordion.

Slider Accordion (Sliders Form Element)

If Allow Track Click is enabled, in addition to clicking on the

slider handle, you can also click on the slider track to move
the handle.

Live Dragging when enabled allows the Value to update in

real time as the slider moves up and down the track.
(You can’t really see this in Preview mode unless you bind the
Value field to a Text element.)

Show Data Tip when enabled displays the value in a tool tip as
the slider is dragged across the track.

Snap Interval is the tick mark value the slider will snap to
when moved.

Page 49 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Date Range Editor Accordion
In the Outline pane, once you unlock the Date Picker’s children elements (see Form Elements
table above), click the DateRange Picker element to bring up the Date Range Editor Accordion.
Some fields in the Date Range Editor Accordion are read-only, like Text, Prev Value, Next
Value, and the format fields.
Despite what is displayed in the Date Range Editor, there
is no way to set up the date you want displayed in the Date
Picker. The Date Picker will display the date set up on the
computer on which the dashboard graphic is installed.

Auto-Size allows the text in the Date Picker to resize

automatically and fill the date box.

Use the Font section to change the font style and letter
spacing. To change the font color, go to the Time Picker
Property Inspector.

In the Tabs section, the options that you enable or disable

will show or hide the tabs displayed with the calendar.

enteliVIZ Designer Application Reference Guide Page 50 of 68

Document Edition 1.2
Form Elements Palette

Drop Down Accordion

The Drop Down Accordion has a mass of options that control the content and appearance of the
Drop Down element.

In the Data field, enter the list of choices that appear on

the drop-down list.

The Text (for binding) field can be used as a source when

binding the Drop Down element to any other graphic.
Alternatively, you can also use the Selected Index as a
binding source. Each index number corresponds to an
item on the drop-down list.

Row Count is the total number of choices that will be

displayed in the drop-down list. If the Data field has more
items than the number allowed, these extra items will not
appear on the list.

Fill Colors correspond to the color of the drop down

element. In this screenshot example, the drop down
element is purple and yellow in color.

When you mouse over the drop down element, it turns

green and blue.

Page 51 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
AHU, HVAC and HVAC2 Palettes
The AHU, HVAC and HVAC2 palettes differ mainly in style but they contain similar types of
elements like ducts, coils and dampers. The HVAC is recommended over the other palettes
because the HVAC was created specifically for Delta Controls applications.

The table below points out the differences between the 3 palettes and shows you the elements
you can expect to find in each of them.

Element Type HVAC Palette HVAC2 Palette AHU Palette

Ducts Yes Yes Yes

Heating and Cooling Yes Yes Yes

Coils

Dampers Yes Yes Yes

Fans Yes Yes Yes

Filters Yes Yes Yes

Diffusers Yes Yes No

Sensors Yes (but no freezer Yes (but no freezer Yes (but no airflow
sensor) sensor) sensor)

Humidifiers Yes Yes Yes

Desiccant Wheel Yes Yes No

Pump Yes Yes see Plant Palette on

page 59

Boiler Yes Yes see Plant Palette on

page 59

Cooling Tower Yes Yes see Plant Palette on

page 59

Piping Yes Yes Yes

Air Movement Arrow Yes Yes No

Graphics

enteliVIZ Designer Application Reference Guide Page 52 of 68

Document Edition 1.2
AHU, HVAC and HVAC2 Palettes

Element Type HVAC Palette HVAC2 Palette AHU Palette

UV, Heat Recovery, Hex, No Only Heat Recovery Yes

RTU

Zones No Yes Yes

Meters, Wall Sensors No Yes No

VFD No Yes No

Tanks No Yes No

In the example below, even though the duct dashboards were created using similar elements
from each palette, they look very different from each other. You should not mix and match
elements from different palettes because elements from both palettes do not fit each other.
For a consistent look, only use elements from one palette in your dashboard.

Page 53 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Additional Resources: The elements in the HVAC2 palette are quite large and may need to be
resized to fit smaller screens. To find out how to resize multiple elements in a graphic at the
same time, see the Scaling an Entire Graphic video on the Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVixzScalinganAHU.

The following sections describe the general types of elements in both the AHU, HVAC2 and
HVAC palettes and how they can be used to create informative dashboards.

Note: If you are using enteliWEB 2.1 or 2.2, you have to download and install HVAC2 palette on
enteliVIZ Designer. Go to the Delta Controls Support web site KBA2117
http://support.deltacontrols.com/Support/Kbase/KbA2117 to download the HVAC2 file.

Ducts Elements
Ducts are used in heating, ventilation and air conditioning systems to deliver fresh air and
provide temperature control in an occupied building. Though there are different kinds of ducts
used in the industry, the ones in the AHU and HVAC palettes are drawn to look like the
commonly used galvanized steel ducts. The ducts in the HVAC2 palette are white and glossy.

enteliVIZ Designer Application Reference Guide Page 54 of 68

Document Edition 1.2
AHU, HVAC and HVAC2 Palettes

When creating a duct graphic, there are several shortcuts in enteliVIZ Designer that can speed
up the drawing process when you use either one of the palettes:

Connector Tool

The Connector tool is a quick way to connect duct elements together without going back to the
palette to get each element.

When a duct element is selected on the canvas, blue arrows appear on either side of the
element. Click on the blue arrow to display the common duct elements that will complete the
selected duct. After you select an element from the box, that element snaps into place and
you’re prompted to select another piece to complete the one you’ve just added.

Duct Mode

This is an easier way to create a long duct graphic rather than adding one element at a time.
When Duct Mode is enabled by default on the Image Accordion, it enables you to click and drag
an open end of the duct element to “stretch” the duct across a horizontal or vertical space.

To create a long duct in Duct Mode, mouse over any round point to bring up a double-arrow
cursor and click and drag the point to get the length of duct you want. This feature works best
on simple straight duct elements.

Page 55 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Image Accordion
Ordinarily, you would not need to add text to a duct
element. But if you wanted to, you could add text in the
Text field and set up its position using the Align and Text-
Icon fields. The values in this screenshot would produce a
text image like this:

The Text-Icon Gap is a space between the element and

the text. You can position the space using the Text-Icon
Align field. The Horizontal and Vertical Align fields
determine where the text sits in the gap. Over Effect is
what the user will see when they mouse over the element.

Select a color in Complex Text Fill to be the font color.

Alternatively you can also pick a color in the Font section,
but both options cannot be selected at the same time.

Equipment
The palettes contain all the equipment graphics you need to create a working dashboard. As
mentioned in an earlier section, you should not mix and match AHU and HVAC palette elements
in the same dashboard graphic.

Parts of an equipment element can be animated and set up to respond to changes in the object
property value in real time. To set this up, bind the property to the Active switch on the Frame
Animator Accordion or bind the property directly to the Image field on the Image Accordion. In
cases where there are no Frame Animator or Image accordions, you may find the animation
controls on the Dynamic Properties Accordion.

More equipment graphics like boilers and chillers can be found in the Plant and HVAC Misc.
palettes. In the HVAC2 palette, boilers, chillers, tanks and pumps are found in the element
group called Plant Equipment.

enteliVIZ Designer Application Reference Guide Page 56 of 68

Document Edition 1.2
AHU, HVAC and HVAC2 Palettes

Frame Animator Accordion

Frame animation simulates the moving parts in HVAC equipment. Palette elements are
animated by cycling through a series of different images that you set up in the Frame Animator
accordion. In a graphic, moving parts are used to indicate the equipment’s on/off status. That’s
why these types of palette items are normally bound to binary object properties.

The Interval field determines the time interval between

each frame in milliseconds which determines the
animation speed.

The Image Inactive field shows you the image that is

displayed when the element is not animated.

The Active switch turns on or off animation, the Reverse

switch reverses the animation direction.

The Frames section displays the image file in each frame.

Image Accordion
Equipment palette elements with an Image accordion map value ranges to static images. This
type of value-driven animation is an ideal way to monitor the statuses of analog objects.

When you bind a property value to the Image field, the Image Label dialog is displayed. In this
dialog, map a value range to a specific image so that that image is displayed at that range.

Page 57 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Piping
The HVAC palette contains 2 kinds of piping: 3D and 2D piping. The 2D piping works well with
the Boilers and Chillers elements in the Plant palette. The HVAC2 palette pipes are available in
3D and copper. To change the color of these pipes, in the Layout Accordion, select the
appropriate Tint color in the Color Effect section.

The AHU palette contains only one kind of piping. To change the color of these pipes to red, in
the Layout Accordion, adjust the Hue and Contrast until you get the correct red color.

Like the duct elements, pipe elements also use the Connector tool and Duct Mode to help speed
up the drawing process. For more information about the Connector tool and Duct Mode, see
page 55.

Zones
The Zones elements are part of the AHU palette and provide the basic graphics needed to create
a zone control dashboard. These include ducts, sensors and multizone units. Each multizone
unit is pictured with its discharge manifold. Unlike the Equipment elements, these graphics
cannot be animated.

If you are looking for VAV/VVT and fan-coil graphics, use the ones available in the Zone or
HVAC2 palettes.

enteliVIZ Designer Application Reference Guide Page 58 of 68

Document Edition 1.2
Plant Palette

Plant Palette
The Plant palette provides graphics to create a dashboard of a chiller boiler or heat pump
system.

The elements in this palette (except the Valves and Temperature elements) can be animated to
display real time changes. To set this up, bind the object property to the animation controls on
the Dynamic Properties or Frame Animator Accordions. If you need add pipes to these graphics,
use the 2D Piping elements from the HVAC Palette.

Boilers Chillers

1. Fan Coil 2. Single Fan Coil Heat

1. Atmospheric Boiler 2. Firetube Boiler 3. Round Boiler
4. Round Boiler Small 5. Square Boiler

Cooling Towers Pumps

1. Pump Horizontal Left

2. Pump Horizontal Right
3. Pump Vertical Up
1. Cooling Tower Right 2. Cooling Tower Left 4. Pump Vertical Left
3. Cooling Tower Right Small 4. Cooling Tower Left Small 5. Pump Vertical Right
5. Tower Multi Left 6. Tower Multi Center
7. Tower Multi Right

Page 59 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Valves Temperature

1. Temp Well 2. Temp Well Small

1. Valve 2-Way Horizontal 2. Valve 2-Way Vertical Left

3. Valve 2-Way Vertical Right 4. Valve 3-Way Horizontal
5. Valve 3-Way Vertical Left 6. Valve 3-Way Vertical Right

enteliVIZ Designer Application Reference Guide Page 60 of 68

Document Edition 1.2
Zone Palette

Zone Palette
The Zone palette provides graphics to create a complete zone control dashboard. The elements
in this palette (except the Radiant elements) can be animated to display real time changes. To
set this up, bind the object property to the animation controls on the Dynamic Properties
Accordion.
VAV/VVT Fan Coils

1. Fan Coil 2. Single Fan Coil Heat

1. VAV Cooling Only 2. VAV Cooling Electric Reheat

3. VAV Cooling HW Reheat 4. VAV Parallel Electric Reheat
5. VAV Parallel HW Reheat 6. VAV Series Electric Reheat
7. VAV Series HW Reheat 8. VAV Dual B 9. VVT Cooling Only
10. VVT Electric Reheat 11. VVT HW Reheat

Heat Pump Unit Ventilators

1. Unit Ventilator
2. Unit Ventilator Electric Heat

Radiant

1. Hot Water Radiator 2. Ceiling Radiant Heat 3. Baseboard

Radiant Heat 4. Wallmount Radiant Heat

Additional Resources: For more information about the Zone Palette, see the Zone Palette video
on the Delta Controls Support web site https://support.deltacontrols.com/Support/
Howto/EVizZonePalette.

Page 61 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Data Palette
Operation Elements
The Data Palette allows you to add logic to your graphic quickly without much coding. To apply
the logic, you need to create data and property bindings between objects and fields on your
dashboard.

To add an element to the canvas, double-click on the element icon or drag an element onto the
canvas using your mouse.

Operation Function

Simple Operations Use the Simple Operations element to:

• Create simple mathematical expressions by selecting the

appropriate operation (multiply, divide, add and subtract)

• Round up values to a whole number or a specific number

of decimal places

• Concatenate up to 3 strings

enteliVIZ Designer Application Reference Guide Page 62 of 68

Document Edition 1.2
Data Palette

Operation Function

Math Expression This element allows you to write more complicated mathematical
expressions using up to 10 variables. You can also enter a message
that is displayed when expressions result in an error.

If Block Use this to create an If-Then conditional statement between

Input 1 and Input 2 fields in the If Block Accordion using the
following operations:

• == Equals

• != Not equals

• > Greater than

• < Less than

• >= Greater or equals

• <= Less than or equals

• && Both sides of the expression must be true for the

expression to be true (“AND”)

• || As long as one side of the expression is true, then the

expression is true (“OR”)

In the Value Mapping section, you can also define what the true and
false values should be. These values can be numbers or text or
both.

Case Widget Use the Case Widget if you need to compare your input value
against multiple conditions. You can also define what each true
result should look like in each case.

Page 63 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
 Operation Function

Timer When the timer is enabled, this palette element will start counting
until it is reset or turned off. The Delay is the interval between each
count in milliseconds. If a number is entered in the Repeat Count
field, the counter will stop once this number is reached.

Script The Script element allows you to execute a script written in

ActionScript® 3 in your graphic. ActionScript is a programming
language for the Adobe® Flash® platform.

The dynamic properties created on the Dynamic Properties

Accordion in this element can be used as variables in the script.

When you mouse over the Script window, click to open a larger
version of the Script window to enter your code.

When Execute on Change is enabled, the script is executed

each time a variable changes. In most cases, you must turn
this on in order for your script to work.

The Output field displays the output value of printf() call. In the
Icon field, you can replace the default Script element image with
your own icon image but it still will not be visible on the final
dashboard graphic.

Additional Resources: For more information about ActionScript,

see the Adobe ActionScript reference web site
http://help.adobe.com/en_US/FlashPlatform/reference/actionscrip
t/3/package-detail.html.

enteliVIZ Designer Application Reference Guide Page 64 of 68

Document Edition 1.2
Data Palette

Operation Function

Transformation The different elements in the Transformation group help organize

and customize table data. Before you start using these elements,
you have to define the source table by binding the source table to
the Input or Table field in the Property Inspector.

Filter. The Filter element allows you to filter, page or sort table
data based on the filter expressions you create and the parameters
that you specify. It is recommended that you create a filter that only
pages or sorts but not both at the same time.
1. Filter 2. Rollup 3. Date
Formatter 4. Table of Operations Rollup. The Rollup element allows you to roll up historical data in a
5. Table Generator 6. Group By table based on the data’s timestamp. You need to define which
table column is the date field and how the data is rolled up before
you generate the output table.

Date Formatter. Use this element to reformat the timestamp.

Table Of Operations. Use this element to read and/or write to your

table and its data. You can even delete table rows. Using the row
index and filters in this element, you can call up a specific row
and/or column and modify the data.

Table Generator. The Table Generator element allows you to

create an output table with a specific number of rows. The columns
in this table can be created using formula- or binding-type columns
from another source table.

Group By. Use this element to regroup table data based on a

grouping pattern found in a specific column. When data is
regrouped, it is rolled up at the same time.

Loaders These elements allow you to bring in data from external sources
into your graphic. The CSV Loader brings in data from a CSV file.
The JSON Loader brings in data via a JSON feed. The XML Loader
brings in data via an XML feed.

Additional Resources: For more information about how to use the

XML Loader to bring in the Active Alarm List data from enteliWEB,
see the Displaying the AA List Using XML Loader video on the Delta
1. CSV Loader 2. XML Loader Controls Support web site
3. JSON Loader https://support.deltacontrols.com/Support/Howto/EVizDisplayingT
heAAListUsingXMLLoader

For more information about how to use the JSON Loader to bring in
data, see the Populating Table Using Json Loader video on the
Delta Controls Support web site
https://support.deltacontrols.com/Support/Howto/EVizPopulatingT
ableusingJsonLoader

Page 65 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Table Operations Accordions
When you bind a source table to the Table field on the Table Accordion, these new accordions
are displayed in the Property Inspector:

Using the Invoke buttons, you can either add a row after
the current row, or move up and down rows. In the
Current Row field, enter the row number you want to
select.

The names of each column are displayed in the middle

section, along with the current row values.

The Read button triggers a read of the current row, and

the Write button writes any new values to the current row.

Turn on Write on Change if you want values to be

immediately written when they are changed.

In the Row Number field, enter the row number you want
to delete. The Delete Row button deletes the row in the
Row Number field.

Enter a filter expression that will delete a set of data.

Turning on Use Numeric Filter enables you to enter a
numeric filter in the Filter field.

Click View to view a table containing the filtered data to

be deleted. Click Delete Set to delete filtered data, click
Clear All to delete all data from the source table.

Bind the incoming table containing the data you want to

add to the Append From field.

If there is more than 1 sheet in the incoming table, enter

the sheet number in the SheetId field. If needed, enter a
filter expression to filter the data from the incoming table.

Click Result Set to view a table containing the filtered

data to be added. Click Append to add data to the original
source table.

enteliVIZ Designer Application Reference Guide Page 66 of 68

Document Edition 1.2
Data Palette

Group By Accordion
This section describes how to use the Group by element to regroup table data automatically.

Bind the source table to the Input field (as shown in this
example) and click the Invoke button to display the
Columns Accordion.

After setting up all the options in the Columns Accordion,

click View to display the output table containing the newly
grouped data.

The Columns Accordion displays sections named after the

column titles found in your source table.

To set up how data is grouped, only turn on Group By for

the column that contains the grouping pattern.

For the column that does not have Group By turned on,
select a Function option to determine how the data in the
remaining column will be rolled up.
CSV, XML and JSON Accordions
This section uses the XML Accordion as an example of the typical functions available on this
accordion.

Enter the URL of the XML or JSON feed in the Path field.
For the CSV Loader, you enter the file path of the CSV file in
this field.

In the Parameter field, enter the method that should be

performed on the source feed. The Polling Interval is the
refresh rate in seconds.

The Raw field displays the raw data retrieved from each
feed.

Click View to view the output data in a table form.

Page 67 of 68 enteliVIZ Designer Application Reference Guide

Document Edition 1.2
Document Revision History
Document Edition Date Published Author Change Description
Number

1.0 April 4, 2014 Norlinda Ghazali None.

1.1 August 8, 2014 Norlinda Ghazali • Renamed the doc to

enteliVIZ Designer
Application Reference
Guide.
• Added new section for the
Data Control Palette.
• Revised the Data palette
Script element information.
• Added information about
grids and the File menu.
• Revised the supported
video format list for the
Video media element.
1.2 September 3, Norlinda Ghazali • In the Media Palette
2014 section, added information
about accessing media files
using the Video element.
1.3 October 3, 2014 Norlinda Ghazali • Added the new HVAC2
palette to the HVAC palette
section.
• Renamed the video about
“scaling a graphic” to
“scaling an element”.

enteliVIZ Designer Application Reference Guide Page 68 of 68

Document Edition 1.2
www.deltacontrols.com