Skip to main content

Graphics Builder - Widget Library

  • Updated

Overview

Widgets are what constitute a dashboard. They are the most basic components that display a piece of information.

widgets.png

 

Widget Library

NOTE: Widget Library is being expanded based on customer feedback, the below table represents available widgets as of 10/26/2021.

# Widget Description Configuration Workflow Visual Appearance Example
1 Charts
1.1 Area Chart combines the line chart and bar chart to show how one or more groups
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Area Chart’
  4. Adjust Widget Style
  5. Apply Data Pipelines
 area-chart.png 
 1.2

Bar Chart

Vertical Bar Chart presenting categorical data with rectangular bars with heights or lengths proportional to the values that they represent
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Bar Chart’
  4. Adjust Widget Style
  5. Apply Data Pipelines
 bar-chart.png 
1.3  Doughnut Chart A pie chart with a "hole" - a blank circular area in the center. The chart is divided into parts that show the percentage each value contributes to a total.
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Doughnut Chart’
  4. Adjust Widget Style
  5. Apply Data Pipelines
 doughnut-chart.png 
 1.4 Horizontal Bar Chart Horizontal Bar Chart presenting categorical data with rectangular bars with heights or lengths proportional to the values that they represent
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Horizontal Bar Chart
  4. Adjust Widget Style
  5. Apply Data Pipelines
 horizontal-bar-chart.png
 1.5 Line Chart A graphical representation of historical values that connects a series of data points with a continuous line
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Line Chart'
  4. Adjust Widget Style
  5. Apply Data Pipelines
 line-chart.png
 1.6 Pie Chart A circular statistical graphic, which is divided into slices to illustrate numerical proportion.
  1. Add Chart widget to the canvas
  2. Specify Widget Name
  3. Specify Chart type = ‘Pie Chart'
  4. Adjust Widget Style
  5. Apply Data Pipelines
 pie-chart.png
1.7  Scatter Plot Uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. Scatter plots are used to observe relationships between variables.
  1. Add Scatter Plot widget to the canvas
  2. Specify Widget Name
  3. Add Data Source
  4. Adjust Widget Style
  5. Apply Data Pipelines
  
2 Equipment and Peripherals 3D Models

2.1

Coils

TBD

  1. Add widget to the canvas

  2. Specify Widget Name

  3. Add Data Source

  4. Add Rules
coils.png

2.2

Dampers

TBD
dampers.png

2.3

Ductwork

TBD
ductwork.png

 

2.4

Equipment

TBD
eqiupment.png

 

2.5

Fans

TBD
fans.png

 

2.6

Filters

TBD
filters.png

 

2.7

Hydronics

TBD
hydronics.png

 

2.8

Pipes

TBD
pipes.png

 

2.9

Pumps

TBD
pumps.png

 

2.10

Sensors

TBD

 sensors.png
3 Images
3.1 Image External image uploading
  1. Add Image widget to the canvas
  2. Specify Widget Name
  3. Adjust Widget Style
  4. Specify an Image file in Widget Properties
  5. Add Data Source
  6. Add Rules
 turntide.png
4   Layout

4.1

Column

Arranges widgets inside the container in a column
  1. Add Column widget to the canvas
  2. Specify Widget Name
  3. Edit Layout: enables/disables changing the width/height of a widget
  4. Default value - sets default value that the widget will have. If there are rules applied (Turntide User Guides - Graphics - Graphics Builder - Adding a Rule for a Widget ), that will be the value used before getting actual data (Turntide User Guides - Graphics - Graphics Builder - Adding a Data Source for a Widget )
  5. Adjust Widget Style
  6. Add Data Source
  7. Add Rules
 column.png

4.2

Row

Arranges widgets inside the container in a row
  1. Add Row widget to the canvas
  2. Specify Widget Name
  3. Edit Layout: enables/disables changing the width/height of a widget
  4. Default value - sets default value that the widget will have. If there are rules applied that will be the value used before getting actual data
  5. Adjust Widget Style
  6. Add Data Source
  7. Add Rules

 row.png

5.1

Circle

Circle shape

  1. Add widget to the canvas

  2. Specify Widget Name

  3. Adjust Widget Style

  4. Add Data Source

  5. Add Rules
circle.png

5.2

Ellipse

Ellipse shape
ellipse.png

5.3

Line Shape

Line shape
line-shape.png

5.4

Rectangle

Rectangle shape
rectangle.png

5.5

Square

Square shape

 square.png
6 Text

6.1

Link

Clickable link
  1. Add Link widget to the canvas
  2. Specify Widget Name
  3. Specify Link text, Link, Open LInk in and Link URL
  4. Adjust Widget Style
  5. Add Data Source
  6. Add Rules

 

link.png

 

6.2

Table

Data table
  1. Add Table widget to the canvas
  2. Add Data Source
  3. Select columns to be displayed
  4. Adjust Widget Style
  5. Add Data Source
  6. Add Rules
table.png

 

6.3

Tag

Retrieves value of a Tag
  1. Add Tag widget to the canvas
  2. Specify Widget Name
  3. Specify Text
  4. Adjust Widget Style
  5. Add Data Source
  6. Add Rules

tag.png

6.4

Text

Hardcoded plain text
  1. Add Text widget to the canvas
  2. Specify Widget Name
  3. Specify Text
  4. Adjust Widget Style
  5. Add Data Source
  6. Add Rules

text.png 

6.5

Value

Retrieves value of a Point
  1. Add Value widget to the canvas
  2. Specify Widget Name
  3. Specify Text
  4. Adjust Widget Style
  5. Add Data Source
  6. Add Rules
 value.png
7 Widgets

7.1

Dual Setpoint Thermostat

Retrieves and overrides setpoint value
  1. Add Dual Setpoint Thermostat widget to the canvas
  2. Specify Widget Name
  3. Specify Override Priority - a number of a Priority from BACnet Priority Array (1…16) to write a pecified Value (Turntide User Guides - BACnet Basics - BACnet Priority Array | BACnet-Priority-Array-Overview)
  4. Add Data Source
  5. Add Rules
dual-setpoint-thermostat.png

 

7.2

Icon

An icon from the icon library
  1. Add Icon widget to the canvas
  2. Specify Widget Name
  3. Specify Icon - an Icon from the Icon Library
icon.png

7.3

IFrame

Custom Iframe
  1. Add IFrame widget to the canvas
  2. Specify Widget Name
  3. Specify Frame URL - a URL which content is to be displayed inside iFrame
  4. Add Data Source
  5. Add Rules
iframe.png

7.4

Map

Location map
  1. Add Map widget to the canvas
  2. Specify Location
  3. Auto Fetch Site - show current Site on map (if a Graphic is attached to a Site)
  4. Custom coordinates - enter coordinates manually
  5. Specify Widget Name
  6. Add Data Source
map.png

7.5

Slider

Retrieves and overrides setpoint value (enum)
  1. Add Slider widget to the canvas
  2. Specify Widget Name
  3. Specify Enums - the list of enum values (values shall be separated with the comma ',')
  4. Specify Priority - a number of a Priority from BACnet Priority Array (1…16) to write a pecified Value
  5. Add Data Source
slider.png

 

7.6

Thermostat

Retrieves and overrides setpoint value
  1. Add Thermostat widget to the canvas
  2. Specify Widget Name
  3. Specify Override Priority - a number of a Priority from BACnet Priority Array (1…16) to write a pecified Value
  4. Add Data Source
  5. Add Rules
 thermostat.png

 

Related articles