Page Comparison

...

Drag and drop the point onto the component

Changing the Colors

Image Added

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="0 0 375 233" style="enable-background:new 0 0 375 233;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="186.3517" y1="226.6359" x2="186.3517" y2="6.6359">
	<stop  offset="0" style="stop-color:#474747"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>

<g>
	<circle style="fill:#dbdbdb" cx="184.9" cy="193.1" r="15"/>
	<path style="opacity:0.1" d="M184.9,157.1c16.4,0,30.5,9.9,36.6,24c1.9,4.3,6.6,6.7,11.2,5.7c23.9-5.1,44.1-9.4,69.1-14.7
		c5.7-1.2,9.2-7,7.5-12.6c-16.1-53.4-65.8-92.4-124.5-92.4S76.6,106,60.4,159.4c-1.7,5.6,1.8,11.4,7.5,12.6l69.1,14.7
		c4.6,1,9.3-1.4,11.2-5.7C154.4,166.9,168.5,157.1,184.9,157.1z"/>
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="59.9965" y1="122.9967" x2="309.7596" y2="122.9967">
		<stop  offset="0" style="stop-color:{{color1}}"/>
		<stop  offset="1" style="stop-color:{{color2}}"/>
	</linearGradient>
	<path style="fill:url(#SVGID_2_)" d="M184.9,153.1c16.4,0,30.5,9.9,36.6,24c1.9,4.3,6.6,6.7,11.2,5.7c23.9-5.1,44.1-9.4,69.1-14.7
		c5.7-1.2,9.2-7,7.5-12.6c-16.1-53.4-65.8-92.4-124.5-92.4S76.6,102,60.4,155.4c-1.7,5.6,1.8,11.4,7.5,12.6l69.1,14.7
		c4.6,1,9.3-1.4,11.2-5.7C154.4,162.9,168.5,153.1,184.9,153.1z"/>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="184.9" y1="45.1" x2="184.9" y2="59.1"/>
	<text transform="matrix(1 0 0 1 176.256 40.1498)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+5*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="220.6" y1="49.5" x2="217.3" y2="63"/>
	<text transform="matrix(0.9703 0.2419 -0.2419 0.9703 213.5179 42.6224)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+6*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="254.3" y1="62.4" x2="247.7" y2="74.7"/>
	<text transform="matrix(0.8829 0.4695 -0.4695 0.8829 249.0036 53.987)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+7*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="283.8" y1="83" x2="274.4" y2="93.4"/>
	<text transform="matrix(0.7431 0.6691 -0.6691 0.7431 280.6273 73.5602)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+8*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="307.4" y1="110.2" x2="295.8" y2="118"/>
	<text transform="matrix(0.5592 0.829 -0.829 0.5592 306.6259 100.322)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+9*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="323.8" y1="142.3" x2="310.6" y2="147.1"/>
	<text transform="matrix(0.342 0.9397 -0.9397 0.342 323.9977 128.4633)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{maxInputValue}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="149.1" y1="49.5" x2="152.5" y2="63"/>
	<text transform="matrix(0.9703 -0.2419 0.2419 0.9703 139.5854 46.8294)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+4*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="115.5" y1="62.4" x2="122.1" y2="74.7"/>
	<text transform="matrix(0.8829 -0.4695 0.4695 0.8829 105.5707 62.1115)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+3*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="86" y1="83" x2="95.3" y2="93.4"/>
	<text transform="matrix(0.7431 -0.6691 0.6691 0.7431 76.2251 85.1102)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+2*(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="62.3" y1="110.2" x2="73.9" y2="118"/>
	<text transform="matrix(0.5592 -0.829 0.829 0.5592 53.4341 114.5726)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue+(maxInputValue-minInputValue)/10)}}</text>
	<line style="fill:none;stroke:{{accentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="46" y1="142.3" x2="59.1" y2="147.1"/>
	<text transform="matrix(0.342 -0.9397 0.9397 0.342 39.8594 144.7169)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{minInputValue}}</text>
	<g>
		<path style="fill:#C1272D;" d="M179.9,193.1l5-120l5,120c0.1,2.8-2,5.1-4.8,5.2s-5.1-2-5.2-4.8C179.9,193.3,179.9,193.2,179.9,193.1z" transform="rotate({{rotateValue}} 184.9,193.1)"/>
	</g>
</g>
<text transform="matrix(1 0 0 1 23 216)" style="fill:{{accentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 310.3008 216)" style="fill:{{accentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>

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 ||  -70;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  70;
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);

Versions Compared

Old Version 1

New Version 2

Key

Changing the Colors