Raspberry Pi Kiosk
Raspberry Pi Setup
Modified procedure at Raspberry Pi Kiosk using Chromium.
1. Follow default setup of the RPi, including updates.
2. Install unclutter to hide the mouse when idle
sudo apt-get install unclutter
You might need to install sed as well, but that was pre-installed on my RPi.
3. Enable auto-login at
sudo raspi-config
Arrow down to "3 Boot Options" then "B1 Desktop / CLI" then "B4 Desktop Autologin". (I set "B2 Wait for Network at Boot" as well).
4. Create a bash script at /home/pi/kiosk.sh. (Note that "chromium-browser" may have changed name to just "chromium")
#!/bin/bash
xset s noblank
xset s off
xset -dpms
unclutter -idle 0.5 -root &
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' /home/pi/.config/chromium/Default/Preferences
sed -i 's/"exit_type":"Crashed"/"exit_type":"Normal"/' /home/pi/.config/chromium/Default/Preferences
/usr/bin/chromium-browser --noerrdialogs --disable-infobars --kiosk https://www.bio.fsu.edu/grad/kiosk/kiosk.html?kiosk=Unit%20I
This script:
- disables the screen saver (the xset commands)
- hides the mouse (unclutter)
- deletes any chromium crash notice settings (the sed commands)
- Points the pi to the kiosk.html webpage, with the physical location of the kiosk as a query parameter, eg
https://www.bio.fsu.edu/grad/kiosk/kiosk.html?kiosk=King%20Atrium
5. Create a system daemon service file kiosk.service, and copy it to /lib/systemd/system/kiosk.service (don't forget to use sudo to do the copying).
[Unit]
Description=Chromium Kiosk
Wants=graphical.target
After=graphical.target
[Service]
Environment=DISPLAY=:0
Environment=XAUTHORITY=/home/pi/.Xauthority
Type=simple
ExecStart=/bin/bash /home/pi/kiosk.sh
Restart=on-abort
User=pi
Group=pi
[Install]
WantedBy=graphical.target
To copy the service file:
sudo cp kiosk.service /lib/systemd/system/kiosk.service
Enable and start the service:
sudo systemctl enable kiosk.service sudo systemctl start kiosk.service
6. Reboot the Pi. Note: use sudo reboot to restart the pi from the command line.
To exit kiosk mode, use alt-space bar or alt-F4.
Chromium update pop-up fix
In February 2020 a bug in Chromium caused an update popup to appear. The following commands will delay displaying the update popup for 1 year (from Raspberrypi.org forum posting by ShiftPlusOne.
sudo touch /etc/chromium-browser/customizations/01-disable-update-check;echo CHROMIUM_FLAGS=\"\$\{CHROMIUM_FLAGS\} --check-for-update-interval=31536000\" | sudo tee /etc/chromium-browser/customizations/01-disable-update-check
Network Connectivity
Get the RPi ethernet MAC address with ifconfig eth0. If the RPi is on a DHCP setup, then you should see the assigned ip with ifconfig -a.
Remote Screensharing
For remote screensharing, follow procedure at Raspberry Pi Screen Sharing with TightVnc or Setting up VNC on Raspberry Pi for Mac access and Mac Screen and File Sharing.
Google Docs
1. Create a number of Google Presentations, with 1 slide per presentation. Only 1 slide per presentation, as the kiosk cycles through multiple presentations, and NOT the slides within a presentation.
2. Set share permissions on the presentation so that anyone with the link can edit the presentation (or however you want to control editing). Keep this link secret if anyone can edit it.
3. Via "File" -> "Publish to the Web" -> "Publish" button, get the public key for displaying the presentation, which is in the middle of the presentation link, eg:
https://docs.google.com/presentation/d/e/2PACX-1vTKawnqr671l-BcVQP0_dwK2pQDFdtM5RQZwxsF6hLOGZBk4kRIjcTwF6mCP_sknF12ZzEuBlm6aX1i/pub?start=false&loop=false&delayms=3000
(this is a public page which just displays the slide: this link can't be used for editing the presentation).
4. Set up a Google Sheet, with each row listing one of the Google Presentations, with columns for each of your kiosks.
- Column A: "Display" -- the name of each presentation (eg "Upcoming Event", "Public Service Announcement", "This Week's Seminar", etc.) You can link the name of the presenatation with it's shared editable link for convenience if desired, but not required.
- Column B: "URL" -- the public key of each presentation used in the "Publish to the Web" link (just the key, the kiosk page will fill in the rest of the url).
- Columns C-?: "<kiosk name>" -- The query key for each of your kiosks, eg. "Lobby", "Dept Office", etc. The cells in these columns indicate the number of seconds used to display each slide on that particular kiosk. Enter zero seconds to hide the slide from that particular kiosk.
Get the "Publish to Web" key for this Google Sheet via "File" -> "Publish to the Web" -> "Publish" button. This key (which is NOT the same as the shared link for editing) will be used by the website php script to get access to the sheet contents.
YouTube Video on the Kiosk
Google Slides makes it pretty easy to embed a YouTube video in a slide. Some tips to get them working on the kiosk:
1. Get the URL of the youtube video you want to display, eg. https://www.youtube.com/watch?v=B6suC_pPfqg . (NB: The "watch?v=" seems to be critical).
2. If you want closed captions /subtitles on the kiosk (because you probably won't want sound playing in the hallway), the captions HAVE TO BE EMBEDDED in the video: there does NOT appear to be way to have the youtube captions/subtitles displayed in the video embedded in a Google Slide without user interaction.
2. In Google Slides, set the Video Format -> Video playback -> check "Autoplay", so that the video plays automatically when the slide presentation starts (not sure if "Mute" needs to be checked)
3. On the Raspberry PI, you need to run the desktop version of Chrome to Preferences (chrome://settings) to Advanced -> Privacy and Security -> Site Settings -> Sound -> Allow -> Add -> add your kiosk site (eg. https://www.bio.fsu.edu/grad/kiosk), to whitelist your site so that videos will autoplay.
IMPORTANT: as far as we can tell, there is NO way to use the command line to set Chrome to autoplay a video inside a Google Slides inside an iframe, which is how the kiosk displays the slides. That means that the kiosk.sh script can't set this up for you, you have to use the desktop version of Chrome "in the real" to make the setting.
Kiosk Webpage
1. On the public website, install the following kiosk_slides.php file
<?php
header("Content-type: text/csv");
readfile('https://docs.google.com/spreadsheets/d/e/<google_sheet_key>/pub?gid=0&single=true&output=csv');
where <google_sheet_key> is the "Publish to Web" key for the google sheet listing the slides and display times (keep this a secret if there are shared links to the presentations in this sheet).
2. In the same directory as kiosk_slides.php, create the kiosk.html page. Each Pi kiosk will look at this page, which cycles through the presentations as specified in the google sheet. Note that there is nothing private (ie no secrets) in the webpage itself. Even accessing the kiosk_slides.php file will only display the google sheet contents with the public presenation keys (but not any shared editable links).
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="3600" /><!-- force refresh every 60 minutes, in case of changes to this page on the server-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Pi Kiosk</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<!-- integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" -->
</head>
<body>
<style>
html,body {
padding: 0;
margin: 0;
}
iframe {
display: block;
width: 1980px;
height: 1114px;
position:relative;
left:-28px;
top:-4px;
}
.slide {
width:1920px;
height:1080px;
overflow:hidden;
border:solid 1px gray;
}
</style>
<div id="slide0" class="slide">
<div style="text-align:center;margin-top:300px;"><h1>Announcements</h1></div>
</div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>
<div id="slide6" class="slide"></div>
<div id="slide7" class="slide"></div>
<div id="slide8" class="slide"></div>
<div id="slide9" class="slide"></div>
<div id="slide10" class="slide"></div>
<div id="slide11" class="slide"></div>
<div id="slide12" class="slide"></div>
<div id="slide13" class="slide"></div>
<div id="slide14" class="slide"></div>
<script>
/*
look up list of google presentations from a google sheet (retrieved by kiosk_slides.php)
filter the list by our kioskName, taken from ?kiosk=<kioskName> parameter
construct iframe based on "publish to web" url of the google presentation
assign each slide iframe to one of the predefined slide divs (#slide0-#slide<max_slides>)
based on display time in the google sheet, show then hide each slide div in sequence
*/
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function ParseGradPhileFormQuery(query) {
// note that fsuid, eval_year, eval_term, default_eval_year, default_eval_term, qr_abbr and auth are globals
var kiosk_param = getParameterByName("kiosk", query);
if (kiosk_param) {
kioskName = kiosk_param;
}
}
var kioskName = "_none";
const max_slides = 15;
var slides = [];
// get kioskName from query
ParseGradPhileFormQuery(window.location.search);
jQuery.get("kiosk_slides.php", function(slides_csv) {
var rows = slides_csv.split("\n");
var my_column_index = rows[0].split(",").indexOf(kioskName)
if (-1 == my_column_index) {
// unknown kiosk
return;
}
// remove header row
rows = rows.slice(1);
rows.forEach(function(r) {
var cells = r.split(",");
var display_time = parseInt(cells[my_column_index], 10);
if (0 != display_time) {
slides.push({
// url to display first slide of a google presentation
'url': "https://docs.google.com/presentation/d/e/" + cells[1] + "/embed?start=true&loop=false&delayms=60000",
'display_time': display_time * 1000
})
}
}); // next rows
if (slides.length == 0) {
// no slides allocated to this kiosk
return;
}
// we only have max_slides number of divs allocated for slides,
// so discard the excess slides
while (max_slides < slides.length) {
slides.pop();
}
var current_slide = 0;
// initialize content of slides
// TODO: put in status check before switching to this url
for (var i = 0; i < slides.length; i++) {
// iframe to display slide from google presentation
// width="2016" height="1134"
$("#slide" + i).html('<iframe src="' + slides[i].url + '" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>');
}
// cycle through the slides, delaying for the associated display_time before going to next slide
function updateSlide() {
current_slide = (current_slide + 1) % slides.length;
console.log("curent_slide: " + current_slide + " display_time: " + slides[current_slide].display_time);
$(".slide").hide();
$("#slide" + current_slide).show();
setTimeout(updateSlide, slides[current_slide].display_time);
}
// start the display cycle
updateSlide();
}); // get php callback
</script>
</body>
</html>