- Created by Sarah Padilla (Unlicensed), last modified on Dec 29, 2017
You are viewing an old version of this page. View the current version.
Compare with Current View Page History
« Previous Version 9 Next »
Model: gaugeColor.zip
How to Make Your Own
Adding Ractive
- Drag out Ractive from components on the left side menu
- Under Properties, click ractive editor, then open editor
- Copy and paste the desired gauge code for Ractive into the template
Adding a Tag
- 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
Making a 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
Adding the Data
- Drag and drop the point onto the component
Gauges
Model: gauge1.zip
Ractive
Expand source
<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>
Program
Expand source
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);
Model: gauge2.zip
Ractive
Expand source
<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">
<path style="fill:#D4EEF9;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,42.5c-16.2,0-31.8,2.6-46.4,7.3l46.4,142.7V42.5z"/>
<path style="fill:#F3D4D5;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M232.3,49.8c-14.6-4.7-30.2-7.3-46.4-7.3v150L232.3,49.8z"/>
<path style="fill:#A9DDF3;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M139.6,49.8c-15.1,4.9-29.2,12.2-41.8,21.3l88.2,121.4L139.6,49.8z"/>
<path style="fill:#7FCDEE;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M97.7,71.1C85,80.4,73.8,91.6,64.6,104.3l121.4,88.2L97.7,71.1z"/>
<path style="fill:#54BCE8;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M64.6,104.3c-9.2,12.6-16.4,26.7-21.3,41.8l142.7,46.4L64.6,104.3z"/>
<path style="fill:#C1272D;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M335.9,192.5c0-16.2-2.6-31.8-7.3-46.4l-142.7,46.4H335.9z"/>
<path style="fill:#DA7D81;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M307.3,104.3c-9.3-12.7-20.5-23.9-33.2-33.2l-88.2,121.4L307.3,104.3z"/>
<path style="fill:#CD5257;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M328.6,146.1c-4.9-15.1-12.2-29.2-21.3-41.8l-121.4,88.2L328.6,146.1z"/>
<path style="fill:#E6A9AB;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M274.1,71.1c-12.6-9.2-26.7-16.4-41.8-21.3l-46.4,142.7L274.1,71.1z"/>
<path style="fill:#29ABE2;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M43.2,146.1c-4.7,14.6-7.3,30.2-7.3,46.4h150L43.2,146.1z"/>
<path style="fill:#E6E6E6;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,62.5c-71.8,0-130,58.2-130,130h260C315.9,120.7,257.7,62.5,185.9,62.5z"/>
<text transform="matrix(0 -1 1 0 30 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(0 1 -1 0 342 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 335 145)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 0.809 -0.809 0.5878 313 100)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 278 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.9511 0.309 -0.309 0.9511 234 46)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 186 38)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(((maxInputValue-minInputValue)/2)+2).toFixed(0)}}</text>
<text transform="matrix(0.9511 -0.309 0.309 0.9511 138 45.2013)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 95 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 -0.809 0.809 0.5878 59 102)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 37 146)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -81.6641 187.8453)" style="fill:#808080;" cx="185.9" cy="192.5" rx="15" ry="15"/>
<g>
<path style="fill:#C1272D;" d="M182.4,196L81.3,87.8L189.5,189c2,1.9,2.1,5.1,0.2,7.1c-1.9,2-5.1,2.1-7.1,0.2
C182.5,196.2,182.5,196.1,182.4,196z" transform="rotate({{rotateValue}} 185.9,192.5)"/>
</g>
<g>
<text transform="matrix(1 0 0 1 185.9 145)" style="font-family:'SourceSansPro-Bold'; font-size:60px;" text-anchor="middle">{{prettyValue}}</text>
</g>
</svg>
Program
Expand source
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);
Model: gauge3.zip
Ractive
Expand source
<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">
<path style="fill:#E6E6E6;" d="M46.5,184c-5.8,0-10.4-4.9-10-10.7C42,95.4,106.9,34,186.2,34s144.1,61.4,149.6,139.3c0.4,5.8-4.2,10.7-10,10.7
H46.5z"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.5798 185.5332)" style="fill:#808080;" cx="186.2" cy="184" rx="15" ry="15"/>
<line style="fill:none;stroke:#756988;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="186.2" y1="34" x2="186.2" y2="58"/>
<text transform="matrix(1 0 0 1 186.4203 72.1063)" style="fill:#756988; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#627A9E;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="139.8" y1="41.3" x2="147.2" y2="64.2"/>
<text transform="matrix(0.9511 -0.309 0.309 0.9511 151.6 77.3606)" style="fill:#627A9E; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#4F8AB5;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="98" y1="62.6" x2="112.1" y2="82.1"/>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 121 93.837)" style="fill:#4F8AB5; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#3C9BCB;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="64.8" y1="95.8" x2="84.2" y2="109.9"/>
<text transform="matrix(0.5878 -0.809 0.809 0.5878 96 119)" style="fill:#3C9BCB; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#29ABE2;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="43.5" y1="137.6" x2="66.3" y2="145.1"/>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 79 149)" style="fill:#29ABE2; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#C1272D;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="328.8" y1="137.6" x2="306" y2="145.1"/>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 292 150)" style="fill:#C1272D; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#AE3844;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="307.5" y1="95.8" x2="288.1" y2="109.9"/>
<text transform="matrix(0.5878 0.809 -0.809 0.5878 276.332 119)" style="fill:#AE3844; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#9B485A;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="274.3" y1="62.6" x2="260.2" y2="82.1"/>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 252 94)" style="fill:#9B485A; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#885971;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="232.5" y1="41.3" x2="225.1" y2="64.2"/>
<text transform="matrix(0.9511 0.309 -0.309 0.9511 221 77)" style="fill:#885971; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<g>
<path style="fill:#C1272D;style" d="M182.6,187.5L81.5,79.3l108.2,101.1c2,1.9,2.1,5.1,0.2,7.1c-1.9,2-5.1,2.1-7.1,0.2
C182.8,187.7,182.7,187.6,182.6,187.5z" transform="rotate({{rotateValue}} 186.2,184)"/>
</g>
</svg>
Program
Expand source
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);
Model: gauge4.zip
Ractive
Expand source
<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
Expand source
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);
Model: gauge5.zip
Ractive
Expand source
<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="-10 0 380 152.9" style="enable-background:new 0 0 330 152.9;" xml:space="preserve">
<title>svg_bar_gauge</title>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 {{rotateValue1}} 114.4473)" style="fill:{{myAccentColor}};" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:{{myAccentColor}};" transform='translate({{rotateValue2}} 0)' points="113,64.9 121,84.9 105,84.9"/>
<text transform="matrix(1 0 0 1 {{rotateValue3}} 125)" style="fill:#fff; font-family:'SourceSansPro-Bold'; font-size:20px;" text-anchor="middle">{{prettyValue}}</text>
<line style="fill:none;stroke:#E6E6E6;stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="315" y2="44.9"/>
<line style="fill:none;stroke:{{myAccentColor}};stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="{{rotateValue4}}" y2="44.9"/>
<line style="opacity:0.5;fill:none;stroke:{{myAccentColor}};stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;enable-background:new;" x1="164.6" y1="64.9" x2="164.6" y2="24.9"/>
<text transform="matrix(1 0 0 1 155.98 14.94)" style="fill:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{((maxInputValue+minInputValue)/2).toFixed(0)}}</text>
</svg>
Program
Expand source
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.minOutputValue1 = myRactive.minOutputVal || -135;
myRactive.maxOutputValue1 = myRactive.maxOutputVal || 165;
myRactive.minOutputValue2 = myRactive.minOutputVal || -85;
myRactive.maxOutputValue2 = myRactive.maxOutputVal || 215;
myRactive.minOutputValue3 = myRactive.minOutputVal || 28;
myRactive.maxOutputValue3 = myRactive.maxOutputVal || 328;
myRactive.minOutputValue4 = myRactive.minOutputVal || 15;
myRactive.maxOutputValue4 = myRactive.maxOutputVal || 315;
myRactive.myAccentColor = this.accentColor || "#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);
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);
Model: gauge6.zip
Ractive
Expand source
<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:#CCCCCC;" cx="166.5" cy="165" r="150"/>
<circle style="fill:{{accentColor}};" cx="166.5" cy="35" r="10" transform="rotate({{rotateValue}} 166.5, 165)"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="166.5" y1="20" x2="166.5" y2="310"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="20.6" x2="179.2" y2="309.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="22.3" x2="191.7" y2="307.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="25" x2="204.1" y2="305.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="28.8" x2="216.1" y2="301.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="33.6" x2="227.8" y2="296.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="39.5" x2="239" y2="290.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="46.3" x2="249.7" y2="283.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="54" x2="259.8" y2="276.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="62.5" x2="269.1" y2="267.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="71.8" x2="277.6" y2="258.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="81.9" x2="285.3" y2="248.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="92.5" x2="292.1" y2="237.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="103.8" x2="298" y2="226.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="115.5" x2="302.8" y2="214.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="127.5" x2="306.6" y2="202.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="139.9" x2="309.3" y2="190.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="152.4" x2="311" y2="177.7"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="21.5" y1="165" x2="311.5" y2="165"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="177.7" x2="311" y2="152.4"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="190.2" x2="309.3" y2="139.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="202.6" x2="306.6" y2="127.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="214.6" x2="302.8" y2="115.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="226.3" x2="298" y2="103.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="237.5" x2="292.1" y2="92.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="248.2" x2="285.3" y2="81.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="258.3" x2="277.6" y2="71.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="267.6" x2="269.1" y2="62.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="276.1" x2="259.8" y2="54"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="283.8" x2="249.7" y2="46.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="290.6" x2="239" y2="39.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="296.5" x2="227.8" y2="33.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="301.3" x2="216.1" y2="28.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="305.1" x2="204.1" y2="25"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="307.8" x2="191.7" y2="22.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="309.5" x2="179.2" y2="20.6"/>
<circle style="opacity:0.1;enable-background:new;" cx="166.5" cy="169" r="120"/>
<circle style="fill:#E6E6E6;" cx="166.5" cy="165" r="120"/>
<path style="fill:#E6E6E6;" d="M166.5,15c-82.8,0-150,67.2-150,150s67.2,150,150,150s150-67.2,150-150S249.4,15,166.5,15z M166.5,305
c-77.3,0-140-62.7-140-140s62.7-140,140-140s140,62.7,140,140S243.9,305,166.5,305z"/>
<text transform="matrix(1 0 0 1 168 130.1867)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 168 248.4367)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myUnits}}</text>
<g>
<g>
<text transform="matrix(1 0 0 1 168 179.5252)" style="fill:#fff; font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 168 177.9784)" style="font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
</g>
</g>
</svg>
Program
Expand source
var myRactive = this;
myRactive.prettyValue = GetPrettyValue(point);
myRactive.myValue = point.curVal;
myRactive.myUnits = point.dataPoint.unit;
myRactive.myNavName = point.navName;
myRactive.minInputValue = this.minVal || point.minVal || 0;
myRactive.maxInputValue = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue = myRactive.minOutputVal || 0;
myRactive.maxOutputValue = myRactive.maxOutputVal || 360;
myRactive.accentColor = "#29ABE2";
var myRotateValue = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
myRactive.ractive.animate('rotateValue',myRotateValue);
- No labels