The idea was to create a simple analogue percentage gauge control that could be used as a performance indicator, perhaps using traffic lights colour-coding. The control makes this possible by allowing the gauge background to comprise up to three different segment colours, each covering a user-specified range of values.
Parameters are:- 1) Percentage value, 2) First segment range, 3) Second segment range, 4) First segment colour, 5) Second segment colour, 6) Third segment colour.
If the colour parameters aren't passed then the defaults specified in the XAML code are used. Colouring of the gauge background is animated as is the pointer, which sweeps from zero to the specified percentage.
As it stands the percentage gauge is of limited use but without too much work could be extended to display values other than percentage, have a customisable size, show real-time data from an external source, etc.
Used as a simple percentage indicator
Used as visual performance indicator
Used as a simple percentage indicator
Used as visual performance indicator
function createGauge(domref,params) {
Silverlight.createObjectEx({
source: 'gauge.xaml',
parentElement: document.getElementById(domref),
id: domref,
properties: {
width: '150',
height: '150',
inplaceInstallPrompt: false,
background: '#FFFFFF',
framerate: '24',
version: '1.0',
enableHtmlAccess: 'true'
},
events: {
onError: null,
onLoad: slonload },
initParams: params
});
}
function slonload(plugin,userContext,sender) {
// Retrieve the InitParams value and split comma-delimited string.
// This replaces previous plugin.id method.
var params = sender.getHost().initParams.split(",");
// Set pointer include within content
if (params[0].length > 0) sender.findName("ToAngle").To=30+300*(params[0]/100);
// Manually set and center text
sender.findName("ValText").Text=params[0]+"%";
sender.findName("ValText").SetValue("Canvas.Left",75-(sender.findName("ValText").ActualWidth/2));
// Set segment colours if specified
if (params[3].length > 0) sender.findName("Seg1Col").Color=params[3];
if (params[4].length > 0) sender.findName("Seg2Col").Color=params[4];
if (params[5].length > 0) sender.findName("Seg3Col").Color=params[5];
// Set start and end points of first segment
if (params[1].length==0) {
segper=100;
} else {
segper=params[1];
}
var rad=58;
var degtorad=Math.PI/180;
var ang1=30;
varx=75 - rad * Math.sin(ang1 * degtorad);
vary=75 + rad * Math.cos(ang1 * degtorad);
sender.findName("Seg1Start").Point=varx+","+vary;
var ang2=30+(300*(segper/100));
varx=75 - rad * Math.sin(ang2 * degtorad);
vary=75 + rad * Math.cos(ang2 * degtorad);
sender.findName("Seg1Finish").Point=varx+","+vary;
if (ang2-ang1>180) sender.findName("Seg1Finish").IsLargeArc="True";
ang1=ang2;
// Set start and end points of second segment
if (params[2].length==0) {
segper=100;
} else {
segper=params[2];
}
sender.findName("Seg2Start").Point=varx+","+vary;
ang2=30+(300*(segper/100));
varx=75 - rad * Math.sin(ang2 * degtorad);
vary=75 + rad * Math.cos(ang2 * degtorad);
sender.findName("Seg2Finish").Point=varx+","+vary;
if (ang2-ang1>180) sender.findName("Seg2Finish").IsLargeArc="True";
ang1=ang2;
// Set start and end points of third segment
sender.findName("Seg3Start").Point=varx+","+vary;
ang2=330;
varx=75 - rad * Math.sin(ang2 * degtorad);
vary=75 + rad * Math.cos(ang2 * degtorad);
sender.findName("Seg3Finish").Point=varx+","+vary;
if (ang2-ang1>180) sender.findName("Seg3Finish").IsLargeArc="True";
}