Crear una aplicación de cronómetro simple utilizando GTK

Introducción

En este proyecto, crearemos una aplicación de cronómetro sencilla utilizando la biblioteca GTK en C. Este cronómetro tendrá un botón de inicio/pausa y un botón de reinicio para controlar el temporizador del cronómetro. Dividiremos el proceso en varios pasos, comenzando con la configuración de los archivos del proyecto y terminando con la ejecución de la aplicación del cronómetro.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo instalar la biblioteca GTK
• Cómo crear los archivos del proyecto
• Cómo incluir las cabeceras de GTK y definir variables
• Cómo crear la función de devolución de llamada del temporizador
• Cómo implementar las devoluciones de llamada de clic de botón
• Cómo crear la función principal y los elementos de la interfaz de usuario
• Cómo compilar y ejecutar el proyecto

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar la biblioteca GTK para crear una interfaz de usuario gráfica en C
• Manejar eventos de clic de botón en GTK
• Trabajar con temporizadores en GTK
• Actualizar etiquetas dinámicamente en GTK

Skills Graph

Crear los archivos del proyecto

Primero, asegúrate de tener la biblioteca GTK instalada en tu sistema. Si no la tienes, puedes usar el siguiente comando para instalarla:

sudo apt update
sudo apt-get install libgtk-3-dev

A continuación, crea un nuevo archivo llamado stopwatch.c y ábrelo en tu editor de código preferido.

cd ~/project
touch stopwatch.c

Incluir cabeceras de GTK y definir variables

En este paso, incluiremos las cabeceras de GTK necesarias y definiremos variables para nuestra aplicación de cronómetro.

#include <gtk/gtk.h>

static guint timer_id = 0;
static gboolean running = FALSE;
static int elapsed_seconds = 0;

static GtkWidget *label;

• #include <gtk/gtk.h>: Esto contiene los archivos de cabecera de la biblioteca GTK para utilizar funciones y estructuras de datos de GTK en tu programa.
• static guint timer_id = 0;: Esta es una variable utilizada para almacenar el ID del temporizador de GTK. El ID del temporizador se utiliza en el siguiente código para controlar el inicio y la detención del temporizador.
• static gboolean running = FALSE;: Esta es una variable booleana utilizada para rastrear si el cronómetro está en funcionamiento. running es TRUE cuando el cronómetro está en funcionamiento y FALSE cuando el cronómetro está en pausa.
• static int elapsed_seconds = 0;: Esta es una variable entera utilizada para rastrear el número de segundos transcurridos. Se utiliza para calcular el tiempo transcurrido y mostrar el tiempo del cronómetro en la etiqueta.
• static GtkWidget *label;: Este es un puntero para almacenar el widget de etiqueta (label) de GTK. Esta etiqueta muestra el tiempo del cronómetro.

Crear la función de devolución de llamada del temporizador

A continuación, crearemos una función de devolución de llamada que actualiza el temporizador del cronómetro cada segundo.

static gboolean timer_callback(gpointer data) {
    if (running) {
        elapsed_seconds++;
        int minutes = elapsed_seconds / 60;
        int seconds = elapsed_seconds % 60;
        char time_str[10];
        snprintf(time_str, sizeof(time_str), "%02d:%02d", minutes, seconds);
        gtk_label_set_text(GTK_LABEL(label), time_str);
    }
    return G_SOURCE_CONTINUE;
}

• elapsed_seconds++: Si el cronómetro está en funcionamiento, se incrementa el valor de la variable elapsed_seconds, lo que indica que el número de segundos transcurridos ha aumentado en 1 segundo.
• Dado que un minuto es igual a 60 segundos, dividimos elapsed_seconds entre 60 para obtener el número de minutes (minutos). El número de seconds (segundos) menor a un minuto se puede obtener utilizando el operador de residuo %.
• Utilizamos la función snprintf para formatear los minutos y segundos como una cadena en el formato mm:ss, donde %02d significa dos dígitos para los minutos y segundos, y cualquier número menor a dos dígitos se rellena con ceros a la izquierda.
• gtk_label_set_text establece la cadena de tiempo recién generada como el texto de la parte de la etiqueta (label) para actualizar la visualización del cronómetro.
• return G_SOURCE_CONTINUE le indica al temporizador de GTK que continúe el temporizador después de que se complete la devolución de llamada, de modo que se active el siguiente evento de temporizador nuevamente. Si la devolución de llamada devuelve G_SOURCE_REMOVE, el temporizador se detiene.

En resumen, la función timer_callback se encarga de actualizar dinámicamente el tiempo del cronómetro incrementando el número de segundos transcurridos mientras el cronómetro está en funcionamiento, formateando los minutos y segundos como una cadena y luego estableciéndola como el texto del widget de etiqueta.

Implementar devoluciones de llamada para el clic de botón

Necesitamos funciones de devolución de llamada para los botones de Inicio/Pausa y Reinicio.

static void start_stop_button_clicked(GtkButton *button, gpointer data) {
    running =!running;
    if (running) {
        gtk_button_set_label(button, "Pause");
    } else {
        gtk_button_set_label(button, "Start");
    }
}

static void reset_button_clicked(GtkButton *button, gpointer data) {
    elapsed_seconds = 0;
    gtk_label_set_text(GTK_LABEL(label), "00:00");
}

• start_stop_button_clicked alterna el estado del cronómetro entre en funcionamiento y en pausa.
• reset_button_clicked reinicia el temporizador del cronómetro.

Crear la función principal y los elementos de la interfaz de usuario

Ahora, creemos la función main y configuremos la interfaz de usuario.

int main(int argc, char *argv[]) {
    GtkWidget *window;
    GtkWidget *grid;
    GtkWidget *start_stop_button;
    GtkWidget *reset_button;

    gtk_init(&argc, &argv); // Inicializar GTK

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // Establecer el título de la ventana
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // Establecer el tamaño predeterminado de la ventana
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // Conectar el evento de cierre de la ventana

    grid = gtk_grid_new(); // Crear un diseño de cuadrícula
    gtk_container_add(GTK_CONTAINER(window), grid); // Agregar la cuadrícula a la ventana

    label = gtk_label_new("00:00"); // Crear una etiqueta GTK que muestra inicialmente "00:00"
    gtk_widget_set_hexpand(label, TRUE); // Permitir que la etiqueta se expanda horizontalmente
    gtk_widget_set_vexpand(label, TRUE); // Permitir que la etiqueta se expanda verticalmente
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // Agregar la etiqueta a la cuadrícula

    start_stop_button = gtk_button_new_with_label("Start"); // Crear un botón con la etiqueta "Start"
    gtk_widget_set_hexpand(start_stop_button, TRUE); // Permitir que el botón se expanda horizontalmente
    gtk_widget_set_vexpand(start_stop_button, TRUE); // Permitir que el botón se expanda verticalmente
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // Conectar el evento de clic del botón
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // Agregar el botón a la cuadrícula

    reset_button = gtk_button_new_with_label("Reset"); // Crear un botón con la etiqueta "Reset"
    gtk_widget_set_hexpand(reset_button, TRUE); // Permitir que el botón se expanda horizontalmente
    gtk_widget_set_vexpand(reset_button, TRUE); // Permitir que el botón se expanda verticalmente
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // Conectar el evento de clic del botón
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // Agregar el botón a la cuadrícula

    gtk_widget_show_all(window); // Mostrar la ventana y todos sus widgets secundarios

    timer_id = g_timeout_add(1000, timer_callback, NULL); // Crear un temporizador que se activa cada 1000 ms (1 segundo) y llama a timer_callback

    gtk_main(); // Iniciar el bucle principal de eventos de GTK

    return 0;
}

• La función main configura la ventana GTK, las etiquetas, los botones y sus manejadores de eventos de clic.

Compilar y ejecutar el proyecto

Ahora que hemos creado la aplicación de cronómetro, compilémosla y ejecutémosla.

1. Abra su terminal y navegue hasta el directorio del proyecto.

cd ~/project

2. Compile el código utilizando el siguiente comando:

gcc -o stopwatch stopwatch.c $(pkg-config --cflags --libs gtk+-3.0)

3. Ejecute la aplicación:

./stopwatch

Debería ver una ventana con el cronómetro. Haga clic en el botón Start para iniciar el temporizador, en Pause para pausarlo y en Reset para reiniciar el temporizador.

Resumen

En este proyecto, creamos una aplicación de cronómetro simple utilizando la biblioteca GTK en C. Configuramos los archivos del proyecto, definimos variables, implementamos una función de devolución de llamada para el temporizador y creamos devoluciones de llamada para el clic de botones. La aplicación te permite iniciar, pausar y reiniciar el temporizador del cronómetro, y puedes ejecutarla compilando el código y ejecutando el programa resultante.