Raspberry Pi Touchpanel Kiosk Design

When using the Raspbian Buster desktop, the Chromium browser is included as a pre-installed software package.

For kiosk operation, several important factors should be considered:

  1. In addition to full-screen operation, there are numerous command line switches to tailor the operation of Chromium to fit your requirements (see also chrome://flags); and
  2. You may wish to disable the Chromium function keys (i.e. F1 to F12) to prevent keyboard operations from opening browser functions that will ruin the kiosk experience with; and
  3. Some JavaScript APIs require a secure connection due to Cross-Origin Resource Sharing (CORS) restrictions. If Chromium is running on the same Raspberry Pi that is serving the kiosk webpage, you can test your kiosk code with http instead of https with “–disable-web-security –user-data-dir=/tmp”; and
  4. You can disable the screen mouse pointer with the Linux command “unclutter”: and
  5. You can disable screen saver blanking and display power monitoring with the Linux command “xset”; and
  6. Your kiosk web application can be automatically started from a cron job at reboot. The cron enviornment typically requires the display to be specified with a command such as “–display=:0.0”.

A typical cron job to start a kiosk at reboot may look like:

# Run this script in display 0.0
export DISPLAY=:0.0
 
# Hide the mouse from the display
/usr/bin/unclutter -idle 1 &

#
# start Python app as root for port 80 (Python Flask)
#
cd /home/pi/KioskFolder
sudo ./kiosk.py &

#
# start chromium-browser in kiosk mode using port 80
#
/usr/bin/chromium-browser --noerrdialogs --disable-infobars --kiosk --disable-web-security --user-data-dir=/tmp --display=:0.0 --app=http://127.0.0.1/ &

#
# disable screen saver blanking and display power monitoring
#
/usr/bin/xset -display :0.0 s off
/usr/bin/xset -display :0.0 s noblank
/usr/bin/xset -display :0.0 -dpms

When using a touchpanel, you may see duplicate inputs (i.e. “bouncing”) on buttons or soft keys. Touchpanel bouncing can be filtered in JavaScript with two functions:

  1. If lastTouch is not equal to thisTouch, then no bouncing occured, use thisTouch.
  2. If lastTouch is equal to thisTouch then use “setTimeout(filterFunction,filterTime)” to set a filter time such as 100mSec to ignore thisTouch when it occurs less that 100mSec after lastTouch.

OTTStreamingVideo.net has extensive experience building embedded Linux kiosks and digital signage products employing two-way video and audio, touchpanels, sensor input, external device control, automatic web based content updates and uploads, and automatic web based software updates.

Please contact us for more information.

Comments are closed.