QtWebEngine Build Instruction for Embedded Linux and Qt 5.3

Digia recently released Qt 5.3, but it reads like they provides Qt WebEngine exclusively for their Qt Enterprise Embedded customers, which is not true because you can totally build it from source, and it even works on EGLFS QPA without any modification.

All you need to do is:

• Check out the source from repo
• Edit src/core/gyp_run.pro, and replace desktop_linux.pri with:

  linux: include(config/embedded_linux.pri)
  

• Build as usual: qmake -r CONFIG+=release && make -j4 && sudo make install

I've also uploaded pre-built deb packages of Mesa 10.1, Qt 5.2.1 and QtWebEngine for Ubuntu 14.04 AMD64.
NOTE: this may breaks your desktop Mesa and GL driver, use at your own risk.

If you're looking for a minimal QtWebEngine QML example, here it is: https://gist.github.com/penk/dea91ab88e3e8c838662.

SlateKit Base for Nexus 7 (2013) Released

SlateKit is a drop-in replacement of Android UI stack, to help makers building custom tablet UI, by using Qt/QML, JavaScript and Chromium.

Today we announce the first technical preview of SlateKit Base for Nexus 7 (2013), the platform-specific port, alone with other UI components like SlateKit Shell, LockScreen and Keyboard.

Prerequisite

• Nexus 7 “razor” [2013] (WiFi)
• Android 4.4.2 (KOT49H)
• rooted and adb shell access

Installation

1. Download the image: slatekit-flo-0423.zip (146.7 MB)
2. Unzip files to /data, make sure busybox has executable permission
3. Start the UI by: ./chroot.sh

Technical details

SlateKit Base essentially consists:

• a minimal Ubuntu root filesystem (Trusty/armhf)
• Qt 5.2.1 and Oxide 1.0 (Chromium content API wrapper)
• libhybris for hardware accelerated graphics
• hwcomposer QPA from Mer project

What's next?

Theoretically this rootfs works for all Android 4.4 system with HW composer 1.1/1.2, so I'll try to enable it on other SoC and make an installer.

If you find this interesting or useful, welcome to join the project on Github, and ping me on Twitter @penk or penkia@gmail.com.

Happy Hacking!
penk

SlateKit Base 技術預覽版本更新

又到了每月的 SlateKit Base 技術預覽 (technical preview) 版本更新時間, 本次的更動如下:

• Mesa 10.1.0-4ubuntu4
• Qt 5.2.1+dfsg-1ubuntu14
• Oxide 1.0.0~bzr501-0ubuntu1

在 SlateKit Shell 介面方面, 新增解鎖畫面 (Lockscreen) 並更新至 oxide 分支最新版本, 歡迎下載試用:

• file: slatekit-base-tp-04162014.iso (93.1MB)
• md5sum: db36aa0593f3eefdeabca07223d47b87

Launcher

若需要客製化 Launcher, 請參考 Launcher/main.cpp.

除了對應 QKeyEvent 至 QML 外, 還包括 Screen.orientation 及 QOpenGLContext 的實作.

SlateKit runs on Nexus 7, presented at OSDC.tw 2014

Hope I didn't cram too much information on the title, but things happens fast and I've got so many to share.

SlateKit ported on Nexus 7 (2013)

First things first, with the help of Ubuntu Touch base image and hwcomposer QPA from Mer project, SlateKit is now running smoothly on Nexus 7 (2013) flo device. I'll be working on an image release soon.

Presentation at OSDC.tw 2014

Here's the slides of my talk at OSDC.tw 2014, great audiences and a great conference.

A nice guy made an unofficial record on ustream.tv, go check it out (in Mandarin Chinese)!

Oxide WebView - 在 Qt5 裡使用 Chromium 引擎

Oxide 介紹

Oxide WebView 是一個 Qt 的瀏覽器引擎, 用來取代日漸老舊的 QtWebKit. 它和 Digia 的 QtWebEngine 概念類似: 使用 Chromium 作為引擎, 並包裝 QML 的 API; 唯一差別是只有 Linux 版本, 尚無支援其他平台的計畫. 目前主要由 Canonical 開發並使用於 Ubuntu Touch 內建的網頁瀏覽器及 HTML5 程式中.

我在先前的文章中已概略地介紹了如何在純 framebuffer 環境下啟用 Oxide 和 WebGL, 以及如何打開觸控螢幕及手勢支援, 有興趣可參考.

Oxide 版的 SlateKit Shell

Oxide 版本的 SlateKit Shell 瀏覽器已經發佈至 Github. 除了操作介面外, 移植一個瀏覽器最艱難的工作就是 UserScript 和 ContextMenu 了. 在 Oxide 裡, 你可以看到原先 WebKit 的 experimental.userScripts 及 experimental.onMessageReceived 需要用 WebContext 和 ScriptMessageHandler 來重寫. 我另外製作了一個簡單的範例幫助大家理解.

下載 ISO 映像檔

若你之前有使用過 SlateKit Base Technical Preview 版本的 Live OS, 這裡可以下載新版本:

• 檔案: slatekit-base-tp-03162014.iso (98.4 MB)

功能清單

• 觸控螢幕支援 (包括縮放及捲動)
• 長按連結跳出選單
• 點選輸入框自動跳出鍵盤
• 自訂的 popup 選單 (用在 <select> 和 <option> 標籤)

閱讀模式 (Reader Mode) 和行動/桌面裝置切換 (UserAgent Switch) 的功能目前暫時關閉.

SlateKit Shell ported to Oxide WebView

Oxide WebView evolved

As Oxide developed further, more and more features has been re-enabled in the Ubuntu Touch webbrowser app, that gives us a very good example on how to port a QtWebKit application over Oxide WebView, especially the renderer-related user script and context menu.

Oxide branch of SlateKit Shell

To explain that I've created an example of Oxide WebView with user script, note that experimental.userScripts and experimental.onMessageReceived are replaced by WebContext and ScriptMessageHandler. You may also checkout the Oxide branch of SlateKit Shell.

Download ISO image

SlateKit Base Technical Preview updated accordingly:

• File: slatekit-base-tp-03162014.iso (98.4 MB)

Features

Most of works are done in one commit, with following features enabled:

• Touch gestures
• Context menu when long pressed
• Custom virtual keyboard hook
• PopUp selector menu

The Reader Mode and UserAgent Switch are temporarily disabled in Oxide branch.

Enable Touchscreen Support on Oxide

Wow, So Viewport, Very Gesture

Oxide WebView merged touchscreen support in revision.378, oxide-qt package lands in PPA, so I updated the EGLFS patch accordingly.

How to Use It

To enable pinch gesture and viewport, you'll need a SharedGLContext created to do accelerated compositing, so the tool oxideqmlscene comes in handy:

$ export OXIDE_FORCE_FORM_FACTOR=tablet

$ cat << EOF > web.qml
import QtQuick 2.0
import com.canonical.Oxide 0.1
WebView { 
width: 800; height: 600
url: 'http://duckduckgo.com'
}
EOF

$ oxideqmlscene web.qml 

And there you go. Technical preview of SlateKit Base also upgraded: slatekit-base-tp-02202014.iso (97MB)