Build 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!

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

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.

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/169233__mlteenie__crowd-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:

#hdmi_drive=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.)

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

@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!