SVG Gauge

Owned by Sarah Padilla (Unlicensed)
Last updated: Mar 28, 2022 by Kimberly Cruz (Unlicensed)
17 min read

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">&nbsp;{{#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