Raspberry Pi Touchscreen Kiosk 
Saturday, July 16, 2016, 04:21 PM - Tutorials

Raspberry Pi Browser Kiosk


Purpose:


So you've got a Raspberry Pi and a touchscreen, and you want to make it boot straight into a fullscreen web browser in kiosk mode. You also might want it to display a screen with some buttons that do things like reboot or shut down.

Example:




Requirements:


- A Raspberry Pi. This has been used on an original Pi B, and a Pi 3, so I figure it will work on pretty much anything in between.
- A touchscreen. This has been used with a couple of different touch screens. Getting your touchscreen to work is a whole nuther project. Here are the two I have used:
-- a very cheap HDMI+hat touchscreen, mounted to my Pi 3: https://www.amazon.com/gp/product/B00YE1E1UQ
-- a very cheap hat-only touchscreen, mounted to my original Pi:
https://www.amazon.com/Adafruit-PiTFT-480x320-Touchscreen-Raspberry/dp/B01F80RRN4/

Instructions



1. start with a working raspbian, and working touch screen



2. install the matchbox window manager and surf


sudo apt-get install matchbox-window-manager surf


3. create ~/.xsession file with the following:


#!/bin/bash
surf http://www.google.com &
exec matchbox-window-manager -use_titlebar no


4. reboot and observe that the pi boots to a kiosk screen



5. install the packages needed to get a webpage doing things like reboot or halt


sudo apt-get install suckless-tools lighttpd php5 php5-cgi
sudo lighty-enable-mod fastcgi-php
sudo /etc/init.d/lighttpd force-reload


6. give the www-data user access to shutdown/reboot.


add the following via visudo:
www-data ALL=NOPASSWD: /sbin/shutdown, /sbin/halt, /sbin/reboot, /sbin/poweroff


7. create /var/www/html/kiosk.php, with the following:


<?php

if (isset($_POST['submit'])){
if ($_POST['submit']=='reboot'){
$cmd='sudo reboot';
$ret=exec($cmd, $out);
}
if ($_POST['submit']=='shutdown'){
$cmd='sudo shutdown -h now';
$ret=exec($cmd, $out);
}
}

// get ip address
$cmd='hostname -I';
$ret=exec($cmd, $out);
$http_host=$out[0];

echo <<<eohtml
<html>
<head>
<style>
.formbutton {
width: 100px;
height: 50px;
}
</style>a
</head>
<body>
Raspberry Pi Menu:<br>
IP: {$http_host}<br>
<form name="frm" id="frm" method="post" action="">
<input class="formbutton" style="background-color: #F30;" name="submit" type="submit" value="reboot"><br>
<input class="formbutton" style="background-color: #F30;" name="submit" type="submit" value="shutdown"><br>
<input class="formbutton" name="submit" type="submit" value="reload"><br>
</form>
</body>
</html>
eohtml;
?>


8. modify ~/.xsession URL


Edit and point to http://localhost/kiosk.php and reboot

Comments

Add Comment
Fill out the form below to add your own comments.









Insert Special:






Moderation is turned on for this blog. Your comment will require the administrators approval before it will be visible.