Versions Compared

Old Version 1

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

Saved on

compared with

New Version Current

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"
     viewBox="0 0 320 600" style="enable-background=:new 0 0 320 600;" xml:space="preserve">
<ellipse fill="{{myAccentColor}}" cx="212.51" cy="{{rotateValue1}}" rx="90.815" ry="90.815"/>
<polygon fill="{{myAccentColor}}" points="77.126,{{rotateValue2}} 129.021,{{rotateValue3}} 129.021,{{rotateValue4}} "/>
<line fill="none" stroke="#E6E6E6" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="48.54" y1="500.887" x2="48.54" y2="127.535"/>
<line fill="none" stroke="{{myAccentColor}}" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="48.54" y1="500.887" x2="48.54" y2="{{rotateValue5}}"/>
  <text x="214" y="{{rotateValue6}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="25" text-anchor="middle">{{myNavName}}</text>
<text x="49" y="96" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{maxInputValue}}</text>
  <text x="49" y="555.5" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{minInputValue}}</text>
<text x="214" 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 ||  474.036;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  100.686;

myRactive.minOutputValue2     = myRactive.minOutputVal ||  474.372;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  101.022;

myRactive.minOutputValue3     = myRactive.minOutputVal ||  495.13;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  121.78;

myRactive.minOutputValue4     = myRactive.minOutputVal ||  453.614;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  80.264;

myRactive.minOutputValue5     = myRactive.minOutputVal ||  500.887;
myRactive.maxOutputValue5     = myRactive.maxOutputVal ||  127.535;

myRactive.minOutputValue6     = myRactive.minOutputVal ||  500.35;
myRactive.maxOutputValue6     = myRactive.maxOutputVal ||  127;

myRactive.minOutputValue7     = myRactive.minOutputVal ||  473.35;
myRactive.maxOutputValue7     = myRactive.maxOutputVal ||  100;
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);