Raspberry Pi Full Screen Browser (Raspbian November 2016) Gordon Turner

Raspberry Pi Full Screen Browser (Raspbian November 2016)

tl;dr

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.

Running full screen browser on boot

This is part of a series on running a browser full screen on a Raspberry Pi at boot.
The most current version is here:
Raspberry Pi Full Screen Browser (Raspbian December 2017)

The Why

One of the primary usages of the Raspberry Pi for many (myself included) has been to drive digital signage and dashboards.

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

Details

Hardware: Raspberry Pi 1 B, 2 B and 3 B
OS: Raspbian Jessie With Pixel November 2016 (Release date 2016-11-25)
Full OS updates as of 2016-12-28

NOTE: Although the Raspberry Pi model 1 B will work, any JavaScript or CSS animations maybe slow as a result. A model 2 B or 3 B is highly recommended.

Step 1: Install Raspbian

Rather then re-hash how to install Raspbian on a SD / MicroSD, please see the official instructions.

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.

From the Pixel Desktop, top left corner, click on the Raspberry Pi Menu icon
Select Preferences, Raspberry Pi Configuration
In Raspberry Pi Configuration, on the Interfaces tab
Next to SSH, select enable, click OK
In Raspberry Pi Configuration, on the Localisation tab, click Set Locale...
Select the Language (eg en), Country (eg CA) and leave Character Set at UTF-8, click OK
In Raspberry Pi Configuration, on the Localisation tab, click Set Timezone...
Select the Area (eg Canada), Location (eg Eastern), click OK
In Raspberry Pi Configuration, on the Localisation tab, click Set Keyboard...
Select the Country (eg United States), Variant (eg English (US)), click OK
In Raspberry Pi Configuration, click OK, and 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 addresses of the device should appear. Use one of them to ssh into the Raspberry Pi.

ssh pi@192.168.1.10

1	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

passwd

Step 3: Update All The Things

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

sudo apt-get update -y

1	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.

Hit http://mirrordirector.raspbian.org jessie InRelease         
Hit http://mirrordirector.raspbian.org jessie/main armhf Packages  
Hit http://mirrordirector.raspbian.org jessie/contrib armhf Packages           
Hit http://mirrordirector.raspbian.org jessie/non-free armhf Packages          
Hit http://mirrordirector.raspbian.org jessie/rpi armhf Packages               
Hit http://archive.raspberrypi.org jessie InRelease                                
Hit http://archive.raspberrypi.org jessie/main armhf Packages                      
Hit http://archive.raspberrypi.org jessie/ui armhf Packages
Ign http://mirrordirector.raspbian.org jessie/contrib Translation-en_GB
Ign http://mirrordirector.raspbian.org jessie/contrib Translation-en
Ign http://mirrordirector.raspbian.org jessie/main Translation-en_GB         
Ign http://mirrordirector.raspbian.org jessie/main Translation-en            
Ign http://mirrordirector.raspbian.org jessie/non-free Translation-en_GB     
Ign http://mirrordirector.raspbian.org jessie/non-free Translation-en        
Ign http://mirrordirector.raspbian.org jessie/rpi Translation-en_GB          
Ign http://mirrordirector.raspbian.org jessie/rpi Translation-en             
Ign http://archive.raspberrypi.org jessie/main Translation-en_GB             
Ign http://archive.raspberrypi.org jessie/main Translation-en
Ign http://archive.raspberrypi.org jessie/ui Translation-en_GB
Ign http://archive.raspberrypi.org jessie/ui Translation-en
Reading package lists... Done

Hit http://mirrordirector.raspbian.org jessie InRelease

Hit http://mirrordirector.raspbian.org jessie/main armhf Packages

Hit http://mirrordirector.raspbian.org jessie/contrib armhf Packages

Hit http://mirrordirector.raspbian.org jessie/non-free armhf Packages

Hit http://mirrordirector.raspbian.org jessie/rpi armhf Packages

Hit http://archive.raspberrypi.org jessie InRelease

Hit http://archive.raspberrypi.org jessie/main armhf Packages

Hit http://archive.raspberrypi.org jessie/ui armhf Packages

Ign http://mirrordirector.raspbian.org jessie/contrib Translation-en_GB

Ign http://mirrordirector.raspbian.org jessie/contrib Translation-en

Ign http://mirrordirector.raspbian.org jessie/main Translation-en_GB

Ign http://mirrordirector.raspbian.org jessie/main Translation-en

Ign http://mirrordirector.raspbian.org jessie/non-free Translation-en_GB

Ign http://mirrordirector.raspbian.org jessie/non-free Translation-en

Ign http://mirrordirector.raspbian.org jessie/rpi Translation-en_GB

Ign http://mirrordirector.raspbian.org jessie/rpi Translation-en

Ign http://archive.raspberrypi.org jessie/main Translation-en_GB

Ign http://archive.raspberrypi.org jessie/main Translation-en

Ign http://archive.raspberrypi.org jessie/ui Translation-en_GB

Ign http://archive.raspberrypi.org jessie/ui Translation-en

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

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.

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 chromium-browser ttf-mscorefonts-installer unclutter x11-xserver-utils

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

1. chromium-browser installs Googles Chrome browser, should be installed by default, but just incase it isn’t
2. ttf-mscorefonts-installer adds common web fonts
3. unclutter is used to hide the mouse cursor
4. x11-xserver-utils installs xset, which is used to disable screen blanking

Step 5: Configuring Autostart

Wait, what is Chromium? Chromium is the Open Source version of the Chrome Browser. It is the version that Google then takes and rebrands. Learn more about it.

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

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

# CHANGED
#@xscreensaver -no-splash

1 2	# CHANGED #@xscreensaver -no-splash

# BEGIN ADDED

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

# END ADDED

# BEGIN ADDED

# Enable mixed http/https content, remember if invalid certs were allowed (ie self signed certs)

@/usr/bin/chromium-browser --kiosk --start-maximized --allow-running-insecure-content --remember-cert-error-decisions http://gordonturner.ca

# Normal website that does not need any exceptions

#@/usr/bin/chromium-browser --kiosk --start-maximized http://gordonturner.ca

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

NOTE: You may not need the extra Chromium command line arguments. They are used to allow mixed https/http content and remember if invalid certs were allowed, typically self signed certs. If you have a site that does not need them, use the second line.

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:

Shift Control q

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 howto, Linux, Raspberry Pi | Posted on Thursday, December 29th, 2016 | Comments Off on Raspberry Pi Full Screen Browser (Raspbian November 2016)

Comments are closed.