Cronómetro Pomodoro

En esta entrada vamos a hacer una aplicación que nos sirva como cronómetro pomodoro. ¿Pero qué es un cronómetro pomodoro?. Según la wikipedia, su definición es:
La Técnica Pomodoro es un método para mejorar la administración del tiempo dedicado a una actividad. Fue desarrollado por Francesco Cirillo a fines de la década de 1980.1​ Se usa un temporizador para dividir el tiempo en intervalos indivisibles, llamados pomodoros, de 25 minutos de actividad, seguidos de 5 minutos de descanso, con pausas más largas cada cuatro pomodoros.

Planteando el problema lógico

Nuestra aplicación funcionará de la siguiente manera:

  • EL botón iniciará y parará el cronómetro
  • Al iniciar el cronómetro este contará 25 minutos. E indicará que está en modo Concentración
  • Al pasar los 25 minutos, el cronómetro volverá a empezar a contar desde 0 hasta 5. E indicará que está en el modo Descanso.
  • Al terminar el modo Descanso el cronómetro se parará.

Preparando los componentes

Para realizar esta aplicación vamos a necesitar un formulario, dos botones, un etiqueta o TLabel y un cronómetro o TTimer.

Empieza una nueva aplicación, modifica las propiedades siguientes:

PropiedadValor
BorderIconbiMaximize = FALSE
BorderStylebsSingle
CaptionCronómetro pomodoro
PositionpoDesktopCenter
NameMainfrm

La propiedad BorderIcon, tiene varias opciones dentro ella. Al desplegarla verás varias posibilidades. Al poner biMaximize a False conseguimos que el botón para maximizar la ventana desaparezca, por lo cual ya no se puede ampliar su tamaño.

La propiedad BorderStyle, indica el tipo de borde que queremos. Al poner el valor bsSingle,conseguimos que el borde sea sencillo o único, por lo cual no se puede cambiar el tamaño de la ventana.

Con la propiedad Position, indicamos dónde aparece la ventana, en esta caso poDesktopCenter indica que se muestre en el centro del escritorio.

Ahora coloca un componente TLabel, lo encontrarás en la pestaña estándar.
Ajusta sus propiedades según la tabla siguiente:

PropiedadValor
AlignalTop
AlignmenttaCenter
Caption00:00
FontSize = 45
PositionpoDesktopCenter
NamelbTime

Ahora coloca un botón, y ajusta sus propiedades.

PropiedadValor
CaptionIniciar
NamebtControl

Ahora coloca un control TTimer. Lo encontrarás en la pestaña System.

Este control nos permite que cada cierto tiempo se produzca un evento. Su propiedad Interval indica, en milisegundos, cada cuento tiempo se produce el evento.

Su propiedad Enabled nos permite activar y desactivar su funcionamiento.
Pon su propiedad Enabled a False. El resto déjalo como está.

Tu aplicación debería tener este aspecto.

Escribiendo el código

Ahora que tenemos todos los controles listos, y el planteamiento lógico de nuestra aplicación,vamos a escribir el código fuente.

Empezamos por evento OnClick de botón. Aquí vamos activar y desactivar el cronómetro. Para ello lo se hace es cambiar su propiedad `Enabled.

procedure TMainFrm.btControlClick(Sender: TObject);
begin
  Timer1.Enabled := not Timer1.Enabled;
end;  

Como nuestro cronómetro debe conocer en que modo está, vamos a crear una variable que lo indique. Pero esta variable debe estar disponible para su consulta o modificación desde cualquier parte de nuestro código. Para ello vamos a definir la variable al principio del código. En la sección dónde private.

Además para saber el tiempo que lleva transcurrido debemos anotar la hora a la que se iniciar el cronómetro. Esta también será una variable que debe estar disponible para todo nuestro código.

    private
    Tiempo: TTime; //Almacena el número de segundos
    ModoDescanso: boolean; //Almacena el estado

Hemos definidos dos variables que son globales, eso significa que cualquier parte de nuestro código puede leer y modificar estas variables.


La variable `Tiempo` almacenará la hora a la que se iniciar el cronómetro. Y la variable ModoDescanso indica se está en modoDescanso o no.


Ahora vamos usar los eventos que tiene el componente TTimer.

  • OnStartTimer. Se produce cuando se inicia el cronómetro
  • OnStopTimer. Se produce cuando se detiene el cronómetro.
  • OnTimer. Se produce cada vez que pasa el tiempo programado en la propiedad Interval.
Eventos

En el evento OnStartTime pondremos el código siguiente:

procedure TMainFrm.Timer1StartTimer(Sender: TObject);
begin
  lbTime.Caption := '00:00';
  MainFrm.Caption := 'Tiempo Concentración';
  btControl.Caption := 'Detener';
  Tiempo := Time;
  ModoDescanso := False;
end; 

Fíjate que la variable tiempo es igualada a Time. Time es una función que devuelve la hora actual. Y la variable ModoDescanso la iniciamos a False.

Ahora vamos a ver el código del evento OnStopTimer.

procedure TMainFrm.Timer1Timer(Sender: TObject);
var
  Actual: TTime;
begin

  Actual := Time - Tiempo;
  lbTime.Caption := FormatDateTime('nn:ss', actual);
  if (ModoDescanso = False) and (MinutesBetween(Time, Tiempo) = 25) then
  begin
    MainFrm.Caption := 'Tiempo Descanso';
    ModoDescanso := True;
    Tiempo := Time;
  end;
  if (ModoDescanso = True) and (MinutesBetween(Time, Tiempo) = 5) then
  begin
    Timer1.Enabled:= False;
  end;
end;

Lo primero que se hacemos en calcular cuanto tiempo ha pasado, para ello restamos la hora actual (recuerda la función time` a la hora que se inicio el cronómetro. Y lo guardamos en la variable Actual. Esta variable esta definida al principio del evento. Por tanto solo se podrá usar en el evento. Es lo que se denomina una variable local.

Como la hora no es un dato cadena o texto, que el tipo de dato que muestra la etiqueta lblabel lo convertimos en cadena, indicando que queremos que se muestren minutos y segundos. Esto lo hace la función FormatDataTime.

El siguiente paso es comprobar en que modo está. Eso lo hacemos con la instrucción IF. Además debemos saber cuantos minutos han pasado. El cálculo se hace con la función MinutesBetween. Para usar esta función debemos indicar a nuestro programa en que librería se encuentra, ya que no la incluye por defecto. Para ello en la parte superior hay un línea que empieza por la palabra reservada `uses`. Al final debes añadir la librería dateutils.

Clausula uses

Ya está listo nuestra aplicación. Se pueden realizar muchas mejoras, desde estéticas hasta funcionales. Pero el funcionamiento básico esta listo. Modificar propiedades, código, etc para adaptarla a vuestro gusto y sobre todo explorar y aprender más.

Aplicación funcionando

El código fuente lo podéis descargar del github de TeisRobotics, desde aquí.

Saludos

Deja una respuesta