Tips

Query Outside of builder

 The query below allows you to query outside of builder

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)

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

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)

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)

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

Open

Other Examples

setTimeout() (delay)

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

Program to run on Start

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

1. Open your program to edit

2. Click on the 3 vertical dots in the upper right corner and then click the "Variables" option to show the "Program Vars" panel: 

3. Enable the this variable to trigger the program by toggling the "Invokes the Function?" toggle to on.

4. Select "Custom Event" from the drop-down menu

5. Type in "start"

6. 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:

1. Repeat steps 1-2 above

2. Click on the "+" button next to the "Program Vars" label new panel

3. Name the new variable in the first text input, I'll use virtualPoint

4. 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).

5. Enable the virtualPoint variable to trigger the program by toggling the "Invokes the Function?" toggle to on.

6. Select "Tag Change" from the drop-down menu

7. Type in curVal in the text area.

8. 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.

Open

1. Tag label component as foo in the Program Target Filter input

2. Bind point to label

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

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)

Another example.

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)

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

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:

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

Instructions

1. on your components add the following tags

• query:"context()"   (String Tag)

• toObj  (Marker Tag)

1. 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. 

1. paste in the code above

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

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

1. 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

This what finWeatherData returns:

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.

Heat Pump Program (Compressor & Reversing Valve)

Video:  heatPumpProgram.mp4

Download: heatpumpProgram.json

Enum Status Color Labels

Download: circularStatus.zip

Back to Top of Page

Button Toggle (using forEach)

• Download: buttontoggleprogram.json

• Run On: foo

• Variable: Variable this should be invoked by "click"

Back to Top of Page

Controlling Fan with Enum Point

If you have an enum point and would like to turn a boolean component (ie: fan) to on/off, then here is an example program that says if the enum is "Off" set fan to false ("off"). If its anything else other than "Off", set it to true ("on").

All you have to do is bind enum point to boolean component like a fan and tag it "enumFan".

Here is the code, but make sure to add the program variable "point" with its settings as you see in the screenshot above.

Fan Status based on Enum Point

You can download and upload the program here.

Open

Back to Top of Page

On/Off Switch (No Action Panel)

Download: toggleSwitch.zip   or  toggleButton.zip

• Upload the attached zip through folio "restore" (screenshot)

• Open your graphic

• Open the component panel search for switchToggle  (or locate it by scrolling tot he bottom of the list under models) 

• Drag it out,

• Bind a point to the model

• Add the following tag to the model: disableRelatedBubblesProgram

Back to Top of Page

Pie Chart with Related Bubbles

1. Create a new Virtual Point Query - Example: readAll(site)

2. In your left panel, switch the view to "events" and add a new custom event that runsOn: world

3. bring out a amGauge and hide it.

4. Bring out an amChart and tag it "foo" or whatever you query in the myChart var code below

Back to Top of Page

Floorplan: Show Equip with lowest Temp

Add the following code to any button/object as an event on a Floorplan.

Once added, the object (when clicked on) will bring up the magic bubbles for the equipment with the lowest Temperature value. 

Instructions: 

1. Bring out a button

2. Right+Click on the button and add the following Event: Mouse Over > Click 

3. Take the code below and paste it into the event window

Show Equip with lowest temp

Back to Top of Page

Date & Time on Graphic (with refresh)

• http://momentjs.com/  (website reference for date/time formats)

Use the following program to add date & time on a graphic using the now() axon query. 

• Go to virtual points and create a new virtual point named "My Date Time" or whatever you might prefer

• Right click on your new virtual point > apply batch tags > select your new point > and apply dateTimePoint query:"now()"

• Bring out a label and add a dateTimeLabel tag to it

• Bring out a timer and add a dateTimeTimer tag to it (we recommend you refresh every 10-30 seconds instead of every second, so set delay property on timer to 20000)

• Create a new program called Date Time Program and make it run on dateTimeLabel

• Create a variable called myTimer and have it use the dateTimeTimer tag and set it to run on custom event 'timer' (screenshot)

• create variable to query your dateTime point var dateTime = query('dateTimePoint');

• Then to format your label value add a moment().format() ....example: this.value = moment(dateTime.val).format('MMMM Do YYYY, h:mm a');

Doing the above will update the dateTime value based on the timer. If the user wants to make the label display the dateTime when the graphic loads. they can add a another program that looks like below.

• Program Name = Date Time Startup (or whatever you might prefer)

• Program Target Filter = world

• Code:
  
  

Scalable Date Time Model

Here is a scalable date time model we created if you would like to use it: Date Time Model

1. Restore that in Graphics Builder > Graphics > Miscellaneous > Restore.

2. Then it can be found in the Components panel under Models towards the bottom called "Date Time"

3. Drag out and adjust accordingly

4. Drag out a timer if one doesn't already exist on the graphic and recommend to set for 20000 sec

Back to Top of Page

Time Remaining (milliseconds)

Here is an example program that returns the remaining time from a point that has value in milliseconds.

Open Related Bubbles (Equip Bubbles)

We have a tool for this called Add MagicBubbles.

Point Bubbles

If the user is looking to add point magic bubbles. They can upload this program called "Point Bubbles" and tag their component as pointBubbles. Make sure point is bound to component.

pointBubbles.json

Back to Top of Page

Point Actions Command

If the user wants to bring up the actions command popup like the gear icon does for commandable points on smartLabels but for simple label, then they just need to tag the components as "commandable".

Mouse Over/Out - Hide/Show using My Filter

This program allows you to put a "myFilter:fooBag" string tag on any object, which will then hide/show anything else that has the same tag you put in the "myFilter"

Program: showAndHideMyFilter.json (upload via right side menu in Graphics Builder → Copy Records → Upload)

example set up:

• Icon has "myFilter:fooBag" (string) and “foo” (marker)
  Note: “fooBag” in myFilter can be replaced with anything. Whatever is chosen, that will be added to the other components instead.

• svg1 has fooBag (marker)

• svg2 has fooBag (marker)

• When we mouse over the icon, both svg1 and svg2 show and hide

Back to Top of Page

Mouse Over / Mouse Out: Hide & Show object

This method uses Mouse Over / Mouse Out actions to hide and show your objects. 

1. Name your text labels (what you name them doesn't matter, as as long as you are consistent in the code below)

2. Draw your poly? (or whatever object you will be mousing over to hide/show the labels.

3. Right click on it, select Event > Mouse > Mouse Over (or mouse out)

4. copy paste "mouse over" code shown below

5. change the red portion, getByName("insertYourHideShowObjectsNameHere"), to be the name of what you are showing/hiding

6. Rinse repeat for mouse out

Auto Overrides from within a Graphic

finstack.eval(`finCommandAuto("point", [1, 8])`);

Back to Top of Page

Reset Translator

Back to Top of Page

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

download the program below, add hidePoint to the boolean point(s) and add hideImage to image(s).

DOWNLOAD PROGRAM: BoolShowHide.json 

Back to Top of Page

Toggle: Hide/Show

Back to Top of Page

Toggle: Hide/Show (hides other shown layer)

Toggle Hide Show

Back to Top of Page

Get Min/Max/Average With Labels

1. Navigate to the location they want to display the Graphic since FIN is content-sensitive

2. Once navigated to the desired location, select the App Launcher button located on the top left corner  

3. Select the Graphics Builder tile

4. When selected, it will slide out and give the user 3 options

• In this case, select on Menu

5. Click on the Graphics Builder button.

6. Click on the Launch button.

7. You will be taken to a screen that looks like this:

8. Click on the New Project button near the top left corner.

9. Then click on the little menu button in the top right corner.

10. In the menu that pops up on the right, click on the Copy Records button.

11. Then click on the Upload button.

12. A file selection prompt will open up based on the client OS.

• You will need to download the myTimer.json program file and upload it to that prompt.

• DOWNLOAD: myTimer.json

13. You can then view the program by clicking the little menu button on the bottom half of the left side menu, selecting programs, and clicking the gear on the myTimer program.

14. A window will pop up looking like this:

15. Press the Cancel button at the bottom right of the JavaScript window.

16. Drag a timer component from the top half of the left side menu to the middle of the canvas.

17. In the bottom half of the left side menu, click the menu button and select Properties (timer must be selected).

18. Change the delay value to 2000 (2000 ms or 2 sec).

19. Drag 3 label components from the top half of the left side menu to the center of the canvas.

20. Click the middle label, click the little tag icon, and give it a tag called foo, then click enter.

21. Click the top label, click the little tag icon, and give it a tag called mymax, then click enter.

22. Click the bottom label, click the little tag icon, and give it a tag called mymin, then click enter.

23. Finally click the Preview button near the top left corner.

24. A window will pop up showing the labels with dynamically updating values.

25. You may have to wait a few seconds for the value of the labels to change from Label to a number.

• The values update once every 2 seconds, this can be changed by changing the timer delay.

Back to Top of Page

Upload & Download FIN5 Graphics Manually (finBackupRecord/finRestoreRecord)

finBackupRecord([@id of file],{everything:true})

finRestoreRecord(@id of file)

Back to Top of Page

HeatMap

https://www.patrick-wied.at/static/heatmapjs/

1. Get the source, and open up Graphics builder. Drag in the js file into the world

2. Drag out a group, and add the tag foo on it

3. Drag a button out

4. Paste the below code into the on click button event

Back to Top of Page

Show/Hide Based on Enum Value

This is one way to change images based on an enum point. The below program is running on weatherChangeIcon which is a tag on the enum virtualPoint.

We are looking for all images by name and each has a "weather" tag on it. So what the program is saying is look for each component that has the weather tag and hide them, but if the curVal is x, show it.

Here is the code used, just don't forget the "this" variable on the right side above in the screenshot.

Back to Top of Page

Displaying Schedule Data on Graphic

Here is an example program that grabs the scheduleRef data from a schedulable point found on the target equip. Besides the program, the user needs to do couple more things to get this to work.

1. Create virtual point that has a "query" tag with the value being this: read(id==read(scheduleRef and point and equipRef==@1eeaff69-30d84ee5)→scheduleRef) and also the queryPoint tag.

2. Drag out couple labels. Tag one of them as scheduleTime and the other as scheduleValue.

Now it should display the values for Next Time and Next Value. The user can modify what gets displayed by editing the program and/or add more variables to display more info. Users can look up different types of formats for moment.js here.

Below is a copy of the program code.

Displaying Schedule Data on Graphic

Below is the program file you can upload. Once you upload it, it is called Schedule Ref.

Open

Back to Top of Page

Open relative Schedule

Below is an example of an event that can be used to find the schedule of a point under the current target equip. It gets the id of the schedule and opens the schedule on the right mini app.

Steps. 1. Drag out button or other component. 2. Right click on it > Click Event > Mouse > Mouse Click. 3. Copy and paste code below and done.

If you would like the above in a program instead of event. Then follow below steps.

1. Drag out button or other component

2. Tag it what you want (our case we tagged it "foo")

3. Create program that runs on that tag

4. Make variable "this" invoke function on mouse click then save variable

5. Copy and paste code above to program and save the whole program (should look like below once done)
   
   

Back to Top of Page

Hide Right Menu when loading a graphic

If the user doesn’t want the right menu to be displayed, they can hide it using the program example below that will hide it when the graphic loads.

1. Create a new program and give it a name

2. Set the program target filter to: world

3. Modify the target variable on the right menu to specify the trigger.

   1. Click on the 3 dots to right corner to open the menu.

   2. Toggle the “Invokes the Function”

   3. Then select “Custom Event” in the dropdown

   4. Type in start in the text field

   5. Save the variable

4. The program logic is this short line: top.app.ToggleCollapse(true);

5. That’s it. Save the program and try it out.

Property Tags

Below are few examples of how to read and/or write to a property tag found on an equip or point under that target equip. These will not display the units, just the raw value for numerical values. However, when using a program method the user can append some text to it, which in this case can be a unit.

Read Only

Below are the examples of read-only of property tags. Not to command them.

Virtual Point - this method is about creating a virtual point that has a query that returns you the value of the tag you're looking for whether on point or equip as long as you know what the query is.

1. Create virtual point

2. Tag it with the below tags:

   1. toObj (marker) - this is needed to return just the value of the object

   2. query (string) - this is a string tag that contains the query as the value. Example - query: read(equipRef==$id and navName=="Room Temp")["inAlarm"]. In this case, we are looking for the "inAlarm" property tag found on the Room Temp under current equip target.

      1. Note: if we wanted to look for a property tag on the equip, the query would look something like this: read(id==$id)["inAlarm"]

   3. unique tag (marker - optional) - tag it some unique that you want to make easier to query via a program. Or you can choose not to and use the "displayName" of that virtual point instead.
      
      

3. Then create a program that runs on this virtual point to update the value at x interval via timer component.

   1. Then create a variable that queries for the timer and make it execute on custom event "timer".

   2. The program logic is this simple line: refreshPoints([this]);

4. Then drag out the timer component and change the delay to about 10000 so that it updates in 10 sec intervals.
   
   

5. Last thing is to drag the virtual point onto the component and try it out in preview or the viewer.

binding_propertyName - this method is built into one of our programs so the user just picks a tag from a point. 

1. Drag and drop a point that has the property tag you want to return the value of on a component

2. Add a tag string tag called binding_propertyName and the value being the name of the property tag you're looking for and thats it.
   
   

Program Example 1 - Below is an example of using a program.

1. Tag a component you want to use with the property tag. For example tag a label with a tag called "tempLabel".

2. Create a program that runs on that label

   1. And create a "point" variable that looks for the point that has this property tag you want to use. Make it invoke function on tag change with *. Don't use curVal in this case because we want the tag to change whenever there is a change on the point. The tag can change regardless of the curVal.

   2. The code would be this simple with "inAlarm" being the tag you want to look inside the "point" variable: this.value = point.inAlarm;
      Note: To append a unit using this method, the code would look something like this: this.value = point.inAlarm + '%';
      
      

3. Thats it, you can then check it in preview/viewer.

Program Example 2 - Below is another example of using a program. Very similar to the first one, just with a different approach.

1. Drag and drop a point on a component that has the tag you want to use. For example on a label.

2. Then rename the "virtualPointRef" tag on that label after binding the point to something else unique that you want. Basically creating a string tag that has the id of the point in graphics builder as the value for the string. Drag and drop just makes it easier to get the id. In our case we just added "x" to the end of it.
   Reason we don't want to leave it as "virtualPointRef" is because we have default programs that look at that tag and we don't want them to conflict with the program we are going to create for it.
   
   

3. Then create a program that runs on that unique tag that has the id you created.
   
   

   1. Add a point variable that looks at that tag and invokes function on tag change with *. Don't use curVal in this case because we want the tag to change whenever there is a change on the point. The tag can change regardless of the curVal.

   2. The code would be this simple with "inAlarm" being the tag you want to look inside the "point" variable: this.value = point.inAlarm;
      Note: To append a unit using this method, the code would look something like this: this.value = point.inAlarm + '%';
      

4. Thats it, try it out in preview/viewer.

Target Point / Program - Below is an example for a property tag found on the target equip.

1. Tag a component you want to use with the property tag. For example tag a label with a tag called "tempLabel".

2. Then create a program that runs on that unique tag that you created.
   
   

   1. Add a equip variable that looks at the target equip the graphic is running on, which is "virtualPoint and targetPoint".

   2. Add another variable that queries for the timer and make it execute on custom event "timer".

   3. The code would be this simple with "inAlarm" being the tag you want to look inside the "equip" variable: 
      refreshPoints(equip);
this.value = equip.inAlarm;
      Note: To append a unit using this method, the code would look something like this: this.value = equip.inAlarm + '%';

3. Then drag out the timer component and change the delay to about 10000 so that it updates in 10 sec intervals.
   
   

Write

Below are the examples of writing to property tags. This can work without having any of the read-only options mentioned previously. Just won't see them update on the graphic, but do update in the database.

Point Write - Below is an example of writing to a point property tag. This is similar to "Program Example 2" mentioned above in the read-only. Now we're adding the write program to it.

1. Drag and drop a point on a component that has the tag you want to use. For example on a label.

2. Then rename the "virtualPointRef" tag on that label after binding the point to something else unique that you want. Basically creating a string tag that has the id of the point in graphics builder as the value for the string. Drag and drop just makes it easier to get the id. In our case we just added "x" to the end of it.

3. Then create a program that runs on that unique tag that has the id you created.

   1. Open the variables tab on the right and modify the "this" variable to invoke a function on click.

4. Copy and paste the below code in your program. We made it where it can detect if the tag is a boolean or number type so that it displays the proper prompt to command it when clicking on the label.

   1. Rename "virtualPointRefx" on line 1 to be the same unique tag you chose if its different than our example. Also rename "inAlarm" on lines 4,6,7,8,10,11,26 to whatever your property tag name is.

      Point Write Code

      For just boolean types without it detecting the type of tag, the code is below.

      Boolean Type Only

Here is example of the program.

Try it out in the preview/viewer.

Equip Write - Below is an example of writing to a equip property tag. This is similar to "Point Write" just using the target point instead.

1. Tag a component you want to use with the property tag. For example tag a label with a tag called "tempLabel".

2. Then create a program that runs on that unique tag that has the id you created.

   1. Open the variables tab on the right and modify the "this" variable to invoke a function on click.

   2. The code is below to use for this using boolean example.

      Boolean Code

       

      Boolean and Number

       

      Number Code

3. Try it out in preview/viewer.

Console commands

Back to Top of Page