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 上跑也是沒問題的, 科科.

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) 的功能目前暫時關閉.