todo

[]
SVG (Scalable Vector Graphics) - is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Inkscape - An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

http://inkscape.org/

MadButterFly

http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/345
http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/341
http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/376

MadSwatter - is a SVG animation editor. It provides a time-line based animation editor. User can apply affections on graphics guided by time-line.

http://www.assembla.com/spaces/MadSwatter

Enlightenment - is not just a window manager for Linux/X11 and others, but also a whole suite of libraries to help you create beautiful user interfaces with much less work than doing it the old fashioned way and fighting with traditional toolkits, not to mention a traditional window manager. It covers uses from small mobile devices like phones all the way to powerful multi-core desktops (which are the primary development environment).

http://www.enlightenment.org/

Javascript - is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented,[6] imperative, and functional[1][7] programming styles.

http://en.wikipedia.org/wiki/JavaScript

Node.js - is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.

On the 20th floor of a San Francisco skyscraper, a handful of developers are working on a new technology that’s changing the way real-time web apps are built and how they scale.

This technology, called Node.js, is being hailed as “the new Ruby on Rails” by some in the developer community. But it’s not a magic bullet, nor is it appropriate for all programming scenarios.

http://en.wikipedia.org/wiki/Node.js
http://mashable.com/2011/03/10/node-js/
http://www.readwriteweb.com/hack/2011/01/wait-whats-nodejs-good-for-aga.php
http://code.danyork.com/2011/01/25/node-js-doctors-offices-and-fast-food-restaurants-understanding-event-driven-programming/

WebKit - is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Safari, which by August 2011 held nearly 30% of desktop browser market share between them.

http://en.wikipedia.org/wiki/WebKit

MadButterfly 的概念
by thinker
2 Columns
關鍵字: 雜記
MadButterfly 字面上是「瘋狂蝴蝶」，有人稱為「瘋狂奶油蒼蠅」。其名取其意，希望 project 的成果能既美麗，又輕巧。這個 project 的點子，來自於需要和其它出色的產品，更重要的是，對現實的不滿。
在概念上，MadButterfly 是一個和 GTK/QT 完全不同的 GUI 系統。 GTK/QT 都是以 component 為基礎的 toolkit ，提供大量的 component ，programmer 基於這些 button 、 menu 、 dialog 等，組合出所需的外觀。利用這些 component ，程式設計師可以很容易的弄出一個還可用的 UI ，但卻達不到傑出。為什麼？因為受限於提供的 component 的行為，我們只能在有限的範圍內，盡量的組出理想的外觀，而且是以非直覺的方式進行。這就像，要你用有限的多邊形積木，組出一幅小小的蒙娜莉莎，就算積木的形狀再多樣，都不及一支鉛筆、一塊橡皮擦和一張紙好用。 GTK/QT 提供再多、再好的 component ，也只能是傑出的積木。卻不及鉛筆、橡皮擦和張紙的直覺、好用。 MadButterfly 想要提供的就是鉛筆和紙張。



MadButterfly 是一個非 component based 的 GUI toolkit ，和 component based 的 GTK/QT 完全不同。應該有一個名詞，可用來指稱這個類型的 toolkit ，但吾薄學寡聞，暫稱此類為 vector based。 MadButterfly 不需要 programmer 和 GUI designer 來學習 button 、 menu 、 dialog 、 textbox 等等 component 及其行為。而是讓 GUI designer 使用他們順手的 Inkscape 、 Adobe Illustrator 等向量繪圖工具，直接繪出他們想要的畫面，將之存成 SVG 向量格式。 Programemr 則寫程式，直接操作這些向量元件，付予行為。程式控制的內容，小自多邊形的顏色、位置、透明度、邊線粗細，大至一組圖形的旋轉、淡出、淡入、移動，甚至觸發由一連串向量操作所組成的一段動畫。例如，我們能在 mouse 移動 icon 上面時，觸發讓 icon 像小狗一般跳起來抖一抖的一段動畫。這些都是 component based 的 toolkit 難以做到的。至少，你必需花費很多工夫。

也許有不少人有製作 adobe flash 動畫的經驗，是的， MadButterfly 在這方面抄襲 flash 。 Flash 實在是一個優秀的平台，可惜它 close 。 Flash 之所以優秀，在於 Adobe 提供了一個很重要的工具「Flex」。「Flex」 提供時間軸的概念，將動畫拉出來，使之成為一個時間軸上的序列，播放一連串操作圖形的效果。到目前為此， Open Source 似乎還沒有一個 project 能有這樣的功能，甚至連企圖都沒有。 MadButterfly 打算走在這個方向上，但不限制於動畫或網頁上的應用。 MadButterfly 將往 desktop 和 embedded system 發展，作為桌面環境和控制介面的基礎，以畫圖、製作動畫的方式設計 UI 。

目前 MadButterfly 完全 focus 在以 SVG 為基礎的 vector based 的 UI 系統，然而前面提到的時間軸概念，卻還沒找 Open Source 的工具。雖然 MadButterfly 本身提供了時間軸的能力，但若無編輯工具的輔助，動畫的製作將一項極為困難的事。目前 Open Source 的 Inkscape 能提供良好的靜態圖形編輯功能，但缺乏時間軸的概念。未來在 MadButterfly 到達一定成熟度之後，或許能以 Inkscape 為基礎，改裝成一個動畫的編輯器。

圖形元件， component ，對於成果的重復利用極為重要。未來，希望能將圖形和行為包裝成 component ，以便重復利用。所謂的行為，是指和圖形有關的動畫和狀態。例如，前面提到「小狗一般的跳起來抖一抖」，就是一段動畫，也是該 icon 的行為。程式可以去觸發這段行為，使 icon 「跳起來抖一抖」。透過圖形的元件化，行為將被帶著走。但， UI designer 卻沒有失去控制權，隨時可以將 component 用編輯工具打開來改一改再封裝回去，或另存一個 component。

MadButterfly 是吾的一個幻想，也是一個未來的可能。我將在 COSCUP 2008 進行一段 5 分鐘的 ligthening talk ，希望能在 5 分鐘內，將吾的幻想推銷給你。

註: 為什麼我會用「吾」，因為中午本來要看棒球，不小心看到霹靂布袋戲，一時有在看魔界之類電影的幻覺。實在拍的很不錯，戲中的台語用詞也很典雅。戲中以「吾」取代「我」，突然覺的，台語每個地方發音不盡相同，「吾」或許比「我」正確。另外，台語形容一個人很丟人，就說「渭水」，或許是就是「猥瑣」。台語很多用詞，可能因為書寫系統在國民政府來台後漸漸流失，使的原意越來越模糊。布袋不但好看，另一方面也能看到台語典雅、正統的用法。

========

專案 MadButterfly
by thinker
2 Columns
關鍵字: 雜記
最近又埋頭於一個 project ，稱為 MadButterfly ，定位為 SVG 為基礎的 GUI 架構。更清楚的說，就是讓 application 可以用 SVG 畫出 GUI ，透過 MadButterfly 呈現在螢幕上，並和使用者互動。這情況就和 Javascript 配合 DOM/HTML 所產生的效果類以，但將 HTML 改成 SVG ，將 Javascript 換成任何語言(可能)。也就是說， MadButterfly 呈現給 programmer 的，是一個只能瀏覽 SVG 的 browser ，並且可動態產生和修改顥示的內容，就和 Javascript 產生 Dynamic HTML 道理一樣。
這有什麼好處呢? 這段影片 可以說明其威力。該影片是由一位德國朋友所製作，他透過 clutter 實作了一個簡單的範例。而 MadButterfly 就是要提供這樣一個環境，讓 application 能釋放 SVG 的威力。

目前 MadButterfly 完成 SVG spec 裡的

path
solid color paint
linear gradient paint
而 SVG 物件的狀態追縱和更新系統已完成，能自動針對有變動的物件，做畫面的部分更新，以改善效能。下圖是一個範例。


目前 repository (mercurial) 裡有一個範例 X_main ，能在 X 下面做一個簡單的動畫 demo 。但這個 demo 還很粗糙，效果上還有很大的調整空間。例如，目前是直接畫在 window ，因此會有閃爍的情況，可透過一個 buffer 來避免。

MadButterfly 目前只於 FreeBSD 上測過， Makefile 也是針對 FreeBSD 寫的 (非 gmake)。make 時需要 cairo 。 另外需要 CUnit ，以進行 unit test。

TODO

補齊 SVG Tiny 1.2 內的其它 shape
補齊 SVG Tiny 1.2 內的其它 paint
改進執行效果
Linux 及其它平台的移植
Language binding
Parser to translate SVG to internal representation

===============

MadSwatter - Firefox 和 Inkscape 的整合
by thinker
2 Columns
關鍵字: 雜記
之前為了提供 MadButterfly 的開工具，使用 Firefox 寫了一個簡單的示範，稱為 MadSwatter 。但，後來就一直沒有進展。一直到了最近， MadButterfly 發展到一個程度，而工具的重要性開始增加，於是 wycc 前輩開始著手於工具的開發。在幾番討論後，我們決定以 Inkscape 為基礎，透過和 Firefox 整合的方式，開發 MadSwatter 。下面是 wycc 在春節這段期間努力的成果畫面，特地貼上


未來開發的方向，是將 Inkscape embed 在 Firefox 裡，並修改 Inkscape ，透過 SOAP 或其它 RPC 的方式，export Inkscape 的控制功能。Inkscape 負責 SVG 的繪圖的功能，其它和動畫相關的功能，則是在 Firefox 裡，以 Javascript 或其它 script 實作。 Inkscape 和 Firefox 之間的協調，則透過 RPC 進行。之所會如此設計，主要是 Inkscape 太優秀了，一時之間還找不到其它 open source 的取代品。另一方面，我們又希望開發的方式能簡單化， Inkscape 本身的程式碼則太雜 (Inkscape 的歷史複雜，可以寫一篇來說明)， Firefox + Javascript 則是普遍熟悉。因此，這個擇衷的方案，或許正可以魚與熊掌兼得，降低參與 project 的門檻，同時 leverage Inkscape 優秀的 SVG 編輯功能。

除了動畫編輯， wycc 也提到，是否利用這個架構，實作一個完整的 IDE ，讓 UI 的製作和 controller 的 coding ，都可以在同一個 IDE 環境內進行。這個想法恰好和我不謀而合。但，就如我所考量的，短期還是先從單純的目標前進，以免過度的發散。

http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/345
http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/341
http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/376