2012年12月24日 星期一

Processing + Swing = Grider App


用Processing來處理一些連續圖像和影片實在相當方便,簡單幾行就可以搞定。對熟悉程式碼的人來說是這麼回事,但是要給不會看程式碼的人用,還是做個圖形界面會比較方便。適逢Processing釋出2.0 beta版,就順道把先前做的影片打格子程式,也就是那個姑且被我稱作Grider的程式做了一個小小的升級改版,整合Swing為它加上簡單的使用者界面。



之前評論道Processing所使用的函式庫有點過時,那個時候我使用的版本還是1.5,而2.x版則還在相當alpha的階段。不過,前些天重新逛了Processing.org的網站,發現幾乎所有的文件與範例,都已經更新成為2.x版本,便下載了2.0b7來改寫要為影片打格子的程式。

如果你只要使用Processing基本的功能,應該是不會碰到processing.video這個package。但既然我們處理的是影片,想不碰到這個也不太可能。Processing 1.5的video是直接呼叫QTJava,但它是32位元的,而且也被Apple宣告過時。在前一個Grider版本中,我使用另外一個函式庫來處理影片,也就是GSVideo。展開Processing 2.0b7後才看到,GSVideo這個函式庫已經被包到processing.video裡頭,並且能用64位元的方式來跑。對於Mac使用者來說,真是一大福音,因為現在比較常用的版本幾乎都是64位元的,起碼從我手邊還會用到的10.6開始。

只不過,升級倒也不是沒有缺點。在1.5的版本中,processing.video本來有一個MovieMaker的class,可以直接輸出QuickTime或avi影片,這在Processing 2.0裡頭好像被拿掉了。還好,這個class對我沒有影響。

大致弄清楚Processing更動的部分後,便開始修改程式碼。首先把之前GSMovie的物件全都換回Processing裡頭的Movie,反正兩者是相同的,沒必要再去匯入一個函式庫。接著,便要開始橋接Processing和Swing兩個東西,對我來說,這是個新的挑戰。

開發Java使用者界面大致上就是兩個選擇,一個是SWT (The Standard Widget Toolkit),另外一個就是Swing。至於AWT,那個實在太麻煩,完全不在我的考慮範圍之內。我比較熟悉的是SWT,可是偏偏在Mac上,想做個SWT_AWT的橋接,或是要內嵌個Swing物件,總是會碰到Java CocoaComponent compatibility mode的問題,更新到目前最新的版本依然沒辦法解決,只好硬著頭皮使用Swing來做使用者介面。

用WindowBuilder來拉界面節省了很多時間,免除了猜測物件長相和功能的困擾。但這得要在eclipse裡面做,意味著要將Processing的主要函式庫給拿出來。這部分在Processing.org官網上有教學,請自行參考Processing in Eclipse。比較麻煩的是processing.video裡頭的東西,除了要把幾個jar檔案一併拉出來外,還要把macosx64的資料夾一起拉出來,否則影片根本沒辦法載入。



解決影片播放的問題後,接下來要把Processing的PApplet納入Swing當中。在PApplet的技術文件裡面,有一個簡化的範例,示範如何從AWT的Frame裡面將PApplet初始化。Swing的JFrame繼承了AWT的Frame,也可以使用同樣的方式。說穿了,不過是將PApplet當做一個component塞進Swing裡頭,在最後要記得呼叫 init() 去執行PApplet的內容。

 public class ExampleFrame extends Frame {

     public ExampleFrame() {
         super("Embedded PApplet");

         setLayout(new BorderLayout());
         PApplet embed = new Embedded();
         add(embed, BorderLayout.CENTER);

         // important to call this whenever embedding a PApplet.
         // It ensures that the animation thread is started and
         // that other internal variables are properly set.
         embed.init();
     }
 }

 public class Embedded extends PApplet {

     public void setup() {
         // original setup code here ...
         size(400, 400);

         // prevent thread from starving everything else
         noLoop();
     }

     public void draw() {
         // drawing code goes here
     }

     public void mousePressed() {
         // do something based on mouse movement

         // update the screen (run draw once)
         redraw();
     }
 }

解決這些麻煩的問題之後,剩下的就是使用者介面各個功能的調整。雖說比較沒有技術上的障礙,但這個部分似乎花了最多時間,有太多觸發事件得要處理。在一陣辛勞之後,Grider算是可以用了,只要再花些時間做些測試與修正,應該就可以釋出了。


沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...