Logo

Prácticas Web

Ejercicios y problemas

elementos dinamicos

elementos y efectos demandados por los diseñadores



logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Elementos dinámicos

Reloj analógico con SVG (I)

imagen javascript

Plantemiento

En este ejercicio haremos un reloj analógico (de esfera) para poder incrustarlo en una página web. El reloj está dentro de un recuadro de 300 x 300 píxels, Como en cualquier reloj analógico o de esfera debe tener dentro de la esfera los numeros de las horas, en sus lugares adecuados, y las marcas de los minutos con una pequeña línea alrededor de la esfera.

Tendrá también las saetas de marcar la hora, minuto y segundo, y debe ademaás estar en funcionamiento.

Conocimientos previos

Debemos saber manejar el lenguaje SVG, en el que construiremos la mayor parte del código. Tanto el diseño como el movimiento de las saetas lo haremos mediante SVG.

Utilizaremos el lenguaje PHP, concretamente la parte correspondiente a bucles y condicionales, ya que con esto simplificamos mucho el trabajo. La página en la que pongamos el reloj debe estar por lo tanto con la extensión .php.

También debemos saber algo de javascript, para poder buscar la hora actual y ponerla en el reloj.

Elementos estáticos: La esfera

Para crear la esfera utilizamos el siguiente código:

<svg widht="300" height="300">
<g transform="translate(150,150),rotate(180)">
<circle x=0 y=0 r=150 stroke="black" stroke-width=2 fill="maroon"/>
<circle x=0 y=0 r=140 stroke="black" stroke-width=2 fill="aqua"/>

</g>
</svg>

De momento el resultado es lo que vemos aquí a la derecha, lo que hemos hecho hasta ahora es lo siguiente:

En el próximo paso cambiamos el color de la esfera (aquí en azul claro), por un gradiente de color, también en tonos azules claros. Modificamos por tanto el código añadiendo el gradiente de color y cambiando el atributo fill del segundo círculo:

<svg width="300" height="300">
<defs>
  <radialGradient id="gr1" cx="50%" cy="50%" r="50%">
    <stop offset=0 stop-color="#e1f6ff"/>
    <stop offset=1 stop-color="#a0d0f9"/>
  </radialGradient>
</defs>
<g transform="translate(150,150),rotate(180)">
<circle x=0 y=0 r=150 stroke="black" stroke-width=2 fill="maroon"/>
<circle x=0 y=0 r=140 stroke="black" stroke-width=2 fill="url(#gr1)"/>

</g>
</svg>

En color azul el código que hemos añadido o modificado. El resultado ahora es el que vemos aquí a la derecha.

Simplemente hemos creado un gradiente radial y lo hemos incorporado como fondo del círculo central.

Ahora debemos dibujar las marcas de los minutos y de las horas, Como éstas son 60 debemos dibujar 60 marcas o líneas pequeñas, alrededor del círculo, además cada 5 marcas debemos poner el número de la hora.

Para ello podríamos ponerlas de una en una, rotando la esfera cada vez 6 grados (360/60=6). Esto nos llevaría mucho trabajo. Sin embargo podemos simplificar mucho esta tarea utilizando un bucle de PHP que nos devuelva en cada vuelta una marca y la coloque en su lugar.

Nosotros lo hacemos con el siguiente código:

<svg width="300" height="300">
<defs>
  <radialGradient id="gr1" cx="50%" cy="50%" r="50%">
    <stop offset=0 stop-color="#e1f6ff"/>
    <stop offset=1 stop-color="#a0d0f9"/>
  </radialGradient>
</defs>
<g transform="translate(150,150),rotate(180)">
<circle x=0 y=0 r=150 stroke="black" stroke-width=2 fill="maroon"/>
<circle x=0 y=0 r=140 stroke="black" stroke-width=2 fill="url(#gr1)"/>
<?php 
$min=0; //marca de primer minuto
$h=12; //primera marca de las horas, número 12
for ($i=0;$i<360;$i=$i+6) { //en cada vuelta avanzamos 6 grados
   echo "<g transform='rotate($i)'>"; //rotación de 6 grados respecto a vuelta anterior
   if ($min%5==0) { //para marcar las horas 
      if ($h>12) {$h=1;} //el núm. marca de horas es siempre menor que 12
      $r1=-$i+180; //rotación para ver bien el num de las horas
      //trasladamos el origen de coord. al punto donde ponemos la marca
      echo "<g transform='translate(0,120),rotate($r1)'>";
      //escribimos aquí el num. marca de las horas
      echo "<text x=0 y=0 dx=-8 dy=5 style='font: bold 16px arial; fill: navy' >$h</text>";	 
      echo "</g>";
      //devolvemos la rotación y el origen de coord. a su estado anterior.
      $r2=$i+180;
      echo "<g transform='translate(0,-120),rotate($r2)'></g>";
      $h++; //avanzamos una hora, para la siguiente marca
      }
   else{ //marca de los minutos
      //con una línea recta al final del radio marcado basta.
      echo "<line x1=0 y1=130 x2=0 y2=133 stroke='navy' stroke-width=2/>";
      }
   $min++; //anadimos un minuto para la siguiente vuelta
   echo "</g>"; //cerramos la rotación.
   }
?>
</g>
</svg>
121234567891011

El código nuevo que hemos puesto es de PHP, y aquí está en azul. Hemos puesto comentarios a cada paso (en color morado) para indicar lo que estamos haciendo. El resultado es el que ves aquí a la derecha.

El código consiste en un bucle que va avanzando en cada vuelta un minuto de la esfera. Mediante una estructura if detectamos si la marca que tenemos que poner es de las horas o de los minutos.

Las marcas de los minutos consisten en una pequeña línea cerca de la parte exterior del círculo, según vamos avanzando en la rotación.

Poner la marca de la hora es algo más complicado, ya que debemos rotar en sentido contrario al avanzado hasta el punto en que estamos, para poner el número en horizontal, y tenemos que poner el origen de coordenadas en donde está el número, para que éste se vea en su sitio. despues debemos devolver la rotación y el origen a su estado original, para poder seguir con el siguiente.

Observa como al escribir el número (etiqueta "text"), ponemos también los atributos dx y dy para centrarlo en el sitio que debe ocupar.

En la siguiente página continuaremos con el reloj analógico. pondremos las saetas y le haremos funcionar.





Continuamos con el reloj en la siguiente página, para ir a la siguiente página y continuar pulsa aquí:



Elementos dinámicos / Reloj SVG

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com