Digital Signage with Google Slides and Chromium in Kiosk Mode

Another solution to digital signage, this time using Google Slides and Chromium (or Chrome) in Kiosk mode.

I am using the base of a linux install (Crunchbang) and Chromium, but the basics transfer across to Chrome and other OS platforms with some tweaking.

Issues:

  • Kiosk Syntax
  • Fullscreen
  • The Google Slides Toolbar or Transport
  • Web Page Presentation
  • Updating the Slides
  • Sharing the Slides
  • Locking Down if keyboard/touchscreen in use

Am grateful for the work done by Mark Pajak at Bristol Museums on setting up Chrome/Chromium in kiosk mode, and to Google Slides users on the google groups forums and good old StackOverflow for other snippets.

As an overview, one needs to publish the google slides presentation, then pull this into an iframe on a web page. Then call chromium in kiosk mode to load that web page. Once the slides are loaded they will not update with new content unless the call to the slides is reset (page reload) so some html/javascript is required to refresh things. This all may seem a little disjointed at first but be patient, i will put it all together at the end with a workflow and example 😉

1. Kiosk Syntax

for local html:

or for web based:

There are many other switches that can be used but on my box even the stable ones listed in the man pages were rejected. Note: this will only work in kiosk mode if you have no other instances of chromium running. To get out of kiosk mode and close it down just use ALT+F4.

If you don’t need to regularly update the slide pages, you can access the slides directly

Don’t forget the “” around the link, otherwise bash will drop off the switches after the first “&”.

2. Fullscreen

By default, using the third example above, the slides will show in fullscreen all by themselves. When run inside an iframe you need to tell the iframe to fill the page and be seamless, so add these parameters:

3. The Google Slides Toolbar or Transport

To get the slides working in an iframe you have to edit the link to the slides and include the embed code:

This will present the slides transport, which we do not want in the finished solution. The iframe will need to be wrapped in a div with overflow:hidden and sized to just cover the transport. This may have to be done on a display by display basis if they are of different sizes and resolutions. (You don’t have this problem if you avoid iframes and go straight for the slides)

4. Web Page Presentation

For a good look, and especially when the page is refreshing, you need to handle the iframe “white flash”. I have added two fixes which together seem to do the job. My page background needs to be black so I have used #000000 for the colour.

Firstly add a css style to the html tag at the top of the page

Next some more code for the iframe. This snippet ensures that the iframe has loaded before it displays on screen.

You also need to hide the transport as mentioned in 3. above. Firstly create a div which wraps around the iframe tags. Add the following styles to the div:

and add these styles to the iframe tag:

You may need to adjust the value for top, depending on your screen.

If running linux you may also want a call to unclutter in order to make the mouse disappear

5. Updating the Slides

There are a few ways to do this, but the easiest is to set a refresh in a meta tag in the head section of your html:

The above will refresh the page every sixty seconds. Adjust this number to suit your needs. The Slides will start from the beginning again each time you refresh.

6. Sharing the Slides

Once you have your google slides presentation ready for action, click on File then Publish to the Web. You can now select slideshow options for starting, looping and transition delay. Now click on Publish and then copy the resulting url to the iframe tag. You can then edit the start/loop/delaytime in the url if you need something different than the options offered by Google Drive.

7. Locking down if keyboard or touchscreen present

(EDIT – Can’t get any of these to work in my setup! This probably because the iframe is running at 100% x 100% and the javascript is not affecting the iframe contents?)

If you display is just a TV or normal PC screen with no keyboard or touch, you are good to go, but with either you may need to prevent viewers/users from accessing the OS. The first thing to do is to prevent moving away from the show. This is best done with some javascript on your web page that will ignore any CTRL or ALT keypresses.

DON’T set this unless you have a way to get out of it (e.g. ssh access to close down chromium)

The other thing you may need to prevent is a right click on screen (touch and hold) which will throw up chromium’s right click context menu. More javascript needed:

 

8. The Finished Product

OK, we are just about ready to put this all together:

Here is the html page in full

and the command I run from the terminal or gmrun:


All wrapped up together this then provides a fullscreen updating digital signage facility, that non tech users can update via their google account.

Leave a Reply

Your email address will not be published. Required fields are marked *