Try WPE with Balena

Balena is a company in the area of IoT, with a complete open-source stack of tools, images and services for deploying IoT services based on Docker containers. With Balena Cloud one can manage and deploy services in a fleet of devices and manage them remotely.

As WPE maintainers, we created a so-called block (somewhat akin to a service) to allow users to deploy WPE-based services in devices supported by Balena.

Add your device to the public fleet

For a more step-by-step guide, check the Getting Started guide and select the device in the droplist below the header for your particular case.

Joining the public fleet for WPE with your hardware devices is a convenient way to test WPE for a quick evaluation, because it takes few steps to get the service running on several devices.

As a quick overview, these are the steps that you should perform:

  1. Go to https://hub.balena.io/wpe_webkit/balenawpe

  2. Select the appropriate device (there are fewer devices supported in this public fleet than the general support of BalenaOS) and fill in basic configuration parameters, such as wireless network

  3. Download the image to flash

  4. Write the image to a micro-SD card or similar method appropriate for your use-case

  5. After finishing with booting and configuration, the device(s) should be part of the public fleet and running balena-wpe

See Service running and URLs for testing.

Manual installation

Install BalenaOS

The first thing to do is to download the BalenaOS image (based on Linux) for the device that you are interested in.

Check the Getting Started guide and select the device in the droplist below the header for your particular case.

As a quick overview, these are the steps that you should perform:

  1. Go to https://www.balena.io/os/

  2. Select the appropriate type of device, and either the Production or Development flavour of the image, and download it

  3. Write the image to a micro-SD card or similar method appropriate for your use-case

Note: In the Getting Started guide it recommends to use balena-cli tools, as it’s easier to do the initial configuration and write the image, but other methods can be used.

Run Balena-WPE block (container service)

This can be done following the Running your first Container section in the Getting Started guide, but using the URL for the source of the balena-wpe block instead.

Using balena-cli tools, the basic steps are:

$ git clone https://github.com/Igalia/balena-wpe.git

$ cd balena-wpe

$ balena push devicename.local

The first time it will be slow because the base images need to be pulled into the device, but subsequent operations will be faster.

During all of these operations, the log messages are shown in the console where these commands were issued, to see the progress or possible problems.

See Service running and URLs for testing.

Service running and URLs

After the service starts, it should show a website in the screen connected to your device. By default it loads https://wpewebkit.org, but this can be changed with the environment variable WPE_URL in the container.

Additionally, this block ships with tohora, which is a simple interface to change dynamically the URL being shown. It can be accessed in port 8080, something like: http://devicename.local:8080/.

Demos

Name Animation
CSS transformation and animations in WebKit poster circle example Image: WebKit poster circle demo
Playing an embedded video from wpewebkit.org Image: Embedded video demo
Playing BouncyBalls Image: Playing BouncyBalls demo
Rendering WebGL Aquarium demo Image: Rendering WebGL Aquarium demo
Rendering WebGL Abstract Shapes Image: Rendering WebGL Abstract Shapes demo

Further info

Check this collection of blog posts for more info, tips, new releases, etc:

Home