Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

 

Model: gaugeColor.zip

How to Make Your Own

  • Drag out Ractive from components on the left side menu
  • Under Properties, click ractive editor, then open editor
  • Copy and paste the code below into the template
<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>
<path style="fill:url(#SVGID_1_)" d="M346.4,226.6h-320c-11,0-20-9-20-20v-180c0-11,9-20,20-20h320c11,0,20,9,20,20v180
	C366.4,217.7,357.4,226.6,346.4,226.6z"/>
<g>
	<circle style="fill:#FFFFFF" 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:#87FF87"/>
		<stop  offset="1" style="stop-color:#29ABE2"/>
	</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:#58D5B4;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:#58D5B4; font-family:'SourceSansPro-Light'; font-size:18px;">50</text>
	<line style="fill:none;stroke:#4FCDBE;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:#4FCDBE; font-family:'SourceSansPro-Light'; font-size:18px;">60</text>
	<line style="fill:none;stroke:#45C4C7;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:#45C4C7; font-family:'SourceSansPro-Light'; font-size:18px;">70</text>
	<line style="fill:none;stroke:#3CBCD0;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:#3CBCD0; font-family:'SourceSansPro-Light'; font-size:18px;">80</text>
	<line style="fill:none;stroke:#32B3D9;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:#32B3D9; font-family:'SourceSansPro-Light'; font-size:18px;">90</text>
	<line style="fill:none;stroke:#29ABE2;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:#29ABE2; font-family:'SourceSansPro-Light'; font-size:18px;">100</text>
	<line style="fill:none;stroke:#61DDAB;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:#61DDAB; font-family:'SourceSansPro-Light'; font-size:18px;">40</text>
	<line style="fill:none;stroke:#6BE6A2;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:#6BE6A2; font-family:'SourceSansPro-Light'; font-size:18px;">30</text>
	<line style="fill:none;stroke:#87FF87;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:#74EE99; font-family:'SourceSansPro-Light'; font-size:18px;">20</text>
	<line style="fill:none;stroke:#7EF790;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:#7EF790; font-family:'SourceSansPro-Light'; font-size:18px;">10</text>
	<line style="fill:none;stroke:#87FF87;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:#87FF87; font-family:'SourceSansPro-Light'; font-size:18px;">0</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:#FFFFFF; font-family:'MyriadPro-Regular'; font-size:16px;">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 310.3008 216)" style="fill:#FFFFFF; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>


  • Add a tag to the ractive component
  • Name it whatever you want, just remember the name of the tag as it will be used when creating the program

 

  • Go to programs in the left menu
  • Click the plus to add a new program, and it will pull up the program editor
  • In the Program Target Filter type the name of the tag added to the Ractive component
  • Click the three dots in the top right corner, and select variables
  • Click the + icon to add a new variable
  • Click the gear that appears as you hover over the new variable
  • On the first line type point
  • The second line call id==$virtualPointRef
  • Turn on Invokes the Function
  • Change the dropdown to Tag Change
  • In the textbox below the dropdown type curVal
  • Click the gray Save button
  • Copy and paste the code below into the main section and click the blue save
var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = point.navName;
myRactive.minInputValue      = 0;
myRactive.maxInputValue      = 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -70;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  70;
 
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
 
myRactive.ractive.animate('rotateValue',myRotateValue);

Adding the Data

  • Drag and drop the point onto the component


Changing the Colors

<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 185 40.1498)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 221.5 44.6224)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 257 58)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 288 79)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 313 107)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 330 141)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</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 148 45)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 113 58)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 82 79)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 58 107)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+(maxInputValue-minInputValue)/10)).toFixed(0)}}</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 41 141)" style="fill:{{accentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</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>

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);
  • No labels