搭帳篷搶報名的概念 (Photo Credit: Rex Tsai)
今年的 COSCUP 順利結束了! 感謝所有與會者與辛苦的工作人員. COSCUP 不但是我社群分享經驗的起點, 也一直如同 Bob 所說的, 是每年充電並保持熱情與動力的重要聚會. 這次於閃電秀分享了 Terrarium, 讓來自台灣的流量和下載數都出現了一個小小的 peak. 會後也收到不少建議與回饋, 感激開心自然不在話下, 一些小細節在此稍微作整理.
首先是閃電秀錄影, 感謝馬克砲大大神速上傳:
之前才和朋友聊到, 做這種小玩具專案的時候不自覺都會有「台灣老闆心態」:
Terrarium 計畫登上 Qt Project 的 Showroom 啦! 剛好昨天發佈了 1.2 版的更新 (iOS 審核中), 歡迎下載使用
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.
Build your code normally with qmake && make, install it to a destination, say, android-terrarium:
make install INSTALL_ROOT=../android-terrariumPack 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 TerrariumAppHere's the catch:
ANDROID_DEPLOYMENT_DEPENDENCIES variable for qmake profile, here's my reference
build.xml. I fixed it by using a script workaround..
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!
聽說現在寫標題流行用 Apple 體, 我們也亂寫一個 XD
沒錯, Terrarium 上架 Google Play 啦! 另外還有 Mac 版 及 Ubuntu Linux 版 (amd64 / i386) 可以下載! 詳情請見網站連結.
用冷門方案打包 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但是有幾點要特別注意:
ANDROID_DEPLOYMENT_DEPENDENCIES 變數可以用, 但會 override 原本內容, 所以要寫就得寫齊所有要用的 lib, 可以參考這邊寫法
Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml, 其中必改的內容有 package name, android:icon 和 uses-permission 及 uses-feature. 這部份就參考 Github 上的檔案 吧
最後送大家一張「隨時隨地寫 QML」的照片, 哪天想不開就放網站當 landing page 吧!
(圖片來自 placeit.net, 授權是 Standard Commercial License. 請不要看超過 1000 次, 不然我要多付錢)
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!
最近隨著 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 上跑也是沒問題的, 科科.
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:
src/core/gyp_run.pro, and replace desktop_linux.pri with:
linux: include(config/embedded_linux.pri)
qmake -r CONFIG+=release && make -j4 && sudo make install
If you're looking for a minimal QtWebEngine QML example, here it is: https://gist.github.com/penk/dea91ab88e3e8c838662.
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.
./chroot.sh
SlateKit Base essentially consists:
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 技術預覽 (technical preview) 版本更新時間, 本次的更動如下:
在 SlateKit Shell 介面方面, 新增解鎖畫面 (Lockscreen) 並更新至 oxide 分支最新版本, 歡迎下載試用:
若需要客製化 Launcher, 請參考 Launcher/main.cpp.
除了對應 QKeyEvent 至 QML 外, 還包括 Screen.orientation 及 QOpenGLContext 的實作.
Hope I didn't cram too much information on the title, but things happens fast and I've got so many to share.
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.
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 是一個 Qt 的瀏覽器引擎, 用來取代日漸老舊的 QtWebKit. 它和 Digia 的 QtWebEngine 概念類似: 使用 Chromium 作為引擎, 並包裝 QML 的 API; 唯一差別是只有 Linux 版本, 尚無支援其他平台的計畫. 目前主要由 Canonical 開發並使用於 Ubuntu Touch 內建的網頁瀏覽器及 HTML5 程式中.
我在先前的文章中已概略地介紹了如何在純 framebuffer 環境下啟用 Oxide 和 WebGL, 以及如何打開觸控螢幕及手勢支援, 有興趣可參考.
Oxide 版本的 SlateKit Shell 瀏覽器已經發佈至 Github. 除了操作介面外, 移植一個瀏覽器最艱難的工作就是 UserScript 和 ContextMenu 了. 在 Oxide 裡, 你可以看到原先 WebKit 的 experimental.userScripts 及 experimental.onMessageReceived 需要用 WebContext 和 ScriptMessageHandler 來重寫. 我另外製作了一個簡單的範例幫助大家理解.
若你之前有使用過 SlateKit Base Technical Preview 版本的 Live OS, 這裡可以下載新版本:
閱讀模式 (Reader Mode) 和行動/桌面裝置切換 (UserAgent Switch) 的功能目前暫時關閉.
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.
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.
SlateKit Base Technical Preview updated accordingly:
Most of works are done in one commit, with following features enabled:
The Reader Mode and UserAgent Switch are temporarily disabled in Oxide branch.
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)
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.
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.
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 triggerIf 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!
penk
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. :-)
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.
Works on remote device too: