Chalalo Land

[Gauge] Mi Control Gauge Silverlight, versión beta1 Liberada, para siempre gratis!

No se que nombre ponerle a este artículo, quizás en un poco ambicioso, pero quería compartir versión beta 1 de mi control customizable ChalaGauget (b1) :P. La idea partió de la necesidad de  contar con un control gauge gratis, que se pudiera utilizar desde cualquier lenguaje del lado del servidor, php, asp.net, etc. Para lo que recurrí a Silverlight 1.0 (si, si, sé que la moda es SL3, pero necesitaba solo javascript)  para crearlo, ahora pongo las especificaciones técnicas.

Introducción ChalaGauge beta 1 

ChalaGauge es un control de tipo “tacómetro” pobre pero honrado, construido con Silverlight y javascript , dentro de sus características principales están:

1. Liviano, desarrollado con Silverlight 1.0 y javascript
2. Compatible con IE7, IE8, Firefox, Chrome, Safari y Opera.
3. Incluye distintos diseños de gauges y posibilidad de crear y aplicar Skins de manera sencilla a cada uno de ellos.
4. Configurable al 100%(casi en la versión beta1), posibilidad de configurar color y visibilidad de todos los componentes del gauget:
   1. Tamaño
   2. Números
   3. Color
   4. Cuadro indicador de Porcentaje
   5. Texto indicador de porcentaje
   6. Fondo del control
   7. Ancho de Líneas,
   8. Soporte del indicador
   9. Función que entregará el valor (en porcentaje) que le indicará al gauge el valor a mostrar
   10. Periodicidad en que se llamará a esa función.

Estructura de Carpetas de  ChalaGauge Beta 1

Para entender como funciona el control, veamos como está construido el control revisando la estructura de carpetas:

En donde la Carpeta scripts contiene los archivos Gauge.js, Gauge.xaml.js y Silverlight.js, los dos primeros contienen los script para la configuración y el funcionamiento del control. La carpeta temas contiene los archivos JS que setearan las propiedades del XAML generando temas para las distintas versiones da Gauges. (Próximamente estaré haciendo un pequeño tutorial de como hacer un tema para ChalaGauge b1) En la carpeta raíz nos encontramos con las distintas versiones de ChalaGauges, desde la versión 1,  que es básica hasta las versiones más avanzadas del beta 1.

Veamos ahora, antes de entrar en detalles de código, las distintas versiones y skins disponibles, obviamente puedes hacer más tu mismo, y es lo que te quería pedir, necesito apoyo en XAML!, soy mal diseñador.

UI de ChalaGauge

Ha tenido una evolución desde las primeras versiones (intentos) de mi parte para hacer algo más “profesional”. Los temas están diseñados para funcionar con cualquier versión del Gauge

Versión GaugeV1 (Archivo GaugeV1.xaml)

Sin Skin ( Marcado la Opción “NO” en la sección SKIN ,en el archivo de configuración.)

Sin Skin	Skin “Militar”	Skin “Wolverine” :P

Versión GaugeV2 (Archivo GaugeV2.xaml)

Sin Skin ( Marcado la Opción “NO” en la sección SKIN ,en el archivo de configuración.)

Sin Skin	Skin “Militar”	Skin “Wolverine” (tengo que arreglar el tema de los números)

Versión GaugeV3 (cool!)

Nota: La versión 3 del Chalagauge no tiene implementado totalmente el tema de los skins, aun así igual funcionan, pero están diseñados para no utilizar skins (Estos me quedaron más lindos no?)

GaugeV3a.xaml	GaugeV3b.xaml	GaugeV3c.xaml

Nota: Prontamente estaré liberando más skins, pero si quieres cooperar, bienvenido seas, al final voy a escribir sobre la forma de cooperar :),desde ya, gracias!.

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 C_POSICION_CERO = 146.081;
var C_INCREMENTO_DIFERENCIA = 24.4503;
var POSICIONANTERIOR = 0;
var DIMENSIONORIGINAL = 218;
var C_PORCENTAJE_INICIAL = 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 :).

Ahora bien la parte importante, como ayudar :)

Este control es sin fines de lucro, ni si quiera el clásico “coopérame  con paypal”, hay varias cosas en las que me puedes ayudar:

Skins y versiones.
Si te animas, puedes crear skins y me los envías, obviamente yo lo publico con tu nombre, él crédito es totalmente del autor.

Sugerencias , correcciones
Si encuentras que hay algo que mejorar (es decir todo), me puedes enviar los comentarios posteándolos acá, voy a tratar de dar soporte a la mayor parte de las peticiones, pero si te animas, tu mismo haces la mejora y me la envías explicando como fue (ojala explicado por que soy bastante bruto :P ).

Promocionando y usándolo!
La idea que tengo para este control es que sea “comunitario” que crezca con aportes de la comunidad, algo bien parecido a lo de OS. Para eso, si puedes difundir que existe este control, a más personas le va a llegar la noticia y algunas se pueden animar a cooperar, también si lo usas y te da buen resultado, postea en el blog en donde esta siendo utilizado :), eso será mi verdadero pago, saber que lo que hice es de utilidad.

Eligiendo un nombre….

Esta bastante feo el nombre de mi control verdad? bueno, estoy pensando en alguno, pero si me ayudas, mucho mejor.

Descarga el Control
Ahora que leíste todo , descarga acá la versión beta 1 de ChalaGauge, la que incluye Skin, versiones del control y la función de ejemplo. 

Espero que te sirva, estoy entusiasmado por que creo que se puede lograr algo bastante bueno, y recuerda postear si lo bajaste, así más o menos tengo una idea de cuanta gente ha descargado el control (quizás lo descarguen a la papelera reciclaje, pero algo es algo!)

Saludos!!!!!!

Gonzalo