The VisualScript Cookbook

17/20 Page

Creating a Gauge with VisualScript

You can fill any shape with a Gauge by calling myShape.AddGauge(GaugeType). A gauge is a control that shows a value visually between a maximum and minimum value.

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
var myGauge=rootShape.AddGauge(VS.Gauge_Types.RadialDetail);
}

Basic gauge

By default gauges have a range from 0 to 100 and a value of 50. The gauge will completely fill the shape. The shape will be resized to fit the minimum size of a gauge (2 x 2 inches) in this case. If the shape is larger than this, the gauge will be scaled up. The containing shape is scaled to the proportions of the gauge. Shapes showing a gauge cannot also have a table, timeline, or Gantt chart.

Setting the Values

The VS.Gauge object has a method to set properties for the gauge. The properties for each gauge type are documented in the VisualScript SDK.

Setting the minimum, maximum and value is done as follows:

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
var myGauge=rootShape.AddGauge(VS.Gauge_Types.RadialDetail);
myGauge.SetProperties([{Name:VS.RadialGauge_Properties.Val,Value:25},{Name:VS.RadialGauge_Properties.Min,Value:20},{Name:VS.RadialGauge_Properties.Max,Value:80}]);
}

Set values for a gauge

Changing the Appearance of the Gauge

The fill color, line properties and textcolor of the shape are passed to the gauge:

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
rootShape.SetFillColor("#FFFF00").SetLineColor("#0000FF").SetTextColor("#FF0000").SetLineThickness(4);
var myGauge=rootShape.AddGauge(VS.Gauge_Types.RadialDetail);
myGauge.SetProperties([{Name:VS.RadialGauge_Properties.Val,Value:25},{Name:VS.RadialGauge_Properties.Min,Value:20},{Name:VS.RadialGauge_Properties.Max,Value:80}]);
}

Change style of a gauge

There are also properties for gauges that affect appearance:

VS.RadialGauge_Properties =
{
Min: "min",
Max:"max",
Val: "val",
MinAngle: "minAngle",
MaxAngle: "maxAngle",
MinTickMax: "minTickMax",
MajTickMax: "majTickMax",
MinTickLen: "minTickLen",
MajTickLen: "majTickLen",
MinTickColor: "minTickColor",
MajTickColor: "majTickColor",
UnitLabel: "unitLabel",
NoUnits: "noUnits",
CenterColor: "centerColor",
CenterRadius: "centerRadius",
IndicatorColor: "indicatorColor",
PartialArcType: "partialArcType",
HollowCenter: "hollowCenter",
RangeIndicators: "rangeIndicators",
FilledRange: "filledRange",
TickLabelFreq: "tickLabelFreq",
LabelFontSize: "labelFontSize",
UnitFontSize: "unitFontSize",
Radius: "radius",
}

You can use this to add a unit label for example. You can also add a text label to a gauge shape. The text is placed under the gauge.

{
var myDocument=new VS.Document();
var rootShape=myDocument.GetTheShape();
rootShape.SetLabel("Temperature");
rootShape.SetFillColor("#FFFF00").SetLineColor("#0000FF").SetTextColor("#FF0000").SetLineThickness(4);
var myGauge=rootShape.AddGauge(VS.Gauge_Types.RadialDetail);
myGauge.SetProperties([{Name:VS.RadialGauge_Properties.Val,Value:25},{Name:VS.RadialGauge_Properties.Min,Value:20},{Name:VS.RadialGauge_Properties.Max,Value:80},{Name:VS.RadialGauge_Properties.UnitLabel,Value:"Degrees"}]);
}

Add a label

Other Types of Gauge

There are many variations of a radial gauge that can be built by just setting the GaugeType when using VS.Shape.AddGauge(). These include linear as well as radial gauges.

Full details can be found in the SDK.

Types of gauges
17/20 Page