Widgets and Other Objects (PA)
This page covers widgets and other objects for Project Assist 2.0, version 10, for facilities. For DGLux5 components and widgets, see Components and Widgets.
Pages and templates are composed of objects.
This page covers how to work with the following objects:
- HVAC tiles—Tiles for building customizable device graphics (templates only)
- Callouts—Labels and lists
- Charts and gauges—Data tools for displaying historical and current values
- Widgets—Assorted tools to help your users visualize data
This page covers how to add, select, edit, resize and delete these objects. This page also covers how to work with series, which are used by charts, gauges, and node list callouts. Finally, this section contains a reference for object properties.
How to Add an Object to a Page or Template
To add an object to a page or a template:
- Open the page or template in the Page Editor or Template Editor.
Choose the correct tab.
If you are editing a page, you must choose the
Widgets tab.
- If you are editing a page, select a layer group, or leave the layer group as Default. See Layers.
- Expand the object group at the bottom of the screen, such as Charts.
- Find the object that you want to add at the bottom of the browser window, and drag it to the canvas.
How to Select Objects
You can select objects only in the current tab.
To select an object:
- Open the page or template in the Page Editor or Template Editor.
- Choose the correct tab.
- In the Toolbar, choose the
Select tool. - Do one of the following interactions to select objects:
- Click an object to select it.
- Click in an empty part of the Page Editor or Template Editor, and drag a selection rectangle.
- Press Shift and click objects to add them to the selection or remove them from the selection.
How to Copy and Paste Objects
Objects are pasted with the same positions as copied objects. You can copy in one layer group or Editor tab and paste in another layer group or Editor tab.
To copy and paste objects:
- Select the objects.
- With the Select tool as the active tool, right-click one of the selected objects.
- Choose Copy.
- Choose the tab where you want to paste the objects.
- Right-click in the Page Editor or Template Editor.
- Choose Paste.
How to Duplicate Objects
Objects are duplicated with the same position, layer group, and Editor tab as the original object.
To duplicate objects:
- Select the objects.
- With the Select tool as the active tool, right-click one of the selected objects.
- Choose Duplicate.
How to Move Objects
To move the selected object or objects:
- With the Select tool as the active tool, click one of the selected objects and drag to move.
How to Resize Objects
You can resize the selected objects, or you can change the scale of all objects in the Widgets tab.
How to Resize the Selected Objects
The following interactions resize the selected objects:
To resize the selected object or objects, drag the edge or corner of a selected object, as shown in the following animation.
- To resize one object, edit the object’s Width and Height properties in the Property Inspector. See How to Edit Object Properties.
How to Change the Scale of all Objects in the Widgets Tab
To change the scale of all objects in the Widgets tab of a page or template:
Drag the Widget Scale slider to the left and right, as shown in the following image.
How to Move Objects Forward and Backward
To move the selected object forward or backward:
- Right-click the object, and choose Bring Forward, Bring to Front, Send Backward, or Send to Back.
How to Delete Objects
The following interactions delete the selected objects:
- Click the
Delete tool. - Right-click the object, and choose Delete.
How to Edit Object Properties
The following interactions open the Project Assist Property Inspector so that you can edit object properties. See also: Object Properties.
- Right-click the selected zone, and choose Edit Properties.
- With the zone selected, toggle the Properties icon in the toolbar.
How to Work with Series
These steps change series properties and chart type. These steps work for charts, gauges, and callouts.
How to Add a Series
To add a series to a chart, gauge, or callout:
- Open the Project Assist Binding Dialog. See Bindings.
Drag the binding source, and drop it on the chart, gauge, or node list, as shown in the following image.
How to Edit Series
The following interactions edit series in a chart, gauge, or Node List callout:
- To edit a series color, click the color swatch in the Property Inspector and choose a new color.
- To edit a series label, edit the Name property.
- To reorder series, drag and drop them in the series order in the Property Inspector.
- To delete a series, click the
Delete icon.
The following image demonstrates how to reorder series.
How to Replace a Chart or Gauge Type
To replace a chart or gauge with another style of chart or gauge and retain all data and series:
- Change the value of the replaceAs property to the new object type.
Status Colors
You can choose to display status colors in Node Callout objects, Node List objects, and zones.
The following default colors represent the following statuses:
- Green—OK
- Red—Alarm
- Yellow—Stale
- Magenta—Overridden
- Gray—Disabled
- Orange—Fault
Object Properties
This section describes all of the HVAC tiles, callouts, charts, gauges, and widgets that you can add to your pages and templates. It also lists the properties of each object.
A lowercase d in parentheses, (d), indicates the default property for the object. The default property is the property that gets used as the binding target when you drop a binding source on the object. See Project Assist Bindings.
All objects have position properties that can be used to define the X and Y pixel location of the object’s top left corner. All objects also have size properties. Object size is also affected by Widget Scale. See How to Resize Objects.
Many objects have a Visible property. This property determines whether the object is currently being displayed in the page or template. Objects affect layout regardless of whether they are visible.
HVAC Tiles: Ducts
Join these pieces together to represent ducts.
These tiles do not have editable properties, except for position, size, and visibility.
Some of the pieces stretch.
The following image shows some example duct tiles.
HVAC Tiles: Fans
Add these pieces to represent fans.
The following image shows the available fan tiles.
The following are properties of fan HVAC tiles.
| Property | Purpose |
|---|---|
| Interval | Sets the speed of the animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Enabled (d) | Sets whether the animation is running. |
| Reverse | (Only certain fan tiles) Sets the direction of the animation. |
HVAC Tiles: Dampers
Add these pieces to represent dampers.
The following image shows the available damper tiles.
The following are properties of damper tiles.
| Property | Purpose |
|---|---|
| Damper Position (d) | Sets the position of the damper, between open and closed. |
HVAC Tiles: Coils
Add these pieces to represent electric heating coils and water heating and cooling coils.
The following image shows the available coil tiles.
The following are properties of coil tiles.
| Property | Purpose |
|---|---|
| Interval | Sets the speed of the animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Enabled (d) | Sets whether the animation is running. |
HVAC Tiles: Filters
Add these pieces to represent horizontal and vertical filters.
These tiles do not have editable properties, except for position, size, and visibility.
The following image shows the available filter tiles.
HVAC Tiles: Humidifiers
Add these pieces to represent horizontal and vertical humidifiers.
The following images show the available humidifier tiles.
The following are properties of humidifier tiles.
| Property | Purpose |
|---|---|
| Interval | Sets the speed of the animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Enabled (d) | Sets whether the animation is running. |
HVAC Tiles: Desiccant Wheel
Add this piece to represent a desiccant wheel.
The following image shows the desiccant wheel tile.
The following are properties of the desiccant wheel tile.
| Property | Purpose |
|---|---|
| Interval | Sets the speed of the animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Enabled (d) | Sets whether the animation is running. |
HVAC Tiles: Heat Recovery Ventilators
Add these pieces to represent a heat recovery ventilator.
This tile does not have editable properties, except for position, size, and visibility.
The following image shows the heat recovery ventilator tile.
HVAC Tiles: VFDs
Add these pieces to represent large or small VFDs.
These tiles do not have editable properties, except for position, size, and visibility.
The following image shows the available VFD tiles.
HVAC Tiles: Sensors
Add these pieces to represent temperature sensors, differential pressure sensors, smoke sensors, and airflow sensors.
The following image shows some example sensor tiles.
The following are properties of sensor tiles.
| Property | Purpose |
|---|---|
| inAlarm (d) | Sets whether the blink animation is running. (Temperature, differential pressure, and smoke sensors only.) |
| Interval | Sets the speed of the animation, in milliseconds per frame. (Temperature, differential pressure, and smoke sensors only.) Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
HVAC Tiles: Airflow
Add these pieces to represent the direction of airflow.
The following are some example airflow tiles.
The following are properties of airflow tiles.
| Property | Purpose |
|---|---|
| enabled (d) | Sets whether the animation is running. |
| interval | Sets the speed of the animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| direction | Sets the direction of this arrow. Choose between up, down, left, and right. |
| rotation | Sets the rotation of this arrow from the direction, starting from the orientation chosen for the direction property. |
| color | Sets the color of this arrow. Choose between blue, red, and yellow. |
| hue rotate | Sets the hue of this arrow, starting from the color chosen for the color property. |
HVAC Tiles: Terminal Units
Add these pieces to represent full devices. The default property and available properties vary by device.
The following image demonstrates how to add a terminal unit tile to a template.
The following are some example properties of Terminal Unit tiles.
| Property | Purpose |
|---|---|
| Damper Position, Damper Bottom, Damper Top, etc. | Sets the position of a damper, between open and closed. |
| Interval | Sets the speed of an animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Heating | Sets whether a heating coil animation is running. |
| Fan Active | Sets whether a fan animation is running. |
| Cooling | Sets whether a cooling coil animation is running. |
HVAC Tiles: Piping and Copper Piping
Add these pieces to represent pipe segments, valves, and pipe temperature sensors.
Some of the pieces stretch.
These tiles do not have editable properties, except for position, size, and visibility.
The following are some example non-copper piping tiles.
The following are some example copper piping tiles.
HVAC Tiles: Plant Equipment
Add these pieces to represent pumps, boilers, heat exchangers, chillers, generators, tanks, heat recovery coils, and radiant heating.
The following are some example chiller tiles.
The following are some example properties of plant equipment tiles.
| Property | Purpose |
|---|---|
| Interval, etc. | Sets the speed of an animation, in milliseconds per frame. Set this number to the greatest value that gives the visual result you want. Lower number values use more resources than higher values and might not provide a visible difference. |
| Enabled, Active, etc. | Sets whether an animation is running. |
Callouts: Plain Text and Styled Text
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 callouts. In this example, the Styled Text callout inherits its background color and rounded corners from a custom Style.
The following are properties of the Plain Text and Styled Text callouts.
| Property | Purpose |
|---|---|
| Display Text | Sets the text to appear in this callout. |
| Text Font | Selects a typeface for the callout. |
| Text Size | Sets a font size for the callout. |
| Text Color | Sets a font color for the callout. |
| Horizontal Alignment | Sets whether the text is left-aligned, horizontally centered, or right-aligned. |
| Vertical Alignment | Sets whether the text is top-aligned, vertically centered, or bottom-aligned. |
| Padding | Sets a number of pixels of empty space to enforce between the text and the border of the callout. |
| Background | Sets a background color for the callout. |
| Stroke | Sets an outline color for the callout. |
| Stroke Style | Sets an outline type for the callout. |
| Stroke Size | Sets a pixel width for the callout outline. |
| Round Corners | Sets a pixel radius for the callout’s rounded corners. |
| Ellipsis | Sets whether ellipsis points are used when the text does not fit in the callout object. |
Callouts: Node Callout
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. See Status Colors.
The following is an example of a Node Callout object.
The following are the properties of the Node Callout object.
| Property | Purpose |
|---|---|
| Label | Sets the title text at the top of the object. |
| Display Status | Sets whether to show the graphic that indicates the metric status. |
Callouts: Node List
The Node List callout displays the names, values, and statuses of a list of items that you specify. List items behave similarly to chart series. See How to Work with series.
Status is indicated with the default colors. See Status Colors.
The following is an example of a Node List object.
The following are the properties of the Node List object.
| Property | Purpose |
|---|---|
| Label | Sets the title text at the top of the callout. |
| Display Value | Sets whether to show the value of the metric. |
| Display Status | Sets whether to show the graphic that indicates the metric 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. See also: How to Work with series. |
Charts: Line, Area, Bar, Column, and Pie
The Line Chart and Area Chart widgets overlay the historical values for specified 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.
The following image demonstrates examples of line and area charts. In the leftmost chart, stacked area series show contributions to a total. In the rightmost chart, overlapping line series show relative fluctuations over time.
The Column Chart and Bar Chart widgets display the historical or real-time values for specified data metrics. The following image demonstrates examples of bar and column charts. In the leftmost chart, bar series show current values. In the rightmost chart, column series show historical values.
The Pie Chart widget displays relative values for specified data metrics. The following image demonstrates an example of a pie chart.
The following image demonstrates how to export a chart to CSV. In this example, the chart can be exported because the Export CSV property is set as TRUE.
The following image demonstrates how a user can interact with data points via the chart legend, if the Legend Click property is set as action.
The following image demonstrates how a user can toggle series display via the chart legend, if the Legend Click property is set as toggle.
The following are properties of chart widgets. Pie charts use only the Label, Legend, Legend Click, replaceAs, and Export CSV properties.
| Property | Purpose |
|---|---|
| Custom Range | Sets a custom range that overrides the user-selected date. |
| Show Current Value | (Bar and column charts only) Sets whether historical or real-time data is shown. A FALSE value is the default and indicates historical data for the global date range. A TRUE value shows the current, real-time value. |
| Range | Sets whether the chart shows:
|
| Interval | Sets the date/time interval between plotted points. One point is plotted per instance of the interval. The default interval is 15 minutes. |
| Rollup | Sets the date and time interval for the chart rollup. One point is plotted per instance of the interval. |
| Delta | Specifies what is shown for each value. The value of Delta can be one of the following:
|
| Series Type (area, bar, and column charts only) | For historical charts, sets whether and how series overlap. "Overlaid" compares data values by overlapping them. "Stacked" shows how data values contribute to a total. "Clustered" compares data values side by side. The following image demonstrates the three series types. From right to left, these are Overlaid, Stacked, and Clustered series.
|
| Label | Sets the title text at the top of the widget. |
| Legend | Shows or hides 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:
|
| Update Interval | Sets the frequency with which the chart object refreshes data. |
| replaceAs | Replaces this object with the specified object type when a menu item is selected. The new object will have the same data and properties that this object had, where possible. |
| Base At Zero | Specifies whether the chart x-axis is positioned at zero or near to the Y minimum of the data. |
| Export CSV | Sets whether this pie chart has an Export CSV button in the top right corner that allows the user to export its data as a CSV file. |
| Series | Sets the name, color, data path, and order for each series of this chart. You can also change the series order by dragging and dropping series. You can also delete series. See also: How to Work with series. |
Gauge: Radial Gauge
The radial gauge displays the real-time value of one or more data metrics using a semi-circular gauge.
In Project Assist, the Radial Gauge object can be found in the Charts category of objects.
The following image shows an example of the Radial Gauge object.
The following are the properties of the Radial Gauge object.
| Property | Purpose |
|---|---|
| Label | Set the title text at the top of the gauge object. |
| Min | Sets the minimum of the gauge range. |
| Max | Sets the maximum of the gauge range. |
| Legend | Sets whether a legend is included. |
| 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:
|
| 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 | Sets the name, color, data path, and order for each series of this gauge. You can also change the series order by dragging and dropping series. You can also delete series. See also: How to Work with series. |
Widget: Layer Selection
The Layer Selection widget allows the user to control the global layer selection.
See also: Layers.
Tip
Add this widget in the Default layer. This avoids a situation where the widget can navigate to a layer where the widget does not appear.
This widget does not have editable properties, except for position, size, and visibility.
The following image shows an example of the Layer Selection widget.
Widget: Date Range Selection
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.
See also: Global Date Range.
The following image shows an example of the expanded Date Range Selection widget.
The following are properties of the Date Range Selection widget.
| Property | Purpose |
|---|---|
| Date Format | Determines the format with which the date is displayed in the widget. The display is also affected by the user’s locale. The following are some example date formats:
For a reference of date strings, see Scripting and Syntax. |
| Date Delimiter | Determines the character or characters that go between the first and last dates in the range. |
| Custom Range | Sets a custom range that overrides the user-selected date. |
Widget: DVR
The DVR widget can play through historical data for the following real-time objects:
- Zones
- Callouts
- Charts for which the Show Current Value property is set to TRUE (real-time charts)
The date range of the DVR widget is determined by the global date range selection. See Global Date Range, Widget: Date Range Selection.
The DVR widget contains a Pause/Play button that the user can click to begin data playback. It also contains a Realtime/Playback toggle; choosing Realtime causes the current values to be displayed, and choosing Playback causes values from the global date range to be displayed. The following image demonstrates the three portions of the DVR widget.
| 1 | Pause/Play button | 2 | Realtime/Playback toggle | 3 | Current progress |
This widget does not have editable properties, except for position, size, and visibility.
Widget: Weather
The weather widget displays weather information for a specified location.
The following image shows an example of the Weather widget.
The following are properties of the Weather widget.
| Property | Purpose |
|---|---|
| Postal Code | Sets the postal code to display weather information for. |
| Country | Sets the country that goes with the postal code. |
| Units | Chooses between Fahrenheit and Celsius. |
Widget: Image
The Image widget displays an image that you upload.
The following image shows an example of the Image widget.
The following are properties of the Image widget.
| Property | Purpose |
|---|---|
| image | Sets the image. To upload an image, drag it to the specified area, or click the specified image and browse to the file. |
| button mode | Sets whether this image causes a button cursor effect.
This property is useful when you have a Project Tree node bound to the Image widget to create navigation. |