Créer une application de chronomètre simple avec GTK

Introduction

Dans ce projet, nous allons créer une application de chronomètre simple en utilisant la bibliothèque GTK en C. Ce chronomètre aura un bouton de démarrage/pause et un bouton de réinitialisation pour contrôler le minuteur du chronomètre. Nous allons décomposer le processus en plusieurs étapes, en commençant par la configuration des fichiers du projet et en terminant par l'exécution de l'application de chronomètre.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment installer la bibliothèque GTK
• Comment créer les fichiers du projet
• Comment inclure les en-têtes GTK et définir des variables
• Comment créer la fonction de rappel du minuteur
• Comment implémenter les rappels de clic sur les boutons
• Comment créer la fonction principale et les éléments d'interface utilisateur
• Comment compiler et exécuter le projet

🏆 Réalisations

Après avoir terminé ce projet, vous serez en mesure de :

• Utiliser la bibliothèque GTK pour créer une interface utilisateur graphique en C
• Gérer les événements de clic sur les boutons dans GTK
• Travailler avec les minuteurs dans GTK
• Mettre à jour dynamiquement les étiquettes dans GTK

Créer les fichiers du projet

Tout d'abord, assurez-vous que la bibliothèque GTK est installée sur votre système. Sinon, vous pouvez utiliser la commande suivante pour l'installer :

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

Ensuite, créez un nouveau fichier nommé stopwatch.c et ouvrez-le dans votre éditeur de code préféré.

cd ~/project
touch stopwatch.c

Inclure les en-têtes GTK et définir les variables

Dans cette étape, nous allons inclure les en-têtes GTK nécessaires et définir les variables pour notre application de chronomètre.

#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> : Cela contient les fichiers d'en-tête de la bibliothèque GTK pour utiliser les fonctions et les structures de données GTK dans votre programme.
• static guint timer_id = 0; : C'est une variable utilisée pour stocker l'ID du minuteur GTK. L'ID du minuteur est utilisé dans le code suivant pour contrôler le démarrage et l'arrêt du minuteur.
• static gboolean running = FALSE; : C'est une variable booléenne utilisée pour suivre si le chronomètre est en cours d'exécution. running vaut TRUE lorsque le chronomètre est en marche et FALSE lorsque le chronomètre est en pause.
• static int elapsed_seconds = 0; : C'est une variable entière utilisée pour suivre le nombre de secondes écoulées. Elle est utilisée pour calculer le temps écoulé et afficher le temps du chronomètre sur l'étiquette.
• static GtkWidget *label; : C'est un pointeur pour stocker le widget d'étiquette GTK. Cette étiquette affiche le temps du chronomètre.

Créer la fonction de rappel du minuteur

Ensuite, nous allons créer une fonction de rappel qui met à jour le minuteur du chronomètre toutes les secondes.

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 le chronomètre est en marche, la valeur de la variable elapsed_seconds est augmentée, indiquant que le nombre de secondes écoulées a augmenté de 1 seconde.
• Étant donné qu'une minute est égale à 60 secondes, nous divisons elapsed_seconds par 60 pour obtenir le nombre de minutes. Le nombre de secondes inférieur à une minute peut être obtenu en utilisant l'opérateur de reste %.
• Utilisez la fonction snprintf pour formater les minutes et les secondes en tant que chaîne au format mm:ss, où %02d signifie deux chiffres pour les minutes et les secondes, et tout nombre inférieur à deux chiffres est complété par des zéros initiaux.
• gtk_label_set_text définit la chaîne de temps nouvellement générée comme texte de la partie étiquette pour mettre à jour l'affichage du chronomètre.
• return G_SOURCE_CONTINUE indique au minuteur GTK de continuer le minuteur après la fin du rappel afin que le prochain événement de minuteur soit à nouveau déclenché. Si le rappel retourne G_SOURCE_REMOVE, le minuteur s'arrête.

En résumé, la fonction timer_callback est chargée de mettre à jour dynamiquement le temps du chronomètre en augmentant le nombre de secondes écoulées pendant que le chronomètre est en marche, en formatant les minutes et les secondes en tant que chaîne, puis en la définissant comme texte du widget d'étiquette.

Implémenter les rappels de clic sur les boutons

Nous avons besoin de fonctions de rappel pour les boutons Démarrer/Pause et Réinitialiser.

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 bascule l'état du chronomètre entre en marche et en pause.
• reset_button_clicked réinitialise le minuteur du chronomètre.

Créer la fonction principale et les éléments d'interface utilisateur

Maintenant, créons la fonction main et configurons l'interface utilisateur.

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

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

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // Définir le titre de la fenêtre
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // Définir la taille par défaut de la fenêtre
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // Connecter l'événement de fermeture de la fenêtre

    grid = gtk_grid_new(); // Créer une mise en page grille
    gtk_container_add(GTK_CONTAINER(window), grid); // Ajouter la grille à la fenêtre

    label = gtk_label_new("00:00"); // Créer une étiquette GTK affichant initialement "00:00"
    gtk_widget_set_hexpand(label, TRUE); // Autoriser l'étiquette à s'étendre horizontalement
    gtk_widget_set_vexpand(label, TRUE); // Autoriser l'étiquette à s'étendre verticalement
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // Ajouter l'étiquette à la grille

    start_stop_button = gtk_button_new_with_label("Start"); // Créer un bouton avec l'étiquette "Start"
    gtk_widget_set_hexpand(start_stop_button, TRUE); // Autoriser le bouton à s'étendre horizontalement
    gtk_widget_set_vexpand(start_stop_button, TRUE); // Autoriser le bouton à s'étendre verticalement
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // Connecter l'événement de clic sur le bouton
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // Ajouter le bouton à la grille

    reset_button = gtk_button_new_with_label("Reset"); // Créer un bouton avec l'étiquette "Reset"
    gtk_widget_set_hexpand(reset_button, TRUE); // Autoriser le bouton à s'étendre horizontalement
    gtk_widget_set_vexpand(reset_button, TRUE); // Autoriser le bouton à s'étendre verticalement
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // Connecter l'événement de clic sur le bouton
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // Ajouter le bouton à la grille

    gtk_widget_show_all(window); // Afficher la fenêtre et tous ses widgets enfants

    timer_id = g_timeout_add(1000, timer_callback, NULL); // Créer un minuteur qui se déclenche toutes les 1000 ms (1 seconde) et appelle timer_callback

    gtk_main(); // Démarrer la boucle principale d'événements GTK

    return 0;
}

• La fonction main configure la fenêtre GTK, les étiquettes, les boutons et leurs gestionnaires d'événements de clic.

Compiler et exécuter le projet

Maintenant que nous avons créé l'application de chronomètre, compilons-la et exécutons-la.

1. Ouvrez votre terminal et accédez au répertoire du projet.

cd ~/project

2. Compilez le code en utilisant la commande suivante :

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

3. Exécutez l'application :

./stopwatch

Vous devriez voir une fenêtre avec le chronomètre. Cliquez sur le bouton Start pour démarrer le minuteur, Pause pour le mettre en pause et Reset pour le réinitialiser.

Résumé

Dans ce projet, nous avons créé une application de chronomètre simple en utilisant la bibliothèque GTK en langage C. Nous avons configuré les fichiers du projet, défini des variables, implémenté une fonction de rappel pour le minuteur et créé des rappels pour les clics sur les boutons. L'application vous permet de démarrer, mettre en pause et réinitialiser le minuteur du chronomètre, et vous pouvez l'exécuter en compilant le code et en exécutant le programme résultant.