Criar um Cronômetro Simples em C com GTK | Tutorial de Programação

Introdução

Neste projeto, criaremos uma aplicação de cronômetro simples usando a biblioteca GTK em C. Este cronômetro terá um botão de iniciar/pausar e um botão de reset para controlar o temporizador do cronômetro. Dividiremos o processo em várias etapas, começando com a configuração dos arquivos do projeto e terminando com a execução da aplicação do cronômetro.

👀 Pré-visualização

Stopwatch app demo

🎯 Tarefas

Neste projeto, você aprenderá:

Como instalar a biblioteca GTK
Como criar os arquivos do projeto
Como incluir os cabeçalhos GTK e definir variáveis
Como criar a função de retorno de chamada do temporizador
Como implementar retornos de chamada de clique de botão
Como criar a função principal e os elementos da interface do usuário
Como compilar e executar o projeto

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar a biblioteca GTK para criar uma interface gráfica do usuário em C
Lidar com eventos de clique de botão em GTK
Trabalhar com temporizadores em GTK
Atualizar rótulos dinamicamente em GTK

Criar os Arquivos do Projeto

Primeiramente, certifique-se de ter a biblioteca GTK instalada em seu sistema. Caso não tenha, você pode usar o seguinte comando para instalá-la:

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

Em seguida, crie um novo arquivo chamado stopwatch.c e abra-o em seu editor de código preferido.

cd ~/project
touch stopwatch.c

Incluir os Headers do GTK e Definir Variáveis

Nesta etapa, incluiremos os cabeçalhos GTK necessários e definiremos as variáveis para nossa aplicação 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>: Isso contém os arquivos de cabeçalho da biblioteca GTK para usar as funções e estruturas de dados GTK em seu programa.
static guint timer_id = 0;: Esta é uma variável usada para armazenar o ID do temporizador GTK. O ID do temporizador é usado no código a seguir para controlar o início e a parada do temporizador.
static gboolean running = FALSE;: Esta é uma variável booleana usada para rastrear se o cronômetro está em execução. running é TRUE quando o cronômetro está em execução e FALSE quando o cronômetro está pausado.
static int elapsed_seconds = 0;: Esta é uma variável inteira usada para rastrear o número de segundos decorridos. Ela é usada para calcular o tempo decorrido e exibir o tempo do cronômetro no rótulo.
static GtkWidget *label;: Este é um ponteiro para armazenar o widget de rótulo GTK. Este rótulo exibe o tempo do cronômetro.

Criar a Função de Callback do Timer

Em seguida, criaremos uma função de retorno de chamada que atualiza o temporizador do cronômetro a 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++: Se o cronômetro estiver em execução, o valor da variável elapsed_seconds é incrementado, indicando que o número de segundos decorridos aumentou em 1 segundo.
Como um minuto é igual a 60 segundos, dividimos elapsed_seconds por 60 para obter o número de minutes. O número de seconds menor que um minuto pode ser obtido usando o operador de redundância %.
Use a função snprintf para formatar os minutos e segundos como uma string no formato mm:ss, onde %02d significa dois dígitos para minutos e segundos, e qualquer número menor que dois dígitos é preenchido com zeros à esquerda.
gtk_label_set_text define a string de tempo recém-gerada para o texto da parte do rótulo para atualizar a exibição do cronômetro.
return G_SOURCE_CONTINUE informa ao temporizador GTK para continuar o temporizador após a conclusão do retorno de chamada, de modo que o próximo evento do temporizador seja acionado novamente. Se o retorno de chamada retornar G_SOURCE_REMOVE, o temporizador para.

Em resumo, a função timer_callback é responsável por atualizar dinamicamente o tempo do cronômetro, incrementando o número de segundos decorridos enquanto o cronômetro está em execução, formatando os minutos e segundos como uma string e, em seguida, definindo-a para o texto do widget de rótulo.

Implementar Callbacks de Clique de Botão

Precisamos de funções de retorno de chamada para os botões Iniciar/Pausar e Redefinir.

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 o estado do cronômetro entre em execução e pausado.
reset_button_clicked redefine o temporizador do cronômetro.

Criar a Função Principal e Elementos da Interface do Usuário (UI)

Agora, vamos criar a função main e configurar a interface do usuário.

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"); // Definir o título da janela
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // Definir o tamanho padrão da janela
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // Conectar o evento de fechamento da janela

    grid = gtk_grid_new(); // Criar um layout de grade
    gtk_container_add(GTK_CONTAINER(window), grid); // Adicionar a grade à janela

    label = gtk_label_new("00:00"); // Criar um rótulo GTK exibindo inicialmente "00:00"
    gtk_widget_set_hexpand(label, TRUE); // Permitir que o rótulo se expanda horizontalmente
    gtk_widget_set_vexpand(label, TRUE); // Permitir que o rótulo se expanda verticalmente
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // Adicionar o rótulo à grade

    start_stop_button = gtk_button_new_with_label("Start"); // Criar um botão com o rótulo "Start"
    gtk_widget_set_hexpand(start_stop_button, TRUE); // Permitir que o botão se expanda horizontalmente
    gtk_widget_set_vexpand(start_stop_button, TRUE); // Permitir que o botão se expanda verticalmente
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // Conectar o evento de clique do botão
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // Adicionar o botão à grade

    reset_button = gtk_button_new_with_label("Reset"); // Criar um botão com o rótulo "Reset"
    gtk_widget_set_hexpand(reset_button, TRUE); // Permitir que o botão se expanda horizontalmente
    gtk_widget_set_vexpand(reset_button, TRUE); // Permitir que o botão se expanda verticalmente
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // Conectar o evento de clique do botão
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // Adicionar o botão à grade

    gtk_widget_show_all(window); // Mostrar a janela e todos os seus widgets filhos

    timer_id = g_timeout_add(1000, timer_callback, NULL); // Criar um temporizador que aciona a cada 1000 ms (1 segundo) e chama timer_callback

    gtk_main(); // Iniciar o loop de eventos principal do GTK

    return 0;
}

A função main configura a janela GTK, os rótulos, os botões e seus manipuladores de eventos de clique.

Compilar e Executar o Projeto

Agora que criamos a aplicação de cronômetro, vamos compilá-la e executá-la.

Abra seu terminal e navegue até o diretório do projeto.

cd ~/project

Compile o código usando o seguinte comando:

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

Execute a aplicação:

./stopwatch

Você deve ver uma janela com o cronômetro. Clique no botão Start para iniciar o temporizador, Pause para pausá-lo e Reset para redefinir o temporizador.

Demonstração do aplicativo de cronômetro

Resumo

Neste projeto, criamos uma aplicação simples de cronômetro usando a biblioteca GTK em C. Configuramos os arquivos do projeto, definimos variáveis, implementamos uma função de retorno de chamada (callback) do temporizador e criamos retornos de chamada para os cliques dos botões. A aplicação permite iniciar, pausar e redefinir o temporizador do cronômetro, e você pode executá-la compilando o código e executando o programa resultante.

Criar um Aplicativo de Cronômetro Simples Usando GTK