Build a kiosk with Raspberry
In this article I’ll explain how to build a kiosk with Raspberry Pi as a client computer, and a touch screen to view the contents and interact with the interface.
But what is a multimedia kiosk?
Well, in general a multimedia kiosk is nothing more than a device that allows the use of content in a controlled way.
What does it mean in a controlled way?
It means that when the kiosk is turned on it displays a pre-established initial page and from there the user can interact only with the active elements of the page that have been foreseen; they can be: buttons, images, modules. The user will never be able to leave the predetermined paths, nor will he be able to open other applications. In fact it is like a computer that can only run one program, and that program is not allowed to exit.
The multimedia kiosk allows the use of a minimal user interface, reduced to the bone precisely in order not to distract the user, to allow him to do only what the interface was designed for, and to do it in the simplest and most immediate way.
Multimedia kiosks are very present in our everyday life, even if we often don’t notice them. Think of the ATM, the queue booking system at the supermarket or post office, at petrol stations.
We often see them in the form of structures called multimedia totems, of all shapes and sizes.
The aim of the project: the viewing of PDF documents in Web pages
The specific project that led me to need a multimedia kiosk concerns a system for consulting PDF documents on the machine at different points in the factory production line.
I talk about this software project in the article View PDF documents with HTML5
In this article, I will only talk about how to create a web kiosk.
The choice of the main hardware components
The technological choice is dictated by some qualitative characteristics that one necessarily wanted to obtain:
- possibility of having a large screen, at least (from 24 inches upwards), of high quality, bright and suitable for industrial environments, therefore usable even with gloves
- use of touch interface
- cost-effectiveness and slenderness of the solution
The constraint is dictated by the size and quality of the screen that I wanted to achieve. If I initially thought of a tablet, I soon put aside the idea given that at most the tablets reach a size of 14 “, and are not designed for industrial use. Industrial tablets exist but they either cost a madness or are of Chinese production of dubious quality.
The solution clearly involves the use of a touch screen monitor of excellent features, combined with some device capable of acting as a kiosk.
Il monitor The monitor is a 10-point capacitive multi-touch screen designed for industrial use. This means that it can be used with bare hands, with gloves or with a stylus.
It is compatible with Windows, Mac, Linux and Android. it does not require the installation of any driver for the recognition of the touch interface. Just connect the USB cable to the PC and the touch interface works immediately.
It can be mounted on any support compatible with VESA 100mm, or using the supplied brackets even in a kiosk cabinet.
Found the monitor I had to find the device and the system to make it work as a kiosk.
Connecting a mini PC is doable, but spend at least € 500 per piece on hardware. Plus you have to buy some software solution that creates the kiosk for you.
I said to myself, “why don’t we try Raspeberry?” it costs around € 50, but together with the accessories you need (power supply, HDMI cable, plastic case, SD card, heatsinks) you get to around € 160.
Let’s stop for a second, I’ll explain what the Raspberry is.
What is the Raspberry Pi?
Raspberry Pi è un single-board computer, ovvero un computer a scheda singola, e può essere considerato un “mini computer”.
It is developed by the Raspberry Pi Foundation and consists of a single silicon board and which includes all the components essential to the operation of a computer.
It consists of a small motherboard on which there are:
- a 64-bit ARM processor
- a RAM bank. available in different denominations: 2GB, 4GB and recently also 8GB
- a USB-C type power port
- two Mini HDMI video outputs with resolution up to 4K
- a 3.5mm audio jack output
- two USB 2.0 ports
- two USB 3.0 ports
- an integrated Wi-Fi module (5 Ghz)
- a bluetooth 4.2 module
- one Gigabit Ethernet port
- an SD Card reader used as a “Hard Disk”
- 40 GPIO (General Purpose Input Output) lines, programmable digital lines to interface with the outside world.
There are several models on the market. The most recent is the Pi 4 Model B.
Il Rapsbery Pi 4, the one used for my project, is a model with only 2GB of RAM. However, there are versions on the market with 2GB, 4GB and even 8GB RAM memory cuts.
The dimensions of the Pi4 are : 88 x 58 x 19,5 mm and a weight of 46 grams.
Its size is so small that you can comfortably hold it in the palm of your hand.
Raspberry Pi 4 is available for purchase from the official website through distributors, and it is certainly worthwhile, by purchasing the accessories on Amazon. But delivery times are currently very long. I therefore recommend buying everything on Amazon. There are kits that contain in addition to the card, also: the plastic case, the power supply, the HDMI video cable, the heatsinks and the fan, the 32 GB SD card.
The cost on Amazon of the entire kit is about € 160 for the 4GB “Model B”.
1. Assemble the Raspberry
Below I will explain step by step how to proceed to transform your Raspberry into a kiosk.
If you bought only Raspberry you can skip this step, if you bought the kit instead The first step is:
1.1 Apply the heatsinks
It is good to take care to touch the card as little as possible with your bare hands. It is recommended to grab it by the edges or better still with latex gloves, this to avoid any damage to the electronic micro components due to the passage of electrostatic charges accumulated by our body or our clothes.
In the kit there are 3 small metal heat sinks equipped with double-sided adhesive. They simply need to be peeled and gently applied to the main chips on the card.
1.2 Insert Raspberry into the plastic case
Cases are usually push-fit. Sometimes like in my case, there are 4 screws for fixing the card to the case. the following video explains how simple it is to put everything together.
Mounting the fan is optional. I recommend mounting it if noise is not a problem.
The simplest way to connect the fan is to connect it directly to the + 5V power supply through pins 4 and 6 of the GPIO connector.
1.3 Download the operating system and load it onto the SD card
Nessun comNo computer can function without an operating system. The first thing to do then is to download and install one of the possible operating systems that are supported by Raspberry Pi 4.
The official operating system is called Raspbian. We will use just that.
To be able to transfer it to the SD Card we will use the software Raspberry Pi Imager. This actually can do everything in a single operation, that is to download the operating system and write it to the SD Card, nothing easier then.
Visit the site https://www.raspberrypi.com/software
Download the software for Windows, or for Mac or Ububtu x86, depending on the operating system you are using on your PC, and install it.
Click on CHOOSE ISO and choose Raspberry Pi OS (other) and then Raspberry Pi OS Lite (32-bit).
Insert the SD Card into the PC; if you don’t have an SD Card reader you can buy a USB adapter on Amazon for a few.
in Pi Imager Under: “SD Card” choose the drive letter corresponding to the SD Card just inserted.
Click on WRITE to start writing the operating system to the SD.
1.4 First switching on of the Raspberry
Remove the SD Card from the PC and insert it into the Raspberry.
Connect to the Raspberry:
- A USB keyboard
- a monitor via the Mini-HDMI to HDMI cable
- the USB-C power adapter
- the Ethernet cable to a network with internet access
Turn on the Raspberry using the switch. In fact, just power up the USB-C, there is no real switch.
When turned on, the Raspberry rearranges the partitions of the SD Card, and makes a first reboot. It will take a few minutes for you to log in.
At the end the writing will appear: raspberry pi login
Log in with username: pi
and password: raspberry
2. Step by step Raspberry configuration
2.1 Enable SSH (optional)
This chapter is optional!
If you prefer to connect to the Raspberry from a PC via SSH instead of connecting it to the keyboard and monitor, you can enable SSH in this way.
Once logged into the console, obtain the IP address of your Raspberry with the command:
ifconfig
In my case the address is 10.0.0.51
launch the raspi-config configuration tool with this command
sudo raspi-config
Enable SSH. From the main menu select the item 3 Interface Options and press ENTER
Then select <Yes>
At this point you can continue the configuration from a PC by connecting via SSH with the program putty. Download and launch PuTTY. Enter the previously obtained IP address in the “Host name (or IP address)” field. In my case it is 10.0.0.51 and click on OPEN to establish the connection.
Always log in with username: pi e password: raspberry all lowercase.
2.2 Package update
If the Rapsberry is connected to a network with internet access, update the packages with a few simple commands.
First of all, update the “raspi-config” configuration tool with the command:
sudo raspi-config
The following menu will appear from which we can configure many things.
The complete official guide to raspi-config can be found here The raspi-config Tool
How do you get around in raspi.config?
You can move through the various options with the arrow keys, you move between the choices <Ok> <Cancel> and <Finish> always with the arrow keys or the Tab key. Return to the previous screen with ESC and finally confirm with ENTER.
Select item 5 Update and press ENTER. This option updates the raspi-config tool.
Raspberry will download and install some packages and then reopen the raspi-config tool automatically.
Update all Raspbian Lite packages now with commands:
sudo apt-get update
sudo apt-get upgrade
it will take a few minutes to download and install all packages. At the end restart the Raspberry with the command:
sudo reboot
2.3 Language and location setting
Reconnect to the raspberry, enter user and password.
Re-enter into raspi-config:
sudo raspi-config
choose the item 5. Localisation Options and then ENTER
Choose the first option L1 Locale e INVIO
now this list appears:
Go down until you find the item it_IT.UTF-8 UTF-8 press the space bar to select it, an asterisk will appear to the left of the item
[*] it_IT.UTF-8 UTF-8
I recommend leaving this option selected as well: [*] en_GB.UTF-8 UTF-8
select <Ok> e press ENTER
the system asks for confirmation of the choice made as default “local”. After a few seconds you return to the main menu.
From the main menu choose again: 5. Localisation Options and confirm with ENTER
This time you choose: L2 Timezone and ENTER
Choose your country (in my case Europe) and ENTER
The list of possible time zones for the Europe area appears.
Select Rome and press ENTER. you are returned to the main menu.
From the main menu select once again: 5. Localisation Options e INVIO
this time select: L3 Keyboard
From the next list choose “Generic 105-key PC (intl.)“
and then “Italiana”
In the next two screens you will be asked which key to use in combination with other keys to compose special characters. Choose either way: Alt destro (AltGr)
As a last question, you are asked if you want to associate the exit from the X Server (the graphical environment) to the key combination Ctrl + Alt + Backspace, to return to the console. It may be useful to activate it when debugging, otherwise I suggest you choose
2.4 Activate the “Autologin”
A fundamental step if we want the kiosk to do something for us automatically when it is turned on is to activate the autologin. From the main menu choose: 1. System Options
and from the following menu choose: S5 Boot / AutoLogin
and finally choose: B2 Console Autologin
2.5 Network at Boot
To ensure that the device waits for the presence of the network before starting, launch raspi-config and go to the option:
1.System Options –> S6 Network at Boot
anche choose <Yes>.
2.6 Remove the black frame on the screen
Now connect the monitor you really intend to use in production and check whether or not a black frame appears all around between the output on the screen and the visible area of the monitor. To better understand what I mean, look at the following image.
If this frame is visible, it can be eliminated by disabling overscan. Follow the steps below.
From the main menu, enter the submenu: 2 Display options
and then: D2 Underscan
Select <No> and press ENTER
3. Installation of graphics libraries
Usually the graphical environment of a GNU / Linux distribution consists of four parts:
- server X (usually X.Org)
- a Window manager (Openbox, XFWM, …)
- a Desktop Environment (PIXEL, LXDE, MATE, …)
- a Login manager (for example LightDM)
We would just need to launch a web browser called Chromium (https://www.chromium.org/). Chromium is a free web browser created by Google. We will use this browser as a navigator.
It will therefore not be necessary to install all the packages mentioned above, as we would not have a real desktop environment. It will be sufficient to install:
- x-server-xorg is the X Window server,the engine that provides the graphical user interface
- x11-xserver-utils libraries supplied with the X server to manage input / output devices including keyboard, mouse, monitorm etc.
- xinit (https://wiki.debian.org/xinit), the program it is used for is used to start the X server and a first client program
- openbox (https://wiki.debian.org/Openbox), the window manager
everything is installed with a single command line:
sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox
4. Chromium installation
finally Install the Chromium browser, with the following command:
sudo apt-get install --no-install-recommends chromium-browser
5. Openbox configuration
Open the file /etc/xdg/openbox/autostart with the command:
sudo nano /etc/xdg/openbox/autostart
replace the contents of the file with the following:
# Disable any form of screen saver / screen blanking / power management
xset s off
xset s noblank
xset -dpms
# Allow quitting the X server with CTRL-ALT-Backspace
setxkbmap -option terminate:ctrl_alt_bksp
# Start Chromium in kiosk mode
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
chromium-browser --disable-infobars --kiosk 'http://your-url-here'
the first few lines disable the screen saver, and automatic shutdown.
the second group of lines set the exit from graphic mode (Server X) with the key sequence CTRL + ALT + BACKSPACE
finally, the last group of lines sets the launch of the Chromiums in “Kiosk” mode, that is full screen, without showing: address bar, status bar, forward / back buttons, browsing history, favorites, etc … nothing but nothing the content of the page you want to open.
Replace http://your-url-here with the address of your web portal that will manage the kiosk.
5.1 Force screen resolution
It may be useful to force a particular screen resolution.
Just add the following line to the autostart file, immediately after the command “xset -dpms”
xrandr -s 1280x720
5.2 Rotate the screen
You can rotate the screen 90 degrees to the left or right if you want. in this way it will be possible to have a “vertical” kiosk like those of Mc Donald’s to understand.
The command to add to the autostart file is:
xrandr -o left
The image on the monitor will be rotated 90 degrees to the left.
or even combined in one line with the screen resolution command:
xrandr -s 1280x720 -o left
6. Chromium configuration
Finally we tell Chromium to open in “kiosk” mode and without displaying the mouse pointer, since the interface will be a touch screen.
edit the file: .bash_profile
sudo nano /home/pi/.bash_profile
warning: pi is the default raspberry username. You may have configured another user, in that case the command will be:
sudo nano /home/otheruser/.bash_profile
copy these commands into it:
[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor
the condition verifies that X starts only on the first console. The autologin set above actually activates the first console, and then automatically starts the X server.
ATTENTION: the last part of the command :, that is the string: -nocursor is used to NOT display the cursor. This is good if you are using a touchscreen display; if instead you intend to use the mouse I suggest you delete this string, otherwise you will not understand where you are moving the mouse pointer.
7. Reboot Raspberry
Reboot the raspberry to make your kiosk start.
sudo reboot now
Raspberry after reboot will launch “Server X” and subsequently Chromium and will open the latter in kiosk mode at the address specified at the end of the /etc/xdg/openbox/autostart file.
8. Using Wi-Fi (optional)
If you don’t want to use ethernet cables, you can take advantage of Raspberry’s integrated wi-fi card.
To connect it to your wi-fi network, follow these simple steps.
from raspi-config choose the options:
1.System Options –> S1 Wireless LAN
and type the SID (the name) of your Wi-fi network:
On the next screen, type the password of the wi-fi network or leave it blank if not present.
exit raspi-config tool and reboot the system.
9. Conclusions and next developments
The solution described is replicable for the most diverse uses.
In my article View PDF files with HTML5 I’ll explain you how I created the web-server part and the client-side PDF document viewer.
Want a vertical kiosk? watch this video
Other tricks and solutions to various problems you may encounter:
Here you can watch my interview at SERVERLAB where I talk about this project.
Help me support this blog
If you want you can help me concretely to support this blog. You can do it with a free donation, by credit card or paypal. I will be grateful to you.
