Versions Compared

Old Version 1

changes.mady.by.user Sarah Padilla (Unlicensed)

Saved on

compared with

New Version 2

changes.mady.by.user Sarah Padilla (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
titleProgram Code
linenumberstrue
collapsetrue
this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = this.shortName || point.navName;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  300;
this.maxValueColor      = this.maxValColor || "#c34c46";
this.minValueColor      = this.minValColor || "#5d8eca";
this.okValueColor       = this.okValColor || "#6cc487";
this.okValueLow         = this.okValLow || 40;
this.okValueHigh        = this.okValHigh || 60;
 
var myGaugeValue     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);
 
this.ractive.animate('gaugeValue',myGaugeValue);




Vertical Gauge with Bubble

Image Added Image Added

Code Block
linenumberstrue
collapsetrue
<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"
	 width="357px" height="1063px" viewBox="393.5 -303.5 357 1063" enable-background="new 393.5 -303.5 357 1063"
	 xml:space="preserve">
<ellipse fill="{{myAccentColor}}" cx="612.51" cy="{{rotateValue1}}" rx="90.815" ry="90.815"/>
<polygon fill="{{myAccentColor}}" points="477.126,{{rotateValue2}} 529.021,{{rotateValue3}} 529.021,{{rotateValue4}} "/>
<line fill="none" stroke="#E6E6E6" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="448.54" y1="600.887" x2="448.54" y2="-177.535"/>
<line fill="none" stroke="{{myAccentColor}}" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="448.54" y1="600.887" x2="448.54" y2="{{rotateValue5}}"/>
  <text x="614" y="{{rotateValue6}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="25" text-anchor="middle">{{myNavName}}</text>
<text x="449" y="-208.5" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{maxInputValue}}</text>
  <text x="449" y="655.5" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{minInputValue}}</text>
<text x="614" y="{{rotateValue7}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="50" text-anchor="middle">{{prettyValue}}</text>
</svg>


Code Block
linenumberstrue
collapsetrue
var myRactive = this;
   
myRactive.prettyValue         = GetPrettyValue(point);
myRactive.myValue             = point.curVal;
myRactive.myNavName           = this.shortName || point.navName;
myRactive.minInputValue       = this.minVal || point.minVal || 0;
myRactive.maxInputValue       = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1     = myRactive.minOutputVal ||  580.686;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  -200.686;
myRactive.minOutputValue2     = myRactive.minOutputVal ||  579.022;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  -201.022;
myRactive.minOutputValue3     = myRactive.minOutputVal ||  559.78;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  -221.78;
myRactive.minOutputValue4     = myRactive.minOutputVal ||  600.264;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  -180.264;
myRactive.minOutputValue5     = myRactive.minOutputVal ||  600.887;
myRactive.maxOutputValue5     = myRactive.maxOutputVal ||  -178;
myRactive.minOutputValue6     = myRactive.minOutputVal ||  607.686;
myRactive.maxOutputValue6     = myRactive.maxOutputVal ||  -173;
myRactive.minOutputValue7     = myRactive.minOutputVal ||  580.686;
myRactive.maxOutputValue7     = myRactive.maxOutputVal ||  -200;
myRactive.myAccentColor       = this.color || "#29ABE2";
    
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);
var myRotateValue5     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue5, myRactive.maxOutputValue5);
var myRotateValue6     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue6, myRactive.maxOutputValue6);
var myRotateValue7     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue7, myRactive.maxOutputValue7);
  
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);
myRactive.ractive.animate('rotateValue5',myRotateValue5);
myRactive.ractive.animate('rotateValue6',myRotateValue6);
myRactive.ractive.animate('rotateValue7',myRotateValue7);