About me

I'm a web and software developer from Kaohsiung, Taiwan.
I design and implement user interfaces, also contribute to open source projects.


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 分支最新版本, 歡迎下載試用:


若需要客製化 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.userScriptsexperimental.onMessageReceived 需要用 WebContextScriptMessageHandler 來重寫. 我另外製作了一個簡單的範例幫助大家理解.

下載 ISO 映像檔

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


  • 觸控螢幕支援 (包括縮放及捲動)
  • 長按連結跳出選單
  • 點選輸入框自動跳出鍵盤
  • 自訂的 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:


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:


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

$ oxideqmlscene web.qml 

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


Introducing SlateKit Base - Technical Preview

SlateKit Base technical preview is now available for download:


SlateKit Base is a small Linux distribution (binary compatible with Ubuntu 14.04 amd64), with specially configured Qt 5.2.0, Mesa 10.0.1, two web engine/renderer: the default QtWebKit, and Oxide, which based on Chromium/Blink.

The whole graphical stacks are merely framebuffer (both KMS and uvesafb), EGL surface, and Qt/QtQuick has made rest of the user interface. No X11, Mir nor Wayland are being used.


The purpose of SlateKit Base is for demonstrating the capabilities of SlateKit project. Most of the key components of SlateKit are preloaded, including the Web Browser, On-Screen Keyboard, and Input Method. I'll add Launcher and Network Manager into next release.

How Do I Get This Thing Running?

As always, this image works on VirtualBox, default it boots into command line with 1024x768-32 screen resolution by using uvesafb driver, you can switch screen resolution with boot parameter like: screen=800x600-32. Network can be configure by:

# ifconfig eth0 up 
# udhcpc -s /etc/udhcpc.script 

Then start the web browser by oxide or slatekit-shell command:

# oxide 

Oxide example file is located under /usr/share/SlateKit/Oxide/web.qml, and SlateKit Shell is /usr/share/SlateKit/Shell/qml/Shell.qml. Don't forget to turn off VirtualBox's mouse integration (Command + I) if you're on Mac OSX.

Can I Use It on Real Device?

This release comes with limited driver selection. If you have Intel, nVidia or AMD/ATi device that supported by KMS, you can create a bootable USB drive using dd command, and try booting SlateKit Base on it with following boot parameter:

boot: slatekit debug=1 

And start udev:

# udevd --daemon
# udevadm trigger  
If everything works fine it will drop you into a command line with native framebuffer resolution, then you can launch the browser as usual.


If you have any thought, question, demo or hardware support request, please feel free to send me a mail or contact me on Twitter @penk.

Happy Hacking!


Oxide WebView on EGLFS QPA

Oxide WebView is a QML wrapper of Chromium content API, just like QtWebEngine. I've been following Chris' development for a while now, it's (surprisingly) usable if you consider its early stage. For those who doesn't want to build Chromium but would like to try, here's the package oxide-qt PPA for amd64/i386 and armhf architecture.

Oxide was designed to be a replacement of QtWebKit and using on Ubuntu Touch, so it's no surprise it supports Mir, Ubuntu (legacy) and XCB QPA by default. As a big fan of Qt's EGLFS plugin, I couldn't be happier to have a Chromium rendered web browser running on bare-metal with nothing but framebuffer and EGL.

So here it is, enable_oxide_on_eglfs.patch. To use it you'll need a fbdev backend enabled Mesa, also Qt 5.2 configured with -opengl es2, and start qmlscene like:

export QT_QPA_PLATFORM=eglfs
export EGL_PLATFORM=fbdev
export EGL_DRIVER=egl_gallium 

qmlscene ./web.qml

Which web.qml may look like this:

import QtQuick 2.0
import com.canonical.Oxide 0.1

WebView {
    width: 800
    height: 600
    url: "https://duckduckgo.com"

My talk proposal of SlateKit just got accepted by FOSSASIA 2014, so more information on this matter will be published here later. Stay tuned. :-)