EasyIO Quick Start 04 – CPT Tool Graphics Library v1.

EasyIO Quick Start 04

CPT Tool Graphics Library

1
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Document Change Log

25th Dec 2017

Document created.

2
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Disclaimer

Confidentiality Notice
The information contained in this document is confidential information of EasyIO Holdings Pte Ltd. Such
information and the software described herein, is furnished under a license agreement and may be used
only in accordance with that agreement.
The information contained in this document is provided solely for use by EasyIO Holdings Pte Ltd
employees, licensees, and system owners; and, except as permitted under the below copyright notice, is
not to be released to, or reproduced for, anyone else.
While every effort has been made to assure the accuracy of this document, EasyIO Holdings Pte Ltd is not
responsible for damages of any kind, including without limitation consequential damages, arising from
the application of the information contained herein. Information and specifications published here are
current as of the date of this publication and are subject to change without notice. The latest product
specifications can be found by contacting our corporate headquarters or support channel.

Trademark Notice

EasyIO logo are registered trademarks of EasyIO Holdings Pte Ltd.

CPT Tool is by Online Tools Inc.

BACnet and ASHRAE are registered trademarks of American Society of Heating, Refrigerating and Air-
Conditioning Engineers. All other product names and services, mentioned in this publication, that are
known to be trademarks, registered trademarks, or service marks are the property of their respective
owners.

Copyright and Patent Notice

This document may not, in whole or in part, be copied, photocopied, reproduced, translated, or reduced
to any electronic medium or machine-readable form without prior written consent from EasyIO Holdings
Pte Ltd

Copyright © 2017 EasyIO Holdings Pte Ltd. All rights reserved

Disclaimer
The material in this manual is for information purposes only. The contents and the product it
describes are subject to change without notice. EasyIO Holdings Pte Ltd makes no
representations or warranties with respect to this manual. In no event shall EasyIO Holdings Pte Ltd be
liable for any damages, direct or incidental, arising out of or related to the use of this manual.

EasyIO Holdings Pte Ltd

101, Cecil Street #09-07
Tong Eng Building
Singapore 069533

[email protected]

3
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Table of Contents
Introduction ....................................................................................................................................................6
CPT Release Version........................................................................................................................................6
General Information .......................................................................................................................................7
Link Property...............................................................................................................................................7
Action Property...........................................................................................................................................7
Graphics Library ..............................................................................................................................................8
Boolean Library ...........................................................................................................................................9
Chart Library ...............................................................................................................................................9
Gauge......................................................................................................................................................9
Hprogress Bar .......................................................................................................................................10
Line chart ..............................................................................................................................................10
Meter ....................................................................................................................................................10
Simple meter ........................................................................................................................................11
Thermometer .......................................................................................................................................12
Vprogress Bar .......................................................................................................................................12
History Line Chart .................................................................................................................................13
Coils Library ..............................................................................................................................................13
Dampers Library .......................................................................................................................................14
Devices Library..........................................................................................................................................15
Ducts Library .............................................................................................................................................15
Equipment Library ....................................................................................................................................16
Chiller Basic ..........................................................................................................................................17
Cooling Tower .......................................................................................................................................17
Exhaust Fan...........................................................................................................................................17
FanLeft , FanRight .................................................................................................................................18
Generator .............................................................................................................................................18
Heat Exchanger, Heat Exchanger PF .....................................................................................................18
Heat Wheel ...........................................................................................................................................19
Meter Dial .............................................................................................................................................19
Meter Dial Left, Meter Dial Right .........................................................................................................19
Meter Digital.........................................................................................................................................20
General Library .........................................................................................................................................20
Action Button........................................................................................................................................20
Adapter Widget ....................................................................................................................................21
Date Label, Time Label .........................................................................................................................21
4
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Label .....................................................................................................................................................21
Table .....................................................................................................................................................21
Web Date Range Edit............................................................................................................................22
Web Hex Number Edit ..........................................................................................................................22
Web IP Address Edit .............................................................................................................................22
Web Line Edit........................................................................................................................................22
Web Number Range Edit ......................................................................................................................22
Web Password Edit ...............................................................................................................................23
Web Time Edit ......................................................................................................................................23
Web Time Range Edit ...........................................................................................................................23
Widget ..................................................................................................................................................23
iFrame ...................................................................................................................................................24
Miscellaneous ...........................................................................................................................................24
Piping ........................................................................................................................................................25
Miscellaneous ...........................................................................................................................................25
Technical Support .........................................................................................................................................26

5
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Introduction
This user guide is intended to explain to users each graphics library in CPT tools.
This user guide DOES not provide graphics constructing nor graphics deployment into controller.
Before going through this user guide, please make sure go though the CPT Tools Quick Start.

This User Guide is compatible with EasyIO FG Series and EasyIO FS Series controllers ONLY.

CPT Release Version

At the time of this document CPT is version 0.8 dated: 22nd Dec 2017.
New revision of CPT Tool is release without prior notice.

To verify the CPT release version go to drop down menu Help>About

In the about window refer to the build date.

Updating CPT
CPT Tools is an executable file and do not require any installation process, updating to the latest version
of CPT is by merging all files from the CPT latest released bundle.

**DO NOT create a separate folder for each release. **

Extract the latest zip package; in this case the latest is dated 22nd Dec 2017 to
your hard drive.

Copy all content from the extracted folder and merge (paste) into the current CPT folder in your
computer. Make sure to close any running CPT application before replacing/merging the files.

6
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

General Information
Each graphics widget has an action property and link property.
Refer to image below.

Link Property
The link property is a hyperlink property that gives the user to customize its value.
User can either hyperlink to another CPT graphics page or to a website.

An example of hyperlink to another website can be seen below.

User can choose to open another tab, windows or the same window.

Action Property
The action property will propagate all the actions of an object into graphics.
The system intelligent that it propagate all the actions automatically if the object has actions.

An example of object with “set” action, view from CPT and graphics.

7
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

The actions display can be customize in CPT tool.

Click at the actions property and custom it at the pop up.

Graphics Library
Every CPT tools release consist of few groups of graphics library.
Some are static images some are animated images depending to how you use them.

To use static images simply drag and drop from the graphics library into your graphic page.

If you wish to create bindings for you graphics simply drag and drop a object within your application to
bring up the widget chooser.

8
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Boolean Library

This graphics library is used to represent boolean data.

Widgets can be used as static image or have binding to boolean data type objects.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.

Chart Library

This is a charting widgets library. It can be used with float and integer data type.
Bindings is compulsory for these widgets.
Invalid bindings or missing bindings will result displaying a static image.
These widgets are scalable vector widgets

Gauge

A circular gauge to represent a numeric value, both float and integer data type is supported.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

Warning zone and Critical zone zoning and colour can be customize.

Other customize properties available such as decimal, circle colour and a label.

9
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Hprogress Bar

A horizontal bar to represent a numeric value, both float and integer data type is supported.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

Other customize properties available such as bar colour.

Line chart

A line chart to represent a numerical value, both float and integer data type.
It provide real time value monitoring over a time period user definable.
Binding is compulsory for Line Chart widget.
It supports up to 4 bindings for each Line Chart widget.
Line colour can be customize.
Time period by default is 20mins and it is customizable.

Meter

A circular gauge to represent a numeric value, both float and integer data type is supported.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

10
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Warning zone and Critical zone zoning and colour can be customize.

Simple meter

A circular gauge to represent a numeric value, both float and integer data type is supported.
This widget is similar to meter widget above.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

Warning zone and Critical zone zoning and colour can be customize.

11
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Thermometer

A thermometer gauge to represent a numeric value, both float and integer data type is supported.
This widget is similar to meter widget above.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

Label text and background colour can be customize.

Vprogress Bar

A vertical bar to represent a numeric value, both float and integer data type is supported.
Binding is compulsory for Gauge widget.
Min and Max range of the gauge display can be customize. Default min is zero and max is 100.

Other customize properties available such as bar colour.

12
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

History Line Chart

This widget is compulsory to used with SQL database.

The history line chart to represent historical data stored in SQL database.
It supports up to 4 data columns from same table source.
The table name and column name is case sensitive and the name is the actual SQL SB table and column
name.

Label property is the display text in web page.

Coils Library

13
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

This is a widgets library for cooling and heating coils. It is used to represent boolean data type or as static
image.

Cooling Coils and Heating Coils with various orientation and type supports boolean data type only.

FilterV is used to represent numeric value or as a static image.

If the widget has binding, the image will animate its filter element from bright to darker colour.

Dampers Library

This is a damper widgets library. It can be used with float and integer data type.
Bindings is compulsory if animation is required.
Animations is base default to 0~100% value
Invalid bindings or missing bindings will result displaying a static image.

14
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Devices Library

This library is images of sensors, transmitter to compliment with your equipment page.
These are static images without the need of bindings.

Ducts Library

This library is images of duct works.

These are static images without the need of bindings.
You will use multiple duct image to build your desire duct work mimicking the actual equipment duct
works.

Below image shows multiple duct images

**ignore the space between each image, this is to show multiple images is used**

15
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Equipment Library

This library consist of mechanical equipments.

Depending to equipment some can be animated some are static images.
The following describe those widgets.

16
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Chiller Basic

This is a static image, no binding require.

Cooling Tower

This widget is used to represent boolean data.

Widgets can be used as static image or have binding to boolean data type object.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.

Exhaust Fan

This widget is used to represent boolean data.

17
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Widgets can be used as static image or have binding to boolean data type object.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.

FanLeft , FanRight

This widget is used to represent boolean data.

Widgets can be used as static image or have binding to boolean data type object.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.
If value is true, the FAN blade will spin and air flow will shown.
If value is false, the FAN blade will not spin and no air flow shown.

Generator

This widget is used to represent boolean data.

Widgets can be used as static image or have binding to boolean data type object.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.
If value is true, the internal blade will spin.
If value is false, the internal blade will not spin.

Heat Exchanger, Heat Exchanger PF

This is a static image, no binding require.

18
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Heat Wheel

This widget is used to represent boolean data.

Widgets can be used as static image or have binding to boolean data type object.
This widget is to be used with duct works. An example as above.
If binding is chosen, the widget will animate according to the boolean data actual value of true or false.
If value is true, the internal blade will spin.
If value is false, the internal blade will not spin.

Meter Dial

This is a static image, no binding require.

Meter Dial Left, Meter Dial Right

+ =
This widget is a small tiny meter used to represent numeric data.
Widgets can be used as static image or have binding to float or integer data type object.
This widget is to be used with Meter Dial. An example is shown above
If binding is chosen, the widget arrow will animate according to the numeric data value.
Value range is from 0~10.
The combination of meter dial and meter dial left or meter dial right gives end user an impression of an
legacy analog meter feel.
19
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

The right meter image above is the result of adding few meter dials with bindings to the static meter dial
image.

Meter Digital

+ =
This is a static image, no binding require(left meter image).
However with some label bindings it gives end user an impression of an digital meter feel.
The right meter image above is the result of adding few label bindings to the static digital image.

General Library

This library consist of general widgets such as text labels, action button.
Each widget has it’s dedicated function and capability.
The following describe those widgets.

Action Button

This widget is used to invoked an action of an object.

20
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

The button display text can be customize.

Invoked actions can be customized as well.

In the example above, action “set” is map as the invoked action.
A click at the widget will bring up the value editor window.

Another example below shows the action button widget is used for a boolean object.
The boolean object has actions property , set true and set false.

In the graphics these 2 actions can be represented with 2 actions buttons.

Adapter Widget
This is an generic java script widget.
It is used for develop custom widget that will be used in CPT graphics.
For further information, please refer to adapterWidgetDevGuide.pdf.

Date Label, Time Label

These widgets are used to display the controller actual date and time in a graphics page.
User do not need to bind these widgets as they automatically get the controller date and time that
resides in the service folder.

**DO TAKE NOTE : the service folder name CANNOT be modified or rename**
**If service folder is rename or modified these widgets will return an error**

Label
This is a generic label.
It is used to represents a value or can be used as a simple plain text box.

Table

This widget is similar to Chart widget in Chart library.

21
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

A table widget is used to represent a numerical value, both float and integer data type.
It provide real time value monitoring over a time period user definable.
Binding is compulsory for Table widget.
It supports up to 4 bindings for each Table widget.
Time period by default is 20mins and it is customizable.

Web Date Range Edit

This widget is design to handle date formatting.

This widget will only allow user to perform save if the date or date range is input correctly.
This widget is design to allow user to modify date or date range via web browser.

If the date or date range is input incorrectly the Ok button will be grey out prohibiting user to save.
This widget is used with Calendar object in easyIOschedule kit.

Web Hex Number Edit

This widget is design to handle hexadecimal data format.
This widget will only allow user to perform save if the hexadecimal data is input correctly.
If the hexadecimal data is input incorrectly the Ok button will be grey out prohibiting user to save.

Web IP Address Edit

This widget is design to handle IP address scheme data format.

This widget is design to allow user to modify an IP address via web browser.
This widget will only allow user to perform save if the IP address scheme is input correctly.
If the IP address data is input incorrectly the Ok button will be grey out prohibiting user to save.

Web Line Edit

This widget is design to handle any value format.

It DO NOT have any validation scheme.

Web Number Range Edit

This widget is design to handle number scheme data format.

22
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

This widget has a min and max property to limit user to stay within the min and max range.
This widget will only allow user to perform save if the IP number input is within the min and max range.
If the value is out of the specify range the Ok button will be grey out prohibiting user to save.

Image below show the min and max limit configure for the widget.

Web Password Edit

This widget is design to handle string scheme data format.

This widget will hide the input value and replace with a do(.).
This is meant for security purpose such as email account password.

Web Time Edit

This widget is design to handle time format scheme data format.

This widget will only allow user to perform save if the time date input is correct.
The widget supports both 12hrs and 24hrs format.
If the value is input incorrectly the Ok button will be grey out prohibiting user to save.

Web Time Range Edit

This widget is design to handle time format scheme data format.

This widget will only allow user to perform save if the time date input is correct.
The widget supports both 12hrs and 24hrs format.
If the value is input incorrectly the Ok button will be grey out prohibiting user to save.

This widget is used with Schedule object in easyIOschedule kit

Widget
This is a generic widget.
It can be used to represents an image, floor plan or can be used as a simple colour pane in the graphics
page.

23
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

iFrame
This widget is design to include a web page into the graphics page.
The widget only support web page that capable of displaying in an iFrame such as
https://www.easyio.eu/

Another example is embedded an YouTube video into the iFrame. Use the below URL as the source.
https://www.youtube.com/embed/DRv-7jcFA4M
An example as below. Duct works and iFrame next to each other in single web page.

Miscellaneous

This library consist of miscellaneous widgets such as arrows.

All widgets are static images.

24
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

Piping

This library consist of piping widgets both hot and cold piping systems.
All widgets are static images.

Miscellaneous

25
EasyIO Quick Start 04 – CPT Tool Graphics Library v1.0

This library consist of valves widgets both cold and hot water system.
All widgets are static images.

Technical Support
For technical issue, please contact

Email:[email protected]

26