Starting Electronics Needs Your Help!
It is that time of the year when we need to pay for web hosting and buy new components and equipment for new tutorials. You can help by making a donation. Contribute to this website by clicking the Donate button. The total will be updated once daily. (You may need to clear your browser cache to see the updates.)

Target Amount: $2000
Amount Raised: $359

Donations Received

Top Donor: D.C. $30

X

Raspberry PI Information Kiosk GTK+ 3

Created on: 26 November 2016

A Raspberry PI touch screen information kiosk using the official Raspberry PI touchscreen. The information kiosk software application is programmed in the C programming language using GTK+ 3 and the Glade user interface designer. It runs on Raspbian Linux.

This Raspberry PI touchscreen project demonstrates how to write a full screen GUI application for the Raspberry PI. The GTK+ 3 application is a simple shopping mall touchscreen information kiosk with a layout of the mall consisting of four shops. A touch button for each shop allows information about the corresponding shop to be displayed.

The image below shows the main screen of the application. If any of the buttons is touched on the touch screen, an information screen for the corresponding shop is displayed. The shop's information screen has a back button for returning to the main application screen.

Raspberry PI Information Kiosk Application using GTK+ 3 and Glade

Raspberry PI Information Kiosk Application using GTK+ 3 and Glade

The video below shows the Raspberry PI kiosk application in use. The application is tested using a mouse instead of the touchscreen in this video to make capturing of the video on the screen easier.

Can't see the video? View on YouTube →

For a Qt C++ version of this project using Qt Creator see Raspberry PI Qt Information Kiosk

Raspberry PI GTK+ 3 Application Development

This kiosk application was developed using a set of template files that make starting a new GTK project easy. Glade was used to lay out the windows / screens in this application. Glade user interface designer is an application that allows visual layout of GUI windows, screens and widgets.

Before a GTK+ 3 C application using Glade can be developed, software tools and libraries must be installed on the Raspberry PI.

Code for this project was developed using the GTK+ 3 Glade C programming template files from the Programmer's Notes website.

To get started with GTK and glade and to understand how to write a basic GTK/Glade C program, refer to the GTK Glade C programming index page at Programmer's Notes. Although these tutorials and the above links refer to installing the tools and programming GTK on a Linux Mint computer, they all work on a Raspberry PI as Raspbian and Linux Mint are both based on Debian Linux.

Amazon.com

Amazon.co.uk

Raspberry PI Information Kiosk Source Code

Source code for this project is included below. A description of how the project was developed follows.

A main project folder contains the following folders and files:

  • glade – Glade window files for the main screen and information screens.
  • res – Images used in the application for the mall layout and information screens.
  • src – C source file main.c
  • makefile – make file for building the project.

Full code and image files can be found at GitHub on the GTK-3-Kiosk page.

Image Files

Five image files are used in the project and are saved in PNG format. One image contains the mall layout on the main screen. Four additional images are used, one for each of the four information screens.

Placing the mall layout and shop information screens in image files allows the information on these screens to be updated without having to recompile the program. This allows the images to be developed by a graphic design department for example, where no knowledge of programming is needed.

The image files were drawn using Inkscape, saved as SVG files and then exported to PNG format.

The res folder of the project contains the following files:

  • mall.svg – main screen image mall layout development file.
  • mall.svg.png – main screen mall PNG image.
  • shop1.png – shop1 PNG image.
  • shop1.svg – shop 1 development file.
  • shop2.png – shop 2 PNG image.
  • shop2.svg – shop 2 development file.
  • shop3.png – shop 2 PNG image.
  • shop3.svg – shop 3 development file.
  • shop4.png – shop 4 PNG image.
  • shop4.svg – shop 4 development file.
  • shop_template.svg – template for starting new corretly sized shop images.

Only the PNG files are needed by the application. All the SVG files were created in Inkscape and used to develop the image files.

Glade Files

One Glade file is used for the main application window. It contains the mall image and four buttons for displaying the information for each shop in the mall.

A second Glade file is used by each shop screen. The shop screens are identical, except for the image file that each one contains. When a shop screen is loaded, it uses the single shop Glade file and then loads the correct image depending on which button was clicked. This functionality is programmed in the C code.

The Glade files for this project are found in the glade folder of the project and are described below.

  • window_main.glade – Glade file for the main window of the application.
  • shop.glade – Glade file shared by the four shop windows.

GTK+ 3 C Source Code

Below is the C source code for the project from main.c which is the only C code file in the project. The code can also be found in the src folder of the project.

//---------------------------------------------------------------------
//  Program:      rpi_gtk_kiosk
//
//  Description:  Raspberry PI Shopping Mall Information Kiosk
//                - Displays a main window with mall map and buttons
//                - Clicking any button opens a corresponding window
//                  with information on a shop in the mall
//                - Each shop window has a back button that closes the
//                  window reverting back to the main mall window
//
//  Build info:   Built using Glade and GTK+ 3
//                Compiled using GCC
//
//  Date:         25 November 2016      Author: W.A. Smith
//                http://startingelectronics.org
//---------------------------------------------------------------------
#include <gtk/gtk.h>
#include <X11/Xlib.h>

GtkWidget* win_new_glade(char *glade_file, char *win_name, char *image_shop);
void HideCursor(GtkWidget *window);
void MoveCursor(int x, int y);

int main(int argc, char *argv[])
{
    GtkBuilder      *builder; 
    GtkWidget       *window;

    gtk_init(&argc, &argv);

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

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
    gtk_builder_connect_signals(builder, NULL);

    g_object_unref(builder);

    gtk_window_fullscreen(GTK_WINDOW(window));
    
    MoveCursor(800, 480);   // move cursor off screen
    gtk_widget_show(window);                

    HideCursor(window);
    
    
    gtk_main();

    return 0;
}

// button click handlers for the shops
void on_btn_shop1_clicked()
{
    win_new_glade("glade/shop.glade", "window_shop", "res/shop1.png");
}

void on_btn_shop2_clicked()
{
    win_new_glade("glade/shop.glade", "window_shop", "res/shop2.png");
}

void on_btn_shop3_clicked()
{
    win_new_glade("glade/shop.glade", "window_shop", "res/shop3.png");
}

void on_btn_shop4_clicked()
{
    win_new_glade("glade/shop.glade", "window_shop", "res/shop4.png");
}

// close window when back button is clicked in any shop window
void on_btn_back_clicked(GtkWidget *widget, gpointer data)
{
    gtk_widget_destroy(data);
}

// close the main window when Alt + F4 pressed - needed during development
void on_window_main_destroy()
{
    gtk_main_quit();
}

// window creation utility function
// creates a window from a glade file and displays the selected image in the window
GtkWidget* win_new_glade(char *glade_file, char *win_name, char *image_shop)
{
    GtkBuilder      *builder;
    GtkWidget       *window;
    GtkWidget       *image;
    
    builder = gtk_builder_new();
    gtk_builder_add_from_file (builder, glade_file, NULL);

    window = GTK_WIDGET(gtk_builder_get_object(builder, win_name));
    gtk_builder_connect_signals(builder, NULL);
    
    image = GTK_WIDGET(gtk_builder_get_object(builder, "img_shop"));
    gtk_image_set_from_file(GTK_IMAGE(image), image_shop);

    g_object_unref(builder);

    // prevent cursor from briefly appearing between screen changes
    MoveCursor(800, 480);   // move cursor off screen
    gtk_widget_show(window);
    
    HideCursor(window);
    
    return window;
}

void HideCursor(GtkWidget *window)
{
    GdkDisplay      *display;
    GdkCursor       *hideCursor = NULL;
    GdkWindow       *gdk_window;
    
    // hide cursor
    display = gdk_display_get_default();
    hideCursor = gdk_cursor_new_for_display(display, GDK_BLANK_CURSOR);
    gdk_window = gtk_widget_get_window(window);
    gdk_window_set_cursor(gdk_window, hideCursor);
}

void MoveCursor(int x, int y)
{
    Display *dpy;
    Window root_window;
    
    dpy = XOpenDisplay(0);
    root_window = XRootWindow(dpy, 0);
    XSelectInput(dpy, root_window, KeyReleaseMask);
    XWarpPointer(dpy, None, root_window, 0, 0, 0, 0, x, y);
    XFlush(dpy);
}

The C code creates the main application window from the window_main.glade file. It then connects the signals from the buttons on the main window to the functions that will run when they are clicked.

Because this is a touchscreen application, the cursor is moved off the screen and hidden. It is moved off the screen to prevent a brief flicker of the cursor that would otherwise occur.

A function will run when each button on the main window is clicked (or touched on the touchscreen). For example on_btn_shop1_clicked() will run when the first button is clicked. When a button is clicked, the win_new_glade() function is called which is passed the correct PNG image file to display. This function creates a new window which contains the correct image file for the button clicked. The window has a "back" button which will close the window when clicked or touched, reverting back to the main application window.

win_new_glade(), HideCursor() and MoveCursor() are three utility functions which are self explanatory or contain comments in the source code describing their purpose.

Project makefile

The project makefile can be found in the rpi_gtk_kiosk_dev folder.

The make file is used to build the project by running make from the command line. It compiles the C source code and links in the GTK and other libraries needed by the application.

How the Kiosk GUI Appliction was Developed

Below are the main steps used to create the GTK Glade information kiosk application.

Both windows (the main window and the shop window) are set to the size of the Raspberry PI touchscreen which is 800 x 480 pixels. The Decorated setting of both windows is unchecked to remove the top title bar and make the window full-screen.

Note that it is very difficult to use Glade to design a window when used on a Raspberry PI with the touchscreen because everything is crammed into a small space on the screen. Development was done on a Linux laptop, then tested and refined on a Raspberry Pi with a big screen. The application was finally run on a touchscreen Raspberry PI.

Laying Out the Main Window in Glade

The image below shows the widgets placed on the main application window. A GtkBox is initially placed on the main window (box1 in the image). This box contains two sections and is set to horizontal orientation so that the buttons can be placed in the left section and the image in the right.

A second GtkBox is placed (box2), this time in the left section of the first box. This second box contains four sections, one for each button. A GtkImage is placed in the right section of the first box.

After a button is placed in each section of box2, a callback function for each of the buttons is set in Glade under the Signals tab.

To see the other settings for the widgets placed on the main window, open the window_main.glade file in the Glade designer application.

Widgets on the Main Application Window in Glade

Widgets on the Main Application Window in Glade

Laying Out the Shop Window in Glade

As can be seen in the image below, the shop window (shop.glade) was started the same way as the main Glade window – with a GtkBox set to horizontal orientation. A single button is placed in the left box section and a GtkImage is place in the right.

It is important to note that when the signal handler is set in Glade for the Back button, user data is set to "window_shop" under the signals tab. This allows the on_btn_back_clicked() callback function to get a pointer to the shop window in order to close it by calling gtk_widget_destroy().

Widgets on the Shop GTK Window in Glade

Widgets on the Shop GTK Window in Glade

Other Project Files

All files except the image files and the shop Glade file were part of the template files used to start the project.

The image files and makefile have already been explained above. The C source code was added to the project in main.c as described under the source code listing.

Building the Kiosk Application

The project is built by opening a terminal window on the Raspberry PI and changing to the project folder or directory containing the make file (makefile).

At the command line, enter make to build the project. The correct library files must be installed on the system for the project to build properly.

Entering make clean will delete the object file and application file enabling a clean build to be started from scratch if needed.

When the project has been built successfully, an executable application file called rpi_gtk_kiosk will appear in the main project folder. To run this application, double-click it in file manager or enter ./rpi_gtk_kiosk at the command prompt.











Payoneer