{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"_parentId":{"value":"770710654"}},"macroMetadata":{"macroId":{"value":"c0e60c5f-d1c9-485b-9202-6a70b0849d00"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"82bd0895-2776-4465-96fc-6e49486d3949"}},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"7a6f51a6-59c3-4744-ab57-90582ef944fe","collection":"contentId-770710654","height":"250"}}},{"text":" ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"e0c283a5-b94c-4221-8eed-6f0384c4de31","collection":"contentId-770710654","height":"250"}}}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This model compares the actual temperature of a room to what it is set at. It requires that the setpoint have maxVal set on the point in DB Builder.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Completed Model (Basic)","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Download: ","type":"text","marks":[{"type":"strong"}]},{"text":"RactiveTemperatureSetpoint.zip","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://drive.google.com/file/d/1zf0J2uBMDXbJSB4ySGgtDh-_eScRwLzR/view?usp=drive_link"}}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Ractive Code","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Template","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"plaintext"},"content":[{"text":"

\n {{#myTemp}}\n {{idDis}}
\n {{curVal.toFixed(2)}}{{unit}}
\n {{/myTemp}}\n

\n
\n

\n {{#mySetPoint}}\n {{idDis}}\n

\n \n {{curVal}}{{unit}} \n \n

\n {{/mySetPoint}}\n

","type":"text"}]},{"type":"paragraph","content":[{"text":"This sets up the model","type":"text"}]},{"type":"paragraph","content":[{"text":"Model","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"plaintext"},"content":[{"text":"{\n data:\n {\n myTemp: null,\n mySetPoint:null\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"This sets up myTemp to get the data from the query which should be the actual temperature of the room and mySetPoint to the temperature the room is set to.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Style","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":".circle{\n background-color: #c0c0c0;\n border: none;\n height: 40px;\n width: 40px;\n border-radius: 50%;\n cursor: pointer;\n}\n.temp{\n font-size: 40px;\n}\n.scolor{\n color: #47a3da;\n}\n.tempB{\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.outer-wrapper{\n display: inline-block;\n}\n\n.bar{\n height: 20px;\n background: #47a3da;\n position:absolute;\n}\n.arrow{\n width: 2px;\n position: relative;\n background: #000;\n height: 20px;\n}\n.arrow:after {\n content: '';\n display: block;\n border: 5px transparent solid;\n border-bottom-color: #000;\n top: 17px;\n left: -4px;\n position: absolute;\n}\n.fullBar{\n height: 20px;\n background: #CFD8DC;\n margin: 0 auto;\n position: relative;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"This is the css to style the component","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"INIT","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"var self = this.ractive;\nthis.ractive.fire(\"obtainData\");\nthis.ractive.on(\"increment\", function(event){\n var point = this.get('mySetPoint');\n var val = parseFloat(point.curVal);\n val += 1;\n \n finstack.eval('readById(' +point.id+ ').pointOverride(' +val+ ')').then(function(data) {\n if (data && data.result) {\n if (data.result.isErrorGrid) {\n console.error(\"Error occurred while updating value\");\n return;\n }\n self.set('mySetPoint.curVal', val);\n } \n }, function(err) {\n console.error(\"Error occurred while updating...\", err);\n });\n});\n\nthis.ractive.on(\"decrement\", function(event) {\n var point = this.get('mySetPoint');\n var val = parseFloat(point.curVal);\n val -= 1;\n \n finstack.eval('readById(' +point.id+ ').pointOverride(' +val+ ')').then(function(data) {\n if (data && data.result) {\n if (data.result.isErrorGrid) {\n console.error(\"Error occurred while updating value\");\n return;\n }\n self.set('mySetPoint.curVal', val);\n } \n }, function(err) {\n console.error(\"Error occurred while updating...\", err);\n });\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"obtainData is what connects the Ractive model to the program. Increment and decrement are what changes the room setpoint.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Program","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"var roomTemp = this;\nfinstack.eval(`readAll((navName==\"Room Temp\") and floorRef==${targetPoint.floorRef} and siteRef==${targetPoint.siteRef} and equipRef==${targetPoint.pointId})`, function(data){\nroomTemp.myTemp=data.result.toObj()[0];\n});\nvar roomSet = this;\nfinstack.eval(`readAll((navName==\"Room Setpoint\") and floorRef==${targetPoint.floorRef} and siteRef==${targetPoint.siteRef} and equipRef==${targetPoint.pointId})`, function(data){\nroomSet.mySetPoint=data.result.toObj()[0];\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"This is your program. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The first finstack.eval sets myTemp equal to the query. This query can be changed to whatever the user chooses. It dynamically adds the floorRef, siteRef, and equipRef based on the context. The user can change the point navName to whatever their point name is or use tags found on the point.","type":"text"}]},{"type":"codeBlock","content":[{"text":"readAll((navName==\"Room Temp\") and floorRef==${targetPoint.floorRef} and siteRef==${targetPoint.siteRef} and equipRef==${targetPoint.pointId})","type":"text"}]},{"type":"paragraph","content":[{"text":"The second finstack.eval sets mySetPoint equal to the query. This query can also be changed to whatever the user chooses. It is preferred however to have the same floorRef/siteRef/equipRef when comparing the room temp to room setpoint.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}}]}]},{"type":"codeBlock","content":[{"text":"readAll((navName==\"Room Setpoint\") and floorRef==${targetPoint.floorRef} and siteRef==${targetPoint.siteRef} and equipRef==${targetPoint.pointId})","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"How To Make your Own","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bring Ractive out from components on the left side menu, and click on it to have the green outline","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":32.0},"content":[{"type":"media","attrs":{"__fileSize":37193,"__fileMimeType":"image/png","width":287,"id":"a1ce36b1-be2f-424d-86de-8559ae22b56e","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-21 at 3.18.31 PM.png","height":307}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":40.0},"content":[{"type":"media","attrs":{"__fileSize":10670,"__fileMimeType":"image/png","width":379,"id":"75695297-2729-489d-849c-2d6fee45bf88","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-21 at 3.17.39 PM.png","height":348}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":25.0},"content":[{"type":"media","attrs":{"__fileSize":29806,"__fileMimeType":"image/png","width":302,"id":"59c8862a-bbbc-4567-82cc-424eac9e119b","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-21 at 3.19.18 PM.png","height":441}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"After copying and pasting, should look like the screenshots below","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"__fileSize":65836,"__fileMimeType":"image/png","width":738,"id":"6b9286bd-094a-4156-96be-34722e7a3ed4","collection":"contentId-770710654","type":"file","__fileName":"image-20230915-171839.png","height":420}}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"__fileSize":16476,"__fileMimeType":"image/png","width":324,"id":"7e31981e-cc37-42e0-98cc-57cdca3a2f7b","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-30 at 3.14.54 PM.png","height":171}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":21.0},"content":[{"type":"media","attrs":{"__fileSize":58287,"__fileMimeType":"image/png","width":323,"id":"8957525b-962a-434a-84cf-adfad3d7ea4d","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-30 at 3.15.04 PM.png","height":497}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"__fileSize":124002,"__fileMimeType":"image/png","width":903,"id":"4d34e4ad-38ae-4c0d-83fc-aa216ab918aa","collection":"contentId-770710654","type":"file","__fileName":"Screen Shot 2017-03-30 at 3.15.21 PM.png","height":565}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"After saving go to programs and add a new program","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"__fileSize":77946,"__fileMimeType":"image/png","width":1502,"id":"1ba7c04c-fbd2-42b8-89d9-3de0bcb90aad","collection":"contentId-770710654","type":"file","__fileName":"image-20230915-172400.png","height":422}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name your program, and set the program target filter to ","type":"text"},{"text":"stackractive","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Top right of program editor, click the three dots, and select variables","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click the gear that appears as you hover over ","type":"text"},{"text":"this","type":"text","marks":[{"type":"code"}]},{"text":" variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Turn Invokes the Function on and change the dropdown to Custom Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Type in ","type":"text"},{"text":"obtainData","type":"text","marks":[{"type":"underline"}]},{"text":" in the line below and save","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on the + next to “Program Vars” to add another variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Give it a name and set the filter of that variable to ","type":"text"},{"text":"targetPoint and virtualPoint","type":"text","marks":[{"type":"code"}]},{"text":" and save it","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Copy and paste the above code for program into the main part and save","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save and you're done!","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}}]}]}]}]}],"version":1}

Browser not supported