GB Components
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 | |||
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:
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
Group
This component is used to group multiple components together. This is like having a component made out of sub-components.
To use the Group component:
- Drag a few components onto the world and arrange them as you’d like
- Drag the Group component from the Components panel onto the world and place it over the components you want to group
- Resize the group so that it fits nicely over the components
- Go to the Layers panel and drop down the Layers option
- Select all the components to be grouped by using either Shift+Click or Ctrl+Click
- Drag the highlighted components onto the Group component in the Layers panel
- The components will now be grouped in a bounding box the size of the Group that was resized and will all move together if the group is moved
A simpler way to use the group component:
- Drag a few components onto the world and arrange them as you’d like
- Highlight the components with the mouse