Versions Compared

Old Version 7

changes.mady.by.user Sarah Padilla

Saved on

compared with

New Version Current

changes.mady.by.user Ricky Villa

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

IconNameBuilder ViewDescription
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:
https://finproducts.atlassian.net/wiki/spaces/FINStack/pages/48136198/GB+Custom+ 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:https://finproducts.atlassian.net/ /wiki/spaces/FINStackFINFramework/pages/93416517/Solid+Gauge770708694

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.

...

More examples can be found at:

https://finproducts.atlassian.net/wiki/spaces/FINStack/pages/93414870/GB + AM + Charts
https://finproducts.atlassian.net/wiki/spaces/FINStack/pages/48136198/GB + Custom + Charts

Data Grid

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

...

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:https://finproducts.atlassian.net/wiki/spaces/FINStack/pages/91603570/GB+ GB Ractive


SVG

Needs  “fileRef” tag with the id of the svg file.

...