1 Tips
- 1.1 Query Outside of builder
- 1.2 runProgram
  - 1.2.1 Examples
- 1.3 context.source.name
- 1.4 Invoke Actions
  - 1.4.1 Invoke Actions Code
  - 1.4.2 Other Examples
- 1.5 setTimeout() (delay)
- 1.6 Program to run on Start
2 Programs
3 Property Tags
- 3.1 Read Only
- 3.2 Write
4 Console commands

Tips

Query Outside of builder

The query below allows you to query outside of builder

var c = finGraphics.GetWorldControllerById(document.body.firstElementChild.id)
c.database.queryAll("virtualPoint")

runProgram

The function signature is:

runProgram(programName, target, ignoreViewEvents);

programName = Name of program

target = target component to run the task on

ignoreViewEvents = true if you do not want to run any programs attached to the view such as a click.

Examples

This will run the program on every component that it is bound to it. It is executed on worldStart. if this program is a click handler it will run it. (this can run n number of times depending on how many components are found by the programOn)

runProgram("Jasons Program")

This will run the program on the myComponent, if myComponent satisfies the program's programOn filter. (this will run zero or one time)

runProgram("Jasons Program", myComponent);

This will run the program on every component that it is bound to if this program is a click handler it will NOT run it. (this can run n number of times depending on how many components are found by the programOn)

runProgram("Jasons Program", null, true);

This will run the program on the myComponent if myComponent satisfies the program's programOn filter and is NOT attached to a view event such as click. (this will run zero or one time)

runProgram("Jasons Program", myComponent, true);

context.source.name

This allows you to see the name of the event that fired. You can see On/Off Switch section to see this in use.

Invoke Actions

This program runs on "button and foo" which are marker tags on a button. We set 'this' (which will is the button with all it's properties) to invoke the program on a mouse click.

We also created a variable called 'point'. It will be the point that the button is connected to (virtualPointRef). id==$virtualPointRef - this will go through all the objects in the graphic whose id matched the virtualPointRef on the button.

(The commented-out line is an example of how do the same thing without using the options on the right in the screenshot below. possibly helpful if you decide to create an event on the button rather than to use a program.)

Every point has two ids:

id: this is the id within the graphic
pointId: this is the points actual id that can be found in the FIN Stack db.

So in the eval/invoke statement, we use the pointId since it will look through the FS db. We also added another tag on the button called invokeValue that is a number tag. In this case it is just a static value that will always change the value of the connected point to it's value when the button is clicked. You could do the same thing for the duration by adding an appropriate tag on each button. (for ex ample for duration it would look like this: duration:'+this.durationValue+'hr. Which then you would add a number tag on the button called durationValue.)

Invoke Actions Code

//var curPointId = query("id == "+this.virtualPointRef);

finstack.eval('invoke('+point.pointId+',"Manual Set", {self:'+point.pointId+',val:'+this.invokeValue+',duration:1hr})');

Other Examples

finstack.eval(sprintf('invoke($1, "Manual Set", {self:$1, val:$2, duration:$2hr})', myPoint.pointId, valueLabel.value));      //takes into account user permissions
finstack.eval('readById('+myPoint.pointId+').pointOverride(14, 1min)');                                                       //doesn't take into account user permissions, so it won't work based on user types
finstack.eval(sprintf('readById($1).pointOverride($2, 1min)', myPoint.pointId, valueLabel.value));

setTimeout() (delay)

Below is an example on how to delay something to x time. Put what you want to delay inside the curly brackets.

setTimeout(function(){refreshPoints(point);}, 5000);

Program to run on Start

To get your program to run at the start of the graphic do the following:

Open your program to edit
Click on the 3 vertical dots in the upper right corner and then click the "Variables" option to show the "Program Vars" panel:
Enable the this variable to trigger the program by toggling the "Invokes the Function?" toggle to on.
Select "Custom Event" from the drop-down menu
Type in "start"
Click "Save" next to the red "Cancel" button
1. The this variable is always the result of item found through the "Program Target Filter". So if you had a button or buttons with the tag foo added onto it/them and you want them to be the program's target, the value of "Program Target Filter" should be foo.

To trigger the program whenever a curVal of a specific virtual point changes:

Repeat steps 1-2 above
Click on the "+" button next to the "Program Vars" label new panel
Name the new variable in the first text input, I'll use virtualPoint
In the second text area add the binding for this variable, usually its something like id==$virtualPointRef (this essentially the same as having the line var virtualPoint = query("id=="+this.virtualPointRef);, but this way you can make the variable trigger the program).
Enable the virtualPoint variable to trigger the program by toggling the "Invokes the Function?" toggle to on.
Select "Tag Change" from the drop-down menu
Type in curVal in the text area.
Click "Save" next to the red "Cancel" button

The above steps will work assuming you have a virtual point assigned the result of "Program Target Filter". With this set, the program should run anytime the curVal of the virtual point assigned to that graphic component changes.

This "Tag Change" option can be done with pretty much any property/tag on result of that variable's binding.

Programs

How to command a bool point by clicking on label

This command toggles between true and false every time the label is clicked on. Its an example of a boolean and manual command. It can be modified for other point types and commands.

Tag label component as foo in the Program Target Filter input
Bind point to label

var act = "Manual On";
var pid = point.pointId;

if(point.curVal)
    act = "Manual Off";

finstack.eval('invoke('+pid+', "'+act+'", {self:'+pid+',duration: null})');

How to command point with Prompt popup

In this example, we are creating an event to call a browser prompt popup and enter a value to command point instead of using gear icon.

Code

var myPoint = query('foo and virtualPoint');                                                                                  //this queries for virtualPoint tagged as foo and virtualPoint
var newValue = prompt("Please enter value:", "0");

if (!newValue || isNaN(Number(newValue)))
    alert("Not a valid number: " + newValue);
else
    finstack.eval(sprintf('invoke($1, "Manual Set", {self:$1, val:$2, duration: null})', myPoint.pointId, newValue));         //this invokes point that has "Manual Set" action and writes whatever value we enter in the prompt.

Here is an example in a Program instead of Event and for a string point not a number. It makes it dynamic based on the virtualPointRef on the component. (Doesn't work for smartLabels)

Hide a component based on value of another point

Below is an example program of how to hide a component based on the value of another point not bound to the component.

foo = tag program runs on and its the tag on the component to hide

fooPoint and virtualPoint = tags found on the virtualPoint in Graphics Builder to use to hide component (we just named the variable "point" but it can be anything you want)

In our example, the point to use is a boolean. If value is true, make the component visible, else hide it.

Increment Value

Below is an example of how to click on a button to increment to the value of a point by 1.

Setup:

Tag button as addUp (incrementing up)
Bind point to button that will be commanded
Create program that runs on addUp and contains below variables and logic
- this (variable) - invokes function on click
- point (variable) - is set as id==$virtualPointRef
- logic - finstack.eval(sprintf('invoke($1, "Set Default", {self:$1, val:$2+1})', point.pointId, point.curVal));

How to add a shadow/glow on objects

Below is an example property to use to add a shadow/glow to the objects you want. Its the same as what we use for our shadow/glow.

filter is the property and drop-shadow(0 0 7px red) is the value.

filter = drop-shadow(0 0 7px red)";

Example: If value is true, set it shadow/glow to red, else no shadow/glow.

Change color on smart label based on a numeric value

Example Program: numStatusColor.json

The user can just upload the above file and tag the numeric point smartLabels as numStatusColor and it just work. They can modify the program code to specify their logic and colors.

(numStatusColor is the tag that this is running on, you can change that to be whatever you want. That will be the tag that you add to your smart labels for this to take effect on)

(Be sure to create your "point" variable which in this scenario we made it based on the virtualPointRef of the particular smart label)

// targets the smartlabel models "value label"
var smartLabelValue  = getPath("valueGroup.valueLabel");
 
// point is based on whatever is bound to the label
if(point.curVal >= 90){
    smartLabelValue.style.backgroundColor = "#ff0000";    //red
} else if (point.curVal <= 90 && point.curVal >=70){
    smartLabelValue.style.backgroundColor = "#ffa500";    //orange 
} else {
    smartLabelValue.style.backgroundColor = null;        //default
}

Another example.

// targets the smartlabel models "value label"
var smartLabelValue  = getPath("valueGroup.valueLabel");

// point is based on whatever is bound to the label
if(point.curVal <= 70 || point.curVal >= 78){
    smartLabelValue.style.backgroundColor = "#ff0000";
}
else{
    smartLabelValue.style.backgroundColor = null;
}

Change color on smart label based on a boolean value

Example Program: boolStatusColor.json

Similar to the above but for booleans. The user can just upload the above file and tag the boolean point smartLabels as boolStatusColor and it just work. They can modify the program code to specify their logic and colors.

(boolStatusColor is the tag that this is running on, you can change that to be whatever you want. That will be the tag that you add to your smart labels for this to take effect on)

(Be sure to create your "point" variable which in this scenario we made it based on the virtualPointRef of the particular smart label)

// targets the smartlabel models "value label"
var smartLabelValue  = getPath("valueGroup.valueLabel");
 
// point is based on whatever is bound to the label
if(point.curVal === true){
    smartLabelValue.style.backgroundColor = "#ff0000";    //red
} else {
    smartLabelValue.style.backgroundColor = null;         //default
}

Component Value (Numeric/Boolean/Reversed)

This program is an example that can be used to make a component work with both Numeric & Boolean points and also allows for them to utilize the "reverse" functionality.

Example program: BallValveProgram.json

if (point.kind ==="Number"){
    if ("reverse" in this) {
        this.valvePosition = fin.Utils.ResetBAS(point.curVal, 0, 100, 100, 0);
    }
    else
    {
        this.valvePosition = point.curVal || 0;
    }
}

else if (point.kind ==="Bool") {
    
        if ("reverse" in this) {
        this.valvePosition  = point.curVal ? 0:100;
    }
    else
    {
        this.valvePosition  = point.curVal ? 100:0;
    }
}

Hide/Show based on current User

This program allows for the user to hide/show (or any other options) based on what user is logged in.

Variables needed:

point → id==$virtualPointRef → invoked by "Tag Change" → curVal

var myPoint = point.curVal.toObj()[0];

if(myPoint.username == "su") {
this.style.visibility = "hidden";
}
else {
this.style.visibility = "";
}

Instructions

on your components add the following tags

query:"context()" (String Tag)
toObj (Marker Tag)

create a new program that runs on your components. You may want to add a unique marker tag to your components so the program runs only on them.

paste in the code above

create a "point" variable, and make the value be

id==$virtualPointRef, enable "invoke function" and select "Tag Change" and have that be "curVal"

in the code where it says

if(myPoint.username=== "su") you will need to fill in the user that you want it to hide for.

Weather Data

If the user would like to include the current weather data info on a graphic. They can choose which piece of data they would like display. Requires that weatherstationRef is populated on the site required.
1. Upload the "WeatherDataProgram" and "WeatherDataPoint" json files via the graphic when it is open in the right menu Copy Records → Upload.
2. Then drag out some labels depending on what data you want.
3. Tag each label with the weatherData marker tag
4. Then depending on which data you want per label, add the following unique marker tag: temp or humidity or weatherCond or weatherTime or weatherIcon
Note: The "weatherTime" is based on what is provided by the weather forecast, so it is not the current time but last time provided by the weather provider.
5. That should be it. Try it out.

By default this works on any record below the site level. If you want to add this on the site level, after uploading this to the site level graphic, do the below:
1. Open the Virtual Points panel on the left
2. Find the "Weather Data Point" and expand it
3. You’ll find the query property tag
4. Change the value part where it says "$siteRef" to "$id" and save
5. That’s it.

Weather Data (Query)

We have a new function in axon called finWeatherData. You now can make a model, and add a `query` tag to it with a value like this read(site).finWeatherData and/or you could also do this read(id==$siteRef).finWeatherData

The function weather data actually returns the icons too. Once you have the data, you can pretty it up and arrange it however you like.

Graphic Example: weatherGraphics.zip (both examples included, query & virtualPoint)

Program Example: weatherData(query).json

var myPoint = point.curVal.toObj()[0];
curTempLabel.value = myPoint.cur_temp + ' '+ myPoint.cur_tempUnit;
curHumidityLabel.value = myPoint.cur_humidity + ' '+ myPoint.cur_humidityUnit;
curTempDesc.value = myPoint.iconText;
curTime.value = moment(myPoint.cur_time, 'h:mm:ss').format('h:mm A');

todayCondDesc.value = myPoint.forecast[0].iconText;
todayHigh.value = myPoint.forecast[0].tempMax + ' '+ myPoint.forecast[0].tempMaxUnit;
todayLow.value = myPoint.forecast[0].tempMin + ' '+ myPoint.forecast[0].tempMinUnit;
todaySunrise.value = moment(myPoint.forecast[0].sunrise, 'h:mm:ss').format('h:mm A');
todaySunset.value = moment(myPoint.forecast[0].sunset, 'h:mm:ss').format('h:mm A');
todayDate.value = moment(myPoint.forecast[0].date, 'MM/DD/YY').format('dddd MMM Do, YYYY');

tomCondDesc.value = myPoint.forecast[1].iconText;
tomHigh.value = myPoint.forecast[1].tempMax + ' '+ myPoint.forecast[1].tempMaxUnit;
tomLow.value = myPoint.forecast[1].tempMin + ' '+ myPoint.forecast[1].tempMinUnit;
tomSunrise.value = moment(myPoint.forecast[1].sunrise, 'h:mm:ss').format('h:mm A');
tomSunset.value = moment(myPoint.forecast[1].sunset, 'h:mm:ss').format('h:mm A');
tomDate.value = moment(myPoint.forecast[1].date, 'MM/DD/YY').format('dddd MMM Do, YYYY');

thirdCondDesc.value = myPoint.forecast[2].iconText;
thirdHigh.value = myPoint.forecast[2].tempMax + ' '+ myPoint.forecast[2].tempMaxUnit;
thirdLow.value = myPoint.forecast[2].tempMin + ' '+ myPoint.forecast[2].tempMinUnit;
thirdSunrise.value = moment(myPoint.forecast[2].sunrise, 'h:mm:ss').format('h:mm A');
thirdSunset.value = moment(myPoint.forecast[2].sunset, 'h:mm:ss').format('h:mm A');
thirdDate.value = moment(myPoint.forecast[2].date, 'MM/DD/YY').format('dddd MMM Do, YYYY');
thirdDay.value = moment(myPoint.forecast[2].date, 'MM/DD/YY').format('dddd');

var labelNode = curTempIcon.view.querySelector("label");
labelNode.className = myPoint.icon;
var labelNode0 = todayCondIcon.view.querySelector("label");
labelNode0.className = myPoint.forecast[0].icon;
var labelNode1 = tomCondIcon.view.querySelector("label");
labelNode1.className = myPoint.forecast[1].icon;
var labelNode2 = thirdCondIcon.view.querySelector("label");
labelNode2.className = myPoint.forecast[2].icon;

setTimeout(function(){refreshPoints(point);}, 300000);

This what finWeatherData returns:

[{
"cur_temp": 66,
"cur_tempUnit": "°F",
"cur_time": "09:37:00",
"forecast": [{
"date": "11/16/16",
"tempMax": 65,
"tempMaxUnit": "°F",
"sunrise": "06:24:00",
"iconText": "Slight Showers",
"sunset": "16:47:00",
"icon": "wi-sprinkle",
"cond": 4,
"tempMin": 52,
"tempMinUnit": "°F"
}, {
"date": "11/17/16",
"tempMax": 73,
"tempMaxUnit": "°F",
"sunrise": "06:25:00",
"iconText": "Clear Sky",
"sunset": "16:47:00",
"icon": "wi-day-sunny",
"cond": 1,
"tempMin": 52,
"tempMinUnit": "°F"
}, {
"date": "11/18/16",
"tempMax": 75,
"tempMaxUnit": "°F",
"sunrise": "06:26:00",
"iconText": "Clear Sky",
"sunset": "16:46:00",
"icon": "wi-day-sunny",
"cond": 1,
"tempMin": 50,
"tempMinUnit": "°F"
}],
"cur_cond": 2
}]

Override Count

Below is an example of how to get the override count on the target equip. Tag label as our example "overrideVal" and create the program that runs on it.

var target = query('targetPoint');
var fooVar = query('overrideVal and label');

var promise = finstack.eval('readAll((write1 or write8) and equipRef=='+target.pointId+').size');
promise.then(function(event)
{
    fooVar.value = event.result.toObj()[0].val;
}.bind(this));

Heat Pump Program (Compressor & Reversing Valve)

Video: heatPumpProgram.mp4

Download: heatpumpProgram.json

if (compPoint.curVal === false)
{
    heatImage.style.visibility = "";
    heatImage.value = 0;
    coolImage.style.visibility = "hidden";
    coolImage.value = 100;
}
else 
{
     if (compPoint.curVal && rvPoint.curVal)
     {
        heatImage.style.visibility = "hidden";
        heatImage.value = 0;
        coolImage.style.visibility = "";
        coolImage.value = 100;
     }
     else
     {
        heatImage.style.visibility = "";
        heatImage.value = 100;
        coolImage.style.visibility = "hidden";
        coolImage.value = 0;  
     }
}

Enum Status Color Labels

Download: circularStatus.zip

if (point.curVal === "Warning"){
this.className = 'round view-superman-value status-down';
this.value === "NULL";
}
else if (point.curVal === "ALARM"){
this.className = 'round view-superman-value status-alarm';
this.value === "NULL";
}
else {
this.className = 'round view-superman-value status-ok';
this.value === "NULL";
}

top.app.ShowRelatedBubbles(point.pointId,myZone.pointId,false);

GB JavaScript Tips

Tips

Query Outside of builder

runProgram

Examples

context.source.name

Invoke Actions

Invoke Actions Code

Other Examples

setTimeout() (delay)

Program to run on Start

Programs

How to command a bool point by clicking on label

How to command point with Prompt popup

Hide a component based on value of another point

Increment Value

How to add a shadow/glow on objects

Change color on smart label based on a numeric value

Change color on smart label based on a boolean value

Component Value (Numeric/Boolean/Reversed)

Hide/Show based on current User

Weather Data

Weather Data (Query)

Override Count

Heat Pump Program (Compressor & Reversing Valve)

Enum Status Color Labels

Button Toggle (using forEach)

Controlling Fan with Enum Point

On/Off Switch (No Action Panel)

Pie Chart with Related Bubbles

Floorplan: Show Equip with lowest Temp

Date & Time on Graphic (with refresh)

Scalable Date Time Model

Time Remaining (milliseconds)

Open Related Bubbles (Equip Bubbles)

Point Bubbles

Point Actions Command

Mouse Over/Out - Hide/Show using My Filter

Mouse Over / Mouse Out: Hide & Show object

Auto Overrides from within a Graphic

Reset Translator

Hide Image when Boolean is Off (Must have virtualPointRef on image)

Toggle: Hide/Show

Toggle: Hide/Show (hides other shown layer)

Get Min/Max/Average With Labels