Ceci est une ancienne révision du document !
The first article showed how to install GTK4 and associated libraries and developed a program to create a window containing button and label widgets. This article shows how to create an alarm clock application with a Graphical User Interface (GUI). A screenshot of the GTK4 alarm clock application that has been developed using Ubuntu 24.04 is shown below. In this application a label widget for displaying the time, spin buttons for setting the alarm time (hour and minute) and a minimise button are going to be used. A grid container for positioning the widgets will also be used. Coding The Alarm Clock The full source code for this project can be downloaded using the web link below: https://github.com/crispinprojects/fullcircle Open and view the main.c file to follow the explanation below.
Two static integer variables called m_alarm_hour and m_alarm_min are declared. These are used to store the hour and minute values for a specific alarm time. The alarm clock is going to play some audio beeps when the desired time is reached. In this context the static keyword means that the variables are not available outside the source code file (main.c in this case) and they retain their value between multiple function calls. A set of GtkWidget pointers are created in the activate() function for the widgets to be used in the application. These include the window, grid container, time label, the minimise button and two spin buttons for setting the alarm hour and minute values. A window is created using gtk_application_window_new() and the window title set to “Alarm Clock” and the default size to 400×150. Then the grid layout container is created which arranges its child widgets in rows and columns. The function gtk_grid_set_column_homogeneous() is used to set all columns of the grid to have the same width. A label called label_time is created which will display the current time value. Two dummy spacer labels called label_spacer1 and label_spacer2 are used to help with grid alignment.
Two GtkAdjustment objects called adjustment_alarm_hour and adjustment_alarm_min are created. Adjustments are used by GtkSpinButton widgets to set the lower and upper bounds of step increments. The online GTK4 Application Programming Interface (API) documentation shows that the gtk_adjustment_new() constructor for creating a new GtkAdjustment takes the following parameter values: the initial value, minimum value, maximum value, step increment, page increment and page size. The GtkSpinButton widgets called spin_button_alarm_hour and spin_button_alarm_min allow a user to enter or change hour and minute numeric values within the 24 hour time bounds (e.g. hours can be changed from 0 to 23 and minutes from 0 to 59). Using g_signal_connect(), the spin button called spin_button_alarm_hour is connected to the callback function in the program named callbk_spin_alarm_hour() using the “value-changed” state of the spin button. Likewise the spin button called spin_button_alarm_min is connected to a function named callbk_spin_alarm_min() again called when the spin button numerical value is changed. Within these functions the value of the spin button is set to an integer using gtk_spin_button_get_value_as_int() so that the variables m_alarm_hour and m_alarm_min can be set.
Timer The GLib function g_timeout_add_seconds() can be used to create a timer. It allows a function to be called repeatedly until the function returns FALSE. The arguments are the interval (i.e. the time between calls to the function, in seconds), the function to call and the data to pass to the function. g_timeout_add_seconds(1, label_update, label_time); In this application, the first parameter is set to one second, the second parameter is set to the function named “label_update()” and the third to label_time. The label_update() function must match the signature of GSourceFunc which means that it must be a static member function, have return type of gboolean and have a parameter of gpointer. In this example it always returns TRUE and the gpointer data is the time label. The gpointer (generic pointer) was discussed in the last article and is untyped and requires casting. Here it is cast as a GtkLabel pointer using (GtkLabel*) so that the label_time widget can be updated with the time. See the GLib timeout_add_seconds() API information in the external links below for more information.
Inside the function “label_update()” GDateTime is used. This combines a date and time into a single structure and provides many methods to manipulate dates and times. The function g_date_time_new_now_local() is used to get the hour and minute in the local time zone. Then g_date_time_format() is used to format the time value and then gtk_label_set_text() is used to set the time label text. If the hour value equals the m_alarm_hour and the minute value equals the m_alarm_min then an audio alarm WAV file called alarm.wav is played using the system command. Minimise The button widget called button_minimise connects to a callback named callbk_button_minimise() using the clicked state of the button. Again g_signal_connect() is used to link the button to the callback function named callbk_button_minimise() using the “clicked” state of the button. Notice that the window is passed as the gpointer parameter. This enables the use of gtk_window_minimize() to minimise the alarm clock when the button is clicked so that it is out of sight while it ticks away until the alarm time is reached.
Grid Container The gtk_grid_attach() function is used to position the child widgets on the grid. The GTK4 API shows that it takes the following parameters: the grid pointer, the child widget pointer, the column, the row, the width and the height. The position of the child widget is determined by the column and row values. The number of “grid cells” that the child widget will occupy is determined by the width and height. For example, the button_minimise widget is positioned on the first column and on the fifth row. It has a width of four cells and a height of one. The function gtk_window_set_child() is used to set the grid as the child widget of the window and then gtk_window_present() is used to show the window. Make The Makefile to build the application is included in the download. As discussed in the first article run the “make” command in the project directory to build the alarm clock application. An executable called “alarmclock” is produced. Desktop File A desktop file for the alarm clock can be created using the application ID which is set to “org.gtk.alarmclock”. Create a directory called “Software” in the home directory and inside this a sub-directory called “alarmclock”. Place the alarmclock executable and the audio file alarm.wav in this. Then save a file called “org.gtk.alarmclock.desktop” to the hidden local directory “.local/share/applications” with the contents below. Substitute your own user name where it says “your-user-name”
[Desktop Entry] Version=0.1.0 Type=Application Name=Alarm Clock Comment=Alarms Exec=/home/your-user-name/Software/alarmclock/alarmclock Path=/home/your-user-name/Software/alarmclock Icon=“time.svg” The alarm clock will pop up in the applications list so that it can be pinned to the dash. This article provides an overview of the source code which can be downloaded for further study. External Links GTK4 Widget Gallery https://docs.gtk.org/gtk4/visual_index.html GTK4 API documentation https://docs.gtk.org/gtk4/index.html GLib API documentation https://docs.gtk.org/glib/index.html GLib timeout_add_seconds https://docs.gtk.org/glib/func.timeout_add_seconds.html