Versions Compared

Key

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

...

Code Block
languagejs
themeEclipse
linenumberstrue
var roomT = this;
var roomSP = this;
var color = this;
var occColor = this;
var target = query("targetPoint");
finstack.eval('readAll((navName=="Room Temp") and floorRef=='+target.floorRef+' and siteRef=='+target.siteRef+' and equipRef=='+target.pointId+')', function(data){
roomT.myTemp=data.result.toObj()[0];
});

finstack.eval('readAll((navName=="Room Setpoint") and floorRef=='+target.floorRef+' and siteRef=='+target.siteRef+' and equipRef=='+target.pointId+')', function(data){
roomSP.mySetPoint=data.result.toObj()[0];
});

finstack.eval('readAll((navName=="OccHeat") and floorRef=='+target.floorRef+' and siteRef=='+target.siteRef+' and equipRef=='+target.pointId+')', function(data){
color.backColor=data.result.toObj()[0];
});

finstack.eval('readAll((navName=="Occ Mode") and floorRef=='+target.floorRef+' and siteRef=='+target.siteRef+' and equipRef=='+target.pointId+')', function(data){
occColor.checkMark=data.result.toObj()[0];
});

This is your program.  It sets the query for the model.  If your point's navName are not called Room Temp, Room Setpoint, OccHeat, and Occ Mode, they will have to be change accordingly on lines 6, 10, 14, and 18 (navName=="    ")



How To Make your Own

  • Size your graphics builder to 750X1046 and turn on scale to fit
     
  • Bring Ractive out from components on the left side menu

  • Under properties change the position so x and y are both 0, and set the width and height both to 100%
  • Then open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init


  • Next add a tag on your Ractive component and add a new program

    • Copy and paste the above code for program into the main part
    • Name your program, and set the program target filter to stackRactive
    • Top right of program editor, click the three dots, and select variables
    • Click the gear that appears as you hover over this
    • turn Invokes the Function on and change the dropdown to Custom Event
    • Type in obtainData in the line below and click the gray save
    • Click the blue save for your program

      Adding a Timer

    • Drag out a timer from components and add the tag timer
    • Edit your program by clicking the gear
    • Click the three dots in the top right corner and add a new variable
    • You can call it whatever you want in our case we named it timer
    • Next set it to the timer, and have it invoke the function, and set it to the custom event timer
    • Click the gray save, then the blue save and your done!
  • Save and you're done!