Description: This works by clicking on one of the polys. The polys have Vav's dragged on top of them, and when clicked with show the table. The table will display magic bubbles when clicked on, and can be closed by clicking the x in the top right corner.

How to Create Your Own

Ractive

Drag out Ractive from components on the left side menu
Under Properties, click ractive editor, then open editor
Copy and paste the code below for template, model, style, and init, into the corresponding tabs

Template

Template Code

<div id="showHide" class="view-container s-container">
        {{#myName}}
        <div class="s-titleBar">
        <div class="s-title view-superman-value status-disabled s-point" on-click="magicBTitle">
        {{navName}}</div>
        <div class="icon-cross s-close view-superman-value status-disabled s-point" on-click="close"></div>
        </div>
        {{/myName}}
        <div class="can-scroll">
        {{#myPoints}}
            <div class="s-row">
            <div class="view-superman-value status-stale s-box1 s-point" on-click="magicB">
                {{navName}}
            </div>
            <div class="view-superman-value s-box2 s-point" on-click="magicB">
               {{#if .kind=="Number"}}{{curVal.toFixed(2)}} {{unit}}{{else}}{{curVal}}{{/if}}
            </div>
        </div>
        {{/myPoints}}
        </div>
</div>

Model

Model Code

{
    data:
    {
        myName: [],
        myPoints:[],
    }
}

Style

Style Code

.s-table{
    width: 100%;
    height: 100%;
}
.can-scroll{
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.s-titleBar{
    display: flex;
	flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 3px;
    height: 30px;
}
.s-point{
    cursor: pointer;
}
.s-title{
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.s-close{
    width: 35px;
    margin-left: 3px;
}
.s-container{
    width: 100%;
    height: 100%;
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
}
.s-row{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}
.s-box1{
  width: 60%;
  margin-right: 3px;
  height: 30px;
}

.s-box2{
  width: 40%;
  height: 30px;
}

Init

Init Code

var showItem = this;
showItem.style.visibility = "hidden";

this.ractive.on("magicBTitle", function(event) {
    var item    = this.get(event.keypath);
    if (item)
    top.app.ShowRelatedBubbles(item.pointId, item.pointId, false, event);
});

this.ractive.on("magicB", function(event) {
    var item    = this.get(event.keypath);
    if (item)
    top.app.ShowRelatedBubbles(item.id, item.id, true, event);
});

this.ractive.on("close", function(event) {
    showItem.style.visibility = "hidden";
});

Program

Go to programs in the left menu
Click the plus to add a new program, and it will pull up the program editor
In the Program Target Filter type svg and virtualPointRef
Click the three dots in the top right corner, and select variables
Click the gear that appears as you hover over "this"
Turn on Invokes the Function
Change the dropdown to Click
Click the gray Save button
Then click the + icon to add a new variable
Type point on the first line to name the variable point, and underneath put id==$virtualPointRef
Click the gray Save button for the point variable
Copy and paste the code below into the main section and click the blue save

Program Code

preventDefault();

var queryData = query("stackRactive");
queryData.myName=point;
queryData.style.visibility = "";

finstack.eval('readAll(equipRef=='+ point.pointId +')', function(data){
    queryData.myPoints=data.result.toObj();
});

Poly

Create the poly using the polygon tool at the top
Drag and drop a point on top of the poly

FIN Framework

Floor Table Hide Show

How to Create Your Own

Ractive

Program

Poly