 November 2016
A Raspberry PI touch-screen information kiosk project written in C++ using Qt 5. This fullscreen GUI application was written using Qt Creator running on Raspbian Linux.
The project demonstrates how to write a full-screen application for the Raspberry PI using Qt Creator. A Raspberry PI and official touchscreen is used to demonstrate a simple information kiosk for a shopping mall.
The application has a main screen that displays the layout of a simple shopping mall with four shops. When a button for the corresponding shop is touched on the touchscreen, the information page for the shop is displayed. Each information screen has a button for returning to the main application screen.
The video below shows the information kiosk application running on a Raspberry PI with touchscreen.
Can't see the video? View on YouTube →
For a GTK Glade C version of this project see Raspberry PI Information Kiosk GTK+ 3
Before an application can be developed using Qt, Qt Creator, Qt libraries and a C++ compiler must be installed on the Raspberry PI.
Also learn how to create a simple project in Qt Creator. Although these links show how to install software and start Qt development on a Linux Mint computer, the tutorials work on a Raspberry PI.
It is very difficult to lay out a screen graphically using Qt Creator on the small Raspberry PI touchscreen that has a screen resolution of 800 × 480 pixels. To avoid this limitation, the information kiosk Qt Creator project was developed using a normal LCD monitor and then the application files were copied to the touchscreen Raspberry PI for execution.
Amazon.com
Amazon.co.uk
All of the files for this project can be found on the Starting Electronics Qt-5-Kiosk GitHub page.
A main folder called rpi_qt_kiosk_dev contains the Qt Creator project with the following folders.
After the project is built, only the executable file (rpi_qt_kiosk) from the release build folder of the project and the images in the res folder need to be copied to the target Raspberry PI.
There are five PNG image files in this project – one for the main window showing the mall layout. The other four image files display the information for each of the shops in the mall.
Having the image files separate from the code allows the images to be developed by a graphic designer who does not need any knowledge of programming. Updates can be made to the mall image and shop information images by simply editing the image files without the need to rebuild the application.
The image files were developed using Inkscape and exported as PNG files. The original files in SVG format that can be edited using Inkscape can be found in the res folder of the GTK / Glade version of this project.
The project contains the following source code files in the rpi_qt_kiosk folder.
main.cpp – file containing the main() function which is the entry point of the application.
mainwindow.h and mainwindow.cpp – MainWindow class of the project that contains code for the main window form mainwindow.ui. This form and code is the main application window that contains four buttons and the main mall image.
dialog.h and dialog.cpp – Dialog class for the shop information window form dialog.ui. This window is used for all four shop information screens. A different image is loaded to this same window depending on which button was clicked or touched on the main window.
An explanation of how the project was created and modified follows.
Start an initial Qt Widgets Application project in Qt Creator. The default main window is used as the main application window.
The default window in Qt creator has a menu bar, tool bar and status bar – remove these from the window form in Qt Creator in design mode.
To make the window a fixed size of 800 × 480 to fit the official Raspberry PI touchscreen, change the width and height values of both the minimumSize and maximumSize parameters for the main window form to 800 for width and 480 for height. Change width and height for geometry to 800 and 480 respectively.
Size Settings for the Qt Application Main Window
Because this is a fullscreen application, the title bar that usually appears at the top of the window with the application name must be removed. This is done in the main.c source code file.
main.c
#include "mainwindow.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; // hide the window title bar, but let the window be closed using Alt + F4 w.setWindowFlags(Qt::Window | Qt::FramelessWindowHint | Qt::WindowCloseButtonHint); //w.show(); w.showFullScreen(); return a.exec(); }
The setWindowFlags() MainWindow member function is used to hide the title bar.
showFullScreen() is called instead of show() so that the application covers the entire touchscreen area including the Raspbian desktop top bar.
Four buttons and a Graphics View widget must be added to the main window. The Graphics View widget is used to display an image file. Drag and drop four Push Button widgets onto the main window. Drag and drop a Graphics View onto the main window.
Group the four buttons by clicking the first one to select it. Now hold down the Ctrl key and click each of the other buttons to select them. Click the Lay Out Vertically button on the top toolbar (or press Ctrl + L) to group them together.
Select all of the buttons again and change the sizePolicy parameters Horizontal Policy and Vertical Policy both to Expanding. Now position and size the vertical layout box that contains the buttons. They will expand to the size of the box.
Change the following parameters of the Graphics View (QGraphicsView) object on the form: under QFrame, change frameShape to NoFrame, change frameShadow to Plain and change lineWidth to 0.
Finally change the the ObjectName of the four buttons to btn_shop1 to btn_shop4 from top to bottom for all four buttons. Change the text of each button to the name of each shop as shown in the image below.
Qt Application Main Window – Click for a bigger image
Add a new dialog window to the project by selecting File → New File or Project... in Qt Creator. In the New File or Project dialog box, select Qt under Files and Classes and then Qt Designer Form Class. Click the Choose... button. Select Dialog without Buttons and click the Next > button. Click Next > again and then Finish.
Change the size of the dialog box to 800 × 480 in the same way as was done for the main window. Add a single button and a graphics view to the dialog box and change the graphics view object properties to the same as the main window's.
Change the text of the button to Back and the ObjectName of the button to btn_back. Position and size the button and graphics view as shown in the following image.
Shop Dialog Window in Qt Creator – click for a bigger image
Right click the Back button in the dialog box. Click Go to slot... in the menu that pops up. Choose clicked() in the dialog box that pops up and then click the OK button. This adds the handler function for the button click event.
The Dialog box must be made to hide the title bar in the same way as the main window. It must also load the correct image file to be displayed in the graphics view object and close the dialog box when the back button is clicked.
Open dialog.h and modify its code as follows.
dialog.h
#ifndef DIALOG_H #define DIALOG_H #include <QDialog> #include <QGraphicsPixmapItem> namespace Ui { class Dialog; } class Dialog : public QDialog { Q_OBJECT public: explicit Dialog(QString img_file, QWidget *parent = 0); ~Dialog(); private slots: void on_btn_back_clicked(); private: Ui::Dialog *ui; // needed for displaying image in QGraphicsView of window QGraphicsScene* scene; QGraphicsPixmapItem* item; }; #endif // DIALOG_H
A header file QGraphicsPixmapItem is included at the top of dialog.h. The constructor of the Dialog class is modified so that a QString can be passed to it. The QString will contain the path to, and the name of, the image file to display in the dialog box.
Two pointers are added to the class (scene and item) that are needed in order to display an image.
Now open the dialog.cpp file and make the following changes.
dialog.cpp
#include "dialog.h" #include "ui_dialog.h" Dialog::Dialog(QString img_file, QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { ui->setupUi(this); // hide the window title bar, but let the window be closed using Alt + F4 this->setWindowFlags(Qt::Window | Qt::FramelessWindowHint | Qt::WindowCloseButtonHint); // display the image in the window QGraphicsView box ui->graphicsView->setStyleSheet("background-color: transparent;"); scene = new QGraphicsScene(); ui->graphicsView->setScene(scene); item = new QGraphicsPixmapItem(QPixmap(img_file)); scene->addItem(item); // move cursor off screen so that it does not land on top of a button and highlight it QCursor::setPos(800, 480); this->showFullScreen(); } Dialog::~Dialog() { delete ui; } void Dialog::on_btn_back_clicked() { // move cursor off screen so that it does not land on top of a button and highlight it QCursor::setPos(800, 480); this->close(); }
The constructor is modified to take the QString parameter passed to it. The title bar is then hidden in the same way as done for the main window. Code is added to display the image file that is passed to the constructor. The cursor is moved off screen to make sure that it does not hover above any button which will highlight the button. Finally the dialog window is made full screen that same way as the main window was.
In the click handler for the back button (on_btn_back_clicked()), the cursor is moved off screen again and the dialog window is closed.
Make the following changes to the mainwindow.h file.
mainwindow.h
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QGraphicsPixmapItem> #include "dialog.h" namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private slots: void on_btn_shop1_clicked(); void on_btn_shop2_clicked(); void on_btn_shop3_clicked(); void on_btn_shop4_clicked(); private: Ui::MainWindow *ui; // needed for displaying image in QGraphicsView of main window QGraphicsScene* scene; QGraphicsPixmapItem* item; // shop window for the four shops Dialog* shop_win; }; #endif // MAINWINDOW_H
Include header files QGraphicsPixmapItem and dialog.h. Change to the form view of the main window and add click handlers for each of the buttons on the form as done for the dialog box. These new functions will appear in mainwindow.h.
Add pointers to scene and item as shown in the above code. Add a Dialog pointer called shop_win.
Modify mainwindow.cpp as follows.
mainwindow.cpp
#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); // display the image in the main window QGraphicsView box ui->graphicsView->setStyleSheet("background-color: transparent;"); scene = new QGraphicsScene(); ui->graphicsView->setScene(scene); item = new QGraphicsPixmapItem(QPixmap("res/mall.png")); scene->addItem(item); shop_win = NULL; } MainWindow::~MainWindow() { if (shop_win != NULL) { delete shop_win; } delete item; delete scene; delete ui; } void MainWindow::on_btn_shop1_clicked() { if (shop_win != NULL) { delete shop_win; } shop_win = new Dialog("res/shop1.png"); } void MainWindow::on_btn_shop2_clicked() { if (shop_win != NULL) { delete shop_win; } shop_win = new Dialog("res/shop2.png"); } void MainWindow::on_btn_shop3_clicked() { if (shop_win != NULL) { delete shop_win; } shop_win = new Dialog("res/shop3.png"); } void MainWindow::on_btn_shop4_clicked() { if (shop_win != NULL) { delete shop_win; } shop_win = new Dialog("res/shop4.png"); }
In the constructor add code to display the main mall.png image file. Add code to delete objects in the destructor. In each button click handler add the code that opens the dialog box, sending it the correct image file to display.
In order for the images to be displayed in the windows of the application, they must be copied into a folder called res which must be in the same folder as the application executable file. This means making a res folder in both the debug and release folders of the project, each containing the 5 images for the application. The release folder will not exist yet if a release version of the project has not been built.
In order to hide the cursor on the dialog and main windows, change the cursor to Blank under QWidget in the form editing view of both windows. Be sure to select the window in the design view and not the last widget edited when changing the cursor.
During development, the application can be closed by pressing Alt + F4 on the keyboard.
To run the executable file on a target system, such as a Raspberry PI with touchscreen, copy the rpi_qt_kiosk executable to a folder on the target system. Also copy the res folder with the five PNG images into the same folder as the executable file.
If the target system does not have the Qt development tools installed, the executable file will probably not run. In this case install the Qt 5 runtime library. This can be done with the following command on a Raspberry PI running Raspbian:
sudo apt-get install libqt5declarative5