Overview
Overview
This model allows the user to view all their sites, floors, and equips in one place. Clicking on the site, floor, green button, or room temp will display magic bubbles. The color of the room temp button is based off of the room temp compared to the room setpoint. Must be placed on a floor.
The room temp point has to be tagged as vipPoint and the setpoint tagged as vipSp in the database. If not present, no value will be displayed as there is nothing to compare with.
The description of each equip is based on the description string tag in the database. If not present, It will be blank.
Ractive Code
Template
<div class="top">
<div class="s-main">
{{#myPoints}}
<div class="view-container s-box">
<div class="s-site s-hand" on-click="magicB">{{dis}}</div>
{{#each subItems}}
<div class="s-floor s-hand" on-click="magicB">{{idDis}}</div>
{{#each .subItems}}
{{> sub }}
{{/each}}
{{/each}}
</div>
{{/myPoints}}
</div>
{{#partial sub}}
<div class="s-equip">
<div class="s-space"> </div>
<div><button class="s-space {{#if subItems}}view-default success {{else}}view-default error {{/if}}wi-stars" style="width:25px;" on-click="magicB"></button></div>
<div class="s-space15 s-name">{{#if .navName}}{{.navName}}{{else}} {{/if}}</div>
<div class="s-space30 s-name">{{#if .description}}{{.description}}{{else}} {{/if}}</div>
<div class="s-space15 s-name">
<div class="r-side s-center">
<aside class="indicator-box alarms s-center s-icons s-hand {{#if numAlarms==0}} green {{else}} red{{/if}}" on-click="alarms">
<aside class="icon-warning small-icon s-center view-light-text"></aside>
<aside class="s-center view-light-text"> {{numAlarms}}</aside>
</aside>
<aside class="s-center s-icons purple">
<aside class="icon-gear small-icon s-center view-light-text"></aside>
<aside class="s-center view-light-text"> {{numManual}}</aside>
</aside>
</div>
</div>
<div class="s-space s-rmt s-name">RMT</div>
<div class="s-tempSpace view-superman-value s-temp s-hand" style="background-color:{{#if .color}}{{color}}{{else}}#e0e0e0{{/if}};" on-click="magicBTemp">
{{#.vipPoint}}{{curVal.toFixed(2)}}{{unit}}{{/.vipPoint}}</div>
</div>
{{#each .subItems}}
{{>subI}}
{{/each}}
{{/partial}}
{{#partial subI}}
<div class="s-equip">
<div class="s-space5"> </div>
<div><button class="s-space {{#if subItems}}view-default success {{else}}view-default error {{/if}}wi-stars msr" style="width:25px;" on-click="magicB"></button></div>
<div class="s-space20 s-name">{{#if .navName}}{{.navName}}{{else}} {{/if}}</div>
<div class="s-space20 s-name">{{#if .description}}{{.description}}{{else}} {{/if}}</div>
<div class="s-space15 s-name">
<div class="r-side s-center">
<aside class="indicator-box alarms s-center s-icons s-hand{{#if numAlarms==0}} green {{else}} red{{/if}}" on-click="alarms">
<aside class="icon-warning small-icon s-center view-light-text"></aside>
<aside class="s-center view-light-text"> {{numAlarms}}</aside>
</aside>
<aside class="s-center s-icons purple">
<aside class="icon-gear small-icon s-center view-light-text"></aside>
<aside class="s-center view-light-text"> {{numManual}}</aside>
</aside>
</div>
</div>
<div class="s-space s-rmt s-name">RMT</div>
<div class="s-tempSpace view-superman-value s-temp s-hand" style="background-color:{{#if .color}}{{color}}{{else}}#e0e0e0{{/if}};" on-click="magicBTemp">
{{#.vipPoint}}{{curVal.toFixed(2)}}{{unit}}{{/.vipPoint}}</div>
</div>
{{/partial}}
</div>Model
{
data:
{
myPoints:[]
}
}Style
.top{
overflow: auto;
width: 100%;
height: 100%;
}
.s-main{
display: flex;
flex-direction: row;
flex: 1 1 auto;
flex-wrap: wrap;
}
.s-hand{
cursor: pointer;
}
.s-box{
min-width: 500px;
display: flex;
flex-direction: column;
margin-bottom: 5px;
margin-right: 5px;
width: 100%;
}
.s-site{
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.s-rmt{
margin-right: 5px;
justify-content: center;
}
.s-floor{
font-size: 18px;
text-indent: 20px;
margin-bottom: 5px;
}
.s-equip{
font-size: 14px;
margin-bottom: 5px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.s-dot{
width:10px;
height:10px;
background-color: green;
border-radius: 50%;
}
.s-name{
display: flex;
flex-direction: row;
align-items: center;
}
.s-temp{
text-align: center;
margin-right: 5px;
display: flex;
flex-direction: row;
justify-content: center;
}
.s-tempSpace{
width:60.5px;
}
.s-space{
width:14%;
margin-right: 5px;
}
.s-space15{
width:15%;
margin-right: 5px;
}
.s-space5{
width:5%;
margin-right: 5px;
}
.s-space20{
width:20%;
margin-right: 5px;
}
.s-space30{
width:30%;
margin-right: 5px;
}
.s-center{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.margin .small .r-side {
margin-right: 5px;
}
.no-flex{
flex: 0 0 auto;
}
.s-icons{
display: flex;
}
.purple{
border-radius: 0 3px 3px 0;
height:25px;
width:40px;
background: #8c68b2;
}
.red{
border-radius: 3px 0 0 3px;
height:25px;
width:40px;
background: #c34c46;
}
.green{
border-radius: 3px 0 0 3px;
height:25px;
width:40px;
background: #6cc487;
}Init
Program
How To Make your Own
Drag Ractive out from components on the left side menu, and click on it to have the green outline
Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init
After saving go to programs and add a new program
Name your program, and set the program target filter to
stackractiveCopy and paste the above code for program into the main part
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
obtainDatain the line below and save
Save and you're done!
Adding a Timer
Drag out a timer from the components in the left side menu
Edit your program to add a new variable
click the + icon on the right next to Program Vars to add a new variable
Name the variable
timerIn the text box below type
timer, and turn on invokes the functionChange the dropdown to custom event and type
timerin the box belowClick the gray save button
Then save the program and that’s it.