Intermezzo: Build a Kiosk with the Pi - Raspberry Pi: A Quick-Start Guide, 2nd Edition (2014)

Raspberry Pi: A Quick-Start Guide, 2nd Edition (2014)

Chapter 5. Intermezzo: Build a Kiosk with the Pi

If you’ve been in a waiting room lately, chances are good that you’ve seen a kiosk system.[54] Usually, it consists of an old TV set with a DVD player and sometimes even a VCR. In a doctor’s waiting room, you’ll see and hear a lot about new and expensive treatments, while repair shops often bombard you with advertisements for useless parts. Often the video signal flickers, the text on the show contains many typos, and you feel as if you should leave the office and look for a more professional medical provider.

On the other hand, you can find really good kiosk systems—for example, while waiting for the subway or train. Here you can see news, weather forecasts, and cartoons on huge screens. The biggest difference between the good and bad kiosks is that the good ones usually don’t repeat the same content for all eternity. They often update it via the Internet.

The Raspberry Pi is a perfect platform for building a cheap but powerful kiosk system. In this chapter, you’ll learn how to turn the Pi into a kiosk that displays Twitter live search information.

Display Twitter Live Search Information

The only piece of software you need to build most kiosk applications is a web browser. Web browsers are very good at displaying multimedia content, so you simply have to make the information you’d like to present available as an HTML page.

Also, you have to disable all the browser’s menu bars and make sure the browser refreshes the content automatically at a certain interval. Most modern browsers already have a kiosk mode that does all of this automatically.

In Chapter 6, Networking with the Pi, you’ll learn a bit more about Midori, the web browser that ships with Raspbian. All in all, the browser is quite useful, and you can use it to build an impressive kiosk system.

The system you’re going to build will display a live search of a list of terms on Twitter. For this book, for example, it’s natural to search for the term pragprog. In the following screen capture, you can see the final result.

image

Figure 22. Results of a search for pragprog

The search automatically updates its content every minute. On a 46-inch screen, this system looks really impressive, and it would be a nice addition to your company’s foyer.

Perhaps the screenshot reminds you of a bloated Twitter widget. This is no coincidence, because it actually is one. Usually, you’d embed such a Twitter search widget into your websites, but it is also the right technology for a kiosk system. The trick is to use the widget not as a widget but as your whole kiosk application. That way, you just have to make it really big and increase the size of your web browser’s font.

One of the greatest things about widgets is that you usually don’t have to create them yourself. For example, you can customize and download a Twitter search widget for free on Twitter’s website.[55] You can choose the widget’s title, some colors, and a search term. Then you can generate the JavaScript you need to embed the widget into your own site. The final result looks like this:

!

kiosk/widget.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="refresh" content="120"></meta>

</head>

<body align="center">

<a class="twitter-timeline" width="520" height="1000"

href="https://twitter.com/search?q=%23pragprog"

data-widget-id="357902770239594496"

data-chrome="noscrollbar nofooter"

data-tweet-limit="8">Tweets about "#pragprog"</a>

<script>

!function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0],

p = /^http:/.test(d.location) ? 'http' : 'https';

if (!d.getElementById(id)) {

js = d.createElement(s);

js.id = id;

js.src = p + "://platform.twitter.com/widgets.js";

fjs.parentNode.insertBefore(js, fjs);

}

}(document, "script", "twitter-wjs");

</script>

</body>

</html>

The Twitter website generates the whole JavaScript code for you. You only have to add some boilerplate HTML. Also, the HTML code contains some style sheets to center the widget and adjust its size. Note that Twitter currently limits the widget’s width to 520 pixels. You can customize a few more things, as explained on the Twitter website.[56]

Note that every Twitter widget gets a unique ID that you can see in the data-widget-id attribute. If you want to change the search term, you have to generate a new Twitter widget with a new ID.

To get the widget code onto your Pi, you can open a text editor, such as nano, and type it in. A better approach is to download the zip archive containing the book’s source code from the book’s website[57] or click the filename above the preceding code example. By default, Midori stores all downloads in the /tmp directory, so after Midori has downloaded the file, open a terminal and run the following commands:

!

pi@raspberrypi ~ $ cd /tmp

pi@raspberrypi ~ $ unzip msraspi-code.zip

Now you can find the widget code in /tmp/code/kiosk/widget.html. To run the kiosk widget, start the LXDE desktop on your Pi, and then start the Midori browser. After that, choose the Open menu in Midori and select the file containing the widget code. The widget will start right away, but to see the full effect, press F11 to enable Midori’s full-screen mode.

The widget now covers the whole screen and updates automatically. Press Ctrl++ (plus) a few times to increase the font size. Without writing a single line of code, you’ve turned the Pi into a kiosk system.

Refresh Websites Automatically

Many websites update their content periodically using JavaScript, and in the past Twitter widgets used this mechanism, too. The website you used in the preceding section uses a different approach. It updates its content using the <meta> tag in the head section of the HTML page.

!

<meta http-equiv="refresh" content="120"></meta>

This element reloads the page every 120 seconds. It’s an easy solution, but it works only when you’re allowed to change the page and have access to the server hosting it. So, the best solution would be if you could tell your browser to reload the current page at a certain interval. Most browsers have such a function, and usually it’s called kiosk mode. Midori has a kiosk mode, too. To use it, you have to start Midori from the command line. Using the -a option, you specify the address Midori should display. To set the update interval, use the -i option, and to turn on full-screen mode, use -e. The final command looks like this:

!

pi@raspberrypi ~ $ midori -i 30 -e Fullscreen \

-a "http://twitter.com/search?q=pragprog"

This shows the results of a Twitter search for the term pragprog and refreshes the page every thirty seconds. Increase the font size by hitting Ctrl++ a few times, and you’re finished. Note that Midori supports many more options for controlling it from the outside. You can list them using the following command:

!

pi@raspberrypi ~ $ midori --help-execute

Try Different Browsers

When the Pi was released, the Midori browser was the only relatively capable browser running on the limited hardware. As the community grew, Raspbian and its applications got better and better, and now ports of Chromium and Iceweasel run fairly well on the Pi. (See But I Want My Regular Browser, to learn how to install them.)

These browsers have kiosk modes, too.[58] They might provide better results for some websites than Midori does. Depending on your project’s needs you might give them a try.

Next Steps

In this chapter, you learned how to turn the Pi into a kiosk system in only a few steps. Look around in your company for possible applications. For example, you could permanently display the status of your most critical systems on a big screen. Also, you could display the current number of customers or orders. Of course, you could also be conservative and simply display a set of slides explaining how wonderful your company is.

Footnotes

!

[54]

http://en.wikipedia.org/wiki/Kiosk_software

[55]

https://twitter.com/settings/widgets/new/search

[56]

https://dev.twitter.com/docs/embedded-timelines#customization

[57]

http://media.pragprog.com/titles/msraspi/code/msraspi-code.zip

[58]

See http://www.vatofknow.com/?p=932, for example.