...
| Code Block | ||||
|---|---|---|---|---|
| ||||
var myRactive = this;
myRactive.prettyValue = GetPrettyValue(point);
myRactive.myValue = point.curVal;
myRactive.myNavName = point.navName;
myRactive.minInputValue = this.minVal || point.minVal || 0;
myRactive.maxInputValue = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue = myRactive.minOutputVal || -65;
myRactive.maxOutputValue = myRactive.maxOutputVal || 65;
myRactive.accentColor = "#000";
myRactive.color1 = "#7dc5f0";
myRactive.color2 = "#006bac";
var myRotateValue = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
myRactive.ractive.animate('rotateValue',myRotateValue); |
Ractive
| Code Block | ||||
|---|---|---|---|---|
| ||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-10 0 380 152.9" style="enable-background:new 0 0 330 152.9;" xml:space="preserve">
<title>svg_bar_gauge</title>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 {{rotateValue1}} 114.4473)" style="fill:#29ABE2;" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:#29ABE2;" transform='translate({{rotateValue2}} 0)' points="113,64.9 121,84.9 105,84.9"/>
<text transform="matrix(1 0 0 1 {{rotateValue3}} 125)" style="fill:#fff; font-family:'SourceSansPro-Bold'; font-size:20px;" text-anchor="middle">{{prettyValue}}</text>
<line style="fill:none;stroke:#E6E6E6;stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="315" y2="44.9"/>
<line style="fill:none;stroke:#29ABE2;stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="{{rotateValue4}}" y2="44.9"/>
<line style="opacity:0.5;fill:none;stroke:#29ABE2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;enable-background:new;" x1="164.6" y1="64.9" x2="164.6" y2="24.9"/>
<text transform="matrix(1 0 0 1 155.98 14.94)" style="fill:#29ABE2; font-family:'SourceSansPro-Light'; font-size:18px;">{{((maxInputValue+minInputValue)/2).toFixed(0)}}</text>
</svg> |
Program
| Code Block | ||||
|---|---|---|---|---|
| ||||
var myRactive = this;
myRactive.prettyValue = GetPrettyValue(point);
myRactive.myValue = point.curVal;
myRactive.myNavName = point.navName;
myRactive.minInputValue = this.minVal || point.minVal || 0;
myRactive.maxInputValue = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1 = myRactive.minOutputVal || -135;
myRactive.maxOutputValue1 = myRactive.maxOutputVal || 165;
myRactive.minOutputValue2 = myRactive.minOutputVal || -85;
myRactive.maxOutputValue2 = myRactive.maxOutputVal || 215;
myRactive.minOutputValue3 = myRactive.minOutputVal || 28;
myRactive.maxOutputValue3 = myRactive.maxOutputVal || 328;
myRactive.minOutputValue4 = myRactive.minOutputVal || 15;
myRactive.maxOutputValue4 = myRactive.maxOutputVal || 315;
var myRotateValue1 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myRotateValue2 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myRotateValue3 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue3, myRactive.maxOutputValue3);
var myRotateValue4 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue4, myRactive.maxOutputValue4);
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4); |