...
| Code Block |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
|
var myRactive = this;
myRactive.prettyValue = GetPrettyValue(point);
myRactive.myValue = point.curVal;
myRactive.myUnits = point.dataPoint.unit;
myRactive.myNavName = this.shortName || point.navName;
myRactive.minInputValue = this.minVal || point.minVal || 0;
myRactive.maxInputValue = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue = myRactive.minOutputVal || -130;
myRactive.maxOutputValue = myRactive.maxOutputVal || 130;
var myRotateValue = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
myRactive.ractive.animate('rotateValue',myRotateValue); |
Image Added 
Image Added
Model: horizontalBarGaugeBorder.f5m
Ractive
| Code Block |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
|
<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="0 0 534 106" enable-background="new 0 0 534 106" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.2856" y1="43.3574" x2="525.4287" y2="43.3574">
<stop offset="0" style="stop-color:#8B90C7"/>
<stop offset="0.5" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#E97D84"/>
</linearGradient>
<rect x="13.286" y="9.714" fill="url(#SVGID_1_)" stroke="{{myBorderColor}}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="512.143" height="67.286"/>
<text x="13.286" y="90" font-family="Arial" fill="{{mySubTextColor}}" font-size="12" text-anchor="middle">{{minInputValue}}</text>
<text x="525.429" y="90" font-family="Arial" fill="{{mySubTextColor}}" font-size="12" text-anchor="middle">{{maxInputValue}}</text>
<text x="270" y="57" font-family="Arial" fill="{{myTextColor}}" font-size="37" text-anchor="middle">{{prettyValue}}</text>
<polygon stroke="{{myPointerColor}}" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="{{point1}},76
{{point2}},62.048
{{point3}},76 "/>
</svg> |
Program
| Code Block |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
|
var myRactive = this;
myRactive.prettyValue = GetPrettyValue(point);
myRactive.myValue = point.curVal;
myRactive.minInputValue = this.minVal || point.minVal || 0;
myRactive.maxInputValue = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1 = myRactive.minOutputVal1 || 12.032;
myRactive.maxOutputValue1 = myRactive.maxOutputVal1 || 520.032;
myRactive.minOutputValue2 = myRactive.minOutputVal2 || 15.404;
myRactive.maxOutputValue2 = myRactive.maxOutputVal2 || 523.404;
myRactive.minOutputValue3 = myRactive.minOutputVal3 || 18.776;
myRactive.maxOutputValue3 = myRactive.maxOutputVal3 || 526.776;
myRactive.myBorderColor = this.colorBorder || "#000";
myRactive.myTextColor = this.colorText || "#000";
myRactive.mySubTextColor = this.colorSubText || "#000";
myRactive.myPointerColor = this.colorPointer || "#000";
var myPoint1 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myPoint2 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myPoint3 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue3, myRactive.maxOutputValue3);
myRactive.ractive.animate('point1',myPoint1);
myRactive.ractive.animate('point2',myPoint2);
myRactive.ractive.animate('point3',myPoint3); |
