Raspberry Pi Full Screen Browser (2020-05-27-raspios-buster)

How to setup a Raspberry Pi to boot into a full screen web browser, hiding mouse pointer, disabling screen saver, putting the browser in kiosk mode and using the Raspberry Pi 4 B dual screen output.

Introduction

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

The following describes how to setup a Raspberry Pi running Raspberry Pi OS (formerly Raspbian) to boot into a full screen web browser, hiding mouse pointer, disabling screen saver, installing additional fonts, putting the browser in kiosk mode and dual screen for Raspberry Pi 4 B.

Assumptions and Dependencies

Although the Raspberry Pi model 1 B, 2 B, Zero or Zero W will work, they are very slow. A model 3 B will work and a 4 B is highly recommended.

Step 1: Install Raspberry Pi OS

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

Step 2: Configure Raspberry Pi OS

By default Raspberry Pi OS boots into the desktop, which is what we want. However we also want to set the Locale, Timezone, Keyboard and enable ssh.

First you will see a warning about SSH being enabled and the default password still set. This will be taken care of, so click OK.

By default, the Welcome to Raspberry Pi app should appear on first run. However, there are some things that need to be set that are not part of the Welcome to Raspberry Pi app so close the app by clicking Cancel.

For compatibility issues, it is recommended to set Language to en and Character Set to UTF-8. It is rare, but in the past I have had compatibility issues with other Languages and Character Sets.

1. From the Desktop, click on the Raspberry Pi Menu icon in the top left corner
2. Select Preferences, Raspberry Pi Configuration
3. On the System tab, click Change Password and set a new password
4. On the System tab, set Hostname
5. On the System tab, set Splash Screen to Disabled
6. On the Display tab, set Screen Blanking to Disabled
7. On the Interfaces tab, set SSH to Enabled
8. On the Localisation tab, click Set Locale...
9. Set the Language (eg en), Country (eg US) and Character Set to UTF-8, click OK
10. On the Localisation tab, click Set Timezone...
11. Set the Area (eg Canada), Location (eg Eastern), click OK
12. On the Localisation tab, click Set Keyboard...
13. Set the Model (eg Generic 101-key PC), Layout (eg English (US)), Variant (eg English (US)), click OK
14. Click Ok and you should be promoted to reboot, click YES

After reboot, on the 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. The IP address will be used to ssh to the device, replace the x.x.x.x in the following instructions with the address.

Most of the following can be done in the Desktop but it is faster and easier to explain command line instructions.

Step 3: Update Everything

Log into the Raspberry Pi over ssh:

ssh pi@x.x.x.x

Run apt-get update:

sudo apt-get update -y

You should see something like the following:

Get:1 http://archive.raspberrypi.org/debian buster InRelease [32.6 kB]
Get:2 http://raspbian.raspberrypi.org/raspbian buster InRelease [15.0 kB]
Get:3 http://archive.raspberrypi.org/debian buster/main armhf Packages [330 kB]
Get:4 http://raspbian.raspberrypi.org/raspbian buster/main armhf Packages [13.0 MB]
Get:5 http://raspbian.raspberrypi.org/raspbian buster/non-free armhf Packages [104 kB]
Fetched 13.5 MB in 8s (1,650 kB/s)                                                                                                                                                 
Reading package lists... Done

If you don’t see something similar, there is a network issue, do some troubleshooting to determine the issue.

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

Repeat the steps above until there are no more updates and result 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 and can reboot:

sudo reboot

Step 4: Install Dependencies

Log into the Raspberry Pi over ssh:

ssh pi@x.x.x.x

Install the following dependencies:

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

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

Step 5: Configuring Chromium to Autostart

Next sections will configure the Chromium browser to start at boot for single and dual screens.

The first section explains the configuration of a single screen and there are details explained that are not in the dual screen section. So it is worth reviewing single screen even if you are setting up dual screens.

Single Screen and Browser

This will configure a browser on a single screen.

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:

mkdir -p ~/.config/lxsession/LXDE-pi
cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi
sudo vi .config/lxsession/LXDE-pi/autostart

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

# BEGIN ADDED

@unclutter
@xset s off
@xset s noblank
@xset -dpms

# Browser 1
@/usr/bin/chromium-browser --check-for-update-interval=31536000 --incognito --kiosk http://gordonturner.com

# END ADDED

Change http://gordonturner.com to your desired website.

The additions do the following:

#@xscreensaver -no-splash, disable the screensaver
@/usr/bin/chromium-browser..., start Chromium
@unclutter, hide the mouse cursor
@xset s noblank, disable screen blanking
@xset -dpms, disable Display Power Management Signalling (DPMS)

The Chromium parameters do the following:

--check-for-update-interval=31536000, independent of the underlying apt package management, Chromium will check to see if there is a more current version of the browser. Occasionally there will be a more current version that has not been made available and a popup will appear to update. This parameter will change the check interval the browser checks to 365 days, hopefully preventing this popup.

--incognito, 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

--kiosk, hide the navigation bar and prevent some desktop access

Additional useful parameters:

--allow-running-insecure-content, allow https sites that include http content, normally not a good thing, useful for locally hosted mixed content

--remember-cert-error-decisions, allow Chromium to remember saved certificates that have been “approved”, useful for self signed certificates

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

sudo reboot

If you see the browser, you are done!

Dual Screen and Browser

This will configure a browser on two screens for the Raspberry Pi 4 B.

The same parameters apply to the setup for two screens as for one. There are additional considerations for two screens; the screen geometry and relative position to each other and running two instances of Chromium with unique profiles.

Log into the Raspberry Pi over ssh:

ssh pi@x.x.x.x

With two screens plugged in and Raspberry Pi started, if necessary, open the Screen Configuration to correctly align and configure the sceens.

1. From the Desktop, click on the Raspberry Pi Menu icon in the top left corner
2. Select Preferences, Screen Configuration
3. On the screen align and size the screens
4. When done close app

Confirm geometry and relative positions of the screens to each other by running xrandr:

export DISPLAY=:0.0
xrandr

The output should look like this, depending on your screen size and arrangement.

Screen 0: minimum 320 x 200, current 3840 x 1080, maximum 7680 x 7680
HDMI-1 connected primary 1920x1080+0+0 (normal left inverted right x axis y axis) 527mm x 296mm
   1920x1080     60.00*+  60.00    50.00    59.94  
   1600x900      60.00  
   1280x1024     75.02    60.02  
   1152x864      75.00  
   1280x720      60.00    60.00    50.00    59.94  
   1024x768      75.03    60.00  
   800x600       75.00    60.32  
   720x576       50.00  
   720x480       60.00    60.00    59.94    59.94    59.94  
   640x480       75.00    60.00    59.94    59.94  
   720x400       70.08  
HDMI-2 connected 1920x1080+1920+0 (normal left inverted right x axis y axis) 527mm x 296mm
   1920x1080     60.00*+  60.00    50.00    59.94  
   1600x900      60.00  
   1280x1024     75.02    60.02  
   1152x864      75.00  
   1280x720      60.00    60.00    50.00    59.94  
   1024x768      75.03    60.00  
   800x600       75.00    60.32  
   720x576       50.00  
   720x480       60.00    60.00    59.94    59.94    59.94  
   640x480       75.00    60.00    59.94    59.94  
   720x400       70.08 

The relevant details for the two screens are:

HDMI-1 connected primary 1920×1080+0+0
HDMI-2 connected 1920×1080+1920+0

This translates to:
Browser 1, use --window-position=0,0
Browser 2, use --window-position=0,1920

Next, create two Chromium profile directories:

mkdir -p /home/pi/.config/chromium-custom-1
mkdir -p /home/pi/.config/chromium-custom-2

Run the following once each to create the custom profiles, hit control-c once started to exit Chromium:

/usr/bin/chromium-browser --user-data-dir="/home/pi/.config/chromium-custom-1"
/usr/bin/chromium-browser --user-data-dir="/home/pi/.config/chromium-custom-2"

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:

mkdir -p ~/.config/lxsession/LXDE-pi
cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi
sudo vi .config/lxsession/LXDE-pi/autostart

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

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

# BEGIN ADDED

@unclutter
@xset s off
@xset s noblank
@xset -dpms

# Browser 1
@/usr/bin/chromium-browser --incognito --window-position=0,0 --kiosk --user-data-dir="/home/pi/.config/chromium-custom-1" https://gordonturner.com

# Browser 2
@/usr/bin/chromium-browser --incognito --window-position=1920,0 --kiosk --user-data-dir="/home/pi/.config/chromium-custom-2" https://gordonturner.com

# END ADDED

Restart the Raspberry Pi and you should see the website you configured Chromium to start (eg http://gordonturner.com) launch full screen on both screens:

sudo reboot

If you see the browsers, you are done!

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:

Alt F4

Conclusion

That is all, as new versions of Raspberry Pi OS I will update these notes.

Tagged Linux, Raspberry Pi | Posted on Tuesday, June 30th, 2020 | Comments Off on Raspberry Pi Full Screen Browser (2020-05-27-raspios-buster)