[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:

image

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.)

image

image

image

Sin Skin

Skin “Militar”

Skin “Wolverine” 😛

Versión GaugeV2 (Archivo GaugeV2.xaml)

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

image image image

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?)

image image image

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 :).

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>

4)  Y  Listo!
   

Video de ChalaGauge en Acción

Un video vale 25 imágenes por segundo y una imagen vale más que 1000 palabras, por que lo se hace conveniente mostrar un videíto de como funciona el control.

Imagen de ChalaGauge corriendo en distintos Browser, y en todos anda bien! (Opera, IE, Safari,Chrome,) en Firefox también funciona 🙂

image

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 😛 ).

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

33 comentarios en “[Gauge] Mi Control Gauge Silverlight, versión beta1 Liberada, para siempre gratis!”

  1. Gonzalo, muy buen aporte como siempre, además de dar la posibilidad de que la gente aporte, vamos a ver si alguien se anima, yo por ahora ando corto de tiempo, pero me los bajé y probé y al menos a mi me anduvieron de pelos.

    ChalaGauge es un nombre de control que tiene personalidad 😉 , un abrazo master!

  2. Raul,
    Tu le das la función que mide algún parametro relevante para tu sistema:
    var FUNCION = “generaAnimacion(aleatorio())”;
    var INTERVALO = 2000;

    Es como los controles de gráficos, tu vez que vas a graficar.

  3. Alex, el problema es mío, en el archivo Gauge.xaml.js hay una coma de más (fail!)
    Si quieres la sacas tu mismo, voy a publicar la modificación para compatibilidad.
    Ubica estas lineas:
    inicializa();
    redimencionaGauge(DIMENSION);
    var interval = setInterval(FUNCION, INTERVALO);
    }, <==SACA ESA COMA } y va a funcionar... sorry!

  4. Excelente set de ‘gauges’ medidores. Trate de usar el medidor lineal y por alguuna razon me dio mensaje de error. Tengo que cambiar algo en el codigo para usar el lines. Con los que son radiales no hay problema. Pero el lineal no aprece completo y me da mensaje de error.
    Saludos y gracias, Dario

  5. Hola Dario,
    El Guage lineal lo ocupas con el mismo codigo que se descarga, o estas ocupando el codigo el gauge circular?
    Saludos,
    G
    PD:Gracias por ocupar el control!, me ayudas si lo promocionas, jejeje

  6. Juanitosan,
    Por supuesto que no hay problema, ocupalos como quieras, si necesitas soporte, me avisas, son compatibles tambien con php.
    solo recordar a este humilde servidor (promocionando los controles y el blog) es mi paga 🙂
    Ocupalos no mas, si necesitas un nuevo diseño, me avisas y vemos como se hace.

  7. que tal gonzalo solo para preguntar,
    este control se puede utilizar para un control en
    visual basic 2008, estoy haciendo un control y ocupo unos gauge, para mi monitoreo
    te agradeceria si me pudieras ayudar
    gracias
    saludos

  8. ups, sirven solo para plataforma web, aunque quizas agregando un control browser, sin bordes, podrias incluirlo, habría que probar, si quieres puedo ayudar, no soy un experto en windows form, pero creo que podremos saber si sirve o no.

  9. Hola,

    Excelente trabajo!!!

    Te quería hacer una consulta estoy necesitando armar un pequeño panel con 3 medidores, uno mas grande y dos pequeños, ya los pude hacer andar a los 3 en la misma página cambiando el nombre de las variables, mi tema es que se me esta haciendo dificil utilizar el medidor en un tamaño mayor 218px que es el default. Podrías comentarme que parametros debo ajustar para ampliar el tamaño?

    Desde ya muchas Gracias Alejandro.

  10. Excelente trabajo Gonzalo. Unas cuestiones plis. Me gustaría saber si el efecto de animación se puede modificar, me gustaria que la aguja medidora empezara a correr rápido y a medida que se acerque al punto se vaya relentizando hasta pararse. Otra cuestión, donde puede decirle que cada 5 o 10 segundos se refresque con posiblemente otro valor sin tener que actualizar la página???

    Muchas gracias de antemano.
    Mi correo: marcos_xurri@hotmail.com

  11. Hola Marcos,
    Gracias por el comentario de Excelente trabajo, ejejejej.
    Sobre la animación se debería modificar la función de animación, con cierta aceleración.
    Sobre lo segundo, no entendí muy bien lo que se quiere hacer, te envio un correo para el contacto.
    Saludos,

  12. Buenos días,
    Primero agradecerte este estupendo trabajo, y segundo una preguntita, igual tonta, pero es que no me manejo aún bien con javascript y menos con xaml.
    Me gustaría usarlo con el modelo “GaugeHector.xaml” por ejemplo, ya que tiene implementado un umbral que va desde 40 a 100, pero necesito poder modificar los valores de este umbral y además hacerlo desde javaScript, no modificando el xaml.
    Muchas gracias.

  13. Hola Gonzalo, te refieres a la función generaAnimacion? Con esta función veo como cambiar el valor de la aguja del gauge. Pero no veo la forma de cambiar los valores de la zona que indica que esta en alerta , (la segunda línea que se pinta en amarillo/rojo).
    Y tampoco veo como cambiar la marcación del gráfico, que en vez de ir de 0 a 100, sea otro valor.
    Muchas gracias.

  14. exelente!
    estoy revizando tu aplicacion ahora mismo y esta en llamas

    te queria hacer una consulta, como se podria modificar para que este leyendo permanentemente un xml y/o una variable en php, es decir, que al modificar el xml y guardarlo cambie automaticamente la aguja del reloj

  15. Hola Pedro, podrías llamar a una pagina php mediante ajax con jquery, la página php deberia leer el xml y entregar una respuesta.
    Voy a crear un ejemplo de ello 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *