JMiur [E]

CoolClock es un script para crear relojes y utiliza la etiqueta CANVAS para dibujarlos. Debería funcionar en cualqueir navegador aunque en Internet Explorer es necesario agregar un script extra y el resultado es ... limitado. En esta entrada no estoy usándolo así que no se verá.

Lo más interesante es que es posible crear diseños personales aunque, claro, hacer eso no es nada sencillo. Algunos de esos diseños podemos verlos online en una página demo.
Para utilizarla, debemos descargar el script coolclock.js desde la página del autor y utilizar Explorer Canvas que podemos descargar desde Google Code.

Vamos a poner ambos scripts antes de </head>:
<!--[if IE]>
<script type="text/javascript" src="URL_excanvas.js"></script>
<![endif]-->
<script src="URL_coolclock.js" type="text/javascript"></script>
Eventualmente, si queremos, también podemos descargar el archivo moreskins.js que contiene todos los modelos extras y eso lo agregamos inmediatamente después de lo anterior:
<script src="URL_moreskins.js" type="text/javascript"></script>
Luego, donde quisiéramos que se viera el reloj, ponemos algo así:
<canvas id="mireloj" class="CoolClock:nombreskin:radio"></canvas>
Aparentemente, si se tiene jQuery cargado, no hace falta hacer nada más pero, como acá no está cargado, lo que debe hacerse es activarlo de este modo:
<script>CoolClock.findAndCreateClocks();</script>
En la clase CSS siempre colocamos CoolClock y luego, separando los datos con dos puntos, podemos agregar valores opcionales:
  • nombreskin indica el tipo de diseño gráfico (por defecto es swissRail pero, en el script original hay más: chunkySwiss, fancy, machine, classic, modern y simple. Si agregamos el script moreskins.js tendremos muchísimas más opciones.
  • radio es el tamaño y por defecto es 85; es un valor expresado en pixeles
  • noSeconds elimina la aguja del segundero
Si se quieren omitir parámetros, se deben agregar los dos puntos igual así que para usar el modelo por defecto pero sin segundero, pondríamos:
class="CoolClock:CoolClock:::noSeconds"
Como en la etiqueta CANVAS podemos agregar un ID cualquier, luego, con CSS, es posible agregarle fondos, alinearlo, etc.

3 comentarios:

Rosendo Ramírez Aquino  

:O las cosas que se pueden hacer... y flash va kedando cada vez mas en el olvido :P

Responder
Domin-Omega  

Yo había aprendido a hacerlo en flash, ahora no lo he revisado detalladamente, pero dado que el javascript y los scripts de flash eran prácticamente identicos no creo que me cueste trabajo migrar mi código. Gracias por la introducción al novedoso mundo de las canvas.

JMiur  

Creo lo mismo, que para alguien acostumbrado al actionScript de Flash, la "traducción" debería ser relativamente sencilla así que es cosa de empezar y ver.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR