So I was thrilled to see that the Spanish software company named Igalia released a WebKit port for Embedded systems including the Raspberry Pi: https://www.igalia.com/wpe/

This may come in handy for several projects I have been working on, including my team trivia system that I’m building using Node.js, HTML5 and websockets.

TL;DR

If you just want to try out WPE WebKit, download my build of the image and write it to an SD card like you would with Raspbian. Read the “Playing with WPE WebKit” section further on for more information.

Building WPE WebKit

As there is no binary available out of the box for the Pi, you have to build WPE WebKit yourself. I first thought of building it on the Pi, but according to the creators, that would take “an insane amount of time”.

They propose using a build system like Buildroot or Yocto. At first, I wasn’t a big fan of that, but I had no other options. These build systems are used to cross compile a complete Linux operation system filled with the applications and tools of your choosing. So instead of downloading the Raspbian image, you build your own Raspbian image.

The guys at Igalia were kind enough to set up a Github account with repos for Buildroot and Yocto so you can easily build your own system with WPE WebKit included.

Building on Digital Ocean

Building an operating system can take a lot of time and resources. so I decided to spawn a virtual server using DigitalOcean. I chose a Debian server with an optimized CPU and 8GB of RAM. That $0.119/hour droplet will cost me half a dollar if I only let it run for 4 hours.

Let’s dive into the commands.

First we need a bunch of tools:

apt-get update

apt-get install git build-essential unzip bc mtools libncurses-dev dosfstools -y

Next, we need the Buildroot fork containing WPE WebKit:

git clone https://github.com/WebPlatformForEmbedded/buildroot.git

cd buildroot

To build with Buildroot, you need to select a config from the configs/ folder and customise it if needed.

Let’s select the Pi 3 config with WPE included:

make raspberrypi3_wpe_defconfig

In the past, the whole build process would end with a Raspberry Pi image file. But recently they changed that so now you only get the file system and you need to create that image yourself. Luckily user T94T provided the instructions on how to re-enable the creation of the image file. This is wat you need to do:

Start by opening the customisation menu:

make menuconfig

Make sure you update the options as specified below:

Edit the Raspberry Pi post script:

nano board/raspberrypi/post-image.sh

Make sure GENIMAGE_CFG reads:

GENIMAGE_CFG="${BOARD_DIR}/genimage-${BOARD_NAME}.cfg"

(original instructions can be found here)

Now run the build process with:

make

This might take some time. On my Digital Ocean machine it took about 3 hours.

If all goes well, you should have an sdcard.img file under output/images :

# ls output/images/ -ahl total 280M

drwxr-xr-x 3 root root 4.0K Nov 15 09:17 .

drwxr-xr-x 6 root root 4.0K Nov 15 06:44 ..

-rw-r--r-- 1 root root 18K Nov 15 09:09 bcm2710-rpi-3-b-plus.dtb

-rw-r--r-- 1 root root 18K Nov 15 09:09 bcm2710-rpi-3-b.dtb

-rw-r--r-- 1 root root 17K Nov 15 09:09 bcm2710-rpi-cm3.dtb

-rw-r--r-- 1 root root 32M Nov 15 09:17 boot.vfat

-rw-r--r-- 1 root root 75M Nov 15 09:17 rootfs.cpio

-rw-r--r-- 1 root root 87M Nov 15 09:17 rootfs.ext2

lrwxrwxrwx 1 root root 11 Nov 15 09:17 rootfs.ext4 -> rootfs.ext2

drwxr-xr-x 3 root root 4.0K Nov 15 09:09 rpi-firmware

-rw-r--r-- 1 root root 119M Nov 15 09:17 sdcard.img

-rw-r--r-- 1 root root 3.8M Nov 15 09:09 zImage

Download this file using FileZilla or any other SFTP client.

After that, don’t forget to destroy your Digital Ocean droplet if you don’t need it anymore.

After downloading the sdcard.img file, write it to an SD card using Etcher. IMHO it’s the best SD flash tool out there.

Flashing took less than a minute on my 2015 Macbook Pro

Playing with WPE WebKit

Now for the moment of truth: put that SD card into your Pi and boot it!

If all goes well, you should see something like this:

The cool thing is, the WPE guys also built a whole framework to control the WPE browser remotely. Simply navigate to http://ip.of.pi (eg: http://192.168.204.128) and you’ll get a nice interface.

Remotely navigate to a url and view statistics such as FPS and memory usage.

I tested some presets on both the Pi3 and the Pi3 Model B+ and I must say it runs much smoother on the Pi3 Model B+.

Edit: Also tested this on the Pi3 Model A+ which just came out, and it runs just as smoothly as it does on the Model B+.

This opens up a lot of opportunities for projects that require a nice smooth interface but that need to run on an embedded device like the Raspberry Pi.

Ps: if you want to SSH into the Pi, the login is root/root.

Next steps

Next, I want to run my custom Node.js applications with fancy CSS3 user interfaces on the Pi. So I will need to configure Buildroot to include Node.js.

This means I will have to dig into the inner workings of Buildroot. To bad nobody seems to be able to build a WPE WebKit binary for Raspbian, which would make prototyping a lot easier.

Either way, I would like to thank the creators at Igalia and user T94T on Github who provided the instructions on building the image.

Now go forth and build some cool embedded user interfaces!

Update: next, read my story on how to run your Node.js web application on Buildroot.