Raspberry Pi Digital Signage: Exchange Rate Display Boards

Raspberry Pi (Model B) is a single-board computer that uses an ARM 11 (ARM1176JZF-S core) processor running at 700MHz (it can overclock up to 1GHz) with 512MB RAM.

This article shows you how to turn your Raspberry Pi into a cheap, browser based digital signage solution. It covers setting up a mini webserver on using the lighttpd+PHP web server and also how to start a web browser without a desktop environment.

I will use Midori as the web browser since it is a default browser that is found in Raspbian (a free operating system based on Debian optimized for the Raspberry Pi).

Step 1: Materials

Raspberry Pi (Model B).
SD card, I'm using a 2GB SD card for this project.
Monitor or TV. I'm using a Toshiba 32" TV for this project.
HDMI cable, HDMI to DVI cable or Composite cable depend on your monitor/TV.
Ethernet patch cable.
A display unit (LCD/LED monitor or TV) that suits your purpose.
A 5V micro USB power supply or a micro-USB cable to get power from the TV USB port.
TV wall bracket
Metal plate and 2 PCS magnetic cylinders
SoftPerfect Network Scanner software to display the IP address of your computer and Raspberry Pi.
SSH client software such as puTTy must be installed on your computer that running Microsoft Windows
You may want to install WinSCP software on your computer for file transfer between a local computer and Raspberry Pi. Beyong this, I'm using WinSCP to Editing/Opening files.
You must have a working internet connection.

Note: I would recommend using the HDMI output if your monitor/TV does suport the HDMI input. The HDMI output includes both the picture and the audio in one cable making it much simpler to connect just using a standard HDMI cable.

Step 2: Preparing the Image File

The Raspberry Pi will not start without a properly formatted SD Card, containing the bootloader and a suitable operating system. I'm download the Raspbian (Debian-based Linux distro) image file from official homepage and using Win32 Disk Imager to write the image file to the SD card. Please read here for how to use Win32 Disk Imager.

Step 3: Connecting the Raspberry Pi

Connect the Raspberry Pi to the home network router via an ethernet patch cable, then use a 5V micro USB power supply to power the Raspberry Pi. Keyboard and mouse is not necessary since all the jobs is remotely controlled by the computer through SSH software. However, you may want to connect the monitor/TV to the Raspberry Pi but it is not necessary at this moment.

Step 4: Finding Your Raspberry Pi's IP Address: Detect Local IP Range

Raspberry Pi (Raspbian) does not have an static IP address, it is set to DHCP by default, you should get your Raspberry Pi IP address before you continue the rest of setup. I will use SoftPerfect Network Scanner to find the IP address for my computer and the Raspberry Pi.

Power on the Raspberry and wait about 40 seconds to let the Raspberry Pi booting up
Run the SoftPerfect Network Scanner software
Click on Options>IP address>Detect Local IP Range from menu as shown in figure

Step 5: Finding Your Raspberry Pi's IP Address: Select IP Range

Select your network's IP range. I'm select 192.168.0.138 for the IP as shown in figure, this is my computer's IP address.

Step 6: Finding Your Raspberry Pi's IP Address: Raspberry Pi's IP Address

Click on Start Scanning icon to start the scanner
The Raspberry Pi's IP address is detected as 192.168.0.223 as shown in figure

Step 7: Login to Raspberry Pi Via SSH

Run PuTTY
Enter required information as shown in figure, remember to use your own Raspberry Pi's IP address.

Enter pi and raspberry for login & password respectively

Step 8: Configure the Raspberry Pi a Static IP Address

Enter the following command into your SSH window to list the network interface we currently have available:

cat /etc/network/interfaces

Here is an example of output

auto lo
iface lo inet loopback

iface eth0 inet dhcp

allow-hotplug wlan0

iface wlan0 inet manual

wpa-roam /etc/wpa_supplicant/wpa_supplicant.conf

iface default inet dhcp

The line iface eth0 inet dhcp shows that it is currently getting out IP address via DHCP. We need to change this line to iface eth0 inet static.

Using the following configuration as the example
Raspberry IP: 192.168.0.223

Router IP (Gateway): 192.168.0.254

Subnet Mask: 255.255.255.0

Edit /etc/network/interfaces

sudo nano /etc/network/interfaces

Change iface eth0 inet dhcp to iface eth0 inet static and add the following settings just below it:

address 192.168.0.223

netmask 255.255.255.0

network 192.168.0.0

broadcast 192.168.0.255

gateway 192.168.0.254

Here is a complete example:

auto lo
iface lo inet loopback

iface eth0 inet static

address 192.168.0.223

netmask 255.255.255.0

network 192.168.0.0

broadcast 192.168.0.255

gateway 192.168.0.254

allow-hotplug wlan0

iface wlan0 inet manual

wpa-roam /etc/wpa_supplicant/wpa_supplicant.conf

iface default inet dhcp

Reboot the Raspberry Pi.

Step 9: Fixing DNS Problems

DNS is the service that converts the website URL, i.e. www.goggle.com into the IP address (173.194.126.36) that is needed for actual communication.

Check your DNS entries :

cat /etc/resolv.conf

Here is an example of the output:
nameserver 192.168.0.254

The nameserver should same as your gateway (your modem IP). You must modify the /etc/resolv.conf file and change the nameserver to your gateway IP.

sudo nano /etc/resolv.conf

Step 10: Installing the Lighttpd Web Server

Lighttpd is a lightweight web server, with all the essential functions of a web server

sudo apt-get update #download package lists from the repositories

sudo apt-get -y install lighttpd

Once the installation is completed, it should create a new www folder with a placeholder page in the /var directory. www folder is a web root (home) folder, whatever you put in the www folder will be available to the world wide web. If you open up a browser and navigate to your Raspberry Pi IP address, a Placeholder page should appear as shown in figure:

Step 11: Installing PHP

PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.

sudo apt-get -y install php5-common php5-cgi php5
sudo lighty-enable-mod fastcgi-php #Enable the Fastcgi module which will handle the PHP pages
sudo service lighttpd force-reload #restart the Lighttpd service

Step 12: Permmission

The /var/www is the root directory of the website, it is currently owned by the “root” user. We must ensure the "Pi" user account can write files to /var/www directory. Figure above shows the /var/www folder permission.

Use the following command to grant permission to "Pi" user account
sudo chown www-data:www-data /var/www #chown username:groupname directory
sudo chmod 775 /var/www #permission to write to this directory sudo usermod -a -G www-data pi #add the “Pi” user to the “www-data” group

Writing to a file without login to Raspberry Pi
You must change the file permission to full permission (0777) if you want to write to a file from a web page without login to the Raspberry Pi.

Step 13: Start the Midori Browser in Full Screen Mode

Use the following command to start Midori browser without a desktop

xinit /usr/bin/midori -e Fullscreen -a http://domain/homepage.html

I will use the Raspberry Pi's IP address as the domain since the web pages is store on SD card. However, there is a bug when start the Midori browser in full screen mode without a desktop, it just fill up about quarter size of the screen. Luckly I've finally found the solution to fix the problem.

Install the matchbox Windows Manager software
sudo apt-get install matchbox

Create a new file in your home directory (/home/pi), I named it startMidori
#!/bin/sh
xset -dpms # disable DPMS (Energy Star) features.
xset s off # disable screen saver
xset s noblank # don't blank the video device
matchbox-window-manager &
midori -e Fullscreen -a http://raspberryIP/yourHomepage.html

Run the following command, the Midori window should be fullscreen.
xinit ./startMidori #with the leading dot

Step 14: Autorunning Programs on Startup

Edit the /etc/rc.local file. Apeend one line just before exit0 as shown in figure below. Here is a complete example.

#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.
# Print the IP address
_IP=$(hostname -I) || true
if [ "$_IP" ];
then printf "My IP address is %s\n" "$_IP"
fi
sudo xinit ./home/pi/startMidori &
exit 0

Note:

The sudo command stands for "superuser do", it assumes you want your application run with root user privileges.
The "&" cause the application running in background.

Step 15: Exit to Command Prompt

Press CTRL + ALT + F1 exit back to command prompt after the program (Midori) is running.
Press CTRL + ALT + F7 return to Matchbox Window Manager

Step 16: Hiding the Mouse Pointer

Install unclutter. It will hide your mouse pointer if there is no activity.
sudo apt-get install unclutter

Execute unclutter before Matchbox Window Manager, your script should look like this:
#!/bin/sh
xset -dpms # disable DPMS (Energy Star) features.
xset s off # disable screen saver
xset s noblank # don't blank the video device
unclutter &
matchbox-window-manager &
midori -e Fullscreen -a http://raspberryIP/yourHomepage.html

Step 17: Hiding the Raspberry Pi Logo on Startup

Modify the /boot/cmdline.txt file
sudo nano /boot/cmdline.txt

and add logo.nologo to the end of the line
dwc_otg.lpm_enable=0 console=ttyAMA0,115200 kgdboc=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait logo.nologo

Step 18: A Few More Settings

Some little tweaks to make it suitable for your own needs, you can read it from my personal website.

The Digital Signage (web server) is now up, and ready for you to upload web pages to its SD card.

Step 19: Project and Downloads

This is an Exchange Rate Display Boards project which is designed to assist banks, money changers, and other financial institutions in delivering foreign exchange information. The source code is available here. Extract the compressed file to your computer & upload it to the /var/www folder as shown in figure.

The web programming for this project including html, css, javascript & PHP, basically the coding consists of two parts (client and server), the server side which display information on the display board (here is a TV) and the client side which allow the user to update information on the server.

I'm familiar with Delphi programming but not any type of web programming. Please feel free to comment or add any tips or ideas you may have and helping improve this ugly piece of code.

Note: You may want to test the program on your computer without upload webpages to the Raspberry Pi, I would strongly recommend WWebserver with PHP, it is a simple Windows Webserver that was developed for testing PHP and CGI programs.

Step 20: Some Highlights From This Web Programming

Add rows dynamically to a table
Dynamically add textboxes (input fields)
Dynamically add onkeyup/onkeypress event handler on dynamically created textboxes
Enter key press behaves like a Tab (Enter as Tab)
Display images dynamically in HTML
Formatting the way the date/time is displayed
Retrieve last modified time for a file
Watch a file for changes using PHP
Reading and Writing XML file
Specify a fixed decimal point for numbers
Restrict a text field to numbers only
Set focus on an textboxes (input field)

Step 21: Putting It All Together: Get Two Metal Plates

Prepare the TV wall bracket
Get two metal plates from your old computer, or you can easily get it from any bad ISA/PCI card

Step 22: Putting It All Together: Place the Two Metal Plates

Place the two metal plates on the back of the TV in place as shown in figure above

Step 23: Putting It All Together: Magnetic Cylinders

I have many magnetic cylinders which I use it for my LED display screen modules

Step 24: Putting It All Together: Place Two of the Magnetic Cylinders

Place two of the magnetic cylinders through the two mounting holes on the Raspberry Pi board

Step 25: Putting It All Together: Fixing the Raspberry Pi

On the reverse of the board, screw two nuts to the magnetic cylinders.
Line up the Raspberry Pi so that the two magnetic cylinders are lined up with the two metal plates

I'm using the TV USB port to power the Raspberry Pi (without using external power supply), the Raspberry Pi & the TV running in 24 hours. It had been tested for more than two months without any problem.

Step 26: How to Use the Exchange Rate Display Boards: Server

Turn on the TV, it also turn on the Raspberry Pi
Wait (about 90 seconds) until the first web page is fully loaded
The exchange information should appear on the TV screen as shown in figure

Step 27: How to Use the Exchange Rate Display Boards: Client

Launch a web browser on a computer and navigate to http://192.168.0.223 (your Raspberry Pi's IP address)
The client web page should appear as shown in figure
Enter the latest exchange rate to each text box field
Click on Send button to update the information to the server (Raspberry Pi) and allow it to display on the screen

Notes:

The software is designed for 1920x1080. if you use a different resolution, you must manually change the table column width, font size or pircure size.

Introduction: Raspberry Pi Digital Signage: Exchange Rate Display Boards