Vertical Gauge SVG

Owned by Sarah Padilla (Unlicensed)
Last updated: Mar 21, 2018
5 min read

   

Description: This svg is uses Ractive, and works by dragging and dropping a virtual point on top of the component.  The gauge will change colors depending if it is above, below, or within the "Ok Value".  The "Ok Value", colors, and name can all be changed from the default, using tags.

Download: verticalGaugeSVG.zip

Adding a Virtual Point

  • Go to the Virtual Points menu on the left hand side
  • Drag and drop a virtual point onto the gauge
  • To change the point, drag and drop a new virtual point onto the component

Tags

  

okValLow = the smaller number for the "Ok Value" range (default 40)

okValHigh = the larger number for the "Ok Value" range (default 60)

maxValColor = hex color for gauge when value is above the "Ok Value" range (default #c34c46)

minValColor = hex color for gauge when value is below the "Ok Value" range (default #5d8eca)

okValColor = hex color for gauge when value is in the "Ok Value" range (default #6cc487)

minVal = lowest value displayed on the gauge (default is the minVal on the virtual point if one exists, otherwise the default is 0)

maxVal = highest value displayed on the gauge (default is the maxVal on the virtual point if one exists, otherwise the default is 100) 

shortName = name appearing under the vaule under the gauge (default is the navName of the virtual point)


How to Create Your Own

Start by dragging out a Ractive component from the components menu on the left side  Open the Ractive Editor from the properties menu on the left side. Copy and paste the code below into the Template section of the Ractive Editor


  • Start by dragging out a Ractive component from the components menu on the left side
  • Add a tag to the component called verticalGauge
  • Open the Ractive Editor from the properties menu on the left side
  • Copy and paste the code below into the Template section of the Ractive Editor
Template Code 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 357 441" style="enable-background:new 0 0 357 441;" xml:space="preserve">
<path style="fill:#E6E6E6;" d="M195,341.8h-56c-2.2,0-4-1.8-4-4v-302c0-2.2,1.8-4,4-4h56c2.2,0,4,1.8,4,4v302C199,340,197.2,341.8,195,341.8z"/>
<rect x="139" y="328" style="fill:{{#if myValue<okValueLow }}{{minValueColor}}{{elseif okValueHigh<myValue}}{{maxValueColor}}{{else}}{{okValueColor}}{{/if}};" width="56" height="{{gaugeValue}}" transform="rotate(180 167,332.5)"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="336.8" x2="178" y2="336.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="306.8" x2="178" y2="306.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="276.8" x2="178" y2="276.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="246.8" x2="178" y2="246.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="216.8" x2="178" y2="216.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="186.8" x2="178" y2="186.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="156.8" x2="178" y2="156.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="126.8" x2="178" y2="126.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="96.8" x2="178" y2="96.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="66.8" x2="178" y2="66.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="197" y1="36.8" x2="178" y2="36.8"/>
<text transform="matrix(1 0 0 1 206.5161 343.3412)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{minInputValue.toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 206.5161 283.3412)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{((((maxInputValue-minInputValue)/10)*2)+minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 206.5161 223.3412)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{((((maxInputValue-minInputValue)/10)*4)+minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 206.5161 163.341)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{((((maxInputValue-minInputValue)/10)*6)+minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 206.5161 103.3411)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{((((maxInputValue-minInputValue)/10)*8)+minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 206.5161 43.3412)" style="font-family:'SourceSansPro-Light'; font-size:24px;">{{maxInputValue.toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 167 387.4922)" style="fill:{{#if myValue<okValueLow }}{{minValueColor}}{{elseif okValueHigh<myValue}}{{maxValueColor}}{{else}}{{okValueColor}}{{/if}}; font-family:'SourceSansPro-Bold'; font-size:36px;" text-anchor="middle">{{prettyValue}}</text>
<text transform="matrix(1 0 0 1 167 414.8256)" style="fill:{{#if myValue<okValueLow }}{{minValueColor}}{{elseif okValueHigh<myValue}}{{maxValueColor}}{{else}}{{okValueColor}}{{/if}}; font-family:'SourceSansPro-Bold'; font-size:25px;" text-anchor="middle">{{myNavName}}</text>
</svg>

    

  • Next we are going to add a program
  • Go to Programs in the left menu and click the + icon to create a new program
  • Name your program, and set the Program Target Filter to verticalGauge
  • Click the three dots in the top right corner, and select variables
  • Click the + icon next to Program Vars
  • Click the gear that appears as you hover over "newVariable"
  • Name the newVariable point and in the box below type 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
Program Code 
this.prettyValue        = GetPrettyValue(point);
this.myValue            = point.curVal;
this.myNavName          = this.shortName || point.navName;
this.minInputValue      = this.minVal || point.minVal || 0;
this.maxInputValue      = this.maxVal || point.maxVal || 100;
this.minOutputValue     = this.minOutputVal ||  0;
this.maxOutputValue     = this.maxOutputVal ||  300;
this.maxValueColor      = this.maxValColor || "#c34c46";
this.minValueColor      = this.minValColor || "#5d8eca";
this.okValueColor       = this.okValColor || "#6cc487";
this.okValueLow         = this.okValLow || 40;
this.okValueHigh        = this.okValHigh || 60;
 
var myGaugeValue     = fin.Utils.ResetBAS(point.curVal, this.minInputValue , this.maxInputValue , this.minOutputValue, this.maxOutputValue);
 
this.ractive.animate('gaugeValue',myGaugeValue);




Vertical Gauge with Bubble

 

<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 320 600" style="enable-background=:new 0 0 320 600;" xml:space="preserve">
<ellipse fill="{{myAccentColor}}" cx="212.51" cy="{{rotateValue1}}" rx="90.815" ry="90.815"/>
<polygon fill="{{myAccentColor}}" points="77.126,{{rotateValue2}} 129.021,{{rotateValue3}} 129.021,{{rotateValue4}} "/>
<line fill="none" stroke="#E6E6E6" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="48.54" y1="500.887" x2="48.54" y2="127.535"/>
<line fill="none" stroke="{{myAccentColor}}" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="48.54" y1="500.887" x2="48.54" y2="{{rotateValue5}}"/>
  <text x="214" y="{{rotateValue6}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="25" text-anchor="middle">{{myNavName}}</text>
<text x="49" y="96" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{maxInputValue}}</text>
  <text x="49" y="555.5" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{minInputValue}}</text>
<text x="214" y="{{rotateValue7}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="50" text-anchor="middle">{{prettyValue}}</text>
</svg>


var myRactive = this;
   
myRactive.prettyValue         = GetPrettyValue(point);
myRactive.myValue             = point.curVal;
myRactive.myNavName           = this.shortName || point.navName;
myRactive.minInputValue       = this.minVal || point.minVal || 0;
myRactive.maxInputValue       = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1     = myRactive.minOutputVal ||  474.036;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  100.686;

myRactive.minOutputValue2     = myRactive.minOutputVal ||  474.372;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  101.022;

myRactive.minOutputValue3     = myRactive.minOutputVal ||  495.13;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  121.78;

myRactive.minOutputValue4     = myRactive.minOutputVal ||  453.614;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  80.264;

myRactive.minOutputValue5     = myRactive.minOutputVal ||  500.887;
myRactive.maxOutputValue5     = myRactive.maxOutputVal ||  127.535;

myRactive.minOutputValue6     = myRactive.minOutputVal ||  500.35;
myRactive.maxOutputValue6     = myRactive.maxOutputVal ||  127;

myRactive.minOutputValue7     = myRactive.minOutputVal ||  473.35;
myRactive.maxOutputValue7     = myRactive.maxOutputVal ||  100;
myRactive.myAccentColor       = this.color || "#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);
var myRotateValue5     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue5, myRactive.maxOutputValue5);
var myRotateValue6     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue6, myRactive.maxOutputValue6);
var myRotateValue7     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue7, myRactive.maxOutputValue7);
  
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);
myRactive.ractive.animate('rotateValue5',myRotateValue5);
myRactive.ractive.animate('rotateValue6',myRotateValue6);
myRactive.ractive.animate('rotateValue7',myRotateValue7);