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

chromium.png

 

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:

Screen Shot 2016-08-22 at 09.41.45.png

 

 

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:

 

 

 

Almost there! I should now finalise the enclosure of the second unit, finish the voice commands and define the different views. *stress level rising*

 


arrow_prev.png

 


Navigate to the next or previous post using the arrows.

arrow_next.png