Fred's blog

由於最近在開發自己的產品，又開始重操舊業，開發起 Linux 系統的相關應用和嵌入式技術。為了這個產品，精心開發了一個使用者介面，除了動手把驅動程式搞定、圖形化介面搞定，也調教效能、改善系統架構。 開發自己的產品很過癮，愛怎麼搞就怎麼搞！於是，看到死板的背景覺得很不舒服，就在思考是否可以跑個動畫背景呢？ 因為使用的是 QML 技術來開發 UI，最直接的想法，就是用 QtMultimedia 的 MediaPlayer 無限循環播放一個影片，當作動畫背景： MediaPlayer { id: bg; source: 'bg.mov'; loops: MediaPlayer.Infinite; autoPlay: true; } VideoOutput { anchors.fill: parent; source: bg; } 當然，我們選擇的背景影片，是一個開頭跟結尾一樣的影片，如果正確循環播放，會無縫接軌的變成一個順暢的動畫背景。 然而，結果不如預期，碰到了一個問題，那就是每當背景影片播放到最後時，會畫面變成全黑，然後才再一次重新開始播放，沒辦法「無縫接軌」。仔細暸解以後，發現 MediaPlayer 元件是 QMediaPlayer 的 QML Type 實作，所有秘密都藏在 QMediaPlayer 之中。因為 QMediaPlayer 預設所有的通知事件，都是固定以 1000ms（1秒）的頻率來觸發，這代表，當 QML 元件發現影片播完時，通常已經是播完以後的事了，所以畫面一定會因為影片結束而變黑，然後 QML 元件才發現影片結束，重新進行播放。 知道緣由後，我們可以從事件更新頻率下手，讓 QML 元件發現影片播完的時間更接近實際影片結束的時間，但這必須動用到 C/C++ 的實作，因為 QMediaPlayer 的事件更新頻率無法以純 QML 的方法修改。 C/C++ 完整應用程式的實作如下，我們把更新頻率調高為每 100ms 一次： #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickWindow> #include ...

這次五月的 Hackathon Taiwan ， 因為原本的講師沒空，所以我就來救援了一場 QML 工作坊，這堂課以活動的倒數計時器為開頭，討論怎麼使用 QML 進行超酷炫科幻 UI 的設計，是一堂初學入門課程。 有鑑於過去聽到不少人反應，要使用 QML 必須與 C/C++ 打交道，門檻相當高，於是，這個工作坊的目標，就是讓學員可以在純 QML 的環境下，以 QML 來開發自己的 UI 界面。即便是不熟悉程式語言的人，都可以輕易使用 QML 做出絢麗的 UI。 活動簡報 後記 這次 QML 工作坊事後反應還算不錯，甚至有人以 QML 來開發黑客松活動的作品，未來如果有機會可以再次開課。:-)

話說 如果你之前就有參加過我們的 Hackathon 活動，就會對從第一屆黑客松就有的倒數計時器有所記憶。這是我們特別為 Hackathon 活動所開發的倒數計時器，其著漂亮粒子特效，讓許多人印象深刻，尤其是投影在夜晚的牆壁和玻璃上，伴隨著台北 101 和夜空為背景，可說是非常炫麗又有氣氛。 但經歷過了四次活動，這個計時器也該功成身退了，隨著活動人數成長，活動內容及場地規劃，舊的計時器已經慢慢不敷使用，除了一身漂亮的動畫外，沒有太多的功能。而且，縱使有著一個看起來炫酷的特效，對工作人員和很多參加者來說，也慢慢膩了。 於是，我們又提起筆開始設計一個全新的倒數計時器系統，想設計一個更具科技、科幻感及現代感的介面，除此之外，更希望可以在未來可以引入更多的功能和互動機制，如導引、會場資訊查詢、甚至是直播等。就這樣，一個新的計時器誕生，並在 3/7 - 3/8 第五次的黑客松活動被使用。 因為我們期望這個計時器，不只是用來倒數計時，未來能變成一個多用途的活動系統，所以在設計上有更多的規劃及保留。也採用更多色塊來進行設計，讓畫面上有更多可利用的空間。 互動功能 在這次活動中，我們觀察到了一個現象，那就是對正在專心進行創作及 Hack 的人，手上的工作雖樂趣無窮，但對於旁觀者來說，卻是無聊透頂，這讓黑客松（Hackathon）活動的現場，時不時會呈現一種沈悶的氛圍。此外，參加者的工作效率往往呈現著週期性，或是專心時間總有一個極限，適當的放鬆和中斷也是常見的情況。但是如果放鬆或中斷手上工作時，沒別的事可以舒展身心，這會感到相當無聊了，於是會看到有些人會選擇用吃東西來打發中間的時間。 其實，來黑客松除了動手做之外，人際關係經營及交流也是很重要的一環，但別人正在專心工作時，你不便打攪，尤其是當同隊的人都正在專注做事實，你剛好想要換個氣的時候，更不可能去煩自己的隊友。不過，雖然你的周圍可能沒人可以跟你互動，但你可以去找同樣想換氣的人產生互動，畢竟全場人這麼多，跟你處於同一個狀態的人總是有不少。 那麼，如何找到人可以跟自己互動或交流呢？ 這次活動，我們建立了 IRC Channel ，讓參加者可以上來 IRC 聊天室來說說話。所以，如果你有興趣，除了活動時間之外，平時也可以加入我們的 IR...

在國內，很多人或許對 Qt 很陌生，但這一直是筆者近年來想要推廣的技術，尤其是 QML 這個自 Qt Project 衍生出來的新 UI 技術，更讓人著迷。具有原生效能和擁有炫麗效果的 QML ，確實是一個打造產品的好東西，如大家近來所聽到的 Tesla 汽車、Jolla 手機等，其 UI 就是使用 QML 所開發。當然，之前舊文章中所展示的 UI 和介面，以及能跑在 Android 手機上的 OwaNEXT，也有不少是結合 QML 技術所開發。 推廣過程中總有人質疑，覺得 QML 不是一個設計師能學會的東西。事實上，它的語法相當簡單且模組化，所以也聽聞一些國外的設計公司，其設計師都直接用 QML 做出 UI ，再交給工程師去接上功能。這也是為什麼 HanGee 國民機在開發手機和各種裝置的 UI 時，要選用 QML 為底層的原因了。 因此，筆者自己的公司最近也在籌備許多課程和分享，也與許多朋友成立了一些社群（你可以在 Facebook 加入我們的 Qt @ Taiwan 社群），並設計開發一些相關的工具，以協助更多人能更快速進入到 QML 的世界。不過，因為 UI 與設計師更密切相關，近期應該會針對不懂技術的設計師，推出許多相關的 UI 開發課程。（如果你對這樣的技術有興趣，歡迎與我們聯絡） 其實，這次的黑客松活動與 HanGee 社群合作開設 QML 課程就是一個嘗試，也想收集一些 Qt/QML 初入門者狀況和資料。其中發現一個最大的問題是，無論是技術還非技術人員（如設計師），在安裝 Qt 時就會碰到各種狀況，而且 Qt 開發環境因為功能繁複且龐大，安裝一整套下來要花上不少時間，在學習上也就是一個阻礙。這對技術人員來說，可能不是什麼大問題，但這對設計師來說，就是一個極大的挫折。 因此，我們、講師和 HanGee 社群合作，開發了一個新的工具『OwaViewer』。原本這個工具只是被設計來開發 HanGee 手機介面，但現在可以用來讀取和執行一般的 QML 檔案。這意味著，你再也不需要安裝 Qt 和學習一堆知識，就可以使用 QML 開發使用者介面了，也可以很容易提供一個成果給客戶直接操作，這對許多設計師來說應該是個好消息。 OwaViewer 是個 Open Source Proje...

雖然自己從小喜愛設計，殘害過不少紙筆和滑鼠，但也因為懶惰和時間有限，長大後開始比較少開始動手自己做一些設計。所以，除了突然有一些想法和點子之外，多數時候都會把『設計』這件事推給『設計師』來做，講好聽點叫術業有專攻，講不好聽點就是有想法卻不行動的懶惰派。 如許多人所知，我這幾年一直都在做 JavaScript OS 的開發，嘗試把 JavaScript 應用在各種大大小小的硬體和裝置之中，使嵌入式應用的開發工作更有效率和彈性。又由於這一年來物聯網（IoT）的風潮大爆發，也因此有更多人使用 JavaScript 為基礎的開發，或是形形色色的跨界需求，讓我需要更多時間和金錢去投入這些發展。 不過人總是視覺化的動物，任各種應用發展再多，眼睛看得到的 UI 仍不能缺少。開發的過程中，難免會有一些『有螢幕』的應用。這也是為什麼這幾個月 HanGee 國民機一直在做『OwaNEXT』這樣的 UI 設計工具，而我最近也時常去思考一些 UI 的設計。 如下面展示影片，就是最近這幾周所嘗試開發出來的一個 UI 選單介面概念原型，雖然說是概念原型，但實際上是可以使用的程式，不是一個純展示動畫（畢竟我仍然是一個程式開發者 :-D）。這個 UI 因為是設計給大尺寸螢幕所用，所以是用『Everywhere』為出發點，讓人可以在任何一個地方憑空叫出選單，效果和使用方法都是以一個手掌可掌控為目標： 話說，我一直都不是個走純 Web 路線的開發者，過去有好幾年完不碰 Web 開發，只因為當時 JavaScript 和瀏覽器的效能和效果讓我很不滿意，然後也發現因為太依賴瀏覽器，讓自己的視野窄了許多。也許是因為這樣，這些年許多從前端所發起的各種 UI 設計討論，我沒有接觸太多，也沒有被同化成一份子。 所以，大家在前端很熟悉的 UI 切版、排版等等平常再不過的工作，對我來說反而都是可以再思考和需要再質疑的東西，也仍然保留著強烈的好奇心和探索的意圖。所以最近一直在思考設計 UI 時，一直在想『跳脫出 2D 排版的思維』這個議題。 不知道是因為工具的關係，還是設計方法的關係，現今的 UI 設計，總跳脫不出平面排版的框框，這個東西擺左邊一點、擺高一點、放大一點等等修改，一直是現今許多 UI 設計的討論重點。很少聽到在討論，這個速度要慢一點、緩一點、從哪開始、又從哪定位。 ...

自 HanGee 國民機運動發起之後，我們開始從一個全新的思維和高度，來看待這個手機科技產業到底需要些什麼東西，甚至是創新發明這件事的困難是什麼。尤其是排除掉鬼遮眼的短線商業問題後，專注考慮怎麼讓產業提升、科技產業改變，更可以發現有很多東西是我們可以去嘗試的 其中，使用者介面（User Interface、UI/UX）是一個相當重要的課題，當人類和使用者越來越依賴顯示和觸控技術與機器溝通，虛擬形式的使用者介面就更是不可缺少。因此近年來，這也是許多科技人之間的熱門話題。只是，在我們深入了解後發現，仍然存在許多可以改進的空間。 講可以改進，並非是我們真有一個絕佳的 UI/UX 想法，或是覺得現今已經存在的使用者介面和模式有什麼不好，而是我們認為，設計方法和工具有很大的進步空間。我們都相信，在手機產業蓬勃的今天，設計師們早就已經花了大量時間去研究使用者的行為，並為其設計出不少使用者界面，甚至直到此時此刻，世界上隨時都有新的 UI 被設計出來。不過最大的問題是，設計師腦中的想法很容易被創造，但可以用的原型（Prototype）卻難以被製造出來，需要很大的成本和很高的門檻。 的確，打造實際可以用的原型（Prototype）無論在哪裡，一直都是人類進步的過程中最大的問題之一，更可怕的是，往往人類的思考和創意，都因為牽就工具和打造原型的方法，而受到挶限。還記得在你設計出一個自認傑作的使用者界面當下，工程師告訴你做不到時，你有多麼難過嗎？還記得你告訴自己開始要有 Sense 的去設計 UI 後，你總是設計出平淡無奇的作品嗎？這些都是我們被制約的實際例子，當我們無法很容易取得或使用多彩多姿的顏料，我們就只能畫沒有色彩的素描，你我的創意和創作就沒有了明天。 那麼，我們可以做些什麼呢？ 事實上，就在 HanGee 國民機運動開始不久後，筆者就建立了一個『 UI 先進技術研究組』，並創造了一個名為 OwaNEXT 的專案，試圖找尋協助設計師更快打造出 UI 的方法，然後進一步設計出可用的工具。如果可以讓不懂程式技術的人和設計師，都能輕易打造出可用的 UI 原型，而且能夠真正直接被使用在實際環境上，勢必能讓 UI/UX 領域的工作和視野往前跨更大一步。 OwaNEXT 的名字由來，一方面是以 Owa （芋頭的台語念法）來呼應蕃薯（HanGee），另一方面是向已逝的 S...

曾經想要用 Node.js 開發一些原生的應用程式或是 OpenGL 程式，但無論怎麼問，無所不答的 Google 大神都給我千篇一律的答案：『使用 HTML5 和 WebGL』。這答案其實不令人意外，因為截至目前為止，大多數學習使用 Node.js 的人都是 Web 開發者，其所提出的解決方案，理所當然都是與『瀏覽器』有關。想來有趣，Node.js 就是『與瀏覽器剛分手的 JavaScript Engine』，為何還要回頭與瀏覽器糾纏不清呢？於是，筆者開發並於 GitHub 釋出了一個 Node.js module - 『 jsdx-toolkit 』，讓 JavaScript 開發人員，可以輕易使用 Node.js 開發原生的桌面應用程式，更重要的是，不但可以寫炫麗的 3D UI，而且完全不需要靠『傻大個瀏覽器』。 如果想要載入圖片，並把物件 3D 旋轉，只需要這樣做： var toolkit = require('jsdx-toolkit'); if (toolkit.init() != toolkit.INIT_SUCCESS) { console.log("Failed to initialize jsdx-toolkit."); process.exit(); } /* Create a new stage */ var stage = new toolkit.Stage(); stage.title = 'Rotate'; stage.resize(500, 500); stage.setColor(0, 0, 0, 255); stage.on(toolkit.EVENT_DESTROY, function() { toolkit.quit(); }); stage.show(); /* Load a image */ var texture1 = new toolkit.Texture; texture1.loadFile('fred.jpg'); texture1.setPosition(100, 100); texture1.rotate(toolkit.Y_AXIS, 30, 0, 0, 0); stage.add(texture1); toolkit....

筆者喜愛喝果汁，故為這個新的 Project 取了 Juice 這樣的名稱，意旨一個自己喜愛的桌面環境。在前些日子，因為放棄了 GNOME 而轉向使用 Enlightenment（以下簡稱E17），雖然各方面還算不錯，但在新版 Package 的更新上實在是缺少人在維護。因此，若是使用 Debian 官方版本的 E17 Package，功能非常少，而 E17 官方的 Repository 版本又太舊。其實，原本希望能幫忙打包，但因為種種因素而做罷。 既然本身需求不高，就發揮今年貫徹執行的土砲精神，在空閒時間動手開發一個合用的桌面環境。目前，已經釋出其中一個 Dock/Panel 元件『 JuShelf(Juice Shelf) 』的初步版本，也已經有實作模組(Module)機制，和一種 module。下面是畫面截圖（Screenshot）和最新的展示影片： 畫面中展示的是 Launch module，能提供圖示讓使用者點擊並啟動應用程式。其中的特效設計是放大圖示然後傾斜，帶有相當的趣味性。 目前仍然待完成的模組： 工作視窗清單(taskbar) 系統狀態顯示區(systray) 時間顯示(Clock) 後記 目前 Juice 本身還沒有 Project 網站，只是以個人動機為出發點，若是日後有較完整的開發成果，會再補上。此外，Juice 初期打算使用 Compiz 或 Mutter 做為視窗管理器（Window Manager），以及配合一基本的 GNOME 小元件（如同筆者前些日子在整合 E17 和 GNOME 一般）。

已經過了近兩年，至今仍然沒有一台 PC 廠商做的平板電腦能勝過 iPad，精緻度估且不論，其速度與流暢度，相較之下只能堪稱工程機的程度。其實真正原因不在於這些廠商行銷廣告中的 CPU 『數量』，而是 Android 系統軟體本身處處存在了一些效能上的問題，重點是這些問題不是工程師所在意的，而且吃力又不一定討好，沒人會拿飯碗去賭。另一方面，Android UI 設計永遠就像工程師自我良好的作品，單獨看每一個元件都很漂亮，可是拼裝起來後感覺就是盤剩菜剩飯，就算換了 UI，也不過只是換了封面罷了，換湯不換藥。 Open Source Project 的開發，最困難的就是修改機制，在很多時候，我們只有能力挖肉，沒能力整骨，畢竟整個 Project 不是我們自己寫的。當然，也因此很多設計是無法加上去的，就算加上去也無法好用。就像現在廠商所提倡的軟硬體垂直整合，雖然我們已經有了硬體與軟體的溝通，但在應用軟體到軟體系統之間，其實更需要有好的垂直整合，否則出現斷層後，就像現在 Android 平板總是說不出的有問題。也難怪有人在罵大多數場商只是把 Open Source Software 隨便放到硬體上就拿出來賣，根本不用心。 我們何不來自己動手寫一個平板系統？ 運用現成的 Open Source Project 為基礎，以 iPad 為學習目標，重新打造一個平板用的作業系統。重要的是，品質要能出貨，又有好的擴充性和可用的底層機制，而不只是用套軟體拉一拉 UI 就完事。 Mandice Flat Project （  http://code.google.com/p/flat ） [ Flat Project ] 就是一個這樣的產物，目標是自己動手打造一個開放的平板環境。（目前已經釋出程式碼的子項目是 GrandPa（視窗管理器），是一個仿 iPad 視窗行為的 3D Window Manager。） Flat 的起源，[ Mandice ] 是這幾年間與不少大大小小廠商合作過案子，已有不少經驗和成果。所以在今年的 [ COSCUP 2011 ] 活動，筆者一時興起，便把過去案子所開發的各種元件抽出來再開發並陸續釋出，這就是 [ Flat Project ] 的由來，當然已經移除不應該公開的商業部份。 後記 順帶一提，今年...

不知不覺又過了一年，在這幾天假期花了一番功夫，便從去年與廠商合作的 Project 中，拆出了當時設計的UI並重新撰寫成一個新的文件滑動閱覽程式。在移除了和廠商相關的各個部份後，整體介面功能相當單純易用。該操作介面以滑動(Slider)和時間軸(Timeline)為主要操作概念，方便使用者瀏覽需要照時間排列的各類文件和圖檔資料，並以無限延伸的設計回朔歷史訊息，有點類似圖書館內的報紙查閱機器。

由於一些合作廠商們不願意使用 GoogleTV 或 Android 做 TV Devices，最近實作了 Connected TV 專用的網頁瀏覽器(Web Browser) - 『Superted』。他們選擇不走 Google 之路有很多因素，像是 Google 雖有遠大願景，但當前還不夠成熟，所以目前為止 Android 在 Connected TV 上，還未有立即性的應用程式擴充價值。其次，中國大陸的 PPStream Content 和山寨市場之大，讓華人市場不接受只有 Youtube 的 GoogleTV。再來，就是跨平台開發成本與硬體驅動的議題。這也是為什麼我們會被要求寫一個『比較適合』在 TV Device 上使用的網頁瀏覽器，當然，廠商們的聖旨也說要有大又明顯的 UI，又或者是與 GoogleTV 雷同。 延續過去的 Webkit 網頁瀏覽器實驗品，加上了 3D User Interface 的支援，便完成了 Superted 的原型： 後記 影片中是使用 Acer AspireOne(Intel Atom N270) 第一代 netbook 做功能演示，也已經在 VIA platform 上順利測試過。

As you know, Apple iPad is the latest craze and brings back tablet PC marketing cause most manufactories aim to begin to produce products with touchscreen. In order to make applications work with touchscreen for tablet PC, implementing on-screen keyboard is the major issue. There are many open source solutions you can get from internet, but you may get a question, what time is better to start the on-screen keyboard? It is a good idea that enable on-screen keyboard when input box get focus, that is just like Apple iPhone, iPod, iPad and a lot smart phone. SCIM has panel support, it can provide on-screen keyboard. So I have patched scim-bridge to support that auto enable input method when getting keyboard focus for a GTK+ text entry. If so input method is enabled, SCIM will show on-screen keyboard automatically. Here is my patch you can get: http://people.linux.org.tw/~fred/patches/scim-bridge-0.4.16_client-gtk-autoshow.patch

為了應付即將開學的各項開支，到了春節依然不能停滯而必須努力工作。原本，只是為了工作單單在修某支程式的使用者界面，卻一時心血來潮，幫這選單 UI 添上了『加速度』的處理，更沒想到結果居然讓該 UI 的行為幾乎和 Apple iPhone 一模一樣。就這樣，除夕夜一個晚上，都在玩弄這支程式中不知不覺度過了，半點錢都沒有賭到，歲到是守得很徹底。為了紀念這隻小年獸，就用手機錄下成果。（沒有專業器材，畫質不佳還請多包涵！）

由於之前已經寫過太多雜文說明，『 Clutter Toolkit 』的威力應該就不必要再多說。雖然說 Clutter 開發上很容易，但在真正開始開發程式後，就會發現有很多地方細節需要注意。 關於開發 Clutter 程式時，會碰到的大部份問題，都出在於其設計邏輯與其他 3D Engine 不同，而最不一樣的地方，就是演員制度。Clutter Toolkit 特別的演員制度邏輯，使開發者將不再以大場景和 3D 空間定位為考量重點，而是以一個個 Actor 的角度去實作一切行為。因此，通常開發者第一個會碰到的行為就是『向左走、向右走』，單單使 Actor 旋轉到我們要的角度，就會碰到些問題。 ClutterActor 定義了一系列 function 去實作各種行為，其中旋轉的部份： clutter_actor_set_rotation(ClutterActor *self,                                         ClutterRotateAxis axis,                                         gdouble angle,                                         gfloat x,                                ...

Moblin 帶來的震憾莫過於 3D 樣貌的 UI，其底層 Clutter Toolkits 提供方便易用的 API，確實讓開發者能輕易撰寫炫麗的界面。不過，Clutter 的角色一直被視為一套新的 3D Engine，只是讓人重新打造操作介面而已。這未免小覷了 Clutter 的威力，其真正的好戲，在結合了 GTK+ 之後才正要開始。 這是一段結合 GTK+ Notebook Widget 的展示，隨著觸發而產生的換頁特效： 借由 Offscreen 的實作，可將各種 GTK+ Widget 畫在 Clutter Actor 之上，以此做各種動畫效果，其架構如下所示： 我們可以視為 GTK+ Widget 被轉換成一個個 Clutter Actor，當然這些 Widget 仍然還保留著原本各種 GTK+ 的性質，包括 Signal 等機制，只不過在顯示上，Widget 並非直接被畫在螢幕上，而是畫在 Clutter 的 Buffer 上，讓最後的繪圖動作都交由 OpenGL 做處理。此外，Clutter-GTK 實作了一個假的 GtkWindow 以騙過 GTK+ Toolkits，達成結合兩者的目的。 雖然現在許多 UI 設計都是一窩蜂照抄 iPhone，但不可否認，舊有的使用者習慣還是存在，畢竟遵循舊有習慣的軟體數量太多，還是不太可能一時間淘汰掉。但是， Clutter 給了一個新的機會，讓被人稱為極落伍的 GTK+ UI 有再進化的空間，至於能做到什麼程度，就看各開發者的創意了。

大多數工程師整天埋頭苦幹，也許早就遺忘了眼前的各種高科技裝置在被發明前，所帶來的夢想有多麼令人嚮往，面對眼前的繁瑣雜事，只剩下無奈和痛苦。常在電影裡看到人類對未來科技的憧景，好像天方夜譚一般，尋思，若扣除某些尚未被創造的科技，我們能夠達到夢想中的幾成呢？ 我也想發展像夢一般的 User Interface 呀！:-)