Chala Gauge 1.0

Archivos de Configuración Gauge.js
El archivo Gauge.js contiene los parámetros de configuración de ChalaGauge, revisemos esta sección:
/No cambies estos valores! */
var CPOSICIONCERO = 146.081;
var CINCREMENTODIFERENCIA = 24.4503;
var POSICIONANTERIOR = 0;
var DIMENSIONORIGINAL = 218;
var CPORCENTAJEINICIAL = 0;
//Seleccion del SKIN
var MODELOXAML = "GaugeV3c.xaml";
var SKIN = "NO"; //"NO" para no seleccionar Skin - NOTA: LA Versiones GaugetV2x no necesitan Skins, es decir, se ven más cool sin Skin (por ahora)
var FUNCION = "generaAnimacion(aleatorio())";
var INTERVALO = 2000;
//Es cuadrado (en pixeles), tomando en cuenta que el valor original es 218(en el XAML) , jugamos con las transformaciones
var DIMENSION = 200;
var DIVGAUGE = "DivGauge";
//Corresponde al ID del Gauget
var IDGAUGE = "MiGauge";

Podemos ver que se puede setear de manera muy fácil el modelo XAML y su SKin, ademas es importante indicar que FUNCION e INTERVALO indican a que funciona vamos a llamar y cada cuanto tiempo (en milisegundos) se va a llamar a esa función. En un próximo articulo voy a escribir sobre como conectar el control con un webservice. (revisa este articulo, te va a dar las pautas para poder hacerlo). La dimensión del gadget se puede establecer en pixeles, la función redimencionaGauge se encarga de hacer la transformación de escala a pixeles.
El ejemplo que puedes descargar tiene una función que se llama aleatorio que genera los porcentajes , la cual se pasa como argumento de la función generaAnimación, que es la responsable de realizar el movimiento del puntero.
Archivos de Temas

ChalaGauget tiene la característica (la que no esta al 100% en el beta1) de poder establecer los skins del control en el lado del cliente, estos skins son en general bastante livianos, (aproximadamente 5kb), y son bastante fáciles de construir. En el próximo artículo veremos con construir uno,si no es que ya lo viste y te diste cuenta :).
Implementando en un Sitio Web ChalaGauge

Los pasos a seguir para implementar el control en su sitio web son:
1) Descarga ChalaGauge beta1
2) Hacer referencia a los archivos JS
<script src="scripts/Silverlight.js" type="text/javascript"> </script>
<script src="scripts/Gauge.xaml.js" type="text/javascript"> </script>
<script src="scripts/Gauge.js" type="text/javascript"> </script>
3) En donde quieres que se posicione el control escribir:
<div id="DivGauge">
<script type="text/javascript">
dibujarGauge();
</script>
</div>

Sigue...