Terrarium 1.5 上架 - 給工程師的 UI 原型製作工具

受不了修改介面時無盡的存檔-重編-執行 (read-eval-print loop) 迴圈了嗎?
對於肩膀後面有人 (老闆, 與你配合的設計師, 或同時兼任) 盯著螢幕等你套用更新而感到焦慮嗎?
別擔心, Terrarium 來拯救咧~

Terrarium 是一套互動式介面原型製作 (interactive UI prototyping) 工具, 與 Framer.js 或 Facebook Origami 等專案不同之處在於, 這是專門設計給像你我一般的 碼農, 嗯, 工程師使用的.

只要編輯器內容一有更動, 預覽畫面立刻即時更新 (live reload), 讓你連 ctrl-s 都不用按! 不只桌面版全平台制霸 (感謝 Qt), 連手機和平板上都能改 code 即時看結果.. 這麼厲害的小工具, 就讓我們來看看 1.5 版有什麼更新吧:

除了很明顯替未來專案管理功能鋪路的介面之外, 也帶來了新圖示、嶄新 Navigation Bar 與文字選取功能 (這個超難做的哭哭).

給 App Store 和 Google Play 的下載連結在老地方:

另外可以由 Github 直接下載包括 apk, Mac OSX 與 Ubuntu 等平台的套件. 歡迎到 Twitter 上發摟 @TerrariumApp 獲取新消息, 或來信直接報 bug 與我聯絡!

Happy hacking!
penk

QtQuick Rapid Prototyping with Terrarium

Write QML Everywhere, See Result Instantly

Get It on Google Play

Terrarium is now available on Google Play! And you can find it for Mac OSX or Ubuntu Linux (amd64 / i386) too! Please refer to the install section on project website.

Notes on Publish QML App to Google Play

Build your code normally with qmake && make, install it to a destination, say, android-terrarium:

make install INSTALL_ROOT=../android-terrarium

Pack and sign the APK by androiddeployqt command:

~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp

Here's the catch:

• There's a ANDROID_DEPLOYMENT_DEPENDENCIES variable for qmake profile, here's my reference
• androiddeployqt invokes SDK tools and changes project name to "QtApp" every time, that also overwritten build.xml. I fixed it by using a script workaround..
• Default AndroidManifest located at Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml, things you must change are package name, android:icon, uses-permission and uses-feature. Please refer to file on Github

Let's write QML everywhere!

使用 Terrarium 作 QML 快速原型開發

隨時隨地．立竿見影

聽說現在寫標題流行用 Apple 體, 我們也亂寫一個 XD

Google Play 下載

沒錯, Terrarium 上架 Google Play 啦! 另外還有 Mac 版 及 Ubuntu Linux 版 (amd64 / i386) 可以下載! 詳情請見網站連結.

發佈 Qt App 到 Google Play 的方法和心得

用冷門方案打包 apk 本來就吃力不討好, 加上不用 Eclipse 或 Qt Creator 全部手動, 可以採的雷我幾乎全踩過一遍了..

總之一般理論上來說的方法是先 qmake && make 完後指定安裝路徑, 比如說

make install INSTALL_ROOT=../android-terrarium

接著用 androiddeployqt 這個工具打包 apk:

~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp

但是有幾點要特別注意:

• qmake profile 有一個 ANDROID_DEPLOYMENT_DEPENDENCIES 變數可以用, 但會 override 原本內容, 所以要寫就得寫齊所有要用的 lib, 可以參考這邊寫法
• androiddeployqt 不知道哪裡想不開, 會自己呼叫 SDK tools 把 project name 改成 "QtApp", 難怪改 build.xml 都沒用除非手動 ant release 再 jarsigner / zipalign. 我是寫 script 去 workaround 它..
• 預設的 AndroidManifest 在 Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml, 其中必改的內容有 package name, android:icon 和 uses-permission 及 uses-feature. 這部份就參考 Github 上的檔案 吧

大概是這樣, 總之繼續往上架之路努力..這兩天包了快十個平台不同格式的套件 XD

最後送大家一張「隨時隨地寫 QML」的照片, 哪天想不開就放網站當 landing page 吧!

(圖片來自 placeit.net, 授權是 Standard Commercial License. 請不要看超過 1000 次, 不然我要多付錢)

Terrarium.app - Live QML Editor and Viewer

Today we're excited to announce our latest open source project:

Project website: http://www.terrariumapp.com/

Terrarium is a cross platform QML playground, the view changes lively as you type in the editor, makes prototyping and experimenting with QtQuick a lot more fun!

We have already ported Terrarium to Ubuntu desktop and tablet, Mac OSX, iOS, and will be available in Apple App Store and Google Play as a free download soon.

If you have any idea or question, please feel free to write me a mail, ping me on twitter or send a PR on github, happy hacking!

小玩具 QML Playgrounds

最近隨著 Apple 於 WWDC 發表 Swift 以及附帶的 Xcode 6 Playgrounds 環境, 不但 Swift 主要開發者 Chris Lattner 公開表示受到 Learnable Programming 概念與 Light Table 專案的啟發, Bret Victor 在 2012 年那場知名的演講 Inventing on Principle 又再度引起熱烈討論.

由於之前已經發表過使用 QFileSystemWatcher 監控檔案變化而動態更新 view 的 QML LiveReload 工具; 趁著此波熱議, 花了一個下午做出了 QML 版的 Playgrounds, 原始碼在 Github 上: playgrounds.qml.

目前很簡單的使用 TextEdit 元件 (搭配 Atom Theme 配色), 在內容有修改時觸發 QHttpServer 送出更新過的 source. Loader 本身只負責把 cache 清掉重讀而已. 若要繼續做其他深入功能, 可能得遍歷所有 QObject 的 properties, 並搭配型別顯示不同的控制項.. 往好處想, 至少 syntax highlight 不難做就是了. XD

更新: 在 iOS 上跑也是沒問題的, 科科.

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.

Introducing SlateKit Base - Technical Preview

SlateKit Base technical preview is now available for download:

• file: slatekit-base-tp-02082014.iso (115MB)
• md5sum: 1de6e747f66c7d9ae88a14de79df3105
• website: slatekit.org

What?

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.

Why?

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.

Contact

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!
penk

LiveReload for QML

If you're like me, don't use QtCreator much, prefer command line and usually have a simple QtQuick view, then this is for you: https://github.com/penk/qml-livereload

QML LiveReload takes QFileSystemWatcher to monitor file changes, and lively updates the view when possible. It's no match for what QtCreator does but comes handy for simple projects.

Update:

Works on remote device too:

More SlateKit Shell packages

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

• Click package can be downloaded: com.ubuntu.developer.penk.slatekit-shell_0.3_all.click (64KB)
• An experimental Mac OSX app bundle has also been uploaded: slatekit.dmg (23.7MB)

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

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,
penk

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

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

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

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

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

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

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

敬請指教!
penk

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.

• Github repo: https://github.com/penk/SlateKit/tree/master/Shell

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! :-)

Best,
penk <penkia@gmail.com>

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.

GPU acceleration!

I've got the GPU working on NOOK Color, and the port of Open webOS is now built with OpenGL ES 2.0, here's the video:

Technical details:

• Built pvrsrvkm kernel module and took binaries from libgles2-sgx-omap3 package
• Recompiled Qt with -opengl es2 and link QtWebKit against it
• Configured LunaSysMgr with CONFIG_BUILD += opengl and some ifdef in file Src/base/windowdata/HostWindowDataOpenGL.cpp

What does this mean? Well, maybe not much, since the platform (TI OMAP3621) and GPU (PowerVR SGX530) is quite old, but I'm looking forward to hack more recent device like Nexus 7!

Open webOS on NOOK Color

I've built Open webOS (desktop) for ARM, and it's running on NOOK Color.

Downloads

Here's the binaries (142MB, the desktop version) and the whole rootfs (262MB, based on Ubuntu Precise armel), feel free to use if you want to bring Open webOS to other tablets with Ubuntu ported.

You'll need a simple start script like this:

mkdir -p /var/run/dbus   
dbus-daemon --system 

xorg &
export DISPLAY=:0 

cd /opt/build-desktop
./install-webos-desktop.sh
./service-bus.sh start 
./service-bus.sh services 
./run-luna-sysmgr.sh

Screenshots

xPad 0.5 released!

Our answer to the Browser OS for tablets

xpad-0.5.iso (62MB)

After almost a year of hard working, we're proud to present xPad 0.5!
xPad is the Browser OS for touch-based devices, built on top of open source projects like xPUD, Qt/QML and WebKit.


This LiveCD/USB image works great on Virtualbox and some x86 machines, it has also been ported to several TI OMAP3/4 and nVidia Tegra2 platforms.

The Devil is in the details

We rewrote almost everything from the ground up, with Qt 4.7.2, QtQuick 1.1 and QtWebKit 2.1 software stacks, the web browser and virtual keyboard are now perfectly integrated, it also gave us the chance to make further customized UX and demonstrate all kinds of possibility about this Browser OS idea.

More Information

For more information you can refer to the source code repository on Github, and a presentation slides I made for COSCUP 2011. If you have any demo or customization request, feel free to send me a mail ;-)

We hope you enjoy this release as much as we do, and have a great Christmas holiday.

All the best,
penk

TouchWeb - browser of xPad got an upgrade

Here's a sneak preview of our next xPad release, the WebKit-based browser, TouchWeb, has been enhanced for finger browsing. Including:

• Tap-and-hold (long press) gesture for right click
• New Tab/Window handler
• Safari-like URL bar and reload/stop button

And we even got the Chromium OS overview function implemented:

Stay tuned! ;-)