Jan 22, 2017

Setting up a KIOSK with a Rasperry Pi


I was unable to find a website that listed these steps from start to finish in a way that worked for me so I thought I would gather them here and share what worked for me.

Raspberry Pi Kiosk

I was unable to find a website that listed these steps from start to finish in a way that worked for me so I thought I would gather them here and share what worked for me.

Summary: Using a Raspberry Pi Kiosk to display a webpage in kiosk mode requiring very little if any interaction to get the unit up an running and managed easily from another externally hosted CMS. The Raspberry Pi 3 comes with a 1.2GHz 64-bit quad-core ARM Cortex-A53 CPU and Integrated 802.11n wireless LAN and Bluetooth 4.1. We are running Kernel version 4.1 of Raspbian Jessie which is based on Debian Jessie.

Here is the link to the one I purchased from Amazon.

http://www.amazon.com/CanaKit-Raspberry-Complete-Starter-Kit/dp/B01C6Q2GSY?ie=UTF8&psc=1&redirect=true&ref_=oh_aui_detailpage_o00_s01

This came with everything you will need. Included was the case, SD card, power supply adapter, heatsinks and an HDMI cable. I plugged in a wireless logitech keyboard with the mouse built in. If you want to use just a standard USB cable, I was able to successfully power the unit simply from the TV's USB port.


Configuration Notes: I did not have to change a thing other than providing my wifi password to the Pi. You will want to confirm that it is set to Autologin To Desktop as user pi. Under interfaces...I found it a little easier to manage remotely via SSH so if that is how you want to configure this you will need to be sure SSH is enabled.

In a production setting...change the default password for user pi!


Step by Step Instructions

Step 1) Run some updates.

sudo apt-get update

Step 2) Install Chromium. You may have noticed from other tutorials that reference apt-get install chromium that this does not work. Thanks to this link: https://www.raspberrypi.org/forums/viewtopic.php?t=121195 I was able to get in installed with the following commands:

wget -qO - http://bintray.com/user/downloadSubjectPublicKey?username=bintray | sudo apt-key add -
echo "deb http://dl.bintray.com/kusti8/chromium-rpi jessie main" | sudo tee -a /etc/apt/sources.list
sudo apt-get update
sudo apt-get install chromium-browser

Step 3) Next you need to configure Chromium to autostart. Here is what worked for me:

mkdir ~/.config/autostart
sudo nano ~/.config/autostart/autoChromium.desktop

Copy the following in to the above file:

[Desktop Entry]
Type=Application
Exec=/usr/bin/chromium-browser --noerrdialogs --disable-session-crashed-bubble --disable-infobars --kiosk http://localhost
Hidden=false
X-GNOME-Autostart-enabled=true
Name[en_US]=AutoChromium
Name=AutoChromium
Comment=Start Chromium when GNOME starts

Step 4) You will want to hide the mouse when the screen loads.

sudo apt-get install x11-xserver-utils unclutter

Step 5) The following commands will prevent the screen from blanking out (power save) after a fixed period of time:

sudo nano /etc/lightdm/lightdm.conf

Scroll down to where you see [SeatDefaults] and add the following:

xserver-command=X -s 0dpms

Step 6) Install PHP and Apache.

sudo apt-get install apache2 php5

Once installed, you will want to modify index.html located at /var/www/html/index.html. In step 3 above, we configured Chromium to open at localhost and I'll explain why in a moment. Below is a working example. This does two things...one is that the localhost file is local, and will attempt to load without an internet connection. Let's say in step 3 you try to load www.google.com and you have a glitch in your connection, the kiosk will display page not found and there will be nothing to trigger a reload without your intervention. The below file will load your external URL in an iframe, and you can set it to either keep loading itself or you can cycle individual different pages...this way if for some reason your page doesn't load, it will automatically try again based on your settings specified (setInterval(next, 300000); // every 5 minutes)

 <html>
    <head>
        <title>Kiosk Frame</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
            }
        </style>

    </head>
    <body>
        <div id="content">
            <iframe id="rotate" name="rotate" width="100%" height="100%" frameborder="0" src="http://www.google.com"></iframe>
        </div>
        <script type="text/javascript">
          var urls = ['http://www.google.com', 'http://www.google.com'];
// Alternatively you can do multiple URL's
// var urls = ['http://www.google.com', 'http://www.yahoo.com'];

          var pos = 0;

          next();

          setInterval(next, 300000); // every 5 minutes

          function next()
          {
            if(pos == urls.length) pos = 0; // reset the counter
            document.rotate.location.href = urls[pos];
            pos++;
          }
        </script>
    </body>
</html>

Step 7) Reboot the unit...should load directly into Chromium with your selected webpage.

sudo reboot

Step 8) Managing Content: The URL's specified above can be managed within any content management system. I use CMS Made Simple with a very simple Bootstrap3 template. I have a News category called "Announcements" that create a news listings, I have one called "Alerts" that creates a single alert. This allows the client/customer/user an easy to way to manage the content...and with a little extra templating, the same content can be populating their website or app!


Installed ... powered by CMS Made Simple using the News module, some static content, and a small gallery (cycling through some weather images from the local TV station).



Category: General
Close Menu

Navigation