[Pi IoT] Alarm Clock #19: Kiosk

22 Aug 2016

Browser
Kiosk
Navigation
- Trellis
- Demo

In order to be able to visualise the home control interface on the touch screen, a browser is required. The resolution of the touch screen is limited to 800x480, so every pixel counts. By putting the browser in full screen mode and hiding all the navigation bars, maximum space is made available. This is often referred to as "kiosk mode".

Browser

Rick has already demonstrated how to put the stock browser "Epiphany" in kiosk mode. In order to try something different and be able to compare with Rick's solution, I decided to use the Chromium browser instead.

Chromium is not available in the default repositories. But according to this thread, Chromium can be sourced from the Ubuntu repositories, in order to install on Raspbian Jessie.

First, add the new source:

pi@piiot1:~ $ sudo nano /etc/apt/sources.list.d/chromium-ppa.list

deb http://ppa.launchpad.net/canonical-chromium-builds/stage/ubuntu vivid main

Apply the key to verify the downloaded packages:

pi@piiot1:~ $ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys DB69B232436DAC4B50BDC59E4E1B983C5B393194

Update your package list and install chromium:

pi@piiot1:~ $ sudo apt-get update

pi@piiot1:~ $ sudo apt install chromium-browser

Test the installation by launching the browser. I tried it via SSH and got following error:

pi@piiot1:~ $ chromium-browser
[16670:16670:0818/222510:ERROR:browser_main_loop.cc(271)] Gtk: cannot open display:

To solve this issue, specify which display to use the browser with (the touch screen):

pi@piiot1:~ $ chromium-browser --display=:0

Tadaaa! Chromium is installed and running on Raspberry Pi.

Kiosk

With Chromium installed and executable, let's take a look at some interesting switches. Switches are command line parameters that can be passed when launching Chromium, altering its behaviour and/or appearance.

For my application, these seemed like the most relevant switches:

--display: specify the display to launch the browser on
--kiosk: enable kiosk mode, full screen without toolbars or menus
--noerrdialogs: do not display any error dialogs
--disable-pinch: disable pinching to zoom
--overscroll-history-navigation: disable swiping left and right to navigate back and forth between pages

Launching the full command can then be done as follows:

pi@piiot1:~ $ chromium-browser --display=:0 --kiosk --noerrdialogs --disable-pinch --overscroll-history-navigation=0 http://element14.com

Navigation

At startup, the Chromium browser is started with different tabs. These tabs are not visible due to the kiosk mode though (and can't accidentally be closed either). In order to navigate between these tabs and refresh their content, we need to know how to simulate the correct keypresses, triggering the tab switching.

This is done as follows:

pi@piiot1:~ $ xte "keydown Control_L" "key 3" -x:0 && xte "key F5" -x:0

What this does, is switch tab by simulating the "CTRL + <TAB_ID>" combination, optionally followed by an "F5", refreshing the selected tab.

Trellis

In order to implement this tab switching functionality, I'm using the 4x4 button matrix called Trellis, which I introduced in my previous post. It connects to the I2C pins and requires two software libraries to be installed.

On the hardware side, nothing fancy: connect the Trellis to the I2C pins and power it via the 5V pin:

On the software side, start by installing some dependencies, if not yet installed:

pi@piiot1:~ $ sudo apt-get install build-essential python-pip python-dev python-smbus git

Download and install Adafruit's Python GPIO library:

pi@piiot1:~ $ git clone https://github.com/adafruit/Adafruit_Python_GPIO
pi@piiot1:~ $ cd Adafruit_Python_GPIO/
pi@piiot1:~/Adafruit_Python_GPIO $ sudo python setup.py install
pi@piiot1:~/Adafruit_Python_GPIO $ cd ..

Download Adafruit's Python Trellis library, in order to apply some changes before installation:

pi@piiot1:~ $ git clone https://github.com/tdicola/Adafruit_Trellis_Python
pi@piiot1:~ $ cd Adafruit_Trellis_Python/

Update the Trellis library to make use of the GPIO library:

pi@piiot1:~/Adafruit_Trellis_Python $ nano Adafruit_Trellis.py
...
try:
        #import Adafruit_I2C
        import Adafruit_GPIO.I2C as I2C
...
        def begin(self, addr = 0x70, bus = -1):
                """Initialize the Trellis at the provided I2C address and bus number."""
                #self._i2c = Adafruit_I2C.Adafruit_I2C(addr, bus)
                self._i2c = I2C.Device(addr, bus)
...

Install the updated library:

pi@piiot1:~/Adafruit_Trellis_Python $ sudo python setup.py install
pi@piiot1:~/Adafruit_Trellis_Python $ cd examples/

Depending on whether or not the I2C address was changed by shorting some pads at the back, adapt the code to take into account the correct address:

pi@piiot1:~/Adafruit_Trellis_Python/examples $ nano TrellisTest.py
...
trellis.begin((0x72, I2C_BUS))
...

Test the installation by running the example script:

pi@piiot1:~/Adafruit_Trellis_Python/examples $ sudo python TrellisTest.py
Trellis Demo
Press Ctrl-C to quit.
v8
v11
v8
v11
v8
v8
v0
v0

The Trellis keypad is now installed and usable!

Demo

Adding the "xte" commands to a modified Trellis Python script, the tab switching is implemented.

The below script does the following:

stop all running chromium browsers and launch a new one with 4 tabs
listen for keypresses on the first 4 buttons
if a button is pressed, turn of the previous button's led, and turn on this one
select the matching tab in the browser

#!/usr/bin/env python

import time
import os
import Adafruit_Trellis

trellis = Adafruit_Trellis.Adafruit_TrellisSet(Adafruit_Trellis.Adafruit_Trellis())
trellis.begin((0x72, 1))

for i in range(16):
        trellis.clrLED(i)
        trellis.writeDisplay()
        time.sleep(0.05)

os.system("sudo killall chromium-browser ; chromium-browser --display=:0 --noerrdialogs --kiosk --disable-pinch --overscroll-history-navigation=0 http://element14.com http://raspberrypi.org http://enocean.com http://frederickvandenbosch.be &")

j = 0
trellis.setLED(0)

while True:
  time.sleep(0.03)

  if trellis.readSwitches():
    for i in range(0, 4):
      if trellis.justPressed(i):
        trellis.clrLED(j)
        trellis.setLED(i)
        j = i
        os.system("xte 'keydown Control_L' 'key " + str(i+1) + "' -x:0")
        trellis.writeDisplay()

The visual result: