2015年4月25日 星期六

Fresco : an image management library





    臉書在F8發表了自己的Image Loader Library(Android)叫做Fresco,因為他們在市面上找不到完全符合需求的Library,所以自己就寫了一個(這邏輯很Facebook),它主要強調功能有五:1)有更佳的記憶體管理、2)支援Progressive JPEG、3)Animation Format(GIF和WebP)、4)Drawing(更整合customize layer:例如想要塞浮水印之類的)以及 5)更加的Loading體驗。

針對第五點想要特別強調:1) 它可以同時設定多種resolution的圖片,讓較低解析度的圖片先秀出、2) 支援EXIF Thumbnail、3) Auto-resize rotation(base on EXIF)、 4) 讓Android 2.3的裝置也支援WebP。

翻了翻它的source code發現,所以decoder都適用NDK寫的,包含jpeg、png、gif跟WebP真的是佛心來著。看來該把原本在用的Ion拔掉了。


2015年4月8日 星期三

GIF Encoder on Android



    最近跟臉書的Messenger Platform合作了一款新的APP叫做GIFCAM(希望大家趕快去下載來玩唷!),看APP的名稱就知道跟GIF格式有所相關,今天想要分享(抱怨)在開發中碰到的痛點之一GIF Encoder。

為什麼痛呢?第一沒有官方support的版本(iOS在ImageIO Framework裡);第二有3rd party library是存JAVA的solution,但performance就是差到很誇張;第三想找NDK solution但找不太到標準或比較常用的library。

基於上面的思路,想必要自己把它擠出來了,所以我參考了一個半成品叫做Gifflen,看起來是我們想要的答案,但是,它的code style不太像個OK的library,果然用了之後碰到很多問題,細節之後再透過其他文章跟大家分享,總之為了要達成像iOS ImageIO的效能,我們把GIF的Spec認真的看了一遍,一個一個byte去看iOS為什麼可以做得比較好(之後我們會把自己的Gifflen再open source出來),目前雖然沒有達到一樣,但效能跟輸出結果還差強人意,勉強可以通過測試並且上線。


2014年12月15日 星期一

Material Design I : Floating Action Button (FAB)


  自從Google再Lollipop(5.0)推出後,終於記得順便幫Android穿上漂亮的衣服,那就是 Material Design(MD)最重要的使命,不論是設計的元素、語言跟配色都有了屬於自己的Guildline。

    對Android Developer而言,則是遵守官方規矩,就可以自己做出"有點"美感APP,官方BLOG還貼心的準備Check list給開發者(這表示幾乎都有附上source code)。而我們公司的產品也順著這班MD的風潮導入了許多元素,讓原本很iOS的APP找回了自己應有的面貌:> 這篇文章介紹其中一個導入的widget : Floating Action Button(FAB) 

仿間有一大堆自製的牌子, 以下條列使用心得

https://github.com/makovkastar/FloatingActionButton
評論 : 最多star,多做了show/hide的animation,但用在5.0以下的Device會怪怪的(可能是我的project設定有問題)(這是我發的issue ticket),所以最後沒採用這套。


https://github.com/futuresimple/android-floating-action-button
評論: 它是fork上面那個的專案,不過它多做了sub-menu的功能(有點像Path的小紅點, 這也是MD其中一種元素),但沒有包裝show/hide的animation,最後我採用這套,因為他沒有上面的issue(神奇),最後我把上面animation的code搬到這個專案之中,搞定。




2014年10月11日 星期六

Paper.js : The Swiss Army Knife of Vector Graphics Scripting



    Frontend的發展總是迅速,一堆超酷的Framework、Library總覺得永遠學不完;今天要介紹的Paper.JS大概又是讓我讚嘆已久的Library;還記得兩年前的HackDay,那時候的作品為了要呈現夢幻的感覺,用了Box2Djs及Canvas湊出了泡泡漂移的感覺,那時候寫起來特別吃力,因為Box2D的官方文件很簡陋,而且對於Html的Support也很粗淺,沒辦法它只是負責運算物理特效,所以Html的Event全部都要自己來!

今天看到了Paper.js的範例CandyCrash,有種相見恨晚的感覺,Framework的完整性超高,除了沒有物理運算以外,但呈現的效果已經比當初好的太多,而且可以有更多的延展性。






Brackets : a IDE for JavaScript, HTML and CSS



  今天在掃Github Trend時發現了Brackets,由Adobe提供的Open Source Project,相關推薦文在這。

對開發者而言有幾點很棒的好處讓我也想使用它:

1. Auto Refresh : 裡面叫做Live Preview,也就是以後不用狂按Save-Reload,還可以安裝Static Preview的套件,就可以迅速架設一個Local的網站供其他人測試

2. 完整的文件提示 : 隨時按Cmd+K就可以看Html及Css屬性的文件

3. Color Picker 

4. Image Preview
...

看來最近如果想玩Frontend的東西都會用它了吧!




Canvas coordinate system

    最近加新功能的時,碰到一個在Canvas上座標系統認知上有所不同的地方;一般我們會用 Canvas.drawBitmap(Bitmap, 10, 10, Paint)把一張圖畫在(0,0)的位置,當然這個(0,0)不預期是整個device的(0,0),而是根據View最後被擺放的位置,例如某View被Layout在(100, 100),而Canvas.drawBitmap(Bitmap, 10, 10, Paint)則會畫在螢幕(110,110)的地方。

到目前為止都沒有錯誤,但如果translation的方式是用Matrix,而你的code可能會變成

Matrix matrix = new Matrix();
matrix.postTranslate(10, 10);
canvas.setMatrix(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

此時畫出來的結果就還是會在(10, 10)。原本猜想是忘記apply原本canvas的matrix所致,所以改成

Matrix matrix = new Matrix(canvas.getMatrix());
matrix.postTranslate(10, 10);
canvas.setMatrix(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

結果還是(10,10)!結果不小心喵到有Method叫Canvas.concat()。後來改成:

Matrix matrix = new Matrix(canvas.getMatrix());
matrix.postTranslate(10, 10);
canvas.concat(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

最後就成功的畫在(110,110)的位置。百思不得其解的是:

Matrix matrix = new Matrix(canvas.getMatrix()) 應該會等於 canvas.concat(matrix)

因為都會Apply原本Canvas裡面的Matrix參數,於是乎就去看了一下底層的source code

 public void concat(Matrix matrix) {
     native_concat(, matrix.native_instance);
 }

 public void setMatrix(Matrix matrix) {
          
matrix == null ? 0 : matrix.native_instance);
 }

看來還要追到NDK那層,不過看起來兩種設定Matrix的方式有些出入,就等未來有空再往底層看了。





2014年9月27日 星期六

StreamTokenizer

    最近在實作藍牙時,碰到處理接收資料的問題,原本是用InputStream.read(byte[]),但會碰到字串切割的問題,假設原本想傳送110給App,就有可能會收到1跟10的兩個數字;

    因無法判斷何時需要斷點,直覺想到可以自定義分割符號(例如:冒號,100:110:120),如果要自己實作buffer的話又嫌太麻煩。

    最後找到Java有StringTokenizer以及StreamTokenizer就可以自動幫我分割好字串(生活變得更加美麗),有興趣的話可以參考範例

參考鏈結:
StringTokenizer  http://developer.android.com/reference/java/util/StringTokenizer.html
StreamTokenizer  http://developer.android.com/reference/java/io/StreamTokenizer.html