Tuesday, 10 June 2014 14:52

Raspberry Pi Digital Signage

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).
 
 
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. 
 
 
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.
Win32 Disk Imager
 
 
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.
 
 
Finding your Raspberry Pi's IP address 
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 below.
    SoftPerfect Network Scanner

  • Select your network's IP range. I'm select 192.168.0.138 for the IP as shown in figure below, this is my computer's IP address.
  • Select network 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 below
    Raspberry Pi's IP address
 
 
Login to Raspberry Pi via SSH 
  • Run PuTTY
  • enter required information as shown in figure below, remember to use your own Raspberry Pi's IP address.
    PuTTY Configuration
 
  • Enter pi and raspberry for login and password respectively
    login as: pi
    This email address is being protected from spambots. You need JavaScript enabled to view it.';s password:
    Linux raspberrypi 3.2.27+ #250 PREEMPT Thu Oct 18 19:03:02 BST 2012 armv6l
    The programs included with the Debian GNU/Linux system are free software;
    the exact distribution terms for each program are described in the
    individual files in /usr/share/doc/*/copyright.
    Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
    permitted by applicable law.
    Last login: Sun Jan 27 06:18:46 2013 from toshiba.lan 
 
 
Configure the Raspberry Pi a Static IP Address
List the network interface we currently have available:
cat /etc/network/interfaces
 
Here is the 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.
 
 
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

 

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 below:
Placeholder page
 
,
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
 
 
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 below shows the /var/www folder permission.
WinSCP: www directory properties
 
Use the following command to grant permission to "Pi" user account 
sudo chown www-data:www-data /var/www #chown username:groupname directorysudo 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
 
The  /var/www is owned by www-data
WinSCP: www folder owned by www-data
 
 
 
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.
 
 
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

 
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:
  1. The sudo command stands for "superuser do", it assumes you want your application run with root user privileges.
  2. The "&" cause the application running in background.
 
 
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
 
 
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
 
 
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
 
 
A few more settings
Some little tweaks to make it suitable for your own needs, you can read it from my personal website.
  1. Schedule Turn OFF/ON Display
  2. Schedule Reboot
  3. Changing the Screen Resolution
  4. Removing Applications
 
The Digital Signage (web server) is now up, and ready for you to upload web pages to its SD card.
 
 
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 below.
www directory
 
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.
 
 
Some highlights from this web programming
  1. Add rows dynamically to a table
  2. Dynamically add textboxes (input fields)
  3. Dynamically add onkeyup/onkeypress event handler on dynamically created textboxes
  4. Enter key press behaves like a Tab (Enter as Tab)
  5. Display images dynamically in HTML
  6. Formatting the way the date/time is displayed
  7. Retrieve last modified time for a file
  8. Watch a file for changes using PHP
  9. Reading and Writing XML file
  10. Specify a fixed decimal point for numbers
  11. Restrict a text field to numbers only
  12. Set focus on an textboxes (input field)
 
 
Putting it all together
  • 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
    Metal plate

  • Place the two metal plates on the back of the TV in place as shown in figure below
    Place two metal plates on the back of TV
 
  • I have many magnetic cylinders which I use it for my LED display screen modules
    Magnetic cylinder

  • Place two of the magnetic cylinders through the two mounting holes on the Raspberry Pi board
    Raspberry Pi bottom view
    Note: The DC power connecter is reserved for external power in case the USB power from TV is not working.

  • 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
    Putting it all together
 
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 60 days without any problem.
 
 
How to use the Exchange Rate Display Boards
  • 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 below
    Server for Exchange Rate Display Boards
  • 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 below
    Client for Exchange Rate Display Boards
  • 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 screen resolution for this project is fixed to 1920x1080. if you use a different resolution, you must manually change the table column width, font size or pircure size.
 
Read 20111 times Last modified on Friday, 04 July 2014 11:31
Published in Projects
Tagged under
admin

Related items

More in this category: « Wireless Router Remote Control Car Arduino based RGB Matrix LED tester »

26 comments

Leave a comment

back to top
Back to Top