About me

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

2013年12月24日 星期二

How to Pack a Qt Web Browser on Mac OSX

Copy QtWebProcess into app bundle (in our case, SlateKit.app):

mkdir -p SlateKit.app/Contents/libexec
cp ~/Qt5.2.0/5.2.0/clang_64/libexec/QtWebProcess SlateKit.app/Contents/libexec/

Set QPA and plugin path:

cat > SlateKit.app/Contents/libexec/qt.conf << EOF
Plugins = ../../PlugIns
Imports = ../../Resources/qml
Qml2Imports = ../../Resources/qml

Make the app bundle self-contained:

~/Qt5.2.0/5.2.0/clang_64/bin/macdeployqt SlateKit.app -qmldir=qml/ -executable=SlateKit.app/Contents/libexec/QtWebProcess -verbose=3 -dmg

Note there's a known bug of macdeployqt before Qt 5.1, here is a patched one.

More SlateKit Shell packages

In addition to the PPA and deb package, SlateKit Shell has been packed into several formats:

This can already be found on the Ubuntu Touch Software Centre:

2013年6月16日 星期日

SlateKit's handwriting recognition ported to Ubuntu Touch

One of the major components of SlakteKit project is its handwriting recognition input method. It's a usable fully open source solution, consists of Tegaki model, Zinnia engine and a simple QML Canvas stroke detection.

With a patch to maliit-keyboard, and my qtdeclarative5-zinnia-plugin package, it's now being ported to Ubuntu Touch:

I'll keep polishing the keyboard layout and settings of maliit. You can follow me on Twitter or the discussion thread at Ubuntu App Developers for updates.

Happy hacking,

2013年6月9日 星期日

My Ubuntu Touch Weekend Hackathon on Nexus 4

I got some time to play with a Nexus 4 this weekend, and I decided to improve SlateKit Shell on Ubuntu Touch, here are some results:

Fixed the url text (TextField) layout, and improved Suggestion list:

Enabled OrientationHelper:

Tweaked Reader Mode text size:

And here's the tricky one, long pressed Context Menu support:

You can find all the commits from: https://code.launchpad.net/~penk/slatekit-shell/trunk


2013年6月6日 星期四

SlateKit.org Grand Re-Opening

SlateKit.org, the official project website of SlateKit Launcher, Keyboard, NetWiz and recently Shell, hasn't been updated for a while. So this morning I took some time to assemble a new project site, here's the whole screen capture:

Here's the original sketch:

It's as simple as Twitter Bootstrap, Font Awesome and good old FancyZoom. It's a bit plain but I'm quite happy with the result. :-)

SlateKit Shell is now available on Ubuntu Touch

Some quick updates:

  • New features: Reader Mode and User-Agent string Switch
  • Install on Desktop
  • Debian package information landed in Github, this also provides an Ubuntu PPA, so you can install it on Ubuntu Desktop 13.04 (Raring) or later by:

    sudo add-apt-repository ppa:penk/touch
    sudo apt-get update
    sudo apt-get install slatekit-shell

  • Install on Ubuntu Touch
  • SlateKit Shell has been added to Collection PPA, thanks to Michael Hall's help. If you're working on Ubuntu Touch please give it a shot: ppa:ubuntu-touch-coreapps-drivers/collection.

  • UI Components
  • Rather than being tied to one single platform, I would like to make SlateKit a generic QML app suite. Only the one hosted on Launchpad will be using Ubuntu Components (mostly units for now, and some Popover); the main Github repository will not.

  • New Icon
  • Thanks to Georgi Karavasilev, we just got a very first graphical asset, an icon. Stay tuned! ;-)

Ping-Hsun Chen (penk) <penkia@gmail.com>

2013年6月4日 星期二

Bringing Ubuntu Components to Mac OSX

This work has been tested on Mac OSX 10.8.1 with Qt 5.0.2 and ubuntu-ui-toolkit rev.531.

Install Dependencies

brew install gettext bzr
ln -s /opt/Qt5.0.2/5.0.2/clang_64/bin/qmlplugindump.app/Contents/MacOS/qmlplugindump /opt/Qt5.0.2/5.0.2/clang_64/bin/qmlplugindump

Get Package

bzr branch lp:ubuntu-ui-toolkit

Apply Patch

Download and apply ubuntu_ui_toolkit_for_mac_osx.patch to disable GIO and DBus.

Compile and Install

cd ubuntu-ui-toolkit
qmake && make && make install

2013年5月21日 星期二

SlateKit Shell - 內建中文手寫輸入法的 WebKit 瀏覽器

就像去年「以自由軟體實作的 Linux 中文手寫輸入法」一文中所證明的,完全用自由軟體可以做出足堪使用的手寫輸入法。經過一年來的沈澱、將查詢程式拆解成 Zinnia 模組,並將輸入判斷程式移植到 Qt5/QtQuick2,目前最新的成果:

內建中文手寫輸入法的 WebKit 瀏覽器

SlateKit Shell 是一個完全由 QML/JavaScript 寫成、專為觸控介面最佳化的行動瀏覽器。有「側邊展開」的分頁功能、自定的「彈出式選單」以及「開啟新分頁」事件等等;歡迎至 Github 下載來測試使用。

客製化你自己的 QML 虛擬鍵盤

若你有在 QML 中使用螢幕鍵盤的需求 (無論中英)、執行環境又沒有輸入法框架的話,可參考 SlateKit 實作的一系列 IME 模組,更多資訊請參照專案的「Customize QML Virtual Keyboard」頁面。


2013年5月18日 星期六

SlateKit Shell - A Qt5/QML WebKit Browser with Sliding-Drawer UI

This blog post is now offered in Spanish language thanks to Webhostinghub.com.

This is a project I dream to have for almost two and half years, now I finally have the time and right tools to make it.

Why does it look like a drawer? Can't you make something new?

Even though Navigation Drawer pattern is quite trendy nowadays, but this was extremely influenced by the three-year-old Chromium OS tablet conceptual mockups. When I started this browser project, I set up a few goals to follow:

  • Explore layout and user interface design possibility
  • Make a Touch-First control, then add desktop support if needed
  • Write it entirely in QML and JavaScript, to see how far it goes

QtQuick looks like a perfect tool for UI prototyping, and I wanted to learn how it holds up without C++ glue code, custom Model or any other plugins. It turns out pretty okay.

What kind of features does it have?

Apart from the side-tab support, we have some basic features:

  • Custom Popover for select elements and inputs
  • Historical search suggestion and highlight using QtQuick.LocalStorage

Wait a second, is that a virtual keyboard?

You're reading it right! Shell comes with a modularized keyboard (using the Fakekey plugin), this makes it possible to be running as a self-host standalone kiosk-mode application, without using any input method engine or window system, on any touchscreen device comes with a Qt environment.

What's next? Conquer the world? Put it back to shelf and move on?

I think porting it to Ubuntu Touch (and platforms like Mer/Sailfish OS or Hawaii Desktop) with their SDK/Components seems to be a reasonable target. And I will work on small form factor for sure.

Please get it from Github, play with it, feedback/bug report/patch are more than welcomed! :-)

penk <penkia@gmail.com>

2013年5月8日 星期三

Minimal QtWebKit Kiosk and more

Here are some of my WebKit weekend projects..

31MB QtWebKit Kiosk distro

A minimalism distro built on uvesafb and Qt 4.8.4 QWS, Ubuntu Raring based: kiosk-060513.iso. Qt 5.0.2 with DirectFB QPA is on the way.

QtWebKit browser with Sliding-Drawer Tab UI

Written in pure QML and latest QtQuick2 API, check it out on github.

Virtual Keyboard with QML WebView

My SlateKit IME plugins (with English/Chinese handwriting input) is now fully integrated into QML WebView, without using any im server nor im-module.