When the Raspberry Pi 0W was announced, I pre-ordered it immediately before even having a plan for what to do with it. Those kind of details come later when you're talking about a $10 computer with a built-in WiFi and bluetooth antenna. I still had no plan on delivery day because I completely forgot I ordered it.
But like so many other Pi projects, I found a useless proof-of-concept: Why not create a screen in my house on which anyone in the world can leave me messages?
This project evolved quickly when I realized I had an actual use for this in the workplace and could expense the $10. We could use this to build a company-wide "looping stats" monitor known as an information radiator that would display current events, stats, new hires, lunch menus, a gif-of-the-day, new fires, and everything else you'd want to catch out of the corner of your eye while getting coffee in the break room or walking past the Dev department's cave.
Ultimately, we created 10 of these devices and shipped them out: 4 for our Atlanta headquarters, 2 for Chicago, 2 for London, and 2 for Mangalore, India. In each batch of devices, we simply needed to modify the WiFi router name and password to match the network of the office. All 10 devices show the exact same information at all times.
The beauty of this project is that you are creating a series of synced devices that require almost no setup by the end user. They'll run off the USB power of the TV they're plugged into, so they boot when the TV turns on, and within a minute, they're displaying the most current information.
That information is maintained in a cloud-based collaborative Google Slides presentation that autosaves, and each device is configured to grab the newest slides periodically. You can give any number of users access to the presentation—either locked down via password or fully public and anonymous—to collaborate on the content displayed. They simply need to make changes to the slides and within minutes their content is displayed on all your information radiators worldwide.
Gather Your Hardware
For each device, you'll need:
- Raspberry Pi 0W ($10)
- Micro SD Card with 8GB capacity ($6)
- An HDMI adapter ($3)
- A USB cable ($3)
- An HDMI cable ($5)
To set up each device, you'll need:
- A computer with an SD card reader
- a Micro SD to standard SD card adapter (usually included with SD card)
Gather Your Software
First, we'll get the Pi's operating system, called Raspbian. At the time of writing, the newest version of Raspbian is Stretch. You must use the full version of the operating system—not the Lite version, as it doesn't have the critical tools that are required to get the Pi set up to run in kiosk mode. You should be able to find the newest version of Raspian here.Next, we'll need software to flash the image of the operating system onto your SD card. I highly recommend Etcher, which you can download here for OS X, Windows, and Linux.
Install Raspbian on Your SD Card
If you're like me and you ripped a micro SD card out of an old mobile phone with a cobwebbed screen, there's likely to be stuff on it. I recommend putting it in the standard SD adapter, plugging it into your computer, and making a copy of its contents to preserve all those amazing photos you're still getting around to revisiting, because this process is about to nuke all of it forever.
Now launch Etcher. Most likely, it already selected your SD reader as the drive to mount onto, so you'll simply need to select the Raspian .zip file you downloaded and click the Flash! button. (Good news: This GUI-enabled imaging tool actually has a progress meter, so you don't have to wonder whether it's working.)
Create a Google Slides Presentation
The presentation you're about to create will be the final "production" location of all content that will be displayed on your globally synced information radiators. If you have a Google account and are logged in already, simply go to Google Drive and click NEW > Google Slides > Blank presentation. (If you need to sign up for a Google account, you can do so here.)
Give the presentation a title like "Information Radiator" and type a good ol' "Hello World" into the title on the first slide. That's all you need to do for now. Once this whole thing is set up and you've confirmed that it's updating, you can start building content.
Now let's publish this presentation so it's accessible by our Pi via the web and get the embed code. Go to File > Publish to the web and select the Embed tab. Enter the following information:
- Slide size: Large
- Auto-advance slides: "every 10 seconds" or greater is recommended
- Check "Start slideshow as soon as the player loads"
- Check "Restart the slideshow after the last slide" to enable infinite looping
Click Publish. Next, copy and store the embed code provided in the box below.
Create the HTML File to Be Displayed By the Pi
In the end, the only thing your Pi is going to actually do is power on and display a local webpage. We'll need to make this HTML file from scratch, but it'll be 100% copy/paste. Open a new, empty text file or project in an HTML editor.
1. Define the Head of the HTML file
Enter the first two lines to ensure the Pi's browser reads the file properly:
<html><head>
2. Add a meta refresh tag to enable auto-updating
Enter the following line to instruct the Pi's browser to hit the refresh button for you periodically so that it pulls in any modified slides from our Google Slides presentation:
<meta http-equiv="refresh" content="30">
The value entered in the "content" parameter indicates the number of seconds between refresh. For now, let's leave this set at 30 seconds for testing purposes. In the end, we'll change this to something more realistic, such as 900 for a refresh every 15 minutes.
3. Reset the Style Sheet
Your Pi's browser may assign its own styling to your presentation, so we're going to use a great big block of code to ensure no styling rules are provided. Paste the following <style> section into the HTML file starting on the next line:
<style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}html { overflow-y: hidden; overflow-x: hidden; }</style>
4. Close out the header and start the body
Add the following two lines to the HTML file to end the definition of the header content and begin the definition of the body content:
</head><body>
5. Paste in the presentation's embed code
Remember the embed code Google Slides gave us earlier? Now's the time to use it. Paste it in directly under the <body> tag.
6. Close out the HTML file
Add the following two lines to the bottom of the HTML file to close the body section and complete the entire HTML file:
</body></html>
Save the HTML file to the root folder of the SD card with a name like "kiosk.html". (You may need to remove the SD card and insert it again for it to be recognized by your computer.)
Enable the Pi to Be Controlled by Your Computer
By default, Raspbian is expecting for you to attach a keyboard, mouse, and whatever else you need to the Pi. And while the Pi 0W is enabled with a bluetooth antenna, none of this is necessary if you have an SSH tool at your disposal. More on that in a minute.
Rather than hunt down all that hardware, we'll simply connect the Pi to the computer via the USB cable in a few moments when we boot it for the first time, then open an SSH session to the device to allow us to use our computer's keyboard to complete programming the Pi to be an information radiator.
To enable the Pi's OTG mode (On-the-Go) to control it over USB, we'll need to modify three things in the root folder of the SD card.
1. Add "dtoverlay=dwc2" to config.txt
Edit config.txt in the root folder of your SD card. Add the following line at the very end of the file and save:
dtoverlay=dwc2
2. Add "modules-load=dwc2,g_ether" to cmdline.txt
Now edit cmdline.txt in the root folder. Just as before, add the following line at the very end of the file and save:
modules-load=dwc2,g_ether
3. Add the "ssh" file to the card
By default, SSH sessions are disabled as a security precaution, so you'll need to manually override this by creating an empty text file called simply "ssh" (with no extension!) in the root folder of the SD card. This tells the Pi that SSH is authorized when it boots.
Connect to the Pi Via USB Cable
Now you're ready to log in to the Pi for the first time. Eject the SD card and put the Micro SD card into the proper slot on the Pi. Connect the USB cable to the port marked USB and not PWR and plug it into your computer. If you're on a Mac, open Terminal from the Applications. If you're on a PC, you can download Putty to open an SSH session.
Type the following command line into the terminal:
ssh pi@raspberrypi.local
The terminal might ask you to add the Pi to the list of known hosts; just type "yes" and hit Enter. If you instead see a really, really scary warning, you may need to locate and delete the known hosts file on your computer and try this step again.
When prompted, the default password for the Pi is "raspberry". You might want to change this at some point, but just leave it alone for now.
Connect the Pi to Your WiFi Router
The Pi Zero W is such a big deal because that "W" stands for WiFi. This is a fully functional computer with a WiFi (and bluetooth) antenna built in for $10. Now let's use it!
Type the following command line into the Terminal window to scan for WiFi networks:
sudo iwlist wlan0 scan
In the deluge of information that follows, scroll back up to where you typed in the command line and look for the ESSID value that matches the name of your router. Hopefully, since you're closest to it, it'll be listed near the top. Make a note of exactly how it's spelled here.
Now we'll open the WiFi definition file in the Pi using the built-in text editor. Type the following:
sudo nano /etc/wpa_supplicant/wpa_supplicant.conf
At the bottom of the file, enter the following lines, supplying in your router name and password where indicated in red:
network={ssid="YOUR ROUTER NAME"psk="YOUR ROUTER'S PASSWORD"}
Hit Ctrl+X, type y, and hit Enter to save the file.
Within a few seconds, your Pi should connect to the network.
Install the Chromium Browser
Now we'll need to enable your Pi to display the HTML file you created. Raspbian doesn't come with a browser, so we'll need to install Chromium. Fortunately, we can do this using a command line now that the Pi is connected to the Internet:
sudo apt-get install chromium-browser
Downloading and installation should take a few brief moments. Next, we'll need to ensure it installed the configuration we want—called "unclutter"—which basically removes the mouse cursor from the screen.
sudo apt-get install chromium x11-xserver-utils unclutter
Set the Pi to Boot into Kiosk Mode
Last step! We just need to configure the Pi to display a website as quickly as possible. Type the following command line into the terminal window to edit the autostart file:
sudo nano /etc/xdg/lxsession/LXDE/autostart
First, disable the screensaver by commenting out its line. Simply add a # before the @xscreensaver line.
Next, add the following lines down below, replacing the file referenced in red with the name of your HTML file if different:
@xset s off@xset -dpms@xset s noblank@chromium --kiosk --incognito kiosk.html
Hit Ctrl+X type Y, and hit Enter to save.
Let's test!
Test the Information Radiator
Any changes you make to your presentation will be pulled in the next time the browser refreshes, so make sure your refresh interval is longer than at least one cycle through all the slides. You could even time it so the refresh interval is the exact number of slides multiplied by the number of seconds each slide is displayed, but if anyone ever added or removed slides you'd have to change the refresh, too.
We cheaped out at the end here. Cases for the Pi 0W kicked the cost up significantly, so we simply left the cards in the static bag they came in with the wires sticking out. As it turns out, this little guy just hangs, suspended by its own HDMI and USB cables attached to the TV, completely out of sight. And all our staff has to do is turn the TV on to boot it.
