Projects

WebGL Demos
PHP Data Pivot
PHP Data Subtotals
HTML5 Graph
Java NW3D2
JS Code Formatter
HTML5 Clock
Silverlight Gauge
Java NW3D
Java Fireworks
Java Early 3D
Java Snow
Java Dogfight
Java Water Simulation
Java Bump Mapping
Java Elite Ships

Silverlight gauge control

Description

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.


Demonstration

Used as a simple percentage indicator


Used as visual performance indicator



HTML

Used as a simple percentage indicator


Used as visual performance indicator


Javascript

 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";

   }

XAML








    
        
            
            
        
    




    
        
            
            
        
    








  
    
      
	
          
          
          
          
        
      
    
  




  
    
      
      
    
  
  
    
      
        
          
            
            
            
          
        
      
    
  
 



  
    
      
      
    
  
  
    
      
        
          
            
            
            
          
        
      
    
  
 



  
    
      
      
    
  
  
    
      
        
          
            
            
            
          
        
      
    
  
 



  
    
  








  
    
  




100%