COMPONENTS

Icon	Name	Builder View	Description
	AM\|Chart		AM\|Charts can be used to display data from a query or points. They are used in combination with a program and a group. It can display the historical data of point(s). An example query this: read(id==@1eeb0007-121ebcfe).hisRead(yesterday). More examples can be found here: GB AM Charts Here is another example: GB Custom Charts
	Data Grid		It’s based on a virtualPoint with a query tag. For example, create virtualPoint. Add query tag with value being “site”. Then bind to the component. Shows grid of all site data in preview.
	Gauge		Can be defined in the properties panel under basic. There can be a label, min, max, and value. This is also where the color can be changed.
	AM\|Gauge		AM\|Gauge can be used in combination with a group and a program to show one of the gauges from AM\|Charts. An example of an AM\|Gauge can be found here: /wiki/spaces/FINFramework/pages/770708694
	Graphic Include		Auto Load determines if the include loads the graphic at first launch or loaded when triggered by something else. This is meant to display graphics. It takes the id without the “id==” of both the graphic and target.
	Group		Works the same as selecting multiple objects and right clicking > create group. Can view and add components to the group in the Layers panel or by selecting, holding Ctrl and drag/drop on group component until you see a dark border
	Basic Image
	Image Renderer
	Kiosk
	Maps		To use this component GoogleMaps requires an API Key. Add the tag googleMapsAPIKey on the world and set the value to the API Key.
	MJPEG		MJPEG - This only supports CCTV videos. You can find live example videos here: http://www.opentopia.com/. Once you pick a video, inspect it to get the uri of it. Here is one example to add to the source of the component: http://dav-200-cam-2.ce.berkeley.edu/now.jpg?snap=spush?ds=1?snap=spush?ds=1&wdh=536&wdw=715.
	Model Loader		This is basically models. If you group some components, then save them as model in properties. You can then use them from Components panel or drag it out from Assets to modify.
	Ractive		Drag and drop Ractive from the components menu into the workspace. In the Properties panel on the basic tab, under Ractive Editor, click Open Editor. In the Ractive Editor, HTML goes in Template, Ractive in Model, CSS in Style, and Javascript in INIT. More examples can be found here: GB Ractive
	SVG
	Timer		The time can be used to set a delay or have something run and keep refreshing. It will disappear so it won’t be visible in the viewer, but will run in the background using tags that can be set on programs and other components. Example on program is creating a timer var like below.

HTML COMPONENTS

Icon	Name	Builder View	Description
	Anchor
	Button		Can be dragged out and apply JavaScript code to Create Event by right clicking on the object.
	H-Rule		Horizontal rule (line), can define the size in the properties menu and can adjust the color and thickness; A separating line used to define a thematic break in the graphic; https://www.w3schools.com/tags/tag_hr.asp
	Image		Add the link to the image in the “Src:” in the properties panel under basic, at the bottom
	Include
	Input
	Label		Used to display text. Can apply classes to the label in the Properties panel under basic for style.
	Meter
	Progress
	Select
	Span
	Text Area
	Video		This supports h.264 video. Can place a video. Place link to video in the “Src:” section of the properties menu, under the Basic tab. Example we went here http://abcnews.go.com/Politics/video/gostream-ready-gop-debate-32928594 and then inspected the video to get the video uri: http://ondemand.abcnews.com/playback/abcnews/2015/08/150806_dvo_gostream_debate_prep1_700.mp4

NOTES

Heat Exchanger

If you want to use the heat exchanger, you can change the source property in the advanced section of the properties panel to one of the below paths to get a different view of it.

Normal - /finPod/fin5CentralPlant2DViewExt/assets/heatExchangers/fin2d_heatExchanger.fgx
Side - /finPod/fin5CentralPlant2DViewExt/assets/heatExchangers/fin2d_heatExchangerSide.fgx
Front - /finPod/fin5CentralPlant2DViewExt/assets/heatExchangers/fin2d_heatExchangerFront.fgx

Humidifier

If you want to use the humidifier, you can use it as it is. There is a simple issue with it and that is if the value is false, it'll display the last frame it was on instead of the actual 'off' frame we set. Didn't get a chance to resolve it, so below is a workaround program that handles this. Follow the below steps and it should work.

Download program below called humidifierProgram
Upload it through Copy Records > Upload - Its on the right side bar when in Graphics Builder
Then just drag out the Humidifier component if not already dragged out
Bind point to it
Remove the "ductComponent" marker tag from it
Thats it, should be good to go

COMPONENT EXAMPLES

AM|Charts

AM|Charts can be used to display a point’s historical data via a query or a virtual point. AM|Charts are typically used in combination with a program and a group.

To show a point’s history by using a query:

Drag the AM|Chart component from the Component palette out onto the world.
Select the AM|Chart component.
Under the Basic tab in the Properties palette, scroll down until you see the Query field.
Enter the following query: read(point and his).hisRead(today)

To show a point’s history via a virtual point:

Drag the AM|Chart component from the Component palette onto the world.
Drag a virtual point from the Virtual Points palette onto the AM|Chart component.
Click “Yes” on the alert window.

Other properties:

Category Field: This is the x-axis of the chart. For point histories this will usually be “ts”, the time value associated with each record of history.
Chart Type: This is the visual representation of the history on the AM|Chart Component, e.g. bar, pie, serial, etc.

More examples can be found at:

GB AM Charts
GB Custom Charts

Data Grid

Displays a spreadsheet-like view of data depending on the query property attached to a virtual point.

To set up a Data Grid component:

Drag the Data Grid component from the Components palette onto the world.
Select the Data Grid component.
Add the basicBinding Marker tag to the Data Grid component:
- Under the Advanced tab in the Properties palette, click the plus (+) button in the lower left corner of the palette to add a new property.
- Change property to be a Marker Tag by clicking on the icon to left of the input field that appears.
- Enter basicBinding as the name of the Marker Tag.
- Click the checkmark button to the right of the input field to apply changes.

Open the Virtual Points palette and create a virtual point.
- Click the plus (+) button on the lower left corner of the palette to add a new virtual point.
- Name the virtual point (if desired) and click the checkmark button to the right of the input field to apply changes.

Add a query property to the virtual point.
- Click the <...> button next to the left of the virtual point and select “Add Property”.
- Name the property query and click the checkmark button to the right of input field to apply changes.
- Click the value of the property located on the right of the property name (usually [NULL]) to set the value of the property.
- Enter a query as the value of the property that will be used gather the data displayed in the Data Grid component, in this case: readAll(site) and click the checkmark button to the right of the text-input box to apply changes.

Drag the virtual point from the Virtual Point palette onto the Data Grid Component to bind the virtual point to the component.
Click the Preview button in the upper right to see the data.

Gauge

Typically a visualization of a virtual point’s current value in the form of a gauge.

To configure the gauge:

Drag the Gauge component from the Components panel onto the world
Select the Gauge component
Configuration options for the Gauge can be found in the Basic Properties panel

Go to the Equipments panel and drag out a numeric point that you wish to use for the Gauge component, this will create a smart label

Go to the Virtual Points panel and find the virtual point of the point that you dragged out in the last step. Make sure to drag the virtual point onto the Gauge component to link it to the Gauge

If something other than the default configuration is required, then properties like the label, min, max, and color can be changed through the Basic Properties panel
Click the preview button in the upper right to see the Gauge updating with the curVal

AM|Gauge

AM|Gauge can be used to display the curVal of a point. AM|Gauge is typically used in combination with a group and a program to show one of the gauges from AM|Charts. The basic usage works like the gauge above.

To configure the AM|Gauge:

Drag the AM|Gauge component from the Components panel onto the world
Go to the Equipments panel and drag out a numeric point that you wish to use for the Gauge component, this will create a smart label

Go to the Virtual Points panel and find the virtual point of the point that you dragged out in the last step. Make sure to drag the virtual point onto the AM|Gauge component to link it to the Gauge

If something other than the default configuration is required, then properties like the title, start value, and end value can be changed through the Basic Properties panel

Click the preview button in the upper right to see the AM|Gauge update with the curVal

Graphic Include

This creates a frame specifically for rendering a graphic within another graphic

To configure the Graphic Include:

Drag the AM|Gauge component from the Components panel onto the world
Select the AM|Gauge and go to the Basic Properties panel

Get the id of the graphic file that you want to display and paste it into the File Ref property

Get the id of the target that you want your graphic to act on. This target is the site or equip or floor that you want the graphic to use

The Auto Load selector determines whether to load the graphic within the frame at the start of the main graphic, or whether to wait until an event triggers the frame to load
Click the preview button in the upper right to see the Graphic Include with a small graphic inside of it