Description
This model will show and can change the set point of a vav. It also shows the site, floor, and floor underneathequip
Completed Model (Basic)
Download: SetPoint.zip
...
Code Block | ||
---|---|---|
| ||
<div class="fin fHt vertical s-width"> {{#mySetPoint}} <div class=" fin horizontal center middle"> <div class="small-button-top fin vertical middle center">{{equipRefDis}}</div> </div> <div class="fin horizontal mlt mlh"> <div class="s-buttons s-minus fin vertical middle center" on-click="decrement"> <strong>-</strong> </div> <div class="s-buttons s-label fin vertical middle center"> <strong>{{curVal}}{{unit}}</strong><span class="subText fin middle center">{{navName}}</span> </div> <div class="s-buttons s-plus fin vertical middle center" on-click="increment"> <strong>+</strong> </div> </div> <br> <div class=" fin horizontal center middle"> <div class="small-button-left fin vertical middle center">{{siteRefDis}}</div> <div class="small-button-right fin vertical middle center">{{floorRefDis}}</div> </div> {{/mySetPoint}} </div> |
Lines 16 and 17 is where the site and floor are displayed. siteRefDis and floorRefDis can be changed to another tag to be displayed, or if not wanted lines 1417-18 21 can be removed to just display the setpoint with the plus and minus buttons. Lines 3-5 show the equipRefDis and can be changed or deleted as well
Model
Code Block | ||
---|---|---|
| ||
{ data: { mySetPoint: null } } |
...
Code Block | ||
---|---|---|
| ||
.s-width{
width:386px;
}
.s-buttons{
background-color: #ccc;
color:#fff;
height:80px;
font-size: 26px;
}
.s-minus{
border-radius: 40px 0 0 40px;
margin-right:2px;
width:100px;
cursor: pointer;
}
.s-plus{
border-radius: 0 40px 40px 0;
width:100px;
cursor: pointer;
}
.s-label{
margin-right:2px;
width:150px;
}
.subText{
font-size: 16px;
}
.small-button-left{
background-color: #ccc;
color:#fff;
height:40px;
width:100px;
font-size: 16px;
margin-right:2px;
border-radius: 40px 0 0 40px;
}
.small-button-right{
background-color: #ccc;
color:#fff;
height:40px;
width:100px;
font-size: 16px;
border-radius: 0 40px 40px 0;
}
.small-button-top{
background-color: #ccc;
color:#fff;
height:40px;
width:200px;
font-size: 16px;
border-radius: 40px;
} |
INIT
Code Block | ||
---|---|---|
| ||
var self = this.ractive; this.ractive.fire("obtainData"); var count = 0; this.ractive.on("increment", function(event){ var point = this.get('mySetPoint'); var val = parseFloat(point.curVal); val += 1; if (val >= 84) val=84; if (val <= 0) val=0; finstack.eval('readById(' +point.id+ ').pointOverride(' +val+ ')').then(function(data) { if (data && data.result) { if (data.result.isErrorGrid) { console.error("Error occurred while updating value"); return; } self.set('mySetPoint.curVal', val); } }, function(err) { console.error("Error occurred while updating...", err); }); }); this.ractive.on("decrement", function(event) { var point = this.get('mySetPoint'); var val = parseFloat(point.curVal); val -= 1; if (val >= 84) val=84; if (val <= 0) val=0; finstack.eval('readById(' +point.id+ ').pointOverride(' +val+ ')').then(function(data) { if (data && data.result) { if (data.result.isErrorGrid) { console.error("Error occurred while updating value"); return; } self.set('mySetPoint.curVal', val); } }, function(err) { console.error("Error occurred while updating...", err); }); }); |
...