Javascript

Esta es la parte más compleja del proyecto, crear los scripts que dubujan el conómetro en el canvas y gestionan las animaciones del cronómetro

Vamos a hacer un esquema previo general para marcar el camino de como codificar una solución para este proyecto.

Es bueno hacer este plantamiento precio, que puedes materializar con un diagrma de flujos, esquemas gráficos o mediante texto descriptivo.

En este caso usmaos una descricion textual

Un cronómetro no es mas que:

• Un fondo o esfera graduada
• Una aguja en movimiento
• Botón de inicio/paro
• Boton de reset

El fondo es un círculo de color con 60 marcas en el borde, van numeradas en intervalos de 5 entre 0 y 55.

La aguja es una linea recta que gira en torno a un extremo en el centro del fondo

Los botones son rectángulos que responden a un click y se situan en el borde superior (start/stop) y en último cuadrante de la esfera (reset).

La forma de implementarlo va a ser mediante el Canvas de HTML y Javascript.

El cronómetro es dibujado en la pantalla.

Pulsar el botón start/stop y se pone en marcha.

Volver a pulsar se detiene.

Al pulsar el botón de reset en cualquier momento se resetea la imagen y el conteo

Nos encontramos con dos partes diferentes:

Diseño

• Dibujar círculo para el fondo
• Poner marcas
• Poner números
• Dibujar y poner botones: start y reset
• Dibujar la aguja: recta desde el centro al borde

Scripts de animaciones

• Gestionar botones (eventos)
• Animar botones
• Animar aguja

Ambas implican Javascript.

Una vez tenemos la página web con el elmento canvas incluído empieza la tarea del Javascript.

Las tareas del código son, en resumen:

• Dibujar el cronómetro
  • Dibujar el fondo o esfera
  • Poner las marcas de los segundos
  • Poner los números (5, 10...)
  • Dibujar el secundero
  • Dibujar y colocar boton start/stop
  • Dibujar colocar boton reset
• Animar el segundero
• Iniciar - parar la cuenta
• Resetear el cronómetro

Para Javascript el cronómetro va a ser un objeto con las siguientes propiedades y métodos (al codificar puede que incluyamos alguna más)

Propiedades del objeto cronómetro

• El lápiz de dibujo
• dimensiones del canvas
• id del canvas
• radio de la esfera del cronómetro
• tamaño de los botones (en función del radio para mantener la proporción)
• un temporizador para la animación
• un almacen del dibjo del fondo
• Tamaño marcas
• Grosor del borde de la esfera

Métodos del objeto cronómetro

• circulo: dibujar el borde del cronómetro
• marcas: Poner marcas de los segundos
• secundero: colocar el secundero (la aguja)
• textos: colocar los digitos de los segundos junto a las marcas
• dibujar: dibujar la esfera con las marcas y el texto
• animar: encargado de mover el secundero
• reset: reiniciar todo

 

Los algoritmos para estos métodos son simples. Los más complejos son la animación del secundero y e los botones al hacer click sobre ellos.

Iniciar un objeto cronómetro es

1. Dar valor a las propiedades
2. Trasladar el origen de coordenadas al centro del canvas
3. Asignar evento al bloque canvas para manejar los botones

Dibujar el cronómetro

1. Dibujar la esfera
2. Poner las marcas
3. Poner los números
4. Poner los botones: start/stop, reset
5. Dibujar todo
6. Guardar el fondo
7. Poner secundero apuntando a 0 (Angulo 0)

Poner una marca

1. Calcular coordenadas X, Y iniciales en función del ángulo y el radio de la esfera
2. Calcular coordenadas X, Y finales en función del ángulo y el radio de la esfera menos el largo de la marca
3. Dibujar linea desde las coordenadas iniciales hasta las finales
4. Si existe un texto dibujarlo (caso angulos 0, 30, 60, 90...) o sea, cada 5 segundos

Poner todas las marcas y números

Para todas las marcas tendría que repetir poner una marca con el angulo cambiando desde 0 a 360 de 6 en 6

Para las posiciones en ángulos multiplos de 30 (cada 5 segundos) poner un texto

Poner boton Inicio

Se trata de un rectángulo en la posición superior de la esfera

1. Calcular coordenada X = X.centro - ancho boton/2
2. Calcular coordenada X=  Y.centro - radio - alto.boton
3. Si está presionado el poner un alto inferior al alto del botón
4. Dibujar el botón

Poner boton Reset

Se trata de un rectángulo a -30º de la posición superior

1. Calcular coordenada X = X.centro - ancho boton/2
2. Calcular coordenada X=  Y.centro - radio - alto.boton
3. Girar  el canvas para que el rectángulo salga girado
4. Si está presionado el poner un alto inferior al alto del botón
5. Dibujar el botón
6. Restaurar el Canvas

Animación del secundero

1. Incrementar el ángulo actual en 6 (esfera son 360º y tiene 60 divisiones, cada división son 6º)
2. Si está por encima de 354 reiniciar ángulo a 0
3. Reponer el fondo original
4. Dibujar la aguja con el ángulo actual
5. Repetir cada segundo

Animación Botones

1. Borrar parte superior del botón
2. Redibujar tras un intervalo de tiempo con el estado inicial

Botón inicio se redibuja solo el botón con retraso para ver la animación

El botón reset redibuja todo el canvas con retraso para ver la animación