Find all your DIY electronics in the MakerShed. 3D Printing, Kits, Arduino, Raspberry Pi, Books & more!

raspberry pi week banner 11 Build a Raspberry Pi Like Tracker Kiosk
Raspberry Pi Like Tracker

For this project I’m going to share how to build a Raspberry Pi-based kiosk that will show how many ‘Likes’ your Facebook page has. When you get a new Like it will show you and alert you with a sound.

I won’t cover setting up a Raspberry Pi from scratch, but I recommend you read the book “Getting Started With Raspberry Pi” by Matt Richardson and Shawn Wallace.

How does it all work?

The kiosk project is running a web server on the Raspberry Pi, as well as a web browser which loads a locally hosted web site. The web browser will reload the page every 10 seconds, and if your page gets a new Like, you’ll see the number increase. There’s one more fun feature, and that’s the addition of a sound effect when you get a new Like. This can be a nice thing to display at your business or an event so people can interact with it.

You will want to make sure your Raspberry Pi boots up into the desktop environment, as you’ll need to have it fire up a browser automatically at each reboot.

For this example, I’ll use the Facebook page of Milwaukee Makerspace, but obviously you can change that to point at whatever Facebook page you prefer.

(You can download the project files to follow along.)

Related

Steps

Step #1: Install Software

PrevNext
Build a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker Kiosk
  • We're going to need a few extra pieces of software not included with the default Raspian distribution. (You can use any distro you like, but we're going to assume Raspian for this project.)
  • If you're new to Linux, you'll want to get familiar with apt-get, which is the easy way to install software packages on Linux. sudo apt-get update sudo apt-get upgrade
  • Once those are done, let's get the Apache web server and the Chromium web browser installed. (We're also going to install some utilities to prevent the screen from going blank.) sudo apt-get install apache2 sudo apt-get install chromium-browser sudo apt-get install x11-xserver-utils
  • We're also going to install a few Perl Modules. Luckily, there's an easy way to get most of what we need, so we'll only have to manually install a few. To get started type: sudo apt-get install dh-make-perl Since Raspbian is based on Debian Linux, this is the preferred method of installing modules. We should now have the following modules installed:
    • LWP::Simple
    • HTML::Template
    Two of our needed modules would not install using dh-make-perl, so we'll take care of those next.
  • First we'll get JSON, as our main CGI script will need that. Here's the commands to run: wget http://search.cpan.org/CPAN/authors/id/M/MA/MAKAMAKA/JSON-2.90.tar.gz tar xfvz JSON-2.90.tar.gz cd JSON-2.90/ perl Makefile.PL sudo make sudo make install Next we'll get File::Modified, as we need this for determining when to play our sound file. wget http://search.cpan.org/CPAN/authors/id/C/CO/CORION/File-Modified-0.07.tar.gz tar xfvz File-Modified-0.07.tar.gz cd File-Modified-0.07/ perl Makefile.PL sudo make sudo make install Hopefully everything installed without issue. Installing Perl Modules can sometimes be tricky!

Step #2: Set up Apache

PrevNext
Build a Raspberry Pi “Like” Tracker Kiosk

We got Apache installed and running in Step 1, but we've got a bit of configuration to do, so we'll edit the default Apache configuration file.

sudo nano /etc/apache2/sites-available/default

Here's what our file should look like:

‹VirtualHost *:80›
    ServerAdmin webmaster@localhost

DocumentRoot /var/www
‹Directory /›
    Options FollowSymLinks +ExecCGI
    AllowOverride None
‹/Directory›
‹Directory /var/www/›
    Options Indexes FollowSymLinks MultiViews +ExecCGI
    AllowOverride None
    AddHandler cgi-script .cgi
    Order allow,deny
    allow from all
    DirectoryIndex index.cgi index.html
    ErrorDocument 500 /500.html
    ErrorDocument 404 /index.cgi
‹/Directory›

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
‹Directory "/usr/lib/cgi-bin"›
    AllowOverride None
    Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
    Order allow,deny
    Allow from all
‹/Directory›

ErrorLog ${APACHE_LOG_DIR}/error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

‹/VirtualHost›

Don't forget to restart Apache so the changes take effect.

sudo service apache2 restart

Step #3: Set up the web site

PrevNext
Build a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker Kiosk

Copy the web site files into the /var/www/ directory.

You may need to set index.cgi to be executable

sudo chmod 0755 /var/www/index.cgi

If you want to test if it works, type the following:

perl /var/www/index.cgi

If all is good, you can now launch Chromium and go to http://127.0.0.1/

You should see the Like Tracker page!

You can go into the settings for Chromium and set it to automatically load http://127.0.0.1/ on launch.

A bit of explanation of the web site files.

index.cgi is our CGI script that runs every time Chromium reloads the page. (This is where you can change what Facebook page the Like Tracker looks at.)

index.tmpl is the template file that the CGI reads in and uses to output an HTML page to the browser.

style.css is our CSS file. Any changes to the design would happen in index.tmpl or style.css.

500.html is an error page which Apache will (temporarily) show if there is a problem.

thumb.png is the Facebook 'Like' graphic we show on the HTML page we output.

We do need one more file, so create an empty file at '/home/pi/likealot.txt' and run the following command:

chmod 0666 /home/pi/likealot.txt

This will allow our CGI to write to the file and keep count for us.

Step #4: Add the audio file

PrevNext
Build a Raspberry Pi “Like” Tracker Kiosk

This step is completely optional, and you can skip it if you like, but honestly this is the fun part!

I found this nice celebratory sound at Freesound.org called CROWD YAY.wav courtesy of Freesound user mlteenie.

Put the audio file in /home/pi and if you want to test it type:

aplay /home/pi/169233mlteeniecrowd-yay.wav

Hopefully you hear your file. Getting sound working on the Raspberry Pi can be a bit tricky sometimes. It's gotten better in more recent versions of Raspbian, and this time around I just had to make one change to get sound working.

sudo nano /boot.config

Find the line that says:

#hdmidrive=2

and uncomment it by removing the # at the beginning.

hdmi
drive=2

That got sound working fine via HDMI on my TV.

Now, our CGI file keeps track of how many Likes in the file at /home/pi/likealot.txt, so when that file changes we know we've got more Likes. That's our trigger to play the sound file. We have another script for that.

We'll have the Perl script checkchanged.pl running all the time, and it will play the sound whenever the likealot.txt file changes. We'll set up a cron job that gets our script running.

crontab -e

At the bottom add the line:

@reboot /usr/bin/perl /home/pi/checkchanged.pl

This will start our script when we boot up the Pi. (Note: There are other methods of running things at startup as proper system services, but we're keeping it simple for this project.)

Step #5: Automate it

PrevNext
Build a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker KioskBuild a Raspberry Pi “Like” Tracker Kiosk

At this point you could reboot your Pi and it should go right into the desktop environment, with Apache running, and our Perl script running, watching for our file to change, and if you launch Chromium it will load the site and it'll all work, but there's one more step to automate it all.

We need to edit the autostart file so the screensaver doesn't run and the screen doesn't go blank.

sudo nano /etc/xdg/lxsession/LXDE/autostart

Look for the screensaver line, and delete it or comment it out by putting a # at the start.

# @xscreensaver -no-splash

We'll then add a few more lines to make sure our screen does not go blank, and to make Chromium start up at launch time.

@xset s off @xset -dpms @xset s noblank @chromium --kiosk --incognito http://127.0.0.1/

Once you've done all this, go ahead and reboot, and your kiosk should be ready to go!

Pete Prodoehl

Pete is a hacker and maker who hacks things and makes things. When he isn't hacking things or making things, he's probably designing things or taking photos of things.


blog comments powered by Disqus

Related Supplies at Maker Shed

Follow

Get every new post delivered to your Inbox.

Join 26,590 other followers