Page Comparison

...

Code Block

title	Gauge 1: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal fin s-fHt s-fWd s-middle ">
            <div class="s-svgIcon s-pnh s-psv">
    <svg id="snowflake" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
            <path d="M92.16,70.73l-7.49-4.32,7.49-4.33A3.13,3.13,0,1,0,89,56.67L78.42,62.8l-7.28-4.21L86,50,71.13,41.41l7.28-4.21L89,43.33a3.13,3.13,0,0,0,3.13-5.41l-7.49-4.32,7.49-4.32A3.13,3.13,0,0,0,89,23.86l-7.49,4.32V19.53a3.13,3.13,0,1,0-6.25,0V31.79L68,36V18.8L53.13,27.4V19l10.62-6.13a3.13,3.13,0,1,0-3.12-5.41l-7.49,4.33V3.13a3.13,3.13,0,0,0-6.25,0v8.65l-7.5-4.33a3.13,3.13,0,1,0-3.12,5.41L46.88,19V27.4L32,18.8V36l-7.28-4.21V19.53a3.13,3.13,0,0,0-6.25,0v8.65L11,23.86a3.13,3.13,0,1,0-3.12,5.41l7.49,4.32L7.84,37.92A3.13,3.13,0,0,0,11,43.33L21.58,37.2l7.28,4.21L14,50l14.88,8.59L21.58,62.8,11,56.67a3.13,3.13,0,1,0-3.12,5.41l7.49,4.32L7.84,70.73A3.13,3.13,0,0,0,11,76.14l7.49-4.32v8.65a3.12,3.12,0,0,0,6.25,0V68.21L32,64V81.2l14.88-8.6V81L36.26,87.14a3.13,3.13,0,0,0,3.13,5.41l7.49-4.33v8.65a3.12,3.12,0,0,0,6.25,0V88.22l7.5,4.33a3.13,3.13,0,0,0,3.13-5.41L53.13,81V72.6L68,81.2V64l7.28,4.21V80.47a3.13,3.13,0,0,0,6.25,0V71.82L89,76.14a3.13,3.13,0,0,0,3.13-5.41ZM73.52,50l-8.63,5-8.63-5,8.63-5ZM61.76,29.63v10l-8.63,5v-10Zm-23.52,0,8.63,5v10l-8.63-5ZM26.48,50l8.63-5,8.63,5-8.63,5ZM38.24,70.37v-10l8.63-5v10Zm23.52,0-8.63-5v-10l8.63,5Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>snowflake</title>
    <path id="background" d="M92.16,70.73l-7.49-4.32,7.49-4.33A3.13,3.13,0,1,0,89,56.67L78.42,62.8l-7.28-4.21L86,50,71.13,41.41l7.28-4.21L89,43.33a3.13,3.13,0,0,0,3.13-5.41l-7.49-4.32,7.49-4.32A3.13,3.13,0,0,0,89,23.86l-7.49,4.32V19.53a3.13,3.13,0,1,0-6.25,0V31.79L68,36V18.8L53.13,27.4V19l10.62-6.13a3.13,3.13,0,1,0-3.12-5.41l-7.49,4.33V3.13a3.13,3.13,0,0,0-6.25,0v8.65l-7.5-4.33a3.13,3.13,0,1,0-3.12,5.41L46.88,19V27.4L32,18.8V36l-7.28-4.21V19.53a3.13,3.13,0,0,0-6.25,0v8.65L11,23.86a3.13,3.13,0,1,0-3.12,5.41l7.49,4.32L7.84,37.92A3.13,3.13,0,0,0,11,43.33L21.58,37.2l7.28,4.21L14,50l14.88,8.59L21.58,62.8,11,56.67a3.13,3.13,0,1,0-3.12,5.41l7.49,4.32L7.84,70.73A3.13,3.13,0,0,0,11,76.14l7.49-4.32v8.65a3.12,3.12,0,0,0,6.25,0V68.21L32,64V81.2l14.88-8.6V81L36.26,87.14a3.13,3.13,0,0,0,3.13,5.41l7.49-4.33v8.65a3.12,3.12,0,0,0,6.25,0V88.22l7.5,4.33a3.13,3.13,0,0,0,3.13-5.41L53.13,81V72.6L68,81.2V64l7.28,4.21V80.47a3.13,3.13,0,0,0,6.25,0V71.82L89,76.14a3.13,3.13,0,0,0,3.13-5.41ZM73.52,50l-8.63,5-8.63-5,8.63-5ZM61.76,29.63v10l-8.63,5v-10Zm-23.52,0,8.63,5v10l-8.63-5ZM26.48,50l8.63-5,8.63,5-8.63,5ZM38.24,70.37v-10l8.63-5v10Zm23.52,0-8.63-5v-10l8.63,5Z" style="fill:#d2d2d2" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#27aae1{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="fin s-middle s-vertical s-center s-fHt fWd s-label">
        <label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
 
  <div class="sm-equip fin s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 1: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue         : 55,
        prettyValue     : "55%",
        fillValue       : 50,
        minInputValue   : 0,
        maxInputValue   : 100,
        minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         : "equipRefDis",
        myNavName       : "navName"
    },
}

Style

Code Block

title	Gauge 1: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100px100%;
    width:125px40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

Program

Code Block

title	Gauge 1: Program Code
linenumbers	true
collapse	true

this.prettyValue
.s-label{
    width:   = GetPrettyValue(point);
this.myValue60%;
}
.s-horizontal{
    display: flex;
     = point.curVal;
this.myNavNameflex-direction: row;
}
.s-middle{
    align-items:     = point.navName;
this.myEquipcenter;
}
.s-vertical{
    display: flex;
    flex-direction: column;
=}
point.equipRefDis;
this.minInputValue.s-center{
    align-items: center;
=}
this.minVal || point.minVal || 0;
this.maxInputValue.s-fHt{
    height: 100%;
}
.s-fWd{
     = this.maxVal || point.maxVal || 100;
this.minOutputValuewidth: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
     = this.minOutputVal ||  0;
this.maxOutputValuepadding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    = this.maxOutputVal ||  100;
// this.fillColor   padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    = "#000";

var myFillpadding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
=}
fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Energy

Image Removed

Template

.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 21: Template Program Code
linenumbers	true
collapse	true

<div class="view-container">this.prettyValue       <div class="psa">
<div class="horizontal fin fHt fWd middle ">= GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName       <div class="svgIcon"> <svg id="energy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> point.navName;
this.myEquip          <defs>  = point.equipRefDis;
this.minInputValue     <clipPath id="clip-path">
    = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal <polygon points="30.96 100 42.45 47.7 26 47.7 34.89 0 67.79 0 56.08 32.73 74 32.73 30.96 100" style="fill:none" />
        </clipPath>
    </defs>
    <title>energy</title>
    <polygon id="background" points="30.96 100 42.45 47.7 26 47.7 34.89 0 67.79 0 56.08 32.73 74 32.73 30.96 100" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)|| point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge2
	gauge2

Energy

Image Added

Template

Code Block

title	Gauge 2: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
            <rect<div idclass="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#fff563{{/if}}" /s-svgIcon s-pnh s-psv">
<svg id="energy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
   </g>     </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd "><clipPath id="clip-path">
            <polygon <label classpoints="s-topLabel psb"> {{myNavName}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>30.96 100 42.45 47.7 26 47.7 34.89 0 67.79 0 56.08 32.73 74 32.73 30.96 100" style="fill:none" />
        </div>
</div>clipPath>
    </div>defs>
<div class="s-bar pst psl"> <title>energy</title>
   <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 2: Model Code
linenumbers	true
collapse	true

{
    data:{
   <polygon id="background" points="30.96 100 42.45 47.7 26 47.7 34.89 0 67.79 0 56.08 32.73 74 32.73 30.96 100" style="fill:#e6e6e6" />
     myValue:55,<g id="mask">
        prettyValue:"55%",<g style="clip-path:url(#clip-path)">
        fillValue: 50,   <rect id="valueIndicator" x="-100" y="-100" width="100"  minInputValue:0,
   height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#fff563{{/if}}" />
    maxInputValue:100,    </g>
    minOutputVal: 0,
        maxOutputVal: 100</g>
</svg>
</div>
<div class="s-middle s-vertical s-center s-fHt s-label">
        },
}

Style

Code Block

title	Gauge 2: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;<label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
     border-top: solid #d2d2d2; }<label .class="s-icon{bottomLabel"> {{prettyValue}}</label>
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

...

</div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 2: Program Model Code
linenumbers	true
collapse	true

this.prettyValue{
    data:{
  = GetPrettyValue(point); this.myValue    myValue        = point.curVal;
this.myNavName: 55,
        prettyValue = point.navName; this.myEquip  : "55%",
        =fillValue point.equipRefDis; this.minInputValue     : =50,
this.minVal || point.minVal || 0; this.maxInputValue   minInputValue   = this.maxVal || point.maxVal || 100;
this.minOutputValue: 0,
        maxInputValue = this.minOutputVal ||: 100,
0; this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor  minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         =: "#000";equipRefDis",
      var myFill myNavName    = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Light

Image Removed

Template

: "navName"
    },
}

Style

Code Block

title	Gauge 32: Template Style Code
linenumbers	true
collapse	true

<div class="view-container">.s-bar{
    height: <div class="psa">
<div class="horizontal fin fHt fWd middle ">35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    <div class="svgIcon">
<svg id="light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
 height:100%;
    width:40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
<clipPath id="clip-path">}
.s-horizontal{
    display: flex;
    flex-direction: row;
<path d="M50,0C33.43,0,20,14.49,20,32.37a34.43,34.43,0,0,0,2.55,13.09s1.75,4.32,4.24,9c1.94,3.67,7.55,16.59,8.11,19.65L34,75.55V76.8l1,1.53h.33c0,.06,0,.12,0,.17v2H35L34,82v1.26l1,1.53h.34V87H35L34,88.5v1.26l1,1.53h.34v2.1L44.13,100H55.87l8.81-6.61v-2.1h.38l1-1.53V88.5l-1-1.53h-.38V84.81h.38l1-1.53V82l-1-1.53h-.38v-2c0-.06,0-.12,0-.17h.37l1-1.53V75.55l-.92-1.46c.56-3,6.16-15.92,8.1-19.59,2.49-4.71,4.24-9,4.24-9A34.43,34.43,0,0,0,80,32.37C80,14.49,66.57,0,50,0Z" style="fill:none" /}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 2: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge3
	gauge3

Light

Image Added

Template

Code Block

title	Gauge 3: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
        </clipPath>     </defs>
    <title>light</title>
    <path<div class="s-svgIcon s-pnh s-psv">
<svg id="backgroundlight" dxmlns="M50,0C33.43,0,20,14.49,20,32.37a34.http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
            <path d="M50,0C33.43,0,20,14.49,20,32.37a34.43,34.43,0,0,0,2.55,13.09s1.75,4.32,4.24,9c1.94,3.67,7.55,16.59,8.11,19.65L34,75.55V76.8l1,1.53h.33c0,.06,0,.12,0,.17v2H35L34,82v1.26l1,1.53h.34V87H35L34,88.5v1.26l1,1.53h.34v2.1L44.13,100H55.87l8.81-6.61v-2.1h.38l1-1.53V88.5l-1-1.53h-.38V84.81h.38l1-1.53V82l-1-1.53h-.38v-2c0-.06,0-.12,0-.17h.37l1-1.53V75.55l-.92-1.46c.56-3,6.16-15.92,8.1-19.59,2.49-4.71,4.24-9,4.24-9A34.43,34.43,0,0,0,80,32.37C80,14.49,66.57,0,50,0Z" style="fill:#e6e6e6none" />
        <g id="mask"></clipPath>
    </defs>
    <g style="clip-path:url(#clip-path)"><title>light</title>
             <rect <path id="valueIndicatorbackground" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#1b75bc{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd ">
        <label class="s-topLabel psb"> {{myNavName}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
<div class="s-bar pst psl">
    <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 3: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue:55,
        prettyValue:"55%",
        fillValue: 50,
        minInputValue:0,
        maxInputValue:100,
        minOutputVal: 0,
        maxOutputVal: 100
    },
}

Style

Code Block

title	Gauge 3: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

Program

Code Block

title	Gauge 3: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue  d="M50,0C33.43,0,20,14.49,20,32.37a34.43,34.43,0,0,0,2.55,13.09s1.75,4.32,4.24,9c1.94,3.67,7.55,16.59,8.11,19.65L34,75.55V76.8l1,1.53h.33c0,.06,0,.12,0,.17v2H35L34,82v1.26l1,1.53h.34V87H35L34,88.5v1.26l1,1.53h.34v2.1L44.13,100H55.87l8.81-6.61v-2.1h.38l1-1.53V88.5l-1-1.53h-.38V84.81h.38l1-1.53V82l-1-1.53h-.38v-2c0-.06,0-.12,0-.17h.37l1-1.53V75.55l-.92-1.46c.56-3,6.16-15.92,8.1-19.59,2.49-4.71,4.24-9,4.24-9A34.43,34.43,0,0,0,80,32.37C80,14.49,66.57,0,50,0Z" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#1b75bc{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="s-middle s-vertical s-center s-fHt s-label">
        <label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 3: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue         : 55,
        prettyValue     : "55%",
        fillValue       : 50,
        minInputValue   : 0,
        maxInputValue   : 100,
        minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         : "equipRefDis",
        myNavName       : "navName"
    },
}

Style

Code Block

title	Gauge 3: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100%;
    width:40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 3: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge4
	gauge4

Light 2

Image Added

Template

Code Block

title	Gauge 4: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
            <div class="s-svgIcon s-pnh s-psv">
<svg id="light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path" transform="translate(0 0)">
            <path d="M70.44,26.24,51,29.91,72.79,19.23a3.12,3.12,0,0,0-2-5.87l-21.7,4.1L69.32,7.06a3.13,3.13,0,0,0-2-5.85L47.58,4.94A3.12,3.12,0,0,0,43.41.46L30.48,8.39a3.12,3.12,0,0,0,2.21,5.73l14.65-2.77L27.16,21.75a3.13,3.13,0,0,0,2,5.85l20.17-3.81L27.6,34.45a3.12,3.12,0,0,0,2,5.87l22-4.15L32.39,46.39a3.13,3.13,0,0,0,1.47,5.88,3,3,0,0,0,.58-.05l5.45-1v8.16H38.28a3.91,3.91,0,0,0-3.91,3.91v3.21c0,8.79,3.13,12.82,5.57,15.26a8.12,8.12,0,0,1,2.24,5.74v4.73a7.81,7.81,0,1,0,15.62,0V87.46a8.12,8.12,0,0,1,2.24-5.74c2.44-2.44,5.57-6.47,5.57-15.26V63.25a3.91,3.91,0,0,0-3.91-3.91H60.11v-12l6.61-1.25A3.12,3.12,0,1,0,65.56,40L53.37,42.28,72.49,32.07a3.12,3.12,0,0,0-2.05-5.83ZM53.86,48.54v10.8H46.14V50Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>light2</title>
    <path id="background" d="M70.44,26.24,51,29.91,72.79,19.23a3.12,3.12,0,0,0-2-5.87l-21.7,4.1L69.32,7.06a3.13,3.13,0,0,0-2-5.85L47.58,4.94A3.12,3.12,0,0,0,43.41.46L30.48,8.39a3.12,3.12,0,0,0,2.21,5.73l14.65-2.77L27.16,21.75a3.13,3.13,0,0,0,2,5.85l20.17-3.81L27.6,34.45a3.12,3.12,0,0,0,2,5.87l22-4.15L32.39,46.39a3.13,3.13,0,0,0,1.47,5.88,3,3,0,0,0,.58-.05l5.45-1v8.16H38.28a3.91,3.91,0,0,0-3.91,3.91v3.21c0,8.79,3.13,12.82,5.57,15.26a8.12,8.12,0,0,1,2.24,5.74v4.73a7.81,7.81,0,1,0,15.62,0V87.46a8.12,8.12,0,0,1,2.24-5.74c2.44-2.44,5.57-6.47,5.57-15.26V63.25a3.91,3.91,0,0,0-3.91-3.91H60.11v-12l6.61-1.25A3.12,3.12,0,1,0,65.56,40L53.37,42.28,72.49,32.07a3.12,3.12,0,0,0-2.05-5.83ZM53.86,48.54v10.8H46.14V50Z" transform="translate(0 0)" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#f7941d{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="s-middle s-vertical s-center s-fHt s-label">
        <label class= point.curVal;
this.myNavName"s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class= point.navName;
this.myEquip"s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div  = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Light 2

Image Removed

Template

Code Block

title	Gauge 4: Template Code
linenumbers	true
collapse	true

<div class="view-container">
    <div class="psa">
<div class="horizontal fin fHt fWd middle ">
            <div class="svgIcon">
<svg id="light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 4: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue         : 55,
        prettyValue     : "55%",
        fillValue       : 50,
        minInputValue   : 0,
        maxInputValue   : 100,
        minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         <clipPath: id="clip-pathequipRefDis" transform="translate(0 0)">,
        myNavName       <path: d="M70.44,26.24,51,29.91,72.79,19.23a3.12,3.12,0,0,0-2-5.87l-21.7,4.1L69.32,7.06a3.13,3.13,0,0,0-2-5.85L47.58,4.94A3.12,3.12,0,0,0,43.41.46L30.48,8.39a3.12,3.12,0,0,0,2.21,5.73l14.65-2.77L27.16,21.75a3.13,3.13,0,0,0,2,5.85l20.17-3.81L27.6,34.45a3.12,3.12,0,0,0,2,5.87l22-4.15L32.39,46.39a3.13,3.13,0,0,0,1.47,5.88,3,3,0,0,0,.58-.05l5.45-1v8.16H38.28a3.91,3.91,0,0,0-3.91,3.91v3.21c0,8.79,3.13,12.82,5.57,15.26a8.12,8.12,0,0,1,2.24,5.74v4.73a7.81,7.81,0,1,0,15.62,0V87.46a8.12,8.12,0,0,1,2.24-5.74c2.44-2.44,5.57-6.47,5.57-15.26V63.25a3.91,3.91,0,0,0-3.91-3.91H60.11v-12l6.61-1.25A3.12,3.12,0,1,0,65.56,40L53.37,42.28,72.49,32.07a3.12,3.12,0,0,0-2.05-5.83ZM53.86,48.54v10.8H46.14V50Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>light2</title>
    <path id="background" d="M70.44,26.24,51,29.91,72.79,19.23a3.12,3.12,0,0,0-2-5.87l-21.7,4.1L69.32,7.06a3.13,3.13,0,0,0-2-5.85L47.58,4.94A3.12,3.12,0,0,0,43.41.46L30.48,8.39a3.12,3.12,0,0,0,2.21,5.73l14.65-2.77L27.16,21.75a3.13,3.13,0,0,0,2,5.85l20.17-3.81L27.6,34.45a3.12,3.12,0,0,0,2,5.87l22-4.15L32.39,46.39a3.13,3.13,0,0,0,1.47,5.88,3,3,0,0,0,.58-.05l5.45-1v8.16H38.28a3.91,3.91,0,0,0-3.91,3.91v3.21c0,8.79,3.13,12.82,5.57,15.26a8.12,8.12,0,0,1,2.24,5.74v4.73a7.81,7.81,0,1,0,15.62,0V87.46a8.12,8.12,0,0,1,2.24-5.74c2.44-2.44,5.57-6.47,5.57-15.26V63.25a3.91,3.91,0,0,0-3.91-3.91H60.11v-12l6.61-1.25A3.12,3.12,0,1,0,65.56,40L53.37,42.28,72.49,32.07a3.12,3.12,0,0,0-2.05-5.83ZM53.86,48.54v10.8H46.14V50Z" transform="translate(0 0)" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#f7941d{{/if}}"navName"
    },
}

Style

Code Block

title	Gauge 4: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100%;
    width:40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 4: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge5
	gauge5

Sun

Image Added

Template

Code Block

title	Gauge 5: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
            <div class="s-svgIcon s-pnh s-psv">
<svg id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
            <path d="M87,50,98.75,38.87,83.37,33.93l5.72-15.1L73.09,21,71.69,5,58.25,13.9,50,0,41.76,13.9,28.31,5,26.91,21l-16-2.22,5.73,15.1L1.25,38.87,13,50,1.25,61.13l15.39,4.94L10.91,81.17l16-2.22L28.31,95l13.46-8.94L50,100l8.24-13.89L71.69,95,73.09,79l16,2.22L83.37,66.07l15.38-4.94ZM50,80.35A30.35,30.35,0,1,1,80.35,50,30.35,30.35,0,0,1,50,80.35Zm0-54.93A24.58,24.58,0,1,0,74.58,50,24.61,24.61,0,0,0,50,25.42Z" style="fill:none" />
        </g>clipPath>
    </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd ">
 defs>
    <title>sun&amp;apos;</title>
    <path  <label class="s-topLabel psb"> {{myNavName}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
<div class="s-bar pst psl">
    <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 4: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue:55,d="M87,50,98.75,38.87,83.37,33.93l5.72-15.1L73.09,21,71.69,5,58.25,13.9,50,0,41.76,13.9,28.31,5,26.91,21l-16-2.22,5.73,15.1L1.25,38.87,13,50,1.25,61.13l15.39,4.94L10.91,81.17l16-2.22L28.31,95l13.46-8.94L50,100l8.24-13.89L71.69,95,73.09,79l16,2.22L83.37,66.07l15.38-4.94ZM50,80.35A30.35,30.35,0,1,1,80.35,50,30.35,30.35,0,0,1,50,80.35Zm0-54.93A24.58,24.58,0,1,0,74.58,50,24.61,24.61,0,0,0,50,25.42Z" style="fill:#e6e6e6" />
    <g id="mask">
         prettyValue:"55%",<g style="clip-path:url(#clip-path)">
        fillValue: 50,   <rect id="valueIndicator" x="-100"    minInputValue:0,
        maxInputValue:100,
        minOutputVal: 0,y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#f7941d{{/if}}" />
        </g>
 maxOutputVal: 100  </g>
</svg>
</div>
},
}

Style

Code Block

title	Gauge 4: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

Program

Gauge 4: Program

Code Block

title

<div class="s-middle s-vertical s-center s-fHt s-label">
        <label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 5: Model Code
linenumbers	true
collapse	true

this.prettyValue {
    data:{
      = GetPrettyValue(point); this.myValuemyValue         : 55,
        prettyValue     : "55%",
        =fillValue point.curVal; this.myNavName     : 50,
   = point.navName; this.myEquip   minInputValue   : 0,
    = point.equipRefDis; this.minInputValue  maxInputValue   : =100,
this.minVal || point.minVal || 0; this.maxInputValue   minOutputVal   = this.maxVal || point.maxVal || 100;
this.minOutputValue: 0,
        = this.minOutputVal ||maxOutputVal   0; this.maxOutputValue: 100
   = this.maxOutputVal ||  100; //myEquip this.fillColor        =: "#000equipRefDis";,
   var myFill    myNavName = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Sun

Image Removed

...

      : "navName"
    },
}

Style

Code Block

title	Gauge 5: Template Style Code
linenumbers	true
collapse	true

<div class="view-container">
    <div class="psa">
<div class="horizontal fin fHt fWd middle ">
   .s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100%;
    width:40%;
}
.s-bottomLabel{
 <div class="svgIcon"> <svg id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
}
.s-horizontal{
    display: flex;
  <path d="M87,50,98.75,38.87,83.37,33.93l5.72-15.1L73.09,21,71.69,5,58.25,13.9,50,0,41.76,13.9,28.31,5,26.91,21l-16-2.22,5.73,15.1L1.25,38.87,13,50,1.25,61.13l15.39,4.94L10.91,81.17l16-2.22L28.31,95l13.46-8.94L50,100l8.24-13.89L71.69,95,73.09,79l16,2.22L83.37,66.07l15.38-4.94ZM50,80.35A30.35,30.35,0,1,1,80.35,50,30.35,30.35,0,0,1,50,80.35Zm0-54.93A24.58,24.58,0,1,0,74.58,50,24.61,24.61,0,0,0,50,25.42Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>sun&amp;apos;</title>
    <path d="M87,50,98.75,38.87,83.37,33.93l5.72-15.1L73.09,21,71.69,5,58.25,13.9,50,0,41.76,13.9,28.31,5,26.91,21l-16-2.22,5.73,15.1L1.25,38.87,13,50,1.25,61.13l15.39,4.94L10.91,81.17l16-2.22L28.31,95l13.46-8.94L50,100l8.24-13.89L71.69,95,73.09,79l16,2.22L83.37,66.07l15.38-4.94ZM50,80.35A30.35,30.35,0,1,1,80.35,50,30.35,30.35,0,0,1,50,80.35Zm0-54.93A24.58,24.58,0,1,0,74.58,50,24.61,24.61,0,0,0,50,25.42Z" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#f7941d{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd ">  flex-direction: row;
}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 5: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge6
	gauge6

Tree

Image Added

Template

Code Block

title	Gauge 6: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
            <label<div class="s-topLabel psb"> {{myNavName}}</label>svgIcon s-pnh s-psv">
<svg id="tree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <label<clipPath classid="sclip-bottomLabelpath"> {{prettyValue}}</label>
    </div> </div> </div>
<div class="s-bar pst psl">   <path  <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 5: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue:55,
        prettyValue:"55%",
        fillValue: 50,
        minInputValue:0,
        maxInputValue:100,
        minOutputVal: 0,
        maxOutputVal: 100
    },
}

...

Code Block

title	Gauge 5: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

Program

Code Block

title	Gauge 5: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Tree

Image Removed

Template

Code Block

title	Gauge 6: Template Code
linenumbers	true
collapse	true

<div class="view-container">
    <div class="psa">
<div class="horizontal fin fHt fWd middle ">
            <div class="svgIcon">
<svg id="tree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
       id="mask" d="M87.51,44.75a10.4,10.4,0,0,0-4.17-8.33,10.41,10.41,0,0,0-4.79-16.91A10.42,10.42,0,0,0,65.28,7a10.37,10.37,0,0,0-12-2.22A10.41,10.41,0,0,0,34.51,7.59l-.4,0A10.43,10.43,0,0,0,23.68,18a10.56,10.56,0,0,0,.06,1.08h-.06a10.42,10.42,0,0,0-7.46,17.7,10.41,10.41,0,0,0,6.06,18.38,10.4,10.4,0,0,0,16.38,5.5l8.67,6.68S46.41,88.58,40,96.69l8.14-1.14L53.69,100l4.07-4.45,8.14.13S57,78.77,56.14,67.33l9.53-7a10.38,10.38,0,0,0,12.91-5.28A10.42,10.42,0,0,0,87.51,44.75ZM40.62,58.69a10.37,10.37,0,0,0,1.83-3.84,12.92,12.92,0,0,0,5.1,2.68l-.22,3.76ZM55,61.7l-.4-4.26a12.93,12.93,0,0,0,5-2.84A10.45,10.45,0,0,0,63.14,59Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>tree</title>
    <path id="maskbackground" d="M87.51,44.75a10.4,10.4,0,0,0-4.17-8.33,10.41,10.41,0,0,0-4.79-16.91A10.42,10.42,0,0,0,65.28,7a10.37,10.37,0,0,0-12-2.22A10.41,10.41,0,0,0,34.51,7.59l-.4,0A10.43,10.43,0,0,0,23.68,18a10.56,10.56,0,0,0,.06,1.08h-.06a10.42,10.42,0,0,0-7.46,17.7,10.41,10.41,0,0,0,6.06,18.38,10.4,10.4,0,0,0,16.38,5.5l8.67,6.68S46.41,88.58,40,96.69l8.14-1.14L53.69,100l4.07-4.45,8.14.13S57,78.77,56.14,67.33l9.53-7a10.38,10.38,78.77,56.14,67.33l9.53-7a10.38,10.38,0,0,0,12.91-5.28A10.42,10.42,0,0,0,87.51,44.75ZM40.62,58.69a10.37,10.37,0,0,0,1.83-3.84,12.92,12.92,0,0,0,5.1,2.68l-.22,3.76ZM55,61.7l-.4-4.26a12.93,12.93,0,0,0,12.915-52.28A1084A10.4245,10.4245,0,0,0,8763.51,44.75ZM40.62,58.69a10.37,10.37,0,0,0,1.83-3.84,12.92,12.92,0,0,0,5.1,2.68l-.22,3.76ZM55,61.7l-.4-4.26a12.93,12.93,0,0,0,5-2.84A10.45,10.45,0,0,0,63.14,59Z" style="fill:none" />14,59Z" style="fill:#e6e6e6" />
    <g style="clip-path:url(#clip-path)">
        <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform = "rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#006838{{/if}}" />
    </g>
</svg>
</div>
<div class="s-middle s-vertical s-center s-fHt s-label">
        <label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</clipPath>label>
    </defs>div>
    <title>tree</title>
    <path id="background" d="M87.51,44.75a10.4,10.4,0,0,0-4.17-8.33,10.41,10.41,0,0,0-4.79-16.91A10.42,10.42,0,0,0,65.28,7a10.37,10.37,0,0,0-12-2.22A10.41,10.41,0,0,0,34.51,7.59l-.4,0A10.43,10.43,0,0,0,23.68,18a10.56,10.56,0,0,0,.06,1.08h-.06a10.42,10.42,0,0,0-7.46,17.7,10.41,10.41,0,0,0,6.06,18.38,10.4,10.4,0,0,0,16.38,5.5l8.67,6.68S46.41,88.58,40,96.69l8.14-1.14L53.69,100l4.07-4.45,8.14.13S57,78.77,56.14,67.33l9.53-7a10.38,10.38,0,0,0,12.91-5.28A10.42,10.42,0,0,0,87.51,44.75ZM40.62,58.69a10.37,10.37,0,0,0,1.83-3.84,12.92,12.92,0,0,0,5.1,2.68l-.22,3.76ZM55,61.7l-.4-4.26a12.93,12.93,0,0,0,5-2.84A10.45,10.45,0,0,0,63.14,59Z" style="fill:#e6e6e6" />
    <g style="clip-path:url(#clip-path)">
        <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform = "rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#006838{{/if}}" />
    </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd ">
        <label class="s-topLabel psb"> {{myNavName}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
<div class="s-bar pst psl">
    <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 6: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue:55,
        prettyValue:"55%",
        fillValue: 50,
        minInputValue:0,
        maxInputValue:100,
        minOutputVal: 0,
        maxOutputVal: 100
    },
}

Style

Code Block

title	Gauge 6: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}

Program

Code Block

title	Gauge 6: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Waterdrop

Image Removed

Template

Code Block

title	Gauge 7: Template Code
linenumbers	true
collapse	true

<div class="view-container">
    <div class="psa">
<div class="horizontal fin fHt fWd middle ">
            <div class="svgIcon">
<svg id="water" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
            <path d="M80,69.23C80,86.22,66.57,100,50,100S20,86.22,20,69.23,50,0,50,0,80,52.24,80,69.23Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>waterdrop</title>
    <path id="background" d="M80,69.23C80,86.22,66.57,100,50,100S20,86.22,20,69.23,50,0,50,0,80,52.24,80,69.23Z" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#27aae1{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="fin middle vertical center fHt fWd ">
        <label class="s-topLabel psb"> {{myNavName}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
<div class="s-bar pst psl">
    <div class="sm-equip fin horizontal middle fHt fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
</div>

Model

Code Block

title	Gauge 7: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue:55,
        prettyValue:"55%",
        fillValue: 50,
        minInputValue:0,
        maxInputValue:100,
        minOutputVal: 0,
        maxOutputVal: 100
    },
}

Style

Code Block

title	Gauge 7: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.svgIcon{
    height:100px;
    width:125px;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 6: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue         : 55,
        prettyValue     : "55%",
        fillValue       : 50,
        minInputValue   : 0,
        maxInputValue   : 100,
        minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         : "equipRefDis",
        myNavName       : "navName"
    },
}

Style

Code Block

title	Gauge 6: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100%;
    width:40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 6: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

Anchor

	gauge7
	gauge7

Waterdrop

Image Added

Template

Code Block

title	Gauge 7: Template Code
linenumbers	true
collapse	true

<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
    <div class="s-psa">
<div class="s-horizontal s-fHt s-fWd s-middle ">
            <div class="s-svgIcon s-pnh s-psv">
<svg id="water" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clip-path">
            <path d="M80,69.23C80,86.22,66.57,100,50,100S20,86.22,20,69.23,50,0,50,0,80,52.24,80,69.23Z" style="fill:none" />
        </clipPath>
    </defs>
    <title>waterdrop</title>
    <path id="background" d="M80,69.23C80,86.22,66.57,100,50,100S20,86.22,20,69.23,50,0,50,0,80,52.24,80,69.23Z" style="fill:#e6e6e6" />
    <g id="mask">
        <g style="clip-path:url(#clip-path)">
            <rect id="valueIndicator" x="-100" y="-100" width="100" height="{{fillValue}}" transform="rotate(180 0 0)" style="fill:{{#if fillColor}}{{fillColor}}{{else}}#27aae1{{/if}}" />
        </g>
    </g>
</svg>
</div>
<div class="s-middle s-vertical s-center s-fHt s-label">
        <label class="s-topLabel s-psb">{{#if shortName}}{{shortName}} {{else}} {{myNavName}}{{/if}}</label>
        <label class="s-bottomLabel"> {{prettyValue}}</label>
    </div>
</div>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar s-pst s-psl">
<div class="sm-equip s-horizontal s-middle s-fHt s-fWd s-icon">&nbsp; {{myEquip}}</div>
</div>
{{/if}}
</div>

Model

Code Block

title	Gauge 7: Model Code
linenumbers	true
collapse	true

{
    data:{
        myValue         : 55,
        prettyValue     : "55%",
        fillValue       : 50,
        minInputValue   : 0,
        maxInputValue   : 100,
        minOutputVal    : 0,
        maxOutputVal    : 100
        myEquip         : "equipRefDis",
        myNavName       : "navName"
    },
}

Style

Code Block

title	Gauge 7: Style Code
linenumbers	true
collapse	true

.s-bar{
    height: 35px;
    border-top: solid #d2d2d2;
}
.s-icon{
    font-size: 16px;
}
.s-svgIcon{
    height:100%;
    width:40%;
}
.s-bottomLabel{
    font-size: 40px;
    font-weight: bold;
}
.s-topLabel{
    font-size: 22px;
}
.s-label{
    width: 60%;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.s-middle{
    align-items: center;
}
.s-vertical{
    display: flex;
    flex-direction: column;
}
.s-center{
    align-items: center;
}
.s-fHt{
    height: 100%;
}
.s-fWd{
    width: 100%;
}
.s-psa{
    padding: 5px;
}
.s-pnh{
    padding-left: 10px;
    padding-right: 10px;
}
.s-psv{
    padding-top: 5px;
    padding-bottom: 5px;
}
.s-pst{
    padding-top: 5px;
}
.s-psb{
    padding-bottom: 5px;
}
.s-psl{
    padding-left: 5px;
}

Program

Code Block

title	Gauge 7: Program Code
linenumbers	true
collapse	true

this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = point.navName;
this.myEquip            = point.equipRefDis;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  100;
// this.fillColor        = "#000";

var myFill     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);

this.ractive.animate('fillValue',myFill);

...

Drag out Ractive from Components in the left side menu, and open editor from Properties. Copy and paste the code from Template, Model, and Style then Save.

Image Added

Add a tag to your gauge. You can name it whatever you would like, as long as it matches the program target filter in the program editor. Under Programs on the left menu click the + to add a new Program

Name your program whatever you would like
Set the program target filter to be the same name as the tag on the gauge
Click on the three dots in the top right corner and select Variables
Click the + to add a new variable and call it point
Under point type id==$virtualPointRef
Turn on invokes the function and set it to tag change and type curVal
hit save for the variables then in the main part paste the program code
Save

Image RemovedImage Added

Drag a virtual point on top of your gauge and your done!

...

Line 1 gets the Pretty Value (curVal rounded with units), line 2 gets the curVal, line 3 the name, line 4 the equip, the next 4 lines, lines 5-8 get the min and max. If a min and max tag exists on the point, it will use those, otherwise it will use 0-100 for the gauge. Line 9 has // in front of it. By deleting the two slashes, you will be able to change the color of the svg fill. #000 is black, but that can be changed to whatever color the user desires. The last two lines determine how much to fill the svg Gauge.

Changing the Color

Image Added Image Added

To change the color, add a tag called fillColor, and put the value as the desired color

Changing the Name

Image Added

To change the name of the icon, from the default navName, the user can add a tag called shortName
under Properties→Advanced add a new property and name it shortName
Next change the NewValue to be the new name

Hiding the Background

Image Added

To hide the background, add a tag called hideBackground

Versions Compared

Old Version 3

New Version 4

Key

Energy

Energy

Light

Light

Light 2

Light 2

Sun

Sun

Waterdrop

Waterdrop

Changing the Color

Changing the Name

Hiding the Background