Versions Compared

Version Old Version 5 New Version 6
Changes made by

Sarah Padilla

Sarah Padilla

Saved on

Key

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

...

Code Block
linenumberstrue
collapsetrue
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 ||  -45;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  135;
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);

Image Added

Ractive

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 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<circle style="fill:#FFFFFF;" cx="166.5" cy="158.2" r="151"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="8.2485" x2="166.5468" y2="308.2485">
	<stop  offset="0" style="stop-color:#D8D8D8"/>
	<stop  offset="0.3673" style="stop-color:#6E6E6E"/>
	<stop  offset="0.6684" style="stop-color:#ABABAB"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_1_);" cx="166.5" cy="158.2" r="150"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="291.2485" x2="166.5468" y2="25.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="0.2194" style="stop-color:#C4C4C4"/>
	<stop  offset="0.4388" style="stop-color:#C0C0C0"/>
	<stop  offset="0.6173" style="stop-color:#ABABAB"/>
	<stop  offset="0.7704" style="stop-color:#6E6E6E"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<circle style="fill:url(#SVGID_2_);" cx="166.5" cy="158.2" r="133"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="288.2485" x2="166.5468" y2="28.2485">
	<stop  offset="0" style="stop-color:#DEDEDE"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_3_);" cx="166.5" cy="158.2" r="130"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="273.2485" x2="166.5468" y2="43.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<circle style="fill:url(#SVGID_4_);" cx="166.5" cy="158.2" r="115"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="268.2485" x2="166.5468" y2="48.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="2.381682e-03" style="stop-color:#363636"/>
	<stop  offset="0.2586" style="stop-color:#272727"/>
	<stop  offset="0.5574" style="stop-color:#1E1E1E"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>
<circle style="fill:url(#SVGID_5_);" cx="166.5" cy="158.2" r="110"/>
<g>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="51.6" x2="150.2" y2="69.4"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="65" x2="119.4" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="90.1" x2="94.3" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="123.8" x2="77.9" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="162.2" x2="72.2" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="162.2" x2="260.9" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="123.8" x2="255.2" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="90.1" x2="238.8" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="65" x2="213.7" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="51.6" x2="182.9" y2="69.4"/>
</g>
<g>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="47.6" x2="150.2" y2="65.4"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="61" x2="119.4" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="86.1" x2="94.3" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="119.8" x2="77.9" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="158.2" x2="72.2" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="158.2" x2="260.9" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="119.8" x2="255.2" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="86.1" x2="238.8" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="61" x2="213.7" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="47.6" x2="182.9" y2="65.4"/>
</g>
<radialGradient id="SVGID_6_" cx="166.5468" cy="212.2485" r="24" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#000000"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</radialGradient>
<!-- <circle class="st8" cx="166.5" cy="212.2" r="24"/> -->
<g id="needle">
	<g>
		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="156.5468" y1="153.2485" x2="176.5468" y2="153.2485">
			<stop  offset="0" style="stop-color:#F1A224"/>
			<stop  offset="1" style="stop-color:#F13524"/>
		</linearGradient>
		<path style="fill:url(#SVGID_7_);" d="M170.6,92.3l5.9,116c0,5.5-4.5,10-10,10s-10-4.5-10-10l6.1-116c0-2.2,1.8-4,4-4S170.6,90,170.6,92.3z" transform="rotate({{rotateValue}} 166.5,208.2)"/>
	</g>
	<circle style="fill:none;" cx="166.5" cy="208.2" r="120"/>
	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="216.2485" x2="166.5468" y2="90.2485">
		<stop  offset="0" style="stop-color:#FFE68C"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
  
  
	<path style="fill:url(#SVGID_8_);" d="M166.6,90.2c1.1,0,2,0.9,2,2l0,0.1l0,0.1l5.9,115.9c0,4.4-3.6,7.9-8,7.9c-2.1,0-4.1-0.8-5.7-2.3
		c-1.5-1.5-2.3-3.5-2.3-5.6l6.1-115.9l0-0.1l0-0.1C164.6,91.1,165.5,90.2,166.6,90.2L166.6,90.2" transform="rotate({{rotateValue}} 166.5,208.2)"/>
  
  
</g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="188.2485" x2="166.5468" y2="228.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#4A4A4A"/>
</linearGradient>
<circle style="fill:url(#SVGID_9_);" cx="166.5" cy="208.2" r="20"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="190.2485" x2="166.5468" y2="226.2485">
	<stop  offset="0" style="stop-color:#BBBBBB"/>
	<stop  offset="1" style="stop-color:#767676"/>
</linearGradient>
<circle style="fill:url(#SVGID_10_);" cx="166.5" cy="208.2" r="18"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="196.2485" x2="166.5468" y2="220.2485">
	<stop  offset="0" style="stop-color:#767676"/>
	<stop  offset="1" style="stop-color:#BBBBBB"/>
</linearGradient>
<circle style="fill:url(#SVGID_11_);" cx="166.5" cy="208.2" r="12"/>
<text transform="matrix(1 0 0 1 80.2416 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 167 82.0573)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+maxInputValue)/2).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 254 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="end">{{(maxInputValue).toFixed(0)}}</text>
</svg>

Program

Code Block
linenumberstrue
collapsetrue
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);