Web Apocrypha

This is a follow-up blog post of our announcement of TyGL - the 2D-accelerated GPU rendering port of WebKit.

We have been received lots of feedback about TyGL and we would like to thank you for all questions, suggestions and comments. As we promised lets get into some technical details. Our first post is about building TyGL [1] on an embedded device.

In this post I will guide you through the building process of TyGL on a development board using a Linaro-based rootfs. It will take about 10 hours to install and build, so be prepared for a longer activity. Of course you can speed up the process with different kind of techniques. Here you can find some useful tips:

• cross-compiling [2],
• ccache [3],
• chroot, icecc, etc.

In this guide we use various types of shell commands, so we introduced a simple notation. The '#' prefix before the command means you have to execute the command in a root mode (with sudo/su) and '$' means user mode.

Prerequisites

Minimum requirements:

• 16GB SD card (the size of WebKitTyGL is 7.8 GiB with git history) or 8GB SD card (without the .git directory),
• ARM Mali-T62X board (for example: Arndale-octa [4], Odroid [5], etc.),
• A Linux OS (for example: Ubuntu 14.04).

Install the Linaro image onto the SD card

Download the image to the host machine

First of all create a working directory on your desktop machine:

$ mkdir arndale
$ cd arndale

Download the prebuilt Linaro image and unzip it. You can find the latest image on the Linaro website [6].

$ wget http://releases.linaro.org/14.09/ubuntu/boards/lsk-arndale-octa-mali/arn...
$ gunzip arndale-octa-trusty_alip_20140825-3.img.gz
$ ls

After the ls command you should see 'arndale-octa-trusty_alip_20140825-3.img' on the terminal.

Upload image onto the SD card

Place the SD card into your card reader. (Note: if your OS mounts the SD card automatically, you have to unmount it before the next steps!)

Use the lsblk shell command to retrieve disk information. You have to make sure what is the disk name of your SD card and whether it is mounted or not.
In this example the sda is the host disk and the sdb is the SD card. On most of the Linux systems the SD card device is called sdX where the X is a character.

$ lsblk
NAME   MAJ:MIN RM   SIZE RO TYPE MOUNTPOINT
sda      8:0    0 931.5G  0 disk 
├─sda1   8:1    0   487M  0 part /boot/efi
├─sda2   8:2    0  58.6G  0 part /
├─sda3   8:3    0 864.3G  0 part /home
└─sda4   8:4    0   8.2G  0 part [SWAP]
sdb      8:16   1  14.5G  0 disk 
├─sdb1   8:17   1    15M  0 part 
├─sdb2   8:18   1    52M  0 part 
└─sdb3   8:19   1  12.2G  0 part 
sr0     11:0    1  1024M  0 rom  

The next step is switching to root mode. (Note: Please be careful when using root mode!)

$ sudo su

If any sdXN is mounted (where N is {1, 2, ...}) then you have to unmount them:

# umount -l /dev/sdX1 /dev/sdX2

Now you can copy the Linaro image to the SD card. (Estimated time: 7 min.)

# dd if=arndale-octa-trusty_alip_20140825-3.img of=/dev/sdX bs=4M
512+0 records in
512+0 records out
2147483648 bytes (2.1 GB) copied, 423.15 s, 5.1 MB/s

7048+0 records in
7048+0 records out
7390363648 bytes (7.4 GB) copied, 1491.59 s, 5.0 MB/s

Please verify the content of the SD card!

# lsblk /dev/sdX
NAME   MAJ:MIN RM   SIZE RO TYPE MOUNTPOINT
sdb      8:16   1   7.2G  0 disk 
├─sdb1   8:17   1     4M  0 part 
├─sdb2   8:18   1    52M  0 part 
└─sdb3   8:19   1     2G  0 part 

Resize rootfs partition on the SD card [7]

The next key step is expanding the rootfs (sdX3) part of the image. Because the size of rootfs is too small for a WebKit build (the WebKitEFL build with dependencies is greater than 3 GiB).
Use the sfdisk command to check the space on the SD card. This is necessary to expand the rootfs (sdX3).

# sfdisk -l -uS /dev/sdX
Disk /dev/sdb: 3694 cylinders, 128 heads, 32 sectors/track
Units = sectors of 512 bytes, counting from 0

   Device Boot    Start       End   #sectors  Id  System
/dev/sdb1             1      8191       8191  da  Non-FS data
/dev/sdb2   *      8192    114687     106496   c  W95 FAT32 (LBA)
/dev/sdb3        114688   4194303    4079616  83  Linux
/dev/sdb4             0         -          0   0  Empty

Compute the new size of the partition which is the size of the SD card (in sectors) minus the start sector (from above) minus 5MB (10240 sectors) slop space.

# echo $((`sfdisk -s /dev/sdX` * 2 - 114688 - 10240))
15005696

Change the partition table entry for partition 3 using the start sector and computed new size.

# echo '114688,15005696' | sfdisk -N3 -uS --force /dev/sdX

Now you can resize the rootfs and exit from the root mode.

# resize2fs -p /dev/sdX3
# exit

Please verify the expanded SD card!

$ lsblk /dev/sdX
NAME   MAJ:MIN RM   SIZE RO TYPE MOUNTPOINT
sdb      8:16   1    15G  0 disk 
├─sdb1   8:17   1     4M  0 part 
├─sdb2   8:18   1    52M  0 part 
└─sdb3   8:19   1    15G  0 part 

After you reached this point remove the SD card from your computer and place it into the board.

Building WebKitEFL with TyGL (Estimated total time: 8-10 hours)

Refresh the OS on the board and install the git revision control system.

$ sudo su
# apt-get update
# apt-get upgrade
# apt-get install git

It is recommended to set the 'locale' to US:

# locale-gen en_US.UTF-8
# exit

Clone TyGL

The source code of TyGL can be found on GitHub's servers. You can clone the repository using:

$ git clone https://github.com/szeged/TyGL.git WebKitTyGL.git

Note: of course the .git folder (which is greater than 7 GiB) is not needed for the WebKit build itself. Without this the source code of WebKitTyGL is smaller than 600 MiB. If you don't have enough space on the SD card, clone the repository on your desktop machine, delete .git directory, and upload the source code onto the SD card.

Install EFL dependencies

It is necessary to install some packages for WebKitEFL. (Estimated time: 10 min.)
Note: You may need to retype your password several times since the tools use sudo command to install packages.

$ cd WebKitTyGL.git
$ sudo Tools/efl/install-dependencies

Build TyGL

Set the following environment variables on your board:

$ export NUMBER_OF_PROCESSORS=3
$ export CXXFLAGS="-w -mcpu=cortex-a9 -mthumb -mthumb-interwork -std=c++11 -std=gnu++11 -L/usr/lib/arm-linux-gnueabihf/arm-egl -lmali"
$ export CFLAGS="$CXXFLAGS"
$ export LDFLAGS="-L/usr/lib/arm-linux-gnueabihf/arm-egl -lmali"
$ export CMAKE_EXE_LINKER_FLAGS="$LDFLAGS"
$ export CMAKE_SHARED_LINKER_FLAGS="$LDFLAGS"

... and build the EFL dependencies (estimated time: 2-3 hours). This is a long time, so you can free to do other things.

$ Tools/Scripts/update-webkitefl-libs

Finally you can compile the WebKitTyGL itself (estimated time: 5-7 hours).

$ Tools/Scripts/build-webkit --efl --opengles2 --no-netscape-plugin-api \
  --no-media-stream --tygl \
  --cmakeargs="-DCMAKE_SYSTEM_LIBRARY_PATH=/usr/lib/arm-linux-gnueabihf/arm-egl"

Unfortunately at the moment the WebKitEFL build may yield a link issue at the end (when the compiler (basically the linker) tries to find the OpenGL ES library). If this happens, you need to re-execute the last link command with passing an extra option at the end. You can find this last command in the 'build.log' file. Simply add '-lmali' argument after this command and execute it again. Note: In order to get an accurate command dump you can set the 'export VERBOSE=1' environment variable to get more output. Alternatively you can add the ' 2>&1 | tee build.log' suffix to the build-webkit command above to preserve the log in a file.

Execution

To fix the deficiency of WebKitEFL's build environment set up the following symbolic links:

 $ sudo ln -s \
  /home/linaro/WebKitTyGL.git/WebKitBuild/Dependencies/Root/share/dbus-1/services/org.enlightenment.Ethumb.service \
  /usr/share/dbus-1/services/org.enlightenment.Ethumb.service
 $ sudo ln -s \
  /home/linaro/WebKitTyGL.git/WebKitBuild/Dependencies/Root/share/dbus-1/services/org.enlightenment.Efreet.service \
  /usr/share/dbus-1/services/org.enlightenment.Efreet.service

Before actually executing a TyGL-based browser you have to set this dynamic linker path:

$ export LD_LIBRARY_PATH="$PWD/WebKitBuild/Dependencies/Root/lib:/usr/lib/arm-linux-gnueabihf/arm-egl"

Finally you can run the WebKitTyGL binary:

$ ELM_ACCEL=gl WebKitBuild/Release/bin/MiniBrowser

Links

[1] https://github.com/szeged/TyGL
[2] http://community.arm.com/groups/embedded/blog/2013/11/21/cross-compilation-for-arm
[3] https://ccache.samba.org/
[4] http://www.arndaleboard.org/
[5] http://www.hardkernel.com/
[6] http://releases.linaro.org/14.09/ubuntu/boards/lsk-arndale-octa-mali/
[7] https://wiki.linaro.org/Platform/DevPlatform/Ubuntu/PreBuiltImageInstallation