tag:blogger.com,1999:blog-35624048885549749892024-03-14T01:04:11.632+08:00penkKeep on rockin' in the free worldChen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.comBlogger330125tag:blogger.com,1999:blog-3562404888554974989.post-86474821954386522692015-03-16T10:42:00.000+08:002015-03-16T16:59:53.165+08:00Terrarium 1.5 上架 - 給工程師的 UI 原型製作工具<blockquote>受不了修改介面時無盡的存檔-重編-執行 (read-eval-print loop) 迴圈了嗎? <br>
對於肩膀後面有人 (老闆, 與你配合的設計師, 或同時兼任) 盯著螢幕等你套用更新而感到焦慮嗎? <br>
別擔心, Terrarium 來拯救咧~</blockquote>
<p><a href="http://www.terrariumapp.com">Terrarium</a> 是一套互動式介面原型製作 (interactive UI prototyping) 工具, 與 <a href="http://framerjs.com/">Framer.js</a> 或 <a href="https://facebook.github.io/origami/">Facebook Origami</a> 等專案不同之處在於, 這是專門設計給像你我一般的 <strike>碼農</strike>, 嗯, 工程師使用的.</p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYU_P70vkVMERWRrxzoyOdte5wGFSBzYYpE2GMEw0eyHPFvKIREzrOJKI7PVPqAV1BO79k-FWOTAh0aynKIccT_bgbWlyPEYlpN1MqMLTzStc7HPw0SfM6u7eLpXhdKvVA85ToPuQ40N5-/s1600/terrarium-google-play.001.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYU_P70vkVMERWRrxzoyOdte5wGFSBzYYpE2GMEw0eyHPFvKIREzrOJKI7PVPqAV1BO79k-FWOTAh0aynKIccT_bgbWlyPEYlpN1MqMLTzStc7HPw0SfM6u7eLpXhdKvVA85ToPuQ40N5-/s640/terrarium-google-play.001.png" /></a>
<p>只要編輯器內容一有更動, 預覽畫面立刻即時更新 (live reload), 讓你連 ctrl-s 都不用按! 不只桌面版全平台制霸 (感謝 Qt), 連手機和平板上都能改 code 即時看結果.. 這麼厲害的小工具, 就讓我們來看看 1.5 版有什麼更新吧: </p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GmNhyyyfaOcM9rC9zrLLbP9AotoXADuPkKGMEiEasaR2AAqZSlizoiQ4t894tiHS9LKRk-G9MRRjAt3HCfb1gNTzhobgv7y-1VW4IAH2lkKvSKn1xq2QtNflGMWhEEjUQrg-OqwSdDVr/s1600/features.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GmNhyyyfaOcM9rC9zrLLbP9AotoXADuPkKGMEiEasaR2AAqZSlizoiQ4t894tiHS9LKRk-G9MRRjAt3HCfb1gNTzhobgv7y-1VW4IAH2lkKvSKn1xq2QtNflGMWhEEjUQrg-OqwSdDVr/s640/features.png" /></a>
<p>除了很明顯替未來專案管理功能鋪路的介面之外, 也帶來了新圖示、嶄新 Navigation Bar 與文字選取功能 (這個超難做的哭哭).</p>
<p>給 App Store 和 Google Play 的下載連結在老地方: </p>
<p>
<a href="https://itunes.apple.com/us/app/terrarium/id891232736?ls=1&mt=8"><img src="http://www.terrariumapp.com/images/apple.png" border="0"></a>
<a href="https://play.google.com/store/apps/details?id=com.terrariumapp.penk.Terrarium"><img src="http://www.terrariumapp.com/images/google.png" border="0" style="margin-left: 5px"></a>
</p>
<p>另外可以由 <a href="https://github.com/penk/terrarium-app/releases/tag/V1.5">Github</a> 直接下載包括 <a href="https://github.com/penk/terrarium-app/releases/download/V1.5/TerrariumApp_1.5.apk">apk</a>, <a href="https://github.com/penk/terrarium-app/releases/download/V1.5/Terrarium-1.5.dmg">Mac OSX</a> 與 <a href="https://github.com/penk/terrarium-app/releases/download/V1.5/terrarium_1.5_amd64.deb">Ubuntu</a> 等平台的套件. 歡迎到 Twitter 上發摟 <a href="http://www.twitter.com/TerrariumApp">@TerrariumApp</a> 獲取新消息, 或來信直接<strike>報 bug</strike> <a href="mailto:penkia+terrariumapp@gmail.com">與我聯絡</a>! </p>
<p>Happy hacking!<br>penk<p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com2tag:blogger.com,1999:blog-3562404888554974989.post-66636822627503698812015-02-09T14:20:00.005+08:002015-02-09T14:20:58.150+08:00Terrariumapp 網站更新, 採用了時下流行的 Landing Page 模版<p>趁著週末上線了新版的 <a href="http://www.terrariumapp.com">Terrariumapp.com</a> 網站, 現在大概長這樣: </p>
<a href="http://www.terrariumapp.com" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuJdDNP9-Vn1vkySaXD3JxcE2GrAaWop0Tc1bANI5iAkNJbkTo2G0kopamRhrA0JTGdYJ3JUabWfKF4w7sQVxQulsZMQtuWRNaCeJie3gAKpay5O2Qx8EP7FR3L8cV5DDzAo6Y0O4LnbJ/s640/screencapture-www-terrariumapp-com.png" /></a>
<p>另外順手弄了 <a href="http://twitter.com/terrariumapp">@Terrariumapp</a> 的推特帳號, 接下來一些期待許久的功能也會陸續更新, 敬請支持指教! </p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-20392842238559120762014-07-21T11:39:00.001+08:002014-07-21T11:50:14.375+08:00Terrarium.app - COSCUP 2014 閃電秀與幕後花絮<p>
<img src="http://i.imgur.com/koGkecl.jpg" width="700" style="width: 700px">
<br>搭帳篷搶報名的概念 (Photo Credit: Rex Tsai)
</p>
<p>
今年的 COSCUP 順利結束了! 感謝所有與會者與辛苦的工作人員. COSCUP 不但是我社群分享經驗的起點, 也一直如同 Bob 所說的, 是每年充電並保持熱情與動力的重要聚會.
這次於閃電秀分享了 <a href="http://www.terrariumapp.com/">Terrarium</a>, 讓來自台灣的流量和下載數都出現了一個小小的 peak. 會後也收到不少建議與回饋, 感激開心自然不在話下, 一些小細節在此稍微作整理.
</p>
<p>
首先是閃電秀錄影, 感謝馬克砲大大神速上傳:
<iframe width="853" height="480" src="//www.youtube.com/embed/O5KRxoUOMwY" frameborder="0" allowfullscreen></iframe>
</p>
<p>
<ul>
<li>沒什麼內容的<a href="https://speakerdeck.com/penk/terrarium-live-qml-code-editor">投影片</a>在此
<li>影片內容和投影片都是 CC BY-SA 3.0 授權, 請安心使用
<li>flappy bird 是<a href="https://github.com/gustavosbarreto/qml-flappy-bird">改來的</a>
<li>講完還沒回座位就收到票亭老闆 hlb 大人的票, <a href="https://github.com/penk/terrarium-app/issues/4">馬上解掉</a>
</ul>
</p>
<p>
之前才和朋友聊到, 做這種小玩具專案的時候不自覺都會有「台灣老闆心態」:
<ul>
<li>技術不深
<li>開發時間短
<li>展示效果驚人(假的也沒關係)
<li>有時事、話題性
</ul>
仔細想想也沒什麼不好, 就像 DHH 說不要藉由引入外部動機消滅 open source 專案的初衷一樣. 那麼繼續加油吧!
</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-30366317609718491072014-07-03T17:39:00.002+08:002014-07-03T17:52:39.934+08:00慶祝上 Qt Showroom, Terrarium 新版本限時免費中! <p>
<img src="http://i.imgur.com/PGCjhxm.png" width="480" style="width: 480px">
</p>
<p>
<a href="http://terrariumapp.com">Terrarium 計畫</a>登上 Qt Project 的 <a href="http://showroom.qt-project.org/terrarium/">Showroom</a> 啦! 剛好昨天發佈了 <a href="https://play.google.com/store/apps/details?id=com.terrariumapp.penk.Terrarium">1.2 版</a>的更新 (iOS 審核中), 歡迎下載使用
</p>
<p>
<h2>1.2 版新功能</h2>
<ul>
<li>升級至 Qt 5.3.1
<li>支援 Android L 與 Mac OSX 10.10
<li>基本的存檔 (LocalStorage) 和 Email 匯出功能
<li>View 的全螢幕預覽模式
<li>行號與游標顯示
</ul>
之後會加上 Github Gist 匯出 (應該啦), 歡迎測試, 有任何意見也請不吝指教 XD
</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-62326883577667794862014-06-27T15:59:00.001+08:002014-06-27T20:10:22.144+08:00Terrarium for iPad is now available on App Store<p><a href="http://www.terrariumapp.com/">Terrarium</a>, the QtQuick Editor/Viewer, is now available on App Store: </p>
<ul style="margins: 10px">
<li style="display: inline"><a href="https://itunes.apple.com/us/app/terrarium/id891232736?ls=1&mt=8"><img src="http://www.terrariumapp.com/images/apple.png"></a>
<li style="display: inline"><a href="https://play.google.com/store/apps/details?id=com.terrariumapp.penk.Terrarium"><img src="http://www.terrariumapp.com/images/google.png"></a>
</ul>
<p>Happy Hacking! :-)</p>
<a href="http://www.terrariumapp.com/"><img src="http://i.imgur.com/FHRd2Tv.jpg" width="960" style="width: 960px"></a>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com1tag:blogger.com,1999:blog-3562404888554974989.post-62620800120130586692014-06-18T15:58:00.001+08:002014-06-27T20:15:00.968+08:00QtQuick Rapid Prototyping with Terrarium<h1>Write QML Everywhere, See Result Instantly</h1>
<p><a href="http://www.terrariumapp.com/"><img src="http://i.imgur.com/5oHe8Xb.jpg" width="960" style="width: 960px"></a></p>
<h1>Get It on Google Play</h1>
<p><a href="https://play.google.com/store/apps/details?id=com.terrariumapp.penk.Terrarium"><img src="http://www.terrariumapp.com/images/google.png"></a>
</p>
<p><a href="http://www.terrariumapp.com/">Terrarium</a> is now available on Google Play! And you can find it for <a href="http://goo.gl/dd0Q0h">Mac OSX</a> or Ubuntu Linux (<a href="https://launchpad.net/~penk/+archive/touch/+files/terrarium_0.1_amd64.deb">amd64</a> / <a href="https://launchpad.net/~penk/+archive/touch/+files/terrarium_0.1_i386.deb">i386</a>) too! Please refer to the <a href="http://www.terrariumapp.com/#install">install section on project website</a>.
</p>
<h1>Notes on Publish QML App to Google Play</h1>
<p>Build your code normally with <code>qmake && make</code>, install it to a destination, say, <code>android-terrarium</code>:
<pre style="background-color: lightgray; padding: 10px; ">
make install INSTALL_ROOT=../android-terrarium
</pre>
Pack and sign the APK by <code>androiddeployqt</code> command:
<pre style="background-color: lightgray; padding: 10px; ">
~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp
</pre>
Here's the catch:
<ul><li>There's a <code>ANDROID_DEPLOYMENT_DEPENDENCIES</code> variable for qmake profile, here's <a href="https://github.com/aportale/qtouchandlearn/blob/master/src/touchandlearn.pro">my reference</a>
<li>androiddeployqt invokes SDK tools and changes project name to "QtApp" every time, that also overwritten <code>build.xml</code>. I fixed it by using a script workaround..
<li>Default AndroidManifest located at <code>Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml</code>, things you must change are package name, android:icon, uses-permission and uses-feature. Please refer to <a href="https://github.com/penk/terrarium-app/tree/master/android">file on Github</a>
</ul>
</p>
<p>Let's write QML everywhere!
</p>
<p><img src="http://i.imgur.com/1cBlPuq.jpg" width="960" style="width: 960px">
</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-17049771150532474632014-06-18T15:27:00.002+08:002014-06-27T20:14:45.760+08:00使用 Terrarium 作 QML 快速原型開發<p><a href="http://www.terrariumapp.com/"><img src="http://i.imgur.com/5oHe8Xb.jpg" width="960" style="width: 960px"></a></p>
<h1>隨時隨地.立竿見影</h1>
<p>聽說現在寫標題流行用 Apple 體, 我們也亂寫一個 XD</p>
<h1>Google Play 下載</h1>
<p><a href="https://play.google.com/store/apps/details?id=com.terrariumapp.penk.Terrarium"><img src="http://www.terrariumapp.com/images/google.png"></a>
</p>
<p>沒錯, <a href="http://www.terrariumapp.com/">Terrarium</a> 上架 Google Play 啦! 另外還有 <a href="http://goo.gl/dd0Q0h">Mac 版</a> 及 Ubuntu Linux 版 (<a href="https://launchpad.net/~penk/+archive/touch/+files/terrarium_0.1_amd64.deb">amd64</a> / <a href="https://launchpad.net/~penk/+archive/touch/+files/terrarium_0.1_i386.deb">i386</a>) 可以下載! 詳情請見<a href="http://www.terrariumapp.com/#install">網站連結</a>.
</p>
<h1>發佈 Qt App 到 Google Play 的方法和心得</h1>
<p>用冷門方案打包 apk 本來就吃力不討好, 加上不用 Eclipse 或 Qt Creator 全部手動, 可以採的雷我幾乎全踩過一遍了..</p>
<p>
總之一般理論上來說的方法是先 <code>qmake && make</code> 完後指定安裝路徑, 比如說
<pre style="background-color: lightgray; padding: 10px; ">
make install INSTALL_ROOT=../android-terrarium
</pre>
接著用 <code>androiddeployqt</code> 這個工具打包 apk:
<pre style="background-color: lightgray; padding: 10px; ">
~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp
</pre>
但是有幾點要特別注意:
<ul><li>qmake profile 有一個 <code>ANDROID_DEPLOYMENT_DEPENDENCIES</code> 變數可以用, 但會 override 原本內容, 所以要寫就得寫齊所有要用的 lib, 可以參考<a href="https://github.com/aportale/qtouchandlearn/blob/master/src/touchandlearn.pro">這邊</a>寫法
<li>androiddeployqt 不知道哪裡想不開, 會自己呼叫 SDK tools 把 project name 改成 "QtApp", 難怪改 build.xml 都沒用除非手動 ant release 再 jarsigner / zipalign. 我是寫 script 去 workaround 它..
<li>預設的 AndroidManifest 在 <code>Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml</code>, 其中必改的內容有 package name, android:icon 和 uses-permission 及 uses-feature. 這部份就參考 <a href="https://github.com/penk/terrarium-app/tree/master/android">Github 上的檔案</a> 吧
</ul>
大概是這樣, 總之繼續往上架之路努力..這兩天包了快十個平台不同格式的套件 XD
</p>
<p>最後送大家一張「隨時隨地寫 QML」的照片, 哪天想不開就放網站當 landing page 吧!
</p>
<p><img src="http://i.imgur.com/1cBlPuq.jpg" width="960" style="width: 960px">
<br>(圖片來自 placeit.net, 授權是 Standard Commercial License. 請不要看超過 1000 次, 不然我要多付錢)
</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com2tag:blogger.com,1999:blog-3562404888554974989.post-2545305105487275032014-06-12T19:29:00.000+08:002014-06-13T00:46:44.871+08:00Terrarium.app - Live QML Editor and Viewer<p>
Today we're excited to announce our latest open source project:
<p>
<a href="http://www.terrariumapp.com/">
<img src="http://i.imgur.com/jGXa1ix.png"></a> <br>
Project website: <a href="http://www.terrariumapp.com/">http://www.terrariumapp.com/</a>
</p>
<p>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!</p>
<p>
<img src="http://www.terrariumapp.com/images/doge.png" width="800" style="width: 800px">
</p>
<p>We have already ported Terrarium to Ubuntu <a href="http://i.imgur.com/lrMH7OY.png">desktop</a> and <a href="http://i.imgur.com/NPlxNx0.png">tablet</a>, <a href="http://i.imgur.com/iEoTDLa.png">Mac OSX</a>, <a href="http://i.imgur.com/NezPpL9.png">iOS</a>, and will be available in Apple App Store and Google Play as a free download soon.</p>
<p>If you have any idea or question, please feel free to <a href="mailto:penkia@gmail.com">write me a mail</a>, ping me <a href="http://twitter.com/penk">on twitter</a> or send a <a href="https://github.com/penk/terrarium-app">PR on github</a>, happy hacking!</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-66581846170884308832014-06-07T21:09:00.002+08:002014-06-08T01:49:49.537+08:00小玩具 QML Playgrounds<p>
最近隨著 Apple 於 WWDC 發表 Swift 以及附帶的 Xcode 6 Playgrounds 環境, 不但 Swift 主要開發者 Chris Lattner <a href="http://nondot.org/sabre/">公開表示</a>受到 Learnable Programming 概念與 <a href="http://www.chris-granger.com/lighttable/">Light Table</a> 專案的啟發, Bret Victor 在 2012 年那場知名的演講 <a href="http://vimeo.com/36579366">Inventing on Principle</a> 又再度引起熱烈討論.</p>
<p>
<img src="http://i.imgur.com/lBSQFC2.png" width="800" style="width: 800px">
</p>
<p>
由於之前已經發表過使用 <code>QFileSystemWatcher</code> 監控檔案變化而動態更新 view 的 <a href="http://penkia.blogspot.com/2014/01/livereload-for-qml.html">QML LiveReload</a> 工具; 趁著此波熱議, 花了一個下午做出了 QML 版的 Playgrounds, 原始碼在 Github 上: <a href="https://github.com/penk/qml-playgrounds/blob/master/playgrounds.qml">playgrounds.qml</a>.
</p>
<p>
目前很簡單的使用 <code>TextEdit</code> 元件 (搭配 Atom Theme 配色), 在內容有修改時觸發 QHttpServer 送出更新過的 source. Loader 本身只負責把 cache 清掉重讀而已. 若要繼續做其他深入功能, 可能得遍歷所有 QObject 的 properties, 並搭配型別顯示不同的控制項.. 往好處想, 至少 syntax highlight 不難做就是了. XD</p>
<p><strong>更新: </strong>
在 iOS 上跑也是沒問題的, 科科. </p><p>
<img src="http://i.imgur.com/L3i5MAV.png" style="width: 800px" width="800">
</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-34722240974323978512014-05-29T16:40:00.001+08:002014-05-29T16:41:28.865+08:00QtWebEngine Build Instruction for Embedded Linux and Qt 5.3 <p>
Digia recently <a href="http://blog.qt.digia.com/blog/2014/05/13/news-from-the-qt-webengine-team/">released Qt 5.3</a>, 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.
</p>
<p>
<a href="http://i.imgur.com/HJzUSxE.jpg"><img src="http://i.imgur.com/HJzUSxE.jpg" width="700" style="width: 700px;"></a>
</p>
<p>
All you need to do is:
<ul>
<li>Check out the source from <a href="https://github.com/qtproject/qt-labs-qtwebengine">repo</a>
<li>Edit <code>src/core/gyp_run.pro</code>, and replace <code>desktop_linux.pri</code> with:
<pre>
linux: include(config/embedded_linux.pri)
</pre>
<li>Build as usual: <code>qmake -r CONFIG+=release && make -j4 && sudo make install</code>
</ul>
I've also uploaded <a href="https://mega.co.nz/#!4JYHgaKA!xvCHNnlca3hbneXLrQ-dMb8KoGzK0opJpXM_s6IXOIM">pre-built deb packages</a> of Mesa 10.1, Qt 5.2.1 and QtWebEngine for Ubuntu 14.04 AMD64. <br>
<strong>NOTE: this may breaks your desktop Mesa and GL driver, use at your own risk</strong>.
</p>
<p>If you're looking for a minimal QtWebEngine QML example, here it is: <a href="https://gist.github.com/penk/dea91ab88e3e8c838662">https://gist.github.com/penk/dea91ab88e3e8c838662</a>.</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-22681286379297731142014-05-18T16:16:00.000+08:002014-05-19T11:51:03.948+08:00SlateKit Base for Nexus 7 (2013) Released<p><a href="http://slatekit.org">SlateKit</a> is a drop-in replacement of Android UI stack, to help makers building custom tablet UI, by using Qt/QML, JavaScript and Chromium.</p>
<p><a href="http://i.imgur.com/Sdai8zc.jpg"><img src="http://i.imgur.com/Sdai8zc.jpg" width="800" style="width: 800px" /></a></p>
<p>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.</p>
<h2>Prerequisite</h2>
<p><ul>
<li>Nexus 7 “razor” [2013] (WiFi)
<li>Android 4.4.2 (KOT49H)
<li>rooted and adb shell access
</ul></p>
<h2>Installation</h2>
<p><ol>
<li>Download the image: <a href="http://goo.gl/ybYVO1">slatekit-flo-0423.zip</a> (146.7 MB)
<li>Unzip files to /data, make sure busybox has executable permission
<li>Start the UI by: <code>./chroot.sh</code>
</ol></p>
<h2>Technical details</h2>
<p>SlateKit Base essentially consists:</p>
<p><ul>
<li>a minimal Ubuntu root filesystem (Trusty/armhf)
<li>Qt 5.2.1 and <a href="https://launchpad.net/oxide">Oxide 1.0</a> (Chromium content API wrapper)
<li><a href="https://github.com/libhybris/libhybris">libhybris</a> for hardware accelerated graphics
<li><a href="https://github.com/mer-hybris/qt5-qpa-hwcomposer-plugin">hwcomposer QPA</a> from Mer project
</ul></p>
<h2>What's next?</h2>
<p>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.</p>
<p>If you find this interesting or useful, welcome to join the project on <a href="https://github.com/penk/SlateKit">Github</a>, and ping me on Twitter <a href="http://twitter.com/penk">@penk</a> or <a href="mailto:penkia@gmail.com">penkia@gmail.com</a>.
<p>
Happy Hacking!<br>
penk</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-27814747861666129202014-04-16T17:57:00.001+08:002014-04-16T17:57:28.778+08:00SlateKit Base 技術預覽版本更新<a href="http://i.imgur.com/zOdVCh1.png"><img src="http://i.imgur.com/zOdVCh1.png" width="512" style="width: 512px"></a>
<p>又到了每月的 SlateKit Base 技術預覽 (technical preview) 版本更新時間, 本次的更動如下: </p>
<p>
<ul>
<li>Mesa 10.1.0-4ubuntu4
<li>Qt 5.2.1+dfsg-1ubuntu14
<li>Oxide 1.0.0~bzr501-0ubuntu1
</ul>
</p>
<p>
在 SlateKit Shell 介面方面, 新增解鎖畫面 (Lockscreen) 並更新至 <a href="https://github.com/penk/SlateKit/tree/oxide/Shell">oxide 分支</a>最新版本, 歡迎下載試用:
</p>
<p>
<ul>
<li>file: <a href="https://mega.co.nz/#!1cpmQBRC!5Nn7YP03Q5_idzmuydLQyiXaw5vweJ6SHHEixNfzt3g">slatekit-base-tp-04162014.iso</a> (93.1MB)
<li>md5sum: db36aa0593f3eefdeabca07223d47b87
</ul>
</p>
<h2>Launcher</h2>
<p>若需要客製化 Launcher, 請參考 <a href="https://github.com/penk/SlateKit/blob/oxide/Launcher/main.cpp">Launcher/main.cpp</a>.</p>
<a href="http://i.imgur.com/vdXLdCI.png"><img src="http://i.imgur.com/vdXLdCI.png" width="512" style="width: 512px"></a>
<p>除了對應 QKeyEvent 至 QML 外, 還包括 Screen.orientation 及 QOpenGLContext 的實作.</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-20968846903748945712014-04-13T14:30:00.001+08:002014-04-14T05:28:12.500+08:00SlateKit runs on Nexus 7, presented at OSDC.tw 2014<p>Hope I didn't cram too much information on the title, but things happens fast and I've got so many to share. </p>
<h2>SlateKit ported on Nexus 7 (2013)</h2>
<img src="http://i.imgur.com/8H9LH9U.jpg" width="600" style="width: 600px">
<p>First things first, with the help of Ubuntu Touch base image and <a href="https://github.com/mer-hybris/qt5-qpa-hwcomposer-plugin">hwcomposer QPA</a> from Mer project, SlateKit is now running smoothly on Nexus 7 (2013) flo device. I'll be working on an image release soon.</p>
<h2>Presentation at OSDC.tw 2014</h2>
<p>Here's the <a href="https://speakerdeck.com/penk/slatekit-status-report-2014">slides of my talk</a> at OSDC.tw 2014, great audiences and a great conference.</p>
<script async class="speakerdeck-embed" data-id="dab87d20a3690131166e024e11a95d47" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
<p>A nice guy made an unofficial record on ustream.tv, go check it out (in Mandarin Chinese)! </p>
<iframe width="480" height="392" src="http://www.ustream.tv/embed/recorded/46010838?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-49429207887842576682014-03-16T18:13:00.003+08:002014-03-16T18:13:59.244+08:00Oxide WebView - 在 Qt5 裡使用 Chromium 引擎<a href="http://i.imgur.com/4gFmf5W.jpg" imageanchor="1" ><img border="0" src="http://i.imgur.com/4gFmf5W.jpg" width="600px" style="width: 600px" /></a>
<h2>Oxide 介紹</h2>
<p><a href="https://code.launchpad.net/~oxide-developers/oxide/oxide.trunk">Oxide WebView</a> 是一個 Qt 的瀏覽器引擎, 用來取代日漸老舊的 QtWebKit. 它和 Digia 的 <a href="http://qt-project.org/wiki/QtWebEngine">QtWebEngine</a> 概念類似: 使用 Chromium 作為引擎, 並包裝 QML 的 API; 唯一差別是只有 Linux 版本, 尚無支援其他平台的計畫. 目前主要由 Canonical 開發並使用於 Ubuntu Touch 內建的<a href="https://code.launchpad.net/~osomon/webbrowser-app/with-oxide">網頁瀏覽器</a>及 HTML5 程式中.</p>
<p>我在先前的文章中已概略地介紹了如何<a href="http://penkia.blogspot.com/2014/02/oxide-webview-on-eglfs-qpa.html">在純 framebuffer 環境下啟用 Oxide</a> 和 WebGL, 以及如何<a href="http://penkia.blogspot.com/2014/02/enable-touchscreen-support-on-oxide.html">打開觸控螢幕及手勢支援</a>, 有興趣可參考.</p>
<h2>Oxide 版的 SlateKit Shell</h2>
<p>
<a href="https://github.com/penk/SlateKit/tree/oxide">Oxide 版本</a>的 SlateKit Shell 瀏覽器已經發佈至 Github. 除了操作介面外, 移植一個瀏覽器最艱難的工作就是 UserScript 和 ContextMenu 了. 在 Oxide 裡, 你可以<a href="https://github.com/penk/SlateKit/commit/a2b757bd6de462117030239585d6974a847c0029">看到</a>原先 WebKit 的 <code>experimental.userScripts</code> 及 <code>experimental.onMessageReceived</code> 需要用 <code>WebContext</code> 和 <code>ScriptMessageHandler</code> 來重寫. 我另外製作了<a href="https://gist.github.com/penk/9461136">一個簡單的範例</a>幫助大家理解. </p>
<h2>下載 ISO 映像檔</h2>
<p>若你之前有使用過 SlateKit Base Technical Preview 版本的 Live OS, 這裡可以下載新版本: </p>
<a href="http://i.imgur.com/xiumuo5.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/xiumuo5.png" width="480px" style="width: 480px" /></a>
<p><ul><li>
檔案: <a href="https://mega.co.nz/#!FRBRlYqS!P0tbZMWT6Pa7Ufc860SD1xK_Eg6ZWNRNNNgzfe5iDl4">slatekit-base-tp-03162014.iso</a> (98.4 MB)
</li></ul></p>
<h2>功能清單</h2>
<p>
<ul>
<li>觸控螢幕支援 (包括縮放及捲動)
<li>長按連結跳出選單
<li>點選輸入框自動跳出鍵盤
<li>自訂的 popup 選單 (用在 <select> 和 <option> 標籤)
</ul>
<p>閱讀模式 (Reader Mode) 和行動/桌面裝置切換 (UserAgent Switch) 的功能目前暫時關閉.</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-16696870967163181982014-03-16T17:31:00.000+08:002014-03-16T17:39:31.005+08:00SlateKit Shell ported to Oxide WebView<a href="http://i.imgur.com/4gFmf5W.jpg" imageanchor="1" ><img border="0" src="http://i.imgur.com/4gFmf5W.jpg" width="600px" style="width: 600px" /></a>
<h2>Oxide WebView evolved</h2>
<p>As Oxide developed further, more and more features has been re-enabled in the Ubuntu Touch <a href="https://code.launchpad.net/~osomon/webbrowser-app/with-oxide">webbrowser app</a>, 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.</p>
<h2>Oxide branch of SlateKit Shell</h2>
<p>To explain that I've created <a href="https://gist.github.com/penk/9461136">an example of Oxide WebView</a> with user script, note that <code>experimental.userScripts</code> and <code>experimental.onMessageReceived</code> are replaced by <code>WebContext</code> and <code>ScriptMessageHandler</code>. You may also checkout the <a href="https://github.com/penk/SlateKit/tree/oxide">Oxide branch</a> of SlateKit Shell.</p>
<h2>Download ISO image</h2>
<p>SlateKit Base Technical Preview updated accordingly: </p>
<a href="http://i.imgur.com/xiumuo5.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/xiumuo5.png" width="480px" style="width: 480px" /></a>
<p><ul><li>
File: <a href="https://mega.co.nz/#!FRBRlYqS!P0tbZMWT6Pa7Ufc860SD1xK_Eg6ZWNRNNNgzfe5iDl4">slatekit-base-tp-03162014.iso</a> (98.4 MB)
</li></ul></p>
<h2>Features</h2>
<p>Most of works are done in <a href="https://github.com/penk/SlateKit/commit/a2b757bd6de462117030239585d6974a847c0029">one commit</a>, with following features enabled: </p>
<ul>
<li>Touch gestures
<li>Context menu when long pressed
<li>Custom virtual keyboard hook
<li>PopUp selector menu
</ul>
<p>The Reader Mode and UserAgent Switch are temporarily disabled in Oxide branch.</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-27684633382904362632014-02-20T12:04:00.001+08:002014-02-20T16:11:34.359+08:00Enable Touchscreen Support on Oxide<a href="http://i.imgur.com/iIJ6VlN.jpg" imageanchor="1" ><img border="0" src="http://i.imgur.com/iIJ6VlN.jpg" style="width: 600px;" /></a>
<p style="font-family: 'comic sans ms'; font-size: 1.2em;">Wow, So Viewport, Very Gesture</p>
<p>Oxide WebView merged touchscreen support in <a href="http://bazaar.launchpad.net/~oxide-developers/oxide/oxide.trunk/revision/378">revision.378</a>, oxide-qt package <a href="https://launchpad.net/~phablet-team/+archive/ppa">lands in PPA</a>, so I updated the <a href="https://gist.github.com/penk/8798741">EGLFS patch</a> accordingly. </p>
<p style="font-family: 'comic sans ms'; font-size: 1.2em;">How to Use It</p>
<p>To enable pinch gesture and viewport, you'll need a <code>SharedGLContext</code> created to do accelerated compositing, so the tool <code>oxideqmlscene</code> comes in handy: </p>
<p><pre style="background-color: lightgrey; width: 600px; margin-left: 10px; padding-left: 10px">
$ 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
</pre></p>
<p>And there you go. Technical preview of SlateKit Base also upgraded: <a href="https://mega.co.nz/#!dIYC1IDD!rRjnR0-g6f037wFpNT67-R17hTLcqoSqdftM-uL-VKY">slatekit-base-tp-02202014.iso</a> (97MB)</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-47297638785049340142014-02-08T15:50:00.004+08:002014-02-10T11:53:43.174+08:00Introducing SlateKit Base - Technical Preview<p>SlateKit Base technical preview is now available for download:</p>
<p><a href="http://i.imgur.com/RLVuy0W.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/RLVuy0W.png" style="width: 500px; margin-bottom: -20px;" /></a>
<ul><li>file: <a href="https://mega.co.nz/#!hAp22TCZ!cO18V30Q53mPqGc1KRCpUWl24x18zLf_7qNLsUL65yYhttps://mega.co.nz/#!hAp22TCZ!cO18V30Q53mPqGc1KRCpUWl24x18zLf_7qNLsUL65yY">slatekit-base-tp-02082014.iso</a> (115MB)
<li>md5sum: 1de6e747f66c7d9ae88a14de79df3105
<li>website: <a href="http://slatekit.org">slatekit.org</a></ul>
</p>
<h1>What?</h1>
<p>SlateKit Base is a small Linux distribution (binary compatible with Ubuntu 14.04 amd64), with specially configured <code>Qt 5.2.0</code>, <code>Mesa 10.0.1</code>, two web engine/renderer: the default QtWebKit, and <a href="penkia.blogspot.com/2014/02/oxide-webview-on-eglfs-qpa.html">Oxide</a>, which based on Chromium/Blink.</p>
<a href="http://i.imgur.com/QPFY4Vy.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/QPFY4Vy.png" style="width: 500px" /></a>
<p>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.</p>
<h1>Why?</h1>
<p>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.</p>
<h1>How Do I Get This Thing Running?</h1>
<a href="http://i.imgur.com/9SL6NRy.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/9SL6NRy.png" style="width: 800px" /></a>
<p>As always, this image works on VirtualBox, default it boots into command line with <code>1024x768-32</code> screen resolution by using <code>uvesafb</code> driver, you can switch screen resolution with boot parameter like: <code>screen=800x600-32</code>. Network can be configure by: </p>
<pre style="background-color: lightgrey; width: 600px">
# ifconfig eth0 up
# udhcpc -s /etc/udhcpc.script
</pre>
<p>Then start the web browser by <code>oxide</code> or <code>slatekit-shell</code> command: </p>
<pre style="background-color: lightgrey; width: 600px">
# oxide
</pre>
<p>Oxide example file is located under <code>/usr/share/SlateKit/Oxide/web.qml</code>, and SlateKit Shell is <code>/usr/share/SlateKit/Shell/qml/Shell.qml</code>. Don't forget to turn off VirtualBox's mouse integration (Command + I) if you're on Mac OSX.</p>
<h1>Can I Use It on Real Device?</h1>
<p>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 <code>dd</code> command, and try booting SlateKit Base on it with following boot parameter:
<pre style="background-color: lightgrey; width: 600px">
boot: slatekit debug=1
</pre></p>
<p>And start udev:
<pre style="background-color: lightgrey; width: 600px">
# udevd --daemon
# udevadm trigger
</pre>
If everything works fine it will drop you into a command line with native framebuffer resolution, then you can launch the browser as usual.
</p>
<p><a href="http://i.imgur.com/FjAEuyn.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/FjAEuyn.png" style="width: 500px" /></a></p>
<h1>Contact</h1>
<p>If you have any thought, question, demo or hardware support request, please feel free to <a href="mailto:penkia@gmail.com">send me a mail</a> or contact me on Twitter <a href="http://twitter.com/penk">@penk</a>.
<p>Happy Hacking!<br>
penk</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com2tag:blogger.com,1999:blog-3562404888554974989.post-33895519781852991102014-02-04T14:36:00.002+08:002014-02-04T14:38:18.123+08:00Oxide WebView on EGLFS QPA<p>Oxide WebView is a QML wrapper of Chromium content API, just like QtWebEngine. I've been following <a href="https://code.launchpad.net/~oxide-developers/oxide/oxide.trunk">Chris' development</a> 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 <a href="https://launchpad.net/~phablet-team/+archive/ppa/+packages">oxide-qt PPA</a> for amd64/i386 and armhf architecture.</p>
<p>
<a href="http://i.imgur.com/LNq9KgM.jpg" imageanchor="1" ><img border="0" src="http://i.imgur.com/LNq9KgM.jpg" style="width: 600px" /></a>
</p>
<p>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. </p>
<p>So here it is, <a href="https://gist.github.com/penk/8798741">enable_oxide_on_eglfs.patch</a>. To use it you'll need a <code>fbdev</code> backend enabled Mesa, also Qt 5.2 configured with <code>-opengl es2</code>, and start <code>qmlscene</code> like: </p>
<p><pre style="background-color: lightgray; padding: 5px;">
export QT_QPA_PLATFORM=eglfs
export EGL_PLATFORM=fbdev
export EGL_DRIVER=egl_gallium
qmlscene ./web.qml
</pre></p>
<p>Which <code>web.qml</code> may look like this: </p>
<p><pre style="background-color: lightgray; padding: 5px;">
import QtQuick 2.0
import com.canonical.Oxide 0.1
WebView {
width: 800
height: 600
url: "https://duckduckgo.com"
}
</pre></p>
<p>My talk proposal of <a href="http://slatekit.org">SlateKit</a> just got accepted by <a href="http://fossasia.org">FOSSASIA</a> 2014, so more information on this matter will be published here later. Stay tuned. :-)</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-8642684602248173222014-01-07T11:20:00.001+08:002014-01-09T18:36:49.482+08:00LiveReload for QML<p>
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:
<a href="https://github.com/penk/qml-livereload">https://github.com/penk/qml-livereload</a></p>
<img src="https://raw.github.com/penk/qml-livereload/master/screencast.gif" />
<p>
QML LiveReload takes <code>QFileSystemWatcher</code> 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.</p>
<h2>Update:</h2>
<p>Works on remote device too: </p>
<iframe src="http://gfycat.com/iframe/PoorThickFantail" frameborder="0" scrolling="no" width="568" height="320" ></iframe>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-19405523398151944282013-12-24T16:48:00.001+08:002013-12-24T16:48:08.370+08:00How to Pack a Qt Web Browser on Mac OSX<h3>Copy <code>QtWebProcess</code> into app bundle (in our case, <code>SlateKit.app</code>):</h3>
<p><pre>
mkdir -p SlateKit.app/Contents/libexec
cp ~/Qt5.2.0/5.2.0/clang_64/libexec/QtWebProcess SlateKit.app/Contents/libexec/
</pre></p>
<h3>Set QPA and plugin path:</h3>
<p><pre>
cat > SlateKit.app/Contents/libexec/qt.conf << EOF
[Paths]
Plugins = ../../PlugIns
Imports = ../../Resources/qml
Qml2Imports = ../../Resources/qml
EOF
</pre></p>
<h3>Make the app bundle self-contained:</h3>
<p><pre>
~/Qt5.2.0/5.2.0/clang_64/bin/macdeployqt SlateKit.app -qmldir=qml/ -executable=SlateKit.app/Contents/libexec/QtWebProcess -verbose=3 -dmg
</pre></p>
<p>Note there's a known bug of macdeployqt before Qt 5.1, here is a <a href="https://github.com/MaximAlien/macdeployqt">patched one</a>.</p>
<a href="http://i.imgur.com/PWb8ncE.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/PWb8ncE.png" /></a>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-33208756024321381472013-12-24T05:36:00.000+08:002013-12-24T05:36:19.300+08:00More SlateKit Shell packages<p>In addition to the <a href="https://launchpad.net/~ubuntu-touch-coreapps-drivers/+archive/collection">PPA and deb</a> package, SlateKit Shell has been packed into several formats:</p>
<ul><li>Click package can be downloaded: <a href="https://mega.co.nz/#!RVhC0TYB!IHBn3lYontzdhGc80qm5Nl_CaVpmZLwXtMhYZZn_wvQ">com.ubuntu.developer.penk.slatekit-shell_0.3_all.click</a> (64KB)
<li>An experimental Mac OSX app bundle has also been uploaded: <a href="https://mega.co.nz/#!QYIz3C4R!bKrLVioyAbexaCfyO5HEBQThj58fsTrW7u-OgQalgsg">slatekit.dmg</a> (23.7MB)
</ul>
<p>This can already be found on the Ubuntu Touch Software Centre:</p>
<a href="http://i.imgur.com/cavmjZj.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/cavmjZj.png" style="width: 300px" /></a>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-58710177768437271522013-06-16T17:26:00.000+08:002013-06-16T17:40:32.518+08:00SlateKit's handwriting recognition ported to Ubuntu Touch<p>One of the major components of <a href="http://slatekit.org">SlakteKit</a> project is its handwriting recognition input method. It's a usable fully open source solution, consists of <a href="http://tegaki.org/">Tegaki</a> model, <a href="http://zinnia.sourceforge.net/">Zinnia</a> engine and a simple QML Canvas stroke detection.</p>
<p><a href="http://slatekit.org/images/handwriting.png" imageanchor="1" ><img border="0" src="http://slatekit.org/images/handwriting.png" style="width: 400px;" /></a></p>
<p>With a <a href="http://bazaar.launchpad.net/~penk/phablet-extras/maliit-plugins-qml-candidates/revision/2135">patch to maliit-keyboard</a>, and my <a href="https://launchpad.net/qml-zinnia/trunk">qtdeclarative5-zinnia-plugin</a> package, it's now being ported to Ubuntu Touch:</p>
<p><a href="http://i.imgur.com/hY6NpRz.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/hY6NpRz.png" style="width: 300px" /></a></p>
<p>I'll keep polishing the keyboard layout and settings of maliit. You can <a href="http://twitter.com/penk">follow me on Twitter</a> or the <a href="https://plus.google.com/u/0/117115145747897543827/posts/KqzWXBzGWVi">discussion thread</a> at Ubuntu App Developers for updates.</p>
<p>Happy hacking,<br>penk</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-60671243388129303292013-06-09T23:19:00.001+08:002013-06-09T23:58:35.696+08:00My Ubuntu Touch Weekend Hackathon on Nexus 4 <p>I got some time to play with a Nexus 4 this weekend, and I decided to improve <a href="http://slatekit.org/">SlateKit Shell</a> on Ubuntu Touch, here are some results: </p>
<p>Fixed the url text (TextField) layout, and improved Suggestion list:</p>
<a href="http://i.imgur.com/rO7uTAz.png" imageanchor="1" ><img border="0" style="width: 300px; margin: 10px;" src="http://i.imgur.com/rO7uTAz.png" /></a>
<a href="http://i.imgur.com/FoOfoOL.png" imageanchor="1" ><img border="0" style="width: 300px; margin: 10px;" src="http://i.imgur.com/FoOfoOL.png" /></a>
<p>Enabled OrientationHelper: </p>
<a href="http://i.imgur.com/navW4Kx.png" imageanchor="1" ><img border="0" style="width: 620px; margin: 10px;" src="http://i.imgur.com/navW4Kx.png" /></a>
<p>Tweaked Reader Mode text size: </p>
<a href="http://i.imgur.com/57A3pIu.png" imageanchor="1" ><img border="0" style="width: 620px; margin: 10px;" src="http://i.imgur.com/57A3pIu.png" /></a>
<p>And here's the tricky one, long pressed Context Menu support: </p>
<a href="http://i.imgur.com/ndGB26P.png" imageanchor="1" ><img border="0" style="width: 300px; margin: 10px;" src="http://i.imgur.com/ndGB26P.png" /></a>
<p>You can find all the commits from: <a href="https://code.launchpad.net/~penk/slatekit-shell/trunk">https://code.launchpad.net/~penk/slatekit-shell/trunk</a></p>
<p>
Best,<br>
penk</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-56398972909229865702013-06-06T21:11:00.002+08:002013-06-06T21:11:30.527+08:00SlateKit.org Grand Re-Opening<p><a href="http://SlateKit.org">SlateKit.org</a>, the official project website of SlateKit <a href="https://github.com/penk/MeeTo/tree/master/Launcher">Launcher</a>, <a href="https://github.com/penk/MeeTo/tree/master/qVKB">Keyboard</a>, <a href="https://github.com/penk/MeeTo/tree/master/NetWiz">NetWiz</a> and recently <a href="https://github.com/penk/SlateKit/tree/master/Shell">Shell</a>, 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: </p>
<p><a href="http://i.imgur.com/5gzZ6UN.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirx92YXviGv-x_cTQaHT4QDCM2oXfJtAuhI1yYBBQfHPIvLHBD7uluXlXowXGxIKRzol4u5zNT_lxT0kXu7RB6jBB6Iz74ZkTigPtGlkz_77RtvLSM4hOUAR4wVSrBSrdeTGN1WG3bRI-8/s320/slatekit.org-redesign.png" /></a></p>
<p>Here's the original sketch:</p>
<a href="http://i.imgur.com/bqu6Vf0.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgZf6CamJq_LCGCkparlQOucRM7LEtiE-WbNBDaGcfkA8nHIMd3vZBCd8_Q3YaUcguHkkMns3ovSOjxLmYMh9ivivJ0u9ofoLrHbu5wsJ-8CLgIfeV0WpVM69qiny6nLaWKMfVhG1lm8f/s320/slatekit.org-sketch.png" /></a>
<p>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. :-)</p>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0tag:blogger.com,1999:blog-3562404888554974989.post-83873112920383780302013-06-06T06:31:00.002+08:002013-06-06T08:26:44.432+08:00SlateKit Shell is now available on Ubuntu Touch<a href="http://i.imgur.com/b6OfkZB.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/b6OfkZB.png" style="border: 2px solid lightgray; margin-left: 30px;" /></a>
<p>Some quick updates:</p>
<ul>
<li>New features: Reader Mode and User-Agent string Switch</li>
<li>Install on Desktop</li>
<p>Debian package information <a href="https://github.com/penk/SlateKit/tree/master/Shell/debian">landed in Github</a>, this also provides an <a href="https://launchpad.net/~penk/+archive/touch">Ubuntu PPA</a>, so you can install it on Ubuntu Desktop 13.04 (Raring) or later by:
<blockquote><code>
sudo add-apt-repository ppa:penk/touch <br>
sudo apt-get update <br>
sudo apt-get install slatekit-shell </code></blockquote>
</p>
<li>Install on Ubuntu Touch</li>
<p>SlateKit Shell has been added to <a href="https://launchpad.net/~ubuntu-touch-coreapps-drivers/+archive/collection?field.series_filter=raring">Collection PPA</a>, thanks to <a href="https://plus.google.com/109919666334513536939">Michael Hall</a>'s help. If you're working on Ubuntu Touch please give it a shot: <code>ppa:ubuntu-touch-coreapps-drivers/collection</code>.
</p>
<li>UI Components</li>
<p>Rather than being tied to one single platform, I would like to make <a href="http://slatekit.org">SlateKit</a> a generic QML app suite. Only the one <a href="https://code.launchpad.net/~penk/slatekit-shell/trunk">hosted on Launchpad</a> will be using Ubuntu Components (mostly units for now, and some Popover); the main Github repository will not.</p>
<li>New Icon</li>
<a href="http://i.imgur.com/3R7EYJQ.png" imageanchor="1" ><img border="0" src="http://i.imgur.com/3R7EYJQ.png" /></a>
<p>Thanks to <a href="https://plus.google.com/u/0/100530892038948253747">Georgi Karavasilev</a>, we just got a very first graphical asset, an icon. Stay tuned! ;-)</p>
</ul>
<p>Best,<br>
Ping-Hsun Chen (<a href="http://twitter.com/penk">penk</a>) <<a href="mailto:penkia@gmail.com">penkia@gmail.com</a>>Chen, Ping-Hsun (penk)http://www.blogger.com/profile/09914481138240754070noreply@blogger.com0