Erstellen einer einfachen Stoppuhr-App mit GTK | Programmier-Tutorial

Einführung

In diesem Projekt werden wir eine einfache Stoppuhr-Anwendung mit der GTK-Bibliothek in C erstellen. Diese Stoppuhr wird über einen Start/Pause-Button und einen Reset-Button verfügen, um den Stoppuhr-Timer zu steuern. Wir werden den Prozess in mehrere Schritte aufteilen, beginnend mit der Einrichtung der Projekt-Dateien und endend mit dem Ausführen der Stoppuhr-Anwendung.

👀 Vorschau

Stoppuhr-App-Demo

🎯 Aufgaben

In diesem Projekt lernst du:

Wie man die GTK-Bibliothek installiert
Wie man die Projekt-Dateien erstellt
Wie man GTK-Header einbindet und Variablen definiert
Wie man die Timer-Callback-Funktion erstellt
Wie man Button-Klick-Callbacks implementiert
Wie man die Hauptfunktion und die Benutzeroberflächenelemente erstellt
Wie man das Projekt kompiliert und ausführt

🏆 Errungenschaften

Nach Abschluss dieses Projekts kannst du:

Die GTK-Bibliothek nutzen, um eine grafische Benutzeroberfläche in C zu erstellen
Button-Klick-Events in GTK verarbeiten
Mit Timern in GTK arbeiten
Labels dynamisch in GTK aktualisieren

Erstellen der Projekt-Dateien

Stellen Sie zunächst sicher, dass die GTK-Bibliothek auf Ihrem System installiert ist. Wenn nicht, können Sie den folgenden Befehl verwenden, um sie zu installieren:

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

Als Nächstes erstellen Sie eine neue Datei mit dem Namen stopwatch.c und öffnen Sie sie in Ihrem bevorzugten Code-Editor.

cd ~/project
touch stopwatch.c

Einfügen von GTK-Headern und Definieren von Variablen

In diesem Schritt werden wir die erforderlichen GTK-Header einbinden und Variablen für unsere Stoppuhr-Anwendung definieren.

#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>: Dies enthält die Header-Dateien der GTK-Bibliothek, um GTK-Funktionen und Datenstrukturen in Ihrem Programm zu verwenden.
static guint timer_id = 0;: Dies ist eine Variable, die zur Speicherung der ID des GTK-Timers verwendet wird. Die Timer-ID wird in folgendem Code verwendet, um das Starten und Stoppen des Timers zu steuern.
static gboolean running = FALSE;: Dies ist eine boolesche Variable, die dazu dient, zu verfolgen, ob die Stoppuhr läuft. running ist TRUE, wenn die Stoppuhr läuft, und FALSE, wenn die Stoppuhr pausiert ist.
static int elapsed_seconds = 0;: Dies ist eine Ganzzahlvariable, die die Anzahl der vergangenen Sekunden verfolgt. Sie wird verwendet, um die verstrichene Zeit zu berechnen und die Stoppuhrzeit auf dem Label anzuzeigen.
static GtkWidget *label;: Dies ist ein Zeiger, um das GTK-Label-Widget zu speichern. Dieses Label zeigt die Zeit der Stoppuhr an.

Erstellen der Timer-Callback-Funktion

Als Nächstes erstellen wir eine Callback-Funktion, die die Stoppuhrzeit alle Sekunden aktualisiert.

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++: Wenn die Stoppuhr läuft, wird der Wert der elapsed_seconds-Variable erhöht, was bedeutet, dass die Anzahl der vergangenen Sekunden um 1 Sekunde gestiegen ist.
Da eine Minute 60 Sekunden entspricht, teilen wir elapsed_seconds durch 60, um die Anzahl der minutes zu erhalten. Die Anzahl der seconds unter einer Minute kann mithilfe des Modulo-Operators % ermittelt werden.
Verwenden Sie die snprintf-Funktion, um die Minuten und Sekunden als Zeichenkette im Format mm:ss zu formatieren, wobei %02d bedeutet, dass Minuten und Sekunden zweistellig sind und alle weniger als zweistelligen Werte mit führenden Nullen aufgefüllt werden.
gtk_label_set_text setzt die gerade generierte Zeitzeichenkette als Text des Label-Elements, um die Stoppuhranzeige zu aktualisieren.
return G_SOURCE_CONTINUE teilt dem GTK-Timer mit, den Timer nach Abschluss des Callbacks fortzusetzen, damit das nächste Timer-Ereignis erneut ausgelöst wird. Wenn der Callback G_SOURCE_REMOVE zurückgibt, wird der Timer gestoppt.

Zusammenfassend ist die timer_callback-Funktion dafür verantwortlich, die Stoppuhrzeit dynamisch zu aktualisieren, indem die Anzahl der vergangenen Sekunden erhöht wird, während die Stoppuhr läuft, die Minuten und Sekunden als Zeichenkette formatiert werden und diese dann als Text des Label-Widgets gesetzt wird.

Implementieren von Button-Klick-Callbacks

Wir benötigen Callback-Funktionen für die Start/Pause- und Reset-Buttons.

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 wechselt den Zustand der Stoppuhr zwischen Laufend und Pausiert.
reset_button_clicked setzt den Stoppuhr-Timer zurück.

Erstellen der Hauptfunktion und der UI-Elemente

Jetzt erstellen wir die main-Funktion und richten die Benutzeroberfläche ein.

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

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

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // Set the window title
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // Set the default window size
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // Connect the window close event

    grid = gtk_grid_new(); // Create a grid layout
    gtk_container_add(GTK_CONTAINER(window), grid); // Add the grid to the window

    label = gtk_label_new("00:00"); // Create a GTK label initially displaying "00:00"
    gtk_widget_set_hexpand(label, TRUE); // Allow the label to expand horizontally
    gtk_widget_set_vexpand(label, TRUE); // Allow the label to expand vertically
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // Add the label to the grid

    start_stop_button = gtk_button_new_with_label("Start"); // Create a button with the label "Start"
    gtk_widget_set_hexpand(start_stop_button, TRUE); // Allow the button to expand horizontally
    gtk_widget_set_vexpand(start_stop_button, TRUE); // Allow the button to expand vertically
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // Connect the button click event
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // Add the button to the grid

    reset_button = gtk_button_new_with_label("Reset"); // Create a button with the label "Reset"
    gtk_widget_set_hexpand(reset_button, TRUE); // Allow the button to expand horizontally
    gtk_widget_set_vexpand(reset_button, TRUE); // Allow the button to expand vertically
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // Connect the button click event
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // Add the button to the grid

    gtk_widget_show_all(window); // Show the window and all its child widgets

    timer_id = g_timeout_add(1000, timer_callback, NULL); // Create a timer that triggers every 1000 ms (1 second) and calls timer_callback

    gtk_main(); // Start the GTK main event loop

    return 0;
}

Die main-Funktion richtet das GTK-Fenster, die Labels, die Buttons und deren Klickereignis-Handler ein.

Projekt kompilieren und ausführen

Nachdem wir die Stoppuhr-Anwendung erstellt haben, können wir sie kompilieren und ausführen.

Öffnen Sie Ihr Terminal und navigieren Sie in das Projektverzeichnis.

cd ~/project

Kompilieren Sie den Code mit dem folgenden Befehl:

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

Führen Sie die Anwendung aus:

./stopwatch

Sie sollten ein Fenster mit der Stoppuhr sehen. Klicken Sie auf die Schaltfläche Start, um den Timer zu starten, auf Pause, um ihn anzuhalten, und auf Reset, um den Timer zurückzusetzen.

Stoppuhr-App-Demonstration

Zusammenfassung

In diesem Projekt haben wir eine einfache Stoppuhr-Anwendung mit der GTK-Bibliothek in C erstellt. Wir haben die Projekt-Dateien eingerichtet, Variablen definiert, eine Timer-Callback-Funktion implementiert und Button-Klick-Callbacks erstellt. Die Anwendung ermöglicht es Ihnen, die Stoppuhr zu starten, anzuhalten und zurückzusetzen. Sie können sie ausführen, indem Sie den Code kompilieren und das resultierende Programm ausführen.