Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Tutorial - jGauge, Mi Control Gauge Circular con JQuery, como siempre, gratis :)

Hola que tal?, hace tiempo que quería hacerme un tiempo para poder crear los mismos controles Gauge para Silverlight pero con jQuery. El control original lo puedes encontrar en el siguiente enlace
http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

Los Skin que utilice (entre otros, hay unos muy buenos, cooperación de Héctor Pérez) son los siguientes:

image

Entonces, varias personas me comentaron que utilizaron el Control , todo bien, pero otros me indicaron que les gustaba, pero no eran fan de ningún plugin para la web como Flash o Silverlight, entonces pensé en crear un control fácil de modificar y construido 100% en Javascript.

Voy a explicar como lo construí por que si quieres modificarlo, ya sea extendiendo o quitando funcionalidad, cambiar las imágenes , tamaños, etc, se te sea fácil.

Las Librerías a Utilizar

Por su puesto que la librería que permite hacer todo esto es jQuery, luego me encontré con la excelente librería jQueryRotate, que nos va a permitir rotar una imagen con animación. Entonces, incluimos las librerías:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jQueryRotate.js"></script>

Armar el Layout del Control (Importante Leerlo)

Esta vez, quiero explicarte como está construido, para que se entienda mucho mejor el funcionamiento. En mi caso el layout tiene relación con porcentajes, pero puedes cambiar esto modificando la imagen y entendiendo como funciona. La imagen que estoy utilizando tiene 130px x 130px.

Primero que nada,  el punto 50 es será nuestro Angulo de rotación 0 ya que el puntero que utilizamos por defecto una posición vertical. A diferencia del control anterior que había creado ( el construido con Silverlight) no podemos indicar que el punto de rotación a el extremo inferior, si no que rota en la mitad, por eso que la imagen del puntero solo es la mitad  del tamaño del total, se hace rotar en la mitad y se produce el mismo efecto.

image

Ahora el punto 0 es nuestro grado de rotación –120 y el punto 100 es el grado de rotación 120. Para calcular los puntos intermedios en una ecuación, primero tuve que ver de cuanto era la diferencia entre puntos, esta calculando esta medio 2.4 grados.

image

Para cada uno de los Skin que tengo, la distancia es la misma, parto con 3 layout básicos y luego voy a ir incorporando más.

image

Layout HTML del Control

El diseño es bastante simple, pero nos va a permitir ver el funcionamiento del control, entre las características de jGauge:

  1. Inicio  y pausa del funcionamiento
  2. Personalizar  el tiempo de refresco
  3. Personalizar el Skin del control (sin refresco de página)

image

El código HTML del Layout es el siguiente: 

<input type="button"  value="Iniciar" id="Iniciar" style="width: 57px"/>

<input type="button"  value="Parar" id="Parar" style="width: 68px"/>

<div id="msg" style="height: 21px"></div>

<div id="control">

       <div id="fondo">

             <div id="puntero">

                 <img id="image" src="dial2.png"/>

             </div>

       </div>

</div>

<input type="text" id="texto" />

<input type="button"  value="%" id="manual"/>&nbsp;

<p>

 

<input type="button"  value="Fondo1" id="f1" style="width: 49px"/>

<input type="button"  value="Fondo2" id="f2" style="width: 49px"/>

<input type="button"  value="Fondo3" id="f3" style="width: 49px"/></p>

 

Lo que esta en negrita es el control propiamente tal, lo demás da el soporte para el funcionamiento del ejemplo. El los estilos que acompañan el html es:

<style type="text/css">

 #fondo{

       background-image:url('fondos/fondo3.png');

       width:130px;

       height:130px;

  }

 #puntero{

       width:13px;

       margin-left:58.5px;

 }

 #msg{

       width:130px;

       height:10px;

       font-family:Arial, Helvetica, sans-serif;

       font-style:italic

 }

</style>

Como podemos observar , configuramos el fondo, el tamaño del mismo, el puntero y la distancia desde el margen izquierdo ,ya que de otra manera , el puntero estaría adosado al lado izquierdo del div fondo. Para calcular esto:

  • Ancho del Control = 130px  ,Mitad=65
  • Ancho del Puntero=13px , Mitad 6,5
  • Margen = Mitad del Control  - Mitad del Puntero => 65 - 6,5 = 58,5

Código Javascript

<script type="text/javascript">

    var intval = "";

    var frecuencia = 4000;

    function inicio() {

        var angulo = obtAngulo();

        $("#image").rotateAnimation(angulo);

    }

 

    function obtAngulo() {

        var porcentaje = Math.floor(Math.random() * 100);

        $("#msg").text("Estado:" + porcentaje + "%");

        return -120 + (2.4 * parseInt(porcentaje));

 

    }

 

    $(document).ready(function () {

 

        $("#manual").click(function () {

            var porcentaje = $("#texto").val();

            var angulo = -120 + (2.4 * parseInt(porcentaje));

            $("#image").rotateAnimation(parseInt(angulo));

            $("#msg").text("Estado:" + porcentaje + "%");

        });

 

        $("#Iniciar").click(function () {

            intval = setInterval("inicio()", frecuencia);

        });

 

        $("#Parar").click(function () {

            clearInterval(intval)

        });

 

        $("#f1").click(function () {

            $("#fondo").css("background-image", "url(fondos/fondo1.png)");

        });

        $("#f2").click(function () {

            $("#fondo").css("background-image", "url(fondos/fondo2.png)");

        });

        $("#f3").click(function () {

            $("#fondo").css("background-image", "url(fondos/fondo3.png)");

        });

 

    });

        

 </script>  

El código es bastante corto, paso a explicar las funciones fundamentales para el funcionamiento del Control.

  • obtAngulo: Sirve para obtener el porcentaje y transformar en ángulo dicho valor, la fórmula, debido al ángulo en el valor 0 (-120) y el incremento por punto (2,4) , la formula es: -120 + (2.4 * parseInt(porcentaje)); . Esta función se puede reemplazar por una llamada Ajax.
  • inicio: obtiene el ángulo desde la función obtAngulo, y rotamos el puntero mediante jQueryRotator con el método rotateAnimation, al ángulo indicado.

Ahora el código adicional, nos va a servir para distintas acciones:

1) Cuando hacemos click en el botón % , cuyo Id es manual, seteamos el ángulo a partir del valor ingresado, ojo que en el ejemplo va sin validación para simplificar el funcionamiento y explicación del ejemplo.

2)Cuando presionamos el botón iniciar , lo que hacemos es setear un intervalo con SetInterval y se lo asignamos a la variable global intval, este seteo indica cada cuando se repetirá la ejecución de la función inicio, en este caso lo indica la variable frecuencia, en milisegundos.

3)Al hacer click sobre Parar, limpiamos el intervalo , para detener la ejecución del control.

4) f1, f2, f3, nos van a servir para cambiar el skin del control, cambiando mediante jQuery la propiedad background-image a través de el método CSS

Y listo! a funcionar Sonrisa

Como siempre el video!

image

image

Compatibilidad (dependiente del plugin jQueryRotate)

  • Mozilla FireFox 2.0.0.2  y superior
  • Internet Explorer 7.0  superior (en IE9 no funciona, hay que agregar los meta de compatibilidad)
  • Opera 9.1 (note Opera 8 no está soportado)

Espero que te sirva, pronto migro los otros controles hechos en Silverlight para que se puedan utilizar con jQuery.

Saludos,
Gonzalo

Posted: 12/12/2010 23:58 por Gonzalo Perez | con 4 comment(s)
Comparte este post:

Comentarios

Andrés Iturralde ha opinado:

Notable compadre, aun me acuerdo de tu chalaguage en versión Silverlight :P! De hecho te lo robe para un proyecto, obviamente con los copyright a chalalo :P!

Un abrazo a la distancia :)

# December 16, 2010 9:15 PM

Gonzalo Perez ha opinado:

jajaj bacam compadre! no sabia que lo habias utilizado, no dijiste nada :(, bueno, ahora ya lo se, gracias por el post!

# December 17, 2010 3:39 AM

Chalalo Land ha opinado:

Ya se acaba el año, y quería hacer un resumen, no están todos los artículos, si no los que más rescato

# December 31, 2010 2:16 AM

Gonzalo Perez ha opinado:

Ya se acaba el año, y quería hacer un resumen, no están todos los artículos, si no los que más rescato

# December 31, 2010 2:52 AM