Raspberry Pi Full Screen Browser (Raspbian December 2017)

Steps to setup a Raspberry Pi running Raspbian to boot into a full screen web browser, hiding mouse pointer, disabling screen saver. Includes installing additional fonts and putting the browser in kiosk mode.

Introduction

One of the primary usages of the Raspberry Pi has been to drive digital signage and dashboards.

It is cheap, has HDMI output and lower power, all great characteristics for a display.

Dependencies

Step 1: Install Raspbian

Rather then re-hash how to install Raspbian on a SD / MicroSD, please see the official instructions. Use Etcher, it makes things much easier and less likely to make your computer unbootable.

Step 2: Configure Raspbian

By default Raspbian boots into the Pixel desktop, which is what we want. However we want to set the Locale, Timezone, Keyboard and enable ssh.

1. From the Pixel Desktop, top left corner, click on the Raspberry Pi Menu icon
2. Select `Preferences`, `Raspberry Pi Configuration`
3. In `Raspberry Pi Configuration`, on the `Interfaces` tab
4. Next to `SSH`, select `enable`, click `OK`
5. In `Raspberry Pi Configuration`, on the `Localisation` tab, click `Set Locale…`
6. Select the Language (eg en), Country (eg CA) and leave Character Set at UTF-8, click `OK`
7. In `Raspberry Pi Configuration`, on the `Localisation` tab, click `Set Timezone…`
8. Select the Area (eg Canada), Location (eg Eastern), click `OK`
9. In `Raspberry Pi Configuration`, on the `Localisation` tab, click `Set Keyboard…`
10. Select the Country (eg United States), Variant (eg English (US), you will have to scroll up, click `OK`
11. You should be promoted to reboot.

After reboot, from the Pixel Desktop, in top right corner, hover the mouse cursor over the two arrows icon. After a moment, the IP address(es) of the device should appear. Use one of them to ssh into the Raspberry Pi.

ssh pi@192.168.1.10

The default user is `pi` and the default password is `raspberry`.

Please take a moment to change the password after logging in over ssh:

passwd

Step 3: Update All The Things

After logging in over ssh, run `apt-get update`:

sudo apt-get update -y

You should see something like the following, if you don’t please do some trouble shooting to determine the issue. If the update does not work you are going to have a bad time.

Get:1 http://mirrordirector.raspbian.org/raspbian stretch InRelease [15.0 kB]
Get:2 http://archive.raspberrypi.org/debian stretch InRelease [25.3 kB]
Get:3 http://mirrordirector.raspbian.org/raspbian stretch/main armhf Packages [11.7 MB]  
Get:4 http://archive.raspberrypi.org/debian stretch/main armhf Packages [127 kB]                                                                                                   
Fetched 11.8 MB in 37s (317 kB/s)                                                                                                                                                  
Reading package lists... Done

Next, upgrade the system, this can take a few minutes depending on your network speed. Run each of the following:

sudo apt-get upgrade -y
sudo apt-get dist-upgrade -y
sudo apt-get autoremove -y

Run each of the above until the result of each looks like:

Reading package lists... Done
Building dependency tree       
Reading state information... Done
Calculating upgrade... Done
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

This means you have a fully updated system.

Step 4: Install Dependencies

Install some dependencies:

sudo apt-get install -y ttf-mscorefonts-installer unclutter x11-xserver-utils

1. `ttf-mscorefonts-installer` adds common web fonts
2. `unclutter` is used to hide the mouse cursor
3. `x11-xserver-utils` installs xset, which is used to disable screen blanking

Step 5: Configuring Chromium to Autostart

Edit the `autostart` script, comment out the `@xscreensaver -no-splash` line (# CHANGED) and add the rest (# BEGIN ADDED to # END ADDED) to the bottom of the file:

sudo vi .config/lxsession/LXDE-pi/autostart

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
# CHANGED
#@xscreensaver -no-splash
@point-rpi

# BEGIN ADDED

# Normal website that does not need any exceptions
@/usr/bin/chromium-browser --incognito --start-maximized --kiosk http://gordonturner.com
# Enable mixed http/https content, remember if invalid certs were allowed (ie self signed certs)
#@/usr/bin/chromium-browser --incognito --start-maximized --kiosk --allow-running-insecure-content --remember-cert-error-decisions http://gordonturner.com
@unclutter
@xset s off
@xset s noblank
@xset -dpms

# END ADDED

The additions do the following:

1. Disable the screensaver
2. Start Chromium
3. Hide the mouse cursor
4. Disable screen blanking
5. Disable Display Power Management Signaling (DPMS)

The Chromium parameters do the following:

1. `–incognito` will start Chromium in incognito mode, which is useful as avoids any “Chromium didn’t shut down correctly” messages if the device gets restarted without a proper shutdown

2. `–start-maximized` will start Chromium maximized

3. `–kiosk` will hide the navigation bar

4. `–allow-running-insecure-content` will allow https sites that include http content, normally not a good thing

5. `–remember-cert-error-decisions` will allow Chromium to remember saved certificates that have been ‘approved’, for example self signed certificates

Restart

At this point you are done! Restart the Raspberry Pi and you should see the website you configured Chromium to start (eg http://gordonturner.com) launch full screen!

sudo reboot

Edit the `autostart` script to change the website that is launched at boot.

Screen Control

This is an optional section that will create a shell script to turn the screen on and off with software.

Raspbian includes a handy application called `tvservice`, which can turn hdmi screens on and off. The script below will turn the screen on, off and toggle (handy for an external button or remote input).

This script does depend on `xdotool`, to install type:

sudo apt-get install -y xdotool

Then edit a new file `screen-control.sh` and paste in the following bash script.

vi screen-control.sh

#!/bin/bash
#
# NOTE: screen-control.log will grow, consider disabling the output or delete it periodically
#

echo `date` "Called with $1" >> ~/screen-control.log

STATE=`/opt/vc/bin/tvservice -s`

if [ ! -z "$1" ] && [ $1 = "toggle" ]; then

  echo `date` "Toggling screen."
  echo `date` "Toggling screen." >> ~/screen-control.log

  if [[ $STATE == *"TV is off"* ]]; then

    echo `date` "Screen is off, turning on."
    echo `date` "Screen is off, turning on." >> ~/screen-control.log
    /opt/vc/bin/tvservice -p && fbset -depth 16 && fbset -depth 32 && xrefresh -display :0.0
  else

    echo `date` "Screen is on, turning off."
    echo `date` "Screen is on, turning off." >> ~/screen-control.log
    /opt/vc/bin/tvservice -o
  fi

  # BUG: Not sure why, but if screen is on, and a toggle is triggered, context menu sometimes appears.
  # The Escape key is the windows left key and will hide the context menu.
  export DISPLAY=:0.0
  xdotool key Escape

elif [ ! -z "$1" ] && [ $1 = "on" ]; then

  if [[ $STATE == *"TV is off"* ]]; then

    echo `date` "Screen is off, turning on."
    echo `date` "Screen is off, turning on." >> ~/screen-control.log
    /opt/vc/bin/tvservice -p && fbset -depth 16 && fbset -depth 32 && xrefresh -display :0.0
  else

    echo `date` "Screen is on, doing nothing."
    echo `date` "Screen is on, doing nothing." >> ~/screen-control.log
  fi

  # BUG: Not sure why, but if screen is on, and a toggle is triggered, context menu sometimes appears.
  # The Escape key is the windows left key and will hide the context menu.
  export DISPLAY=:0.0
  xdotool key Escape

elif [ ! -z "$1" ] && [ $1 = "off" ]; then

  if [[ $STATE == *"TV is off"* ]]; then

    echo `date` "Screen is off, doing nothing."
    echo `date` "Screen is off, doing nothing." >> ~/screen-control.log
  else

    echo `date` "Screen is on, turning off."
    echo `date` "Screen is on, turning off." >> ~/screen-control.log
    /opt/vc/bin/tvservice -o
  fi

  # BUG: Not sure why, but if screen is on, and a toggle is triggered, context menu sometimes appears.
  # The Escape key is the windows left key and will hide the context menu.
  export DISPLAY=:0.0
  xdotool key Escape

else
  # Print usage
  echo
  /opt/vc/bin/tvservice -s
  echo
  echo usage:
  echo $0 on
  echo $0 off
  echo $0 toggle

fi

Finally, make the script executable:

chmod u+x screen-control.sh

To see usage, type `./screen-control.sh` and you should see something like:

state 0x120006 [DVI DMT (35) RGB full 5:4], 1280x1024 @ 60.00Hz, progressive

usage:
./screen-control.sh on
./screen-control.sh off
./screen-control.sh toggle

Manage

Sometimes it is necessary to exit the browser, which can be difficult in kiosk mode. To shutdown the Chromium browser when it is full screen type at the same time:

shift control q

Update: For more recent versions of Chromium use:

alt f4

Conclusion

That is all. There are other details that could be customized, like setting the desktop wallpaper, so that for the brief moment it is displayed, it is ‘on brand’. Additionally you might consider making the memory card read-only, so that power cycles do not damage the card.

Tagged Linux, Raspberry Pi | Posted on Sunday, December 10th, 2017 | Comments Off on Raspberry Pi Full Screen Browser (Raspbian December 2017)