GTK Display Time in Glade Application

GTK display time in window using GTK+3, Glade and GLib functions. This tutorial shows how to write a GTK+ 3 application that displays the current time in a window. The application code is written in the C programming language. Glade is used to lay out the window and widgets. Below is an image that shows the finished application.

GTK Display Time Application
GTK Display Time Application

Displayed time is updated every second. A timer is used to generate a timer tick that updates the time label in the window.

Part 15 of GTK 3 Programming with C and Glade Tutorial

See the full GTK3 tutorial index

GTK Display Time Files

Use the GTK+ 3 Glade C programming template files to start the application. Modify the makefile to change the name of the output executable file. As shown in the makefile below, the TARGET executable name is changed to display_time.

makefile from the root directory of the project:

# change application name here (executable output name)

# compiler
# debug
# optimisation
# warnings



GTKLIB=`pkg-config --cflags --libs gtk+-3.0`

# linker
LDFLAGS=$(PTHREAD) $(GTKLIB) -export-dynamic

OBJS= main.o

all: $(OBJS)
 $(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)
main.o: src/main.c
 $(CC) -c $(CCFLAGS) src/main.c $(GTKLIB) -o main.o
 rm -f *.o $(TARGET)

If copying this makefile, remember to replace all of the indenting with tab characters for it to work without errors.

Creating the Glade File

The Glade file for the project found in the glade directory can be deleted as it contains some formatting that is not needed for this project. Create a new file using the Glade user interface designer program. Place this file in the glade directory of the project.

The following modifications must be made to the glade file. If you have been following the GTK Glade C programming tutorials on this website, you will know how to make all of these modifications.

  1. Place a new top-level window. Change the window ID to window_main. Change the window title to Time.
  2. Place a Box container in the main window with 2 items or sections.
  3. Change the box orientation to Horizontal.
  4. Place a label in the left section of the box container, and change its text to Current Time:
  5. Place a label in the right section of the box container, change its ID to lbl_time and its text to Time.
  6. Select the main window at the top right of Glade. Under the Signals tab at the bottom right of Glade, find the destroy signal. Use on_window_main_destroy as the handler for the destroy signal.
  7. Add padding and spacing as necessary to improve the layout of the widgets.

An image of the completed application window in Glade is shown below, followed by the Glade file itself.

The Display Time Application Window in Glade
The Display Time Application Window in Glade file from the project’s glade directory:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.18.3 -->
  <requires lib="gtk+" version="3.12"/>
  <object class="GtkWindow" id="window_main">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Time</property>
    <signal name="destroy" handler="on_window_main_destroy" swapped="no"/>
      <object class="GtkBox" id="box1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="margin_left">10</property>
        <property name="margin_right">10</property>
        <property name="margin_top">10</property>
        <property name="margin_bottom">10</property>
        <property name="spacing">7</property>
        <property name="homogeneous">True</property>
          <object class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">Current Time:</property>
              <attribute name="weight" value="bold"/>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          <object class="GtkLabel" id="lbl_time">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">Time</property>
              <attribute name="weight" value="bold"/>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>

To follow this tutorial, either make your own Glade file as already described, or copy the above code to a file called and save it to the project’s glade directory.

GTK Display Time Application Code

Below is a listing of the C code for this application. An explanation of the code follows.

main.c from the project’s src directory:

#include <gtk/gtk.h>

typedef struct {
    GtkWidget *w_lbl_time;
} app_widgets;

gboolean timer_handler(app_widgets *widgets);

int main(int argc, char *argv[])
    GtkBuilder      *builder; 
    GtkWidget       *window;
    app_widgets        *widgets = g_slice_new(app_widgets);

    gtk_init(&argc, &argv);

    builder = gtk_builder_new();
    gtk_builder_add_from_file (builder, "glade/", NULL);

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
    widgets->w_lbl_time  = GTK_WIDGET(gtk_builder_get_object(builder, "lbl_time"));
    gtk_builder_connect_signals(builder, widgets);
    // start 1 second timer
    g_timeout_add_seconds(1, (GSourceFunc)timer_handler, widgets);

    g_slice_free(app_widgets, widgets);

    return 0;

// handler for the 1 second timer tick
gboolean timer_handler(app_widgets *widgets)
    GDateTime *date_time;
    gchar *dt_format;

    date_time = g_date_time_new_now_local();                        // get local time
    dt_format = g_date_time_format(date_time, "%H:%M:%S");            // 24hr time format
    gtk_label_set_text(GTK_LABEL(widgets->w_lbl_time), dt_format);    // update label
    g_free (dt_format);
    return TRUE;

// called when window is closed
void on_window_main_destroy()

Using a structure to pass widget pointers to functions is explained in the tutorial GTK Glade Get Pointers to Widgets. Although only a pointer to the time label widget is needed, a structure is still used in this application.

The main functionality of the application comes from starting a timer that ticks every second. GLib functions are used to start a timer, get the current time and format the time to the desired format. GLib function names start with g_ (g underscore).

On every 1 second timer tick, a handler function is called that updates the time in the window. g_timeout_add_seconds() is used in main() to start a timer. A handler function is passed to this function, as well as a pointer to the widget structure allowing it to access the time label for displaying the time.

The user defined handler function timer_handler() uses g_date_time_new_now_local() to get the current time from the computer that it is running on. g_date_time_format() is used to format the the time string to 24 hour format displaying hours minutes and seconds.

After reading and formatting the time, the pointer dt_format points to a string in dynamically allocated memory in the desired format. This string is used to update the label in the main window. The dynamically assigned memory is recovered using g_free() before timer_handler() returns.

In order for the timer handler function timer_handler() to be called every second continually it must return TRUE. Returning FALSE from this function will destroy the timer.

11 thoughts on “GTK Display Time in Glade Application”

  1. Having only just come to grips with GTK+ I don’t understand the purpose of the line:
    g_slice_free(app_widgets, widgets);
    It doesn’t appear in the Hello World example so I guess it has to do with the timer.
    A web search hasn’t been very helpful, would you please explain this for me?

    1. OK, I found the answer in another of your tutorials;-) I never was one for following everything in order. Sorry for jumping the gun.

  2. I resorted to copying the code to be sure I hadn’t done something silly but I still get this message on the terminal once per second:
    (display_time:7631): Gtk-CRITICAL **: gtk_label_set_text: assertion ‘GTK_IS_LABEL (label)’ failed
    At this early stage in my GTK learning I’m not sure where to start looking for the reason for this; can you help, please? I installed using:
    sudo apt-get install libgtk-3-dev
    on my Linux Mint 17.2 Rafaela (Cinnamon 32 bit) machine.
    Your other examples have worked with no problems. Simply using printf(“%s\n”, dt_format); in the handler shows time on the terminal but there is no application window visible.
    (display_time:7705): Gtk-CRITICAL **: gtk_label_set_text: assertion ‘GTK_IS_LABEL (label)’ failed

    1. John, did you manage to find the problem? If not, you can send me your code or put it on pastebin or similar website and I can check it for you.

      1. OK, It is just your code pasted into my project, but here it is:

        *** Mangled code removed by moderator ***

        Thank you for looking at it.

  3. Hi,
    Just got back from a trip, sorry. Yes, I installed as instructed. I’ve just recopied the glade, src and make files from above, deleted .o and executable then made project but no difference when run. I guess there must be something in my installation somewhere so I’ll see if I can find it. Thank you for your assistance.

  4. I have worked my way through your tutorials today. As everyone says, they were excellent. Thank you very much.

  5. This is a well written tutorial which, I suspect, took a while to write, debug, and edit.

    Thank you very much for it!

    What’s the best way to get data from a UDP listen socket? I worry about holding up the main. Should I spawn a posix thread? My guess is fork() won’t work because address spaces are separate. The packets can be temporally spaced less than 5mSec.

    Thanks again,
    Gary Highberger

Leave a Reply

Your email address will not be published. Required fields are marked *