SVG Gauge
- Sarah Padilla (Unlicensed)
- Kimberly Cruz (Unlicensed)
- Ricky Villa
- Christopher Simonian
Gauge 1
Template
<div class="{{#if hideBackground}} {{else}}view-container{{/if}}">
<div class="pla">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 94.64 94.18">
<defs>
<linearGradient id="linear-gradient1" x1="51.97" y1="125.67" x2="122.67" y2="54.97" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="{{mainGaugeColor}}" />
<stop offset="1" stop-color="{{gradientGaugeColor}}" />
</linearGradient>
</defs>
<title>ttb_7</title>
<text transform="translate(82.71 36.34)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro">{{maxInputValue}}</text>
<text transform="translate(31.35 87.93)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro">{{minInputValue}}</text>
<path d="M88,125a1,1,0,0,0,0-1.39,23,23,0,0,1,32.5-32.5A1,1,0,0,0,122,91l17.68-17.68a1,1,0,0,0,0-1.43,50,50,0,0,0-70.7,70.7,1,1,0,0,0,1.43,0Z" transform="translate(-50 -53)" style="fill:url(#linear-gradient1)" />
<circle cx="105" cy="108" r="14" transform="translate(-95.61 52.88) rotate(-45)" style="fill:{{mainGaugeColor}}" />
<path d="M98.47,107.13,76.66,81A.94.94,0,0,1,78,79.66l26.14,21.81Z" transform-origin="103% 103%" transform="translate(-50 -53) rotate({{rotateValue}})" style="fill:{{mainGaugeColor}}" />
<text transform="translate(55.25 58.26)" style="text-anchor:middle;font-size:6px;fill:#000;font-family:SourceSansPro-Light, Source Sans Pro">{{prettyValue}}</text>
<circle cx="66.82" cy="146.18" r="1" transform="translate(-133.8 37.06) rotate(-45)" style="fill:{{mainGaugeColor}}" />
<circle cx="143.18" cy="69.82" r="1" transform="translate(-57.43 68.69) rotate(-45)" style="fill:{{mainGaugeColor}}" />
<circle cx="135" cy="63.1" r="1" transform="translate(-42.47 87.29) rotate(-56.25)" style="fill:{{mainGaugeColor}}" />
<circle cx="125.66" cy="58.11" r="1" transform="translate(-26.11 98.97) rotate(-67.5)" style="fill:{{mainGaugeColor}}" />
<circle cx="115.53" cy="55.04" r="1" transform="translate(-10.98 104.62) rotate(-78.75)" style="fill:{{mainGaugeColor}}" />
<circle cx="55" cy="1" r="1" style="fill:{{mainGaugeColor}}" />
<circle cx="94.47" cy="55.04" r="1" transform="translate(-58.92 -33.51) rotate(-11.25)" style="fill:{{mainGaugeColor}}" />
<circle cx="84.34" cy="58.11" r="1" transform="translate(-65.82 -16.3) rotate(-22.5)" style="fill:{{mainGaugeColor}}" />
<circle cx="75" cy="63.1" r="1" transform="translate(-72.42 -0.7) rotate(-33.75)" style="fill:{{mainGaugeColor}}" />
<circle cx="66.82" cy="69.82" r="1" transform="translate(-79.8 14.69) rotate(-45)" style="fill:{{mainGaugeColor}}" />
<circle cx="60.1" cy="78" r="1" transform="translate(-88.14 31.64) rotate(-56.25)" style="fill:{{mainGaugeColor}}" />
<circle cx="55.11" cy="87.34" r="1" transform="translate(-96.67 51.83) rotate(-67.5)" style="fill:{{mainGaugeColor}}" />
<circle cx="52.04" cy="97.47" r="1" transform="translate(-103.71 76.49) rotate(-78.75)" style="fill:{{mainGaugeColor}}" />
<circle cx="1" cy="55" r="1" style="fill:{{mainGaugeColor}}" />
<circle cx="52.04" cy="118.53" r="1" transform="translate(-72.13 -40.57) rotate(-11.25)" style="fill:{{mainGaugeColor}}" />
<circle cx="55.11" cy="128.66" r="1" transform="translate(-95.04 -22.12) rotate(-22.5)" style="fill:{{mainGaugeColor}}" />
<circle cx="60.1" cy="138" r="1" transform="translate(-116.54 3.65) rotate(-33.75)" style="fill:{{mainGaugeColor}}" />
</svg>
</div>
{{#if hideBackground}} {{else}}
<div class="s-bar pst psl">
<div class="{{myIcon}} fin horizontal middle fHt s-icon"> {{#if shortName}}{{shortName}}{{else}}{{myNavName}}{{/if}}</div>
</div>
{{/if}}
</div>
Model
{
data:{
myValue:55,
prettyValue:"55%",
rotateValue:-90,
minInputValue:0,
maxInputValue:100,
minOutputVal:-90,
maxOutputVal:90,
mainGaugeColor: "#1b75bc",
gradientGaugeColor: "#000"
},
}Style
.s-bar{
height: 40px;
border-top: solid #d2d2d2;
}
.s-icon{
font-size: 16px;
}Program
Gauge 2
Template
Model
Style
Program
Gauge 3
Template
Model
Style
Program
Gauge 4
Template
Model
Style
Program
Gauge 5
Template
Model
Style
Program
Gauge 6
Template
Model
Style
Program
How to Make Your Own
Instructions
Drag out Ractive from Components in the left side menu, and open editor from Properties. Copy and paste the code from Template, Model, and Style then Save.
Add a tag to your gauge. You can name it whatever you would like, as long as it matches the program target filter in the program editor. Under Programs on the left menu click the + to add a new Program
Name your program whatever you would like
Set the program target filter to be the same name as the tag on the gauge
Click on the three dots in the top right corner and select Variables
Click the + to add a new variable and call it point
Under point type id==$virtualPointRef
Turn on invokes the function and set it to tag change and type curVal
hit save for the variables then in the main part paste the program code
Save
Drag a virtual point on top of your gauge and your done!
Changing the Icon
By default the icon is sm-equip, but to change it, with your Ractive selected go under advanced from the Properties menu. Click the + to add a new property and call it iconClass. Set the value to the desired icon and it's set! To change it back to the default, simply remove the property and it will be set to the default icon. For a list of icons, open Graphics Builder and in the right menu select File Assets → List of Icons. (basically its going to ip:port/pod/finStackMobileExt/icons.html).
Changing the Name
By default the name shown is the navName. This can be changed however by adding a tag called shortName. With your Ractive component, go to advanced properties in the left menu. Click the + to add a tag and call it shortName. Change newValue, to what you wish it to display.
Changing the Color
Some of the gauges, the user is able to add a tag to change the colors. Below are examples of what tags are used for each gauge. The user can enter in a color name (red, orange, yellow, ect) or they can enter a hex color code (ex. #000 for black or #fff for white)
In gauge1 the user can change the mainColor and the gradientColor
In this example heres what we set
mainColor pink (the mainColor changes the big circle and pointer, the dots around the gauge, as well as is the start color for the gauge gradient)
gradientColor #f34699 (for this tag we set it to a hex code for the dark pink. This is the color the main color transitions into)
In gauge4 the user can change the backColor and the pointerColor
In this example heres what we set
backColor#a83128 (for this tag we set it to a hex code for the red. This is the main part of the gauge)
pointerColor #5d8eca (for this tag we set it to a hex code for the blue. This is the color for the pointer)
In gauge5 the user can change the dotColor and the backColor
In this example heres what we set
backColorwhite (This is the main part of the gauge)
dotColor #47a3da (for this tag we set it to a hex code for the blue. This is the color for the pointer and the dots)
In gauge6 the user can change the gradientColor1, gradientColor2 and the dotColor
In this example heres what we set
gradientColor1 purple (This is the color on the min side that gradientColor2 transitions into)
gradientColor2 green (This is the color gradientColor1 transitions into)
dotColor #e5b356 (for this tag we set it to a hex code. This is the color for the dots above the gauge)
Hiding the Background
To hide the background to just show the gauge, add a tag called hideBackground