Prism 讓 web application 成為真正的應用程式

這題目是最近在思考「瀏覽器能做什麼」下的產物，但是我一直在關注這議題。若我前一封說 Mozilla/Firefox 瀏覽器現在正適合拿來開發應用程式，其中有一個算是重要的技術是「離線瀏覽」，像google gears據說要內建於 Mozilla 之中，它就是可以讓你把 google docs變成本地端的應用程式，在你沒上網的時候仍然可以用。

那麼有另一項議題，要使用上面所述的網路應用程式，為什麼一定要開啟瀏覽器？也會因為瀏覽器的 theme 讓網路應用程式看起來就有那麼一點不倫不類的感覺。是的，Mozilla 很早以前就提供 XUL runner, 可是這也得是「XUL」才行，最近有個擴充套件叫Prism, 早期叫Webrunner, 在該頁說明就有提到現有示範的網路應用程式有：

* Gmail: gmail.webapp
* Google Calendar: gcalendar.webapp
* Google Docs: gdocs.webapp
* Google Groups: groups.webapp
* Google Analytics: ganalytics.webapp
* Google Reader: greader.webapp
* Facebook: facebook.webapp
* Twitter: twitter.webapp

像這樣的應用，我覺得頗適合像 MID 或是 Smart Phone 這類的手持裝置，讓你可以把網站所提供的服務當成真正的應用程式般放到桌面。

瀏覽器能為你做什麼？ What can mozilla do?

要開發應用程式，難免不會想到用 C/C++/Java 來開發，可是愈來愈多的案例證明，應用程式，若沒連上網路則有如垃圾一般，就算是遊戲也是如此。

寫應用程式難免要顧慮到 GUI, 也要顧慮到上網這件事，GUI 不管在 VC++, BCB, Java 等等都有不錯的套件足以因應，就算是上網也都有有辦法用這些語言開發完成。可是在愈來愈多的網路應用出現後，Google, Yahoo, Microsoft 致力推展所謂的雲端運算的目的不外乎把開發者的眼光集中，透過瀏覽器來開發網路應用程式變得愈來愈成熟。

開發 Native Internet Application 必須花大量的心思在 cookie, proxy, user authentication, 或 encryption/decryption 等等議題上，還不止如此，包括應用程式功能如何擴充？外觀如何提供讓使用者自訂的能力？多國語言如何完成？如何提供 3rd party 或 end-user 自行開發新功能？如何共享成果？

不多說廢話，讓我把心力專注在 Mozilla 上面。有興趣的人可以到 發展 Mozilla去讀。

Topic 項下提到:

* Extensions : 利用像 XUL 這種標準來擴充與發展自有應用
* Plugins : 有些瀏覽器尚未提供，或是想要把原始碼隱藏的更好的人，可以利用這項來開發應用
* Themes : 外觀
* Embedding Mozilla: 將瀏覽器嵌入到自己的應用程式中，也就是讓自己的應用程式輕鬆的具有瀏覽器功能，或是開發精簡型的瀏覽器

* Accessibility: 對身體部份功能不良的人可以自訂存取方式，例如聲控什麼的
* Localization: 多國語系
* Web Standards: W3C 標準的支援
* Web Development: 網頁/網站的開發

* Developing Mozilla: 若想投身瀏覽器開發的人，Mozilla 是個很好的切入點
* Quality Assurance: 品質保證
* Security: 安全認證

以上您或許還看不出可以怎樣利用 Mozilla，那讓我們再看看 Technologies 項目：
* AJAX - Asynchronous JavaScript and XML : 最有名的就是 google ajax api 或 GWT 或 Yahoo UI
* CSS - Cascading Style Sheets
* DOM - Document Object Model
* HTML - Hypertext Markup Language
* JavaScript : 這四項應該不必多說，標準瀏覽器應該具備的功能
* NSS - Network Security Services: 用來讓網路存取更加安全
* RDF - Resource Description Framework : 開發 extension 必備
* RSS - Really Simple Syndication : 這項已經變成我每天閱讀新聞的工具
* SVG - Scalable Vector Graphics : 純量畫圖的，個人認為把 papervision3D 移植並非難事，不過目前的發展似乎反過來，在 pv3d 中處理 SVG 比較成熟
* XBL - Extensible Binding Language : 用來 binding 網頁應用程式上的元件到你的程式，也就是你可以自訂元件工作的方式
* XForms - XML Forms : 這個是把 Form 以 XML 的方式傳送，除了資訊的表達更清晰外，還可以有更多的「動作」，兼減輕 CGI/Javascript 並且讓資料庫伺服器自行分析減輕開發者的壓力。
* XML - Extensible Markup Language : 不必我多說
* XML Web Services - SOAP, XML-RPC, etc.: SOAP 叫精簡物件存取協定，顧名思義不難瞭解，就是用來直接傳遞「以 XML 表達的物件」，AJAX 比較傾向於單向的要資料，而這個掛了個 RPC 就不難理解為雙向的交換資料
* XPath - XML Path Language: 用來指定 XML 元件在 XML 文件中的位置，會比 document.getElementById() 還方便有效率。不過個人沒在用這項功能，在允許的情況下會直接以 JSON 或 document.getElementById() 的方式存取 XML
* XSLT - Extensible Stylesheet Language Transformations : 上面 XPath 比較有用的應用是在搭配 XSLT。XSLT 簡單講是用來轉換 XML 成 HTML 或純文字之類的成果以便閱讀。另外因為 XML 允許自訂 tag, 因此彼此間的轉換也成為擾人的議題，這是 XSLT 存在的主要原因。而搭配 XPath 就可以很方便的互相引用。
* XUL - XML User Interface Language : 這是發展瀏覽器 extension 最佳利器，自行發展 web application!

其實 Mozilla 能做的事遠遠無法從上面看出來，我比較喜歡的兩項功能分別是：Server Socket 與 SQLite 的支援，這可以讓我們做不少事，後面抽空再來介紹。

要利用 Mozilla 瀏覽器開發網路應用程式就應該對 XULRunner 及 XUL 參考手冊有所涉略。

後面會再來探討 Mozilla 用來開發 3D web application 的議題。若有人要自行編譯 Mozilla, 請參考 在 Windows 下編譯 Mozilla一文

Bash 參數的展開

bash parameter expansion一文對 bash 在變數(參數)的解釋有不錯的說明。

寫 shell script 不難，變數(參數)的取用也相對容易，最簡單的是像 $a 這種型式，指定值的時候是 a=變數值, 早期等號(=)前後不能有空白，但是這邊提醒一下，養成良好的習慣遠比什麼效率或美感重要，通常我在引用變數時都寫成 ${a} 的方式。其中的原因在於不讓 shell 解釋錯誤，例如 ${a}bc。而像字串的比對，我也會加上引號，例如 [ "${a}" = "" ]，因為你雖然可以很確定卻永遠不會知道 ${a} 是否真的正確定義。

因為上面的說明裡面講到「正確定義」這件事，所以 bash 有「預設值」的用法，b=${b:-預設值}，例如 LENGTH=${LEN:-0} 就會在 LEN 沒被定義時指定 0 給 LENGTH

這邊有個 test.sh 裡面是這樣寫的：

TEST_MODE=${TEST_MODE:-0}
...
if [[ $TEST_MODE -eq 0 ]]; then
    echo "Running in live mode"
else
    echo "Running in test mode"
fi

除了使用了預設值的觀念外，平常 shell script 在執行時 TEST_MODE 的值是 0, 若你想機動的將之變成 test mode 相對上非常簡單，語法如下：

$ env TEST_MODE=1 sh test.sh

變數在使用時，有些「編輯」動作可以用，先講一個不常見的搜尋與取代用法 ${VAR/search/replace}：

  VAR=aabbcc
  echo ${VAR/b/-dd-}

結果會是 aa-dd-bcc <-- 只取代了一個，要想全部取代請用 ${VAR//search/replace}:

  VAR=aabbcc
  echo ${VAR//b/-dd-}

結果就會是 aa-dd--dd-cc。值得注意的是，別把 perl 常用的語法應用在這兒，取代的後面沒有斜線，我就不多寫省得學錯。

另外最出名的，就是 %, %%, #, ## 這種的編輯方式，直接舉例來看：

  file=/home/wade/data.txt
  echo "${file%/*}"  # /home/wade
  echo "${file##*/}" # data.txt

結果寫在註解中， # 與 % 的差別在於前置與後置，可以藉由在鍵盤上的排列來聯想，兩個都有著「餘」數的概念，其中 % 是將字串扣掉後面符合比對字串「最短」內容，因為比對字串是 /* 因此有三個 / 符合，扣掉最短的內容 /data.txt 後就剩下 /home/wade。而 ## 則是將字串扣掉前面符合比對字串「最長」內容。多用就會有感覺。

也可以取得變數特定位置的子字串，有點像 substr()，語法為 ${VAR:offset:length}, 其中 offset 若被省略表示從頭開始，而 length 省略表示一直到字串的最後，例如：

$ VAR=/home/wade/data.txt

$ echo ${VAR:10}
/data.txt

$ echo ${VAR::10}
/home/wade

有一點值得注意的是，若 offset 是負數則表示從後面數過來，可是負數前面加上冒號 ':' 又會被解釋成預設值，因此得用 shell 的數學運算符號 $(( ... ))，例如 $ echo ${VAR:$((-4)):1} 會輸出 '.' 這個字元，當然若能夠將數字的引用以變數取代就不會有此困擾，例如:

echo $OFFSET=-4
echo ${VAR:$OFFSET:1}

其它還可以傳回變數字串的長度，例如 echo ${#VAR} 的值是 19

有些內建變數也應該知道，例如 $$, $0, $1, $?, 其意義分別是: PID, 命令本身，第一個參數，以及前一命令的傳回值

lively another mud?

直接貼網址好了，現在愈來愈懶得寫字。

http://blogoscoped.com/archive/2008-07-09-n11.html
http://www.lively.com
http://sketchup.google.com/3dwarehouse/

Google 愈來做愈多 3D 的東西，頗有趣的是，似乎與我的想法若合符節。

整合 google services

google phone 都出來了，是要怎樣？我一直想做這樣的產品，可惜沒機會，就弄了個頁面聊表自己的心意一下，有興趣的人可以參考整合幾個 google apis 的範例，畫面如下：


您可以自行前往示範網頁觀看並下載原始碼，不過要先說一下，解析度適合 1024x768 按 F11 以全螢幕看，並且只適用 Firefox, 而且會要你裝 google earth plugin，若你肯乖乖裝的話就可以用地球。

有心要寫這樣的頁面的人，可以參考
http://code.google.com/apis/maps/
http://code.google.com/apis/ajax/
http://code.google.com/apis/ajaxfeeds/
等等

The sample code by using Papervision3D 2.0

要使用 Papervision3D 的話，papervision3D 基礎-1是不錯的入門。底下是包含了各種基本物件的範例：

package{
 import flash.display.Sprite;
 
 import org.papervision3d.cameras.Camera3D;
 import org.papervision3d.render.BasicRenderEngine;
 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;

// import extra modules
 import org.papervision3d.materials.WireframeMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.primitives.Cone;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.objects.primitives.Cylinder;
 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.objects.primitives.Sphere;
// end of extra modules

 public class Panorama extends Sprite{
  private var viewport:Viewport3D;
  private var scene:Scene3D;
  private var camera:Camera3D;
  private var renderer:BasicRenderEngine;

  public function Panorama()
  {
   initPapervision3D();
  }

  private function initPapervision3D():void
  {
   viewport = new Viewport3D();
   addChild(viewport);

   scene = new Scene3D();
   camera = new Camera3D();
   renderer = new BasicRenderEngine();

/* body of the example code */

   // Plane
   var m:WireframeMaterial = new WireframeMaterial();
   var plane:Plane = new Plane(m, 800, 800, 2, 2);
   scene.addChild(plane);
   
   // Cone
   var m2:WireframeMaterial = new WireframeMaterial(0xFF5600);
   var cone:Cone = new Cone(m2, 100, 100, 8, 6);
   cone.rotationY = 40;
   cone.rotationX = -30;
   cone.moveRight(300);
   scene.addChild(cone);
   
   // Sphere
   var sphere:Sphere = new Sphere();
   scene.addChild(sphere);
   
   // Cylinder
   var cylinder:Cylinder = new Cylinder(m2, 100, 100, 8, 6, -1);
   cylinder.moveUp(300);
   scene.addChild(cylinder);

   // Cube
   var materialsList:MaterialsList = new MaterialsList();
   var cube:Cube;
/*
   var frontMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);
   var backMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);
   var leftMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);
   var rightMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);
   var topMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);
   var bottomMaterial:WireframeMaterial = new WireframeMaterial(0x00FF56);

   materialsList.addMaterial(frontMaterial, "front");
   materialsList.addMaterial(backMaterial, "back");
   materialsList.addMaterial(leftMaterial, "left");
   materialsList.addMaterial(rightMaterial, "right");
   materialsList.addMaterial(topMaterial, "top");
   materialsList.addMaterial(bottomMaterial, "bottom");
   cube = new Cube(materialsList,500,500,500,1,1,1,Cube.ALL);
*/
   var allM:WireframeMaterial = new WireframeMaterial();
   materialsList.addMaterial(allM, "all");

   cube = new Cube(materialsList,500,500,500,1,1,1,Cube.ALL);
   cube.moveLeft(400);
   cube.moveForward(200);

   scene.addChild(cube);

/* end of the body of the example code */

   renderer.renderScene(scene, camera, viewport);
  }
 }
}

show pictures on a sphere using Papervision3D 2.0

底下是採用 Papervision3D 2.0(GreatWhite)用來展示圖片在一顆球上的程式，galleries.xml 也附在後面當註解。

package
{
 import flash.display.BitmapData;
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.display.StageQuality;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 import flash.net.URLLoader;
 import flash.net.URLRequest;

 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;
 import org.papervision3d.cameras.Camera3D;
 import org.papervision3d.render.BasicRenderEngine;

 import org.papervision3d.materials.BitmapMaterial;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.primitives.Plane;

 [SWF(width="640", height="480", frameRate="60")]

 public class Panorama extends Sprite
    {
  private var container  :Viewport3D;
  private var scene      :Scene3D;
  private var camera     :Camera3D;
  private var renderer    :BasicRenderEngine;

  private var assetArray :Array;

  private var cC   :Array;

  private var count    :Number;

  private var flying :DisplayObject3D;

  private var front:BitmapMaterial;
  private var back:BitmapMaterial;
  private var bottom:BitmapMaterial; 
  private var right:BitmapMaterial; 
  private var left:BitmapMaterial;
  private var top:BitmapMaterial;

  private var movementFactor:Number = 100;
  // set the key actions
  private var keyRight:Boolean = false;
  private var keyLeft:Boolean = false;
  private var keyForward:Boolean = false;
  private var keyBackward:Boolean = false;

  private var forwardFactor:Number = 0;
  private var sideFactor:Number = 0;
  private var inertia:Number = 5;

  public function Panorama()
  {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   init3D();
   stage.quality = StageQuality.LOW;
  }

  private function init3D():void
  {
   container = new Viewport3D(640,480,false,true);
   scene = new Scene3D();
   camera = new Camera3D();

   container.buttonMode = true;
   addChild( container );
 
   renderer = new BasicRenderEngine();
   flying = new DisplayObject3D();
   var myurl:URLLoader = new URLLoader(new URLRequest("galleries.xml"));
   myurl.addEventListener(Event.COMPLETE, loadAssets);
  }

  private function loadAssets(event:Event):void
  {
   var loader:URLLoader = event.target as URLLoader;
   var xml:XML = XML(loader.data);

   count = 0;
   assetArray = new Array();
   for each (var pic:XML in xml..photo) {
    assetArray.push(pic.source);
   }

   loadOne();
  }
 
  private function loadOne():void
  {
   var loaD:Loader = new Loader();
   loaD.contentLoaderInfo.addEventListener(Event.COMPLETE, progfin);
   var urlreq:URLRequest = new URLRequest(assetArray[count]);
   loaD.load(urlreq);
  }

  private function progfin(e:Event):void
  {
   var bmm:BitmapData = e.target.content.bitmapData;
  
   count++;
   if(count < assetArray.length) {
    var doublePlane:DisplayObject3D = new DisplayObject3D();
    var frontPlane:Plane = new Plane(new BitmapMaterial(bmm));
    var rearPlane:Plane = new Plane(new BitmapMaterial(bmm));
    rearPlane.rotationY = 180;

    doublePlane.addChild(frontPlane);
    doublePlane.addChild(rearPlane);
  
    doublePlane.rotationX = Math.random() * 360;
    doublePlane.rotationY = Math.random() * 360;

    doublePlane.moveForward(1000);

    flying.addChild(doublePlane);

    loadOne();
   } else {
    createSphere();
    addEventListeners();
   };
  }
 
  private function createSphere():void
  {
   flying.z = 1000;
  
   scene.addChild( flying);
  }

  private function addEventListeners():void
  {
   addEventListener(Event.ENTER_FRAME, render);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
   stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }
 
  // if key is pressed do this event listerners pay attention to the key press
  private function onKeyDown(e:KeyboardEvent):void
  {
   switch(e.keyCode) {
    case "W" .charCodeAt():
    case Keyboard.UP:
    keyForward = true;
    keyBackward = false;
    break;
   
    case "S" .charCodeAt():
    case Keyboard.DOWN:
    keyForward = false;
    keyBackward = true;
    break;
   
    case "A" .charCodeAt():
    case Keyboard.LEFT:
    keyLeft = true;
    keyRight = false;
    break;
   
    case "D" .charCodeAt():
    case Keyboard.RIGHT:
    keyLeft = false;
    keyRight = true;
    break;
     
   }
  }
  
  // this second function  determines the keyup false
  private function onKeyUp(e:KeyboardEvent):void
  {
   switch(e.keyCode) {
    case "W" .charCodeAt():
    case Keyboard.UP:
    keyForward = false;
    break;
   
    case "S" .charCodeAt():
    case Keyboard.DOWN:
    keyBackward = false;
    break;
   
    case "A" .charCodeAt():
    case Keyboard.LEFT:
    keyLeft = false;
    break;
   
    case "D" .charCodeAt():
    case Keyboard.RIGHT:
    keyRight = false;
    break;
     
   }
  }
 
  private function onEnterFrame(e:Event):void
  {
   if (keyForward) {
    forwardFactor += 10;
   }
  
   if (keyBackward) {
    forwardFactor += -10;
   }
  
   if (keyLeft) {
    sideFactor += -10;
   }
  
   if (keyRight) {
    sideFactor += 10;
   }
  
   forwardFactor += ( 0 - forwardFactor ) / inertia;
   sideFactor += ( 0 - sideFactor ) / inertia;
  
   if ( forwardFactor > 0) { 
    camera.moveForward(forwardFactor);
   }else {
    camera.moveBackward( - forwardFactor );
   }
  
   if (sideFactor > 0) {
    camera.moveRight( sideFactor );
   }else {
    camera.moveLeft( -sideFactor );
   }  
  } 

  private function render(e:Event):void {
   renderer.renderScene(scene, camera, container);
   flying.yaw(1);
  }
 }
}
/* galleries.xml
<galleries>
  <photo>
    <source>pic.jpg</source>
  </photo>
  <photo>
    <source>text.jpg</source>
  </photo>
</galleries>
*/

using camera Adobe Papervision3D sphere 環境著球轉

最近想要建立 3D 的操作環境，安裝Flex Builder, 後來也找到Papervision3D，前者是 Adobe 的 Flash Integrated developing environment，後者是 based on actionscript for flash的 3D library, 顧名思義，用來在 "paper" 的視野上建立 3D 的運作，還算不錯，而且是 open source, 將來有機會也拿來應用在 mozilla 上，例如採用 Javascript + SVG|OpenGL|Canvas 上。

下面是一段移動 camera 環繞著球面轉動的運作的步驟：

1. Determine yAngle, the angle by which you want to rotate the camera up
2. Determine xAngle, the angle by which you want to rotate the camera right
3. Determine cameraDistance, the distance the camera is from the center of the sphere
4. Move the camera to the center of the sphere using the moveForward function: camera.moveForward(cameraDistance)
5. Tilt the camera up: camera.tilt(yAngle)
6. Pan the camera right: camera.pan(xAngle)
7. Move the camera back using the moveBackward function:
camera.moveBackward(cameraDistance)

攝影學 digital camera theorem

引用來源來自這兒，覺得還不錯，回應的討論也很有深度，有興趣的人可以前往一觀，這邊貼上原內容講到的研究結果部份：

--

照相真實地重現了一個人眼見到的畫面，這個瞬間，攝影師所見到的畫面被定格，永遠的存下來。所以，照相機的功能不僅是在模擬人眼看到的景像，最後的輸出，也是要給人眼看的。在瞭解這點後，人眼的能力與照相機的能力的比較，以及相片中的影像如何被腦部解讀就成為了一個很有趣的課題。PopPhoto.com 整理了幾點人眼和相機的不同處，以及這些不同處對照相而言所代表的意義...

解析度

原則上：人眼的總可視角差不多有 120 度，總計約 5 億 7600 萬畫素（576mp）。
實作上：照相機的解析度（目前來說）遠遜於人眼。但人類的大腦是個很神奇的東西，會自動把解析度不足的部份自動用「補插點法」補足，因此普通 3mp 的照相機照出來的畫面顯示在螢幕上，我們也不會覺得解析度不夠。

景深

原則上：人眼的構造也和相機不太相同，因此不大能套用相同的理論來解釋，不過人眼的「焦段」大約在 22mm，「光圈」約為 f/3.5，視角幾近 180 度。有趣的是，人眼看到的範圍中，只有中間的 2 度左右是銳利的，其他是愈向外愈模糊。
實作上：這大概也是為什麼淺景深照片一般比較受喜愛的原因。因為人眼視線範圍中只有一點點是銳利的，自然將不重要的背景做糊焦處理，會有助於將人眼的視線（那窄窄的 2 度）集中在主體上。

感光度

原則上：人眼的感光度是會自動調整的。晚上的時候大約在 ISO 800 左右，大白天時則大約只有 ISO 1。但又一次的，人眼的運作原理和照相機有很大的不同 -- 人眼會自動將很多「格」的畫面疊加，來增強夜視能力。
實作上：因此照相機可以輕易地超過人眼的 ISO 極限，就算晚上從觀景窗看出去一抹黑，用 ISO 6400 仍然能拍出照片來也說不定。

動態範圍

原則上：人眼的動態範圍非常廣，從正午的太陽到午夜的星星都看得見，整體算下來大約有十億比一之譜，照相機就差得遠了。
實作上：技術上照相機可以用 HDR 的技術來模擬出人眼在某些環境下的高動態範圍，但即使如此，目前的呈現媒介（螢幕、照片）還是無法複製人間的動態範圍。只能說，有些真正的美景仍然是只能看在眼裡，記在心裡的。

線條

原則上：當畫面有線條時，人眼的視線會沿著線條走，並且短暫停留在轉角處。
實作上：線條不一定要是線，也可以是色彩間的變化、或是強對比產生的線條。應用在照片上，就是多拍地平線、多拍藍天白雲的意思。如果有重要的目標，可以放在線條交叉的地方，有助於引導觀看者在目標上停留。

光線

原則上：科學家發現，當無法從畫面的光影判斷光線來向時，右撇子會自動認定光線來自畫面的左上方，而左撇子則會自動認定光線來自畫面右上方。
實作上：反過來說，拍攝時將光線設置為從左上方打入，會看起來最自然（抱歉了，左撇子們 XD）。

人臉

原則上：人類是完全被「臉」制約的生物。只要視線中有臉出現，視線幾乎毫無例外地會立刻被吸引過去，判斷對方是敵、是友、還是可能的交配對象 (!?)
實作上：看你是要拍什麼樣的照片囉？如果是拍景的話，那就要極力避免畫面中出現臉。如果是同時拍人和拍物的話，就要設法將物靠近臉，增加「曝光」的機會。如果實在不知道拍什麼好的話，拍帥哥正妹絕對是萬靈丹啦！

視線追移

原則上：如果畫面中的人眼不是對著鏡頭的話，看照片的人會自然地跟著畫面中視線的方向移動，試圖找出畫面中的人在看什麼。
實作上：讓畫面中的人（如果他不是主角的話）看著畫面中的重點。如此一來看照片的人的視線，就會自然從人臉移到物體上。

預期運動

原則上：當人眼追蹤移動中的物體時，會自然的把視線放在移動物體的前上一點點的位置，以避免追蹤時丟失了目標。
實作上：照相時在物體的前方稍微留一點白，會形成好像物體在移動的假像。

所以為什麼廠商喜歡找 Showgirl？為什麼 Showgirl 每次的 pose 就那麼幾個 -- 產品放臉旁邊、放胸前、放腰邊？其實答案是很簡單的，因為這些地方能吸引目光罷了。美眉先吸引著男人的目光，再把產品放在目光遊移處，自然就沒可能被忽略掉了。小薑自已是不會刻意拍這樣的照片，但看其他幾位科科們每次拍回來的照片都會引來「產品？產品在哪？」的感嘆，就能知道人眼和人腦對判讀一張照片而言，佔有多重要的地位了。

用 Flex Builder 3 搭配 PaperVision3D 來產生立體展示

這問題是最近我工作上需要展示立體物件時，決定採用 PaperVision3D, 可是發現要用這個工具，必須有Adobe CS3或者是Flex Builder 3。個人認知上想來錯誤頗大，總之一句就是我決定採用 FlexBuilder3，卻因為陌生一直不知道要怎麼把 PV3D example code 編譯好，找半天，就Installing Papervision3D on Flash and Flex寫的最好，因此特來與大家分享。

原文為了適應各種狀況講的頗複雜，而我只需要 PaperVision3D 2.0, 因此請到PaperVision3D下載 2.0 beta 1, 或直接點此下載。假設你的系統已安裝 FlexBuilder3，先暫時先說點別的，因為 FlexBuilder3 是整合 eclipse, 很多教學文件都教你用 SVN, 問題是我在公司無法以 SVN 來安裝軟體，若您有此需求，解決方法就是跑到可以用 SVN 的網路環境，或者直接下載 zip 檔後解開，放到 FlexBuilder3 安裝目錄去，例如我下載subversive for eclipse要給 FlexBuilder3 用，解壓縮這個 .zip檔放到 C:\Program Files\Adobe\Flex Builder 3 即可在 Flex Builder 3 下使用 SVN。

上面講 SVN 跟主題其實是無關，算是題外話。在解壓Papervision3D_2.0_beta_1_src.zip之後，最重要的概念，就是把它當 Flex Library，做法為：

File > New > Flex Library 指定名稱，例如 「Papervision Library」(我是用 pv3d)


畫面中的右下角的 Folder 就填您解壓的目錄即可，這個目錄一般是用 SVN 取得最新的。至於要怎麼把人家寫好的 example code 在編譯時可以使用 PV3D library? File -> Import -> Flex Project 匯入 example code 之後，選取 Properties 的畫面如下：



在 ActionScript Build Path --> Library Path 中，利用 Add Project 將先前的 「Papervision Library」 加進來(我是用「pv3d」 而非「Papervision Library」)即可。

讓 diff 的輸出變彩色網頁 diff2html

Convert diff output to colorized HTML裡頭寫了一個 shell script 讓你可以把 diff 的輸出變成彩色網頁，純粹 shell script 讓你研究其運作非常方便，程式也不大。

命令語法為 $ diff -u v1.c v2.c | diff2html > v1-v2.html

整個 shell script 在該篇文章有，這邊貼上並加上中文註解

#!/bin/bash
#
# Convert diff output to colorized HTML.
# 要配合 diff -u File1 File2 | diff2html > diff.html 的方式

cat <<XX    # 利用 HERE document 產生 CSS 的方式來幫 diff 輸出加顏色
<html>
<head>
<title>Colorized Diff</title>
</head>
<style>
.diffdiv  { border: solid 1px black;           }
.comment  { color: gray;                       }
.diff     { color: #8A2BE2;                    }
.minus3   { color: blue;                       }
.plus3    { color: maroon;                     }
.at2      { color: lime;                       }
.plus     { color: green; background: #E7E7E7; }
.minus    { color: red;   background: #D7D7D7; }
.only     { color: purple;                     }
</style>
<body>
<pre>
XX

echo -n '<span class="comment">'

first=1
diffseen=0
lastonly=0

OIFS=$IFS
IFS='
'

# The -r option keeps the backslash from being an escape char.
read -r s

while [[ $? -eq 0 ]]
do
    # Get beginning of line to determine what type
    # of diff line it is.
    t1=${s:0:1}
    t2=${s:0:2}
    t3=${s:0:3}
    t4=${s:0:4}
    t7=${s:0:7}

    # Determine HTML class to use.
    if    [[ "$t7" == 'Only in' ]]; then
        cls='only'
        if [[ $diffseen -eq 0 ]]; then
            diffseen=1
            echo -n '</span>'
        else
            if [[ $lastonly -eq 0 ]]; then
                echo "</div>"
            fi
        fi
        if [[ $lastonly -eq 0 ]]; then
            echo "<div class='diffdiv'>"
        fi
        lastonly=1
    elif [[ "$t4" == 'diff' ]]; then
        cls='diff'
        if [[ $diffseen -eq 0 ]]; then
            diffseen=1
            echo -n '</span>'
        else
            echo "</div>"
        fi
        echo "<div class='diffdiv'>"
        lastonly=0
    elif  [[ "$t3" == '+++'  ]]; then
        cls='plus3'
        lastonly=0
    elif  [[ "$t3" == '---'  ]]; then
        cls='minus3'
        lastonly=0
    elif  [[ "$t2" == '@@'   ]]; then
        cls='at2'
        lastonly=0
    elif  [[ "$t1" == '+'    ]]; then
        cls='plus'
        lastonly=0
    elif  [[ "$t1" == '-'    ]]; then
        cls='minus'
        lastonly=0
    else
        cls=
        lastonly=0
    fi

    # Convert &, <, > to HTML entities.
    s=$(sed -e 's/\&/\&amp;/g' -e 's/</\&lt;/g' -e 's/>/\&gt;/g' <<<"$s")
    if [[ $first -eq 1 ]]; then
        first=0
    else
        echo
    fi

    # Output the line.
    if [[ "$cls" ]]; then
        echo -n '<span class="'${cls}'">'${s}'</span>'
    else
        echo -n ${s}
    fi
    read -r s
done
IFS=$OIFS

if [[ $diffseen -eq 0  &&  $onlyseen -eq 0 ]]; then 
    echo -n '</span>'
else
    echo "</div>"
fi
echo

cat <<XX
</pre>
</body>
</html>
XX

Documentation / sysrq.txt 當硬碟壞到不能關機怎麼辦？

這標題其實是有點白目的問題，答案就是直接關機啊，不過若是遠端控制的情況，恐怕你就束手無策了吧。這篇主要是翻譯自核心文件下的Documentation/sysrq.txt

透過打開核心的 sysrq 功能，可以不必命令就控制核心做事，因此這議題分兩部份，一部份是 sysrq 功能，一部份是控制核心。

sysrq:
先講語法 echo "NUMBER" >/proc/sys/kernel/sysrq，其中的 "NUMBER" 列之如下，但是也可以把像 "kernel.sysrq = 1" 的內容加入 /etc/sysctl.conf。

   0 - 完全關閉 sysrq 功能
   1 - 打開全部的 sysrq 功能
  >1 - 以二進位位元的方式來看
       0x002 - enable control of console logging level
       0x004 - enable control of keyboard (SAK, unraw)
       0x008 - enable debugging dumps of processes etc.
       0x010 - enable sync command
       0x020 - enable remount read-only
       0x040 - enable signalling of processes (term, kill, oom-kill)
       0x080 - allow reboot/poweroff
       0x100 - allow nicing of all RT tasks

就語法來看，最常用的肯定是 echo "1" >/proc/sys/kernel/sysrq，不過文件上說，上面大於 1 的選項，只針對鍵盤輸入才有限制性，只要有 root 權限的話，可以透過傳送控制命令到 /proc/sysrq-trigger 做等於上述送 "1" 的能力。既然提到鍵盤，也許大家會想知道怎麼按控制命令，大致上是 "壓住 Alt", "按下 PrtSc", "放開 PrtSc", "按 ", 全部放開。這邊的 PrtSc 是 PrintScreen, 筆電或許還要加 "Fn" 鍵。不過呢，最好的方法是以傳送控制字元給核心的方式來做，語法 echo 控制字元 > /proc/sysrq-trigger，其中控制字元如下：

'b': 立刻重開，不會 Sync 與 umount
'c': Will perform a kexec reboot in order to take a crashdump.
'd': Shows all locks that are held.
'e': Send a SIGTERM 訊號給除了 init 外的所有 processes. 這算是最安全的結束系統的方式，但是還不會重開機或關機。
'f': Will call oom_kill to kill a memory hog process.
'h': 這邊沒表列的其他字元按鍵都與 'h' 等效，會顯示 help
'i': 類似 'e', 送 SIGKILL 訊號給除了 init 外的所有 processes，差別是 SIGTERM 通常設計來讓程式自行關閉，比較安全，但是絕大部份情況其實兩者一樣的效果。
'k': Secure Access Key (SAK) Kills all programs on the current virtual console.
'm': 把記憶體傾印出來，以前是學過，不過現在的我是看不懂啦
'n': Used to make RT tasks nice-able
'o': 關機
'p': Will dump the current registers and flags to your console.
'q': Will dump a list of all running timers.
'r': Turns off keyboard raw mode and sets it to XLATE.
's': Will attempt to sync all mounted filesystems. 若是硬碟壞了，這一步做了也沒用
't': Will dump a list of current tasks and their information to your console.
'u': 將所有掛載的檔案系統重新掛載成唯讀的，有利於檔案系統修正與除錯，並安全關機。
'v': Dumps Voyager SMP processor info to your console.
'w': Dumps tasks that are in uninterruptable (blocked) state
'x': Used by xmon interface on ppc/powerpc platforms.
'0'-'9': 設定 printk() 等級

其餘的部份就自己看囉，若真的硬碟壞了想重開機的話，可以試試：
echo 1 > /proc/sys/kernel/sysrq
echo s > /proc/sysrq-trigger
echo u > /proc/sysrq-trigger
echo b > /proc/sysrq-trigger

從 windows 7 新聞看嵌入式開發

剛剛看到這篇文章的時候，想到我們做嵌入式系統開發的人很可憐，常常軟體工程師只有一到三個。為何會有這樣的感嘆呢，其實是沒辦法拿微軟來比的啊！可是我還是要寫寫心得：嵌入式系統軟體部份，不是只有「整合」而已。

在該文裡，有幾個地方值得拿來記下來，例如，在回覆中，有人計算了一下，需要 1000 個工程師，投入 25 個團隊。先說說文中列出來的幾個團隊：
# Applets and Gadgets: 桌面小工具？看樣子把嵌入式裝置的概念整合進來後，會讓 Windows 更易於使用
# Assistance and Support Technologies: 援助和支持技術
# Core User Experience: 核心的用戶體驗
# Customer Engineering and Telemetry: 客戶工程和遙測
# Deployment and Component Platform: 部署和組件平台
# Desktop Graphics: 這不知道幹嘛的，想來是發展像 DirectX 之類的吧
# Devices and Media: 設備和媒體
# Devices and Storage: 設備和存儲，這兩個團隊跟 media center 應該更緊密合作才對，竟然分開三組
# Documents and Printing: 文件及印製
# Engineering System and Tools: 工程系統和工具
# File System: 檔案系統，想來會有新的發展，之前一度要推出，後來被取消的，恐怕會復出
# Find and Organize: 查找和整理，應該就是要跟 Google Desktop 拚，加上第一個 Widget, 拚場意味濃
# Fundamentals: 基本面?
# Internet Explorer (including IE 8 down-level): IE8 不知道又會是什麼怪獸，之前看報導卻沒仔細看
# International: 國際化支援
# Kernel & VM: 看來支援虛擬化技術不遺餘力
# Media Center: 要占據你家的電視的媒體中心
# Networking - Core: 網路-核心
# Networking - Enterprise: 網路-企業
# Networking - Wireless: 網路-無線，光以網路命名的就分三組，可見其重要性
# Security: 安全
# User Interface Platform: 用戶界面平台，可以看得出來跟使用者操作介面有關的也分好幾組
# Windows App Platform: 在Windows APP平台，應該是開發 SDK 的吧？

分工細是當然的，因為在發展整個作業系統之外，還要做發展平台，確實夠辛苦，但是，文中提到一個團隊的成員有 3+1 類：

software development engineers (sde or dev): 就是一般的 RD，不過 RD 這一詞在台灣其實都有點誤傳
software development engineers in test (sdet or test): 這種人在台灣常常是由 SDE 兼任
program managers (pm): 這種人也常由 SDE 兼任，真的是工程師的悲哀，當然絕大多數是由老闆兼啦。
researchers: 哦哦，這在台灣，名義上就是老闆的工作，只是大多數都跟工程師收集，而實際上，則更大多數是從 google 搜尋來的。

重點來了，文中提到，前三類比較偏工程人員的編制比例是 N:N:1/2N, 天啊，真正 Coding 的以此來看是 20%, 而且提到為了品質穩定，這比例是非常 pretty constant across the team! 平均每個團隊約 40 個成員。我猜，每個團隊的寫程式的工程師大約只有五到八個人而已。其實是非常非常精簡的，重點在測試與 PM 比例相當大。

文中提到有些人是跨團隊合作，稱之為核心人員，我猜是 PM, 列之如下：
# 內容發展 -作家和編輯，創造線上援助，網站， SDK的文件，文件和部署。
# 產品規劃 -負責客戶研究和學習，以便告知功能的選擇。產品規劃還協調我們所做的工作與合作夥伴在整個生態系統中的條款通過建立夥伴關係的設計與開發釋放。這整段講的應該是研究針對客戶來的資訊反應到 Windows 上。
# 產品設計 - 發展整體的互動模式，圖形化的語言，及專為 Windows 7 開發的設計語言
# 研究和可用性 -產生「領域和實驗室」的研究，來表達如何在現有的產品和客戶提議的功能實作

Hal Dbus udev automount usb device?

一直以來，總有人要問我 automount device, 也就是自動掛載裝置，通常指的是 USB devices. 事實上有套件 autofs, usbmount, 不過這邊來說說更一般化的東西。這篇文章主要來自udev, hal, 與 dbus(註：2010/05/14, 此篇已經不見了，請見我的新文章)。例如要做 automount, 有三個東西要瞭解一下才行:
- udev: 早期，最麻煩的是建 /dev 下的 node, 這個現在由 udev 解決
- hal: 要做 automount 另一個麻煩，就是不知道裝置的清單與資訊，現在由 hal 解決。 hal 並不是要去讓你怎樣跟硬體溝通，不是用來 config/setup hardware 或是 use hardware
- d-bus: 第三，就是以前需要與硬體溝通的技巧上，很難用 Interrupt, 也很難寫個 daemon 去叫適當的程式來處理 Hardware 的訊息，例如 automount 這件事，裝置插進去，不知道要叫誰來 mount，mount 的參數不知道該是什麼，不同的 filesystem 搞不好還有不同的動作，譬如要加 -t ntfs 什麼的, 現在由 d-bus 解決

在 usb storage 的 source code (include/scsi/sd.h or drivers/scsi/sd.c)中，有定義這個常數:
裝置可以有 #define SD_MAX_DISKS (((26 * 26) + 26 + 1) * 26) 這麼多個，其實正是 a-z, aa-zz, aaa-zzz 個。至於一般記憶卡的，因為有兩個動作，一個是接上讀卡機，一個是接上記憶卡，因此可以這麼理解：

1. 對讀卡機而言，能插的槽是固定的，一插上去，就 export 槽數，那就像硬碟一樣, 所以不同的插槽是分配 /dev/sd[a-z]*
2. 當你插記憶卡上去的時候，讀卡機的狀態就改變了，它重新 export, 就像剛做完 fdisk 一樣的機制，此時，kernel 會讀到記憶卡的分區，就配給 partition /dev/sd[a-z]*[0-9]


參考資料:

• udev f.a.q.
  
• writing udev rules
  
• udev good howto
  

• the purpose of hal
  
• hal web site
  
• Mark discovering hal
  
• Hal specifications
  

• d-bus f.a.q.
  

Udev 是什麼？
早期的核心採用的是 devfs, 後來以 udev 取代，幫你自動產生 /dev/ 下的節點。

Hall 是什麼？
HAL 並非針對如何使用硬體而設計的，也不是設計來讓你設定硬體組態的，事實上，HAL 是用在應用程式中，讓你取得硬體清單及其硬體組態。所以你會看到 libhal 就是讓你做這樣的事的。當然 hald 就是與 kernel 溝通用來收集資訊的。


D-Bus 是什麼？
簡言之，它是由幾件事組成的，怕翻錯，自己翻譯：1) a wire protocol for exposing a typical object-oriented language/framework to other applications; and 2) a bus daemon that allows applications to find and monitor one another. 以比較通俗的話來說 D-Bus 是 1) 像一個 IPC 系統，可以讓裝置與應用程式溝通，2) 由兩個 bus daemons 提供某種高階的資料結構(lifecycle tracking, service activation, security policy)。

HAL & D-BUS
D-BUS provides asynchronous notification such that HAL can notify other peers on the message-bus when devices are added and removed as well as when properties on a device are changing.
所以 D-Bus 提供非同步的通知訊號，使得裝置組態改變時 HAL 可以透過 Message bus 通知到其他應用程式，譬如硬體插入或移除等。

所以若你要做到 automount usb device, 流程圖大約如下：
1. 插入裝置
2. kernel 透過 udev 將攔截到的資訊，傳到 D-Bus 上去
3. 此時 udev 會因為此項通知，自動產生相對應的 /dev/ 下的節點
4. HAL 再經由 D-Bus 的訊息而被知會新裝置，取得相關的資訊，並通知註冊的應用程式
5. 最後，應用程式被知會後，例如 gnome-volume-manager，再將資料從 HAL 層取出，做出相對應的動作。

Multi-Touch V.S. Multi-Pointer多點觸控? 多輸入裝置? MPX

很不幸的，我同時也看到關於 M$ 即將(幾年後的意思)釋出的 Windows 7 增加 Multi-Touch 的能力。相比之下，Linux 有更吸引人的消息，早在二年前，Unisa MPX project就已推出 patch 版本，當時Jserv 也寫了個簡介，而LinuxDevices 去年也介紹過，有心鑽研的人也請參考WHO-T blog。

X.org 在五月的時候說，已經將 MPX 納入 mainline 發展計畫，這邊有關於這樣的Input 事件改變的技術說明。看的出來我並沒有實際實作，有空再來做做看。

另外，在Multi-touch? or multi-point?一文中說明一件事，畢竟，Multi-Pointer 讓 X 可以做到同時有多個輸入，與應用程式無關，要做到 Multi-Touch 相對上就很容易。事實上，就算目前的 single-pointer 要做到 multi-touch 其實也不是做不到不是？就想像成滑鼠快速移動，問題在於要怎麼處理 touchs, 甚至是手勢、動作。該文的意思是說，Multi-pointer 與 Multi-touch 要處理的議題不一樣，請不要搞混。有心想找 Multi-touch 較佳 solution 的人，請思考一下該文。

remastering 訂製屬於自己的 ubuntu

本文來自LiveCD Customization From Scratch, 步驟解釋的很清楚，本來是自己看就好啦，不過我的習慣是做筆記而不是純翻譯，有興趣的人也不妨看看我的心得。

最近我的工作環境都在 Windows 下，其實是懶得再用以前的方式，不管是 Linux + Windows 多重開機還是To Run Windows By Using VirtualBox Based on Linux，就是一個懶字。

不知道為什麼，每日 build 的 Ubuntu 版本在最近才能正常安裝在 VirtualBox 上，後來看到 In Lived System Design, 加上先前的Remix，就想說自己來試試重新製作 Ubuntu，因此特把這篇文章找出來，順便與大家分享。

很久以前在重製 Knoppix 時就講過配合 debootstrap，也講過 Squashfs, 總之，工具都沒什麼變化，倒是感謝 Ubuntu/canonical無私的推廣，所以也想好好的來加入ubuntu taiwan，看能不能幫上點小忙。

在講下去之前，要先確定使用的是 Ubuntu 系統，我相信就算是其他 debian 系統也不是不能做，只是我自己沒測試過。

準備工作區，並利用 debootstrap 建立基本的環境，可以看到是以一般身份而非 root：

$ mkdir work
$ cd work
$ mkdir chroot
$ sudo debootstrap --arch i386 intrepid chroot 

這一步會做很久，影響因素主要是網路，若您的網路夠快就太棒了，我光這一步就要大半個小時。不過您可能先前沒裝 debootstrap, 想必也難不倒才是，透過 apt-get install debootstrap 即可安裝。順便說一下，上面的 intrepid(8.10) 也可以用目前正式釋出的 hardy(8.04) 來取代。

接下來設定好系統，以便在 chroot 後能跟您現在(Host)的環境一致：

sudo cp /etc/resolv.conf chroot/etc/resolv.conf
sudo sudo cp /etc/apt/sources.list chroot/etc/apt/sources.list
sudo mount --bind /proc chroot/proc
sudo mount --bind /sys chroot/sys
sudo mount --bind /dev/pts chroot/dev/pts

我以前也講解過 mount --bind 的好處，就不多說了。特別需要講的是 sources.list, 若您想建立 remix, 那就把安裝 remix一文提到的下面兩個放進去：

deb http://ppa.launchpad.net/netbook-remix-team/ubuntu intrepid main
deb-src http://ppa.launchpad.net/netbook-remix-team/ubuntu intrepid main

準備好上面的工作之後，就算完全 chroot 環境的建置(而已 :-) ，接下來當然是透過sudo chroot chroot正式切換工作環境了。好了，利用下面的方式來準備好套件資料及語系，讓之後安裝套件能順利：

# apt-get update
# locale-gen en_US.UTF-8 zh_TW.UTF-8

再來就是安裝自己想要的套件了，以我的系統為例，竟然要裝一千多個套件，沒幾個小時是跑不完的，希望別等到睡著才好，當然睡得著倒也是好事：

apt-get install ubuntu-standard casper discover1 laptop-detect os-prober linux-generic mobile-* ubuntu-mobile modbrowser batmand

在離開前做做環保工作，把不必要的資訊清一清:

# apt-get clean
# rm -rf /tmp/*
# rm /etc/resolv.conf
# exit
$ sudo umount chroot/proc
$ sudo umount chroot/sys
$ sudo umount chroot/dev/pts

系統都在這兒了，剩下的工作就是包裝成開機光碟(LiveCD), 不過要先確定您的 host 系統中有安裝 syslinux squashfs-tools mkisofs sbm 這些套件，比照最上面安裝 debootstrap 的方式即可。先來產生開機光碟所需要的目錄：
mkdir -p image/{casper,isolinux,install}

開機光碟也需要 kernel 及 initrd, 及 isolinux, 用現成的即可:
cp chroot/boot/vmlinuz-2.6.**-**-generic image/casper/vmlinuz
cp chroot/boot/initrd.img-2.6.**-**-generic image/casper/initrd.gz
cp /usr/lib/syslinux/isolinux.bin image/isolinux/


下面的命令是準備特殊的工具，例如ubuntu 光碟都有的記憶體測試，及 sbm
cp /boot/memtest86+.bin image/install/memtest
cp /boot/sbm.img image/install/


也可以產生開機時的訊息(畫面)，準備一個 isolinux.txt, 其實也可以不必，請自行參考 ubuntu 光碟的內容即可，這個檔也放在 isolinux.bin 的目錄下：

This is an Ubuntu Remix Live CD.

For the default live system, enter "live".  To verify the CD for errors, enter "check".  To run memtest86+, enter "memtest"

若您要產生自己的開機畫面，有機會再另文說明，比較重要的是 isolinux.cfg, 這個檔請參考 zless /usr/share/doc/syslinux/syslinux.txt.gz，範例如下：

DEFAULT live
LABEL live
  menu label ^Start or install Ubuntu
  kernel /casper/vmlinuz
  append  file=/cdrom/preseed/ubuntu.seed boot=casper initrd=/casper/initrd.gz quiet splash --
LABEL check
  menu label ^Check CD for defects
  kernel /casper/vmlinuz
  append  boot=casper integrity-check initrd=/casper/initrd.gz quiet splash --
LABEL memtest
  menu label ^Memory test
  kernel /install/memtest
  append -
LABEL hd
  menu label ^Boot from first hard disk
  localboot 0x80
  append -
DISPLAY isolinux.txt
TIMEOUT 300
PROMPT 1

接下來產生套件清單:

sudo chroot chroot dpkg-query -W --showformat='${Package} ${Version}\n' | sudo tee image/casper/filesystem.manifest
sudo cp -v image/casper/filesystem.manifest{,-desktop}
REMOVE='ubiquity casper live-initramfs user-setup discover1 xresprobe os-prober libdebian-installer4'
for i in $REMOVE 
do
        sudo sed -i "/${i}/d" image/casper/filesystem.manifest-desktop
done

差不多快做完了，接下來就是把系統壓縮成 squashfs:
sudo mksquashfs chroot image/casper/filesystem.squashfs，這步以我在 VirtualBox 只給 678 MB 記憶體的狀況來說，還真的非常非常非常吃力，就慢慢等吧，壓到後面就需要 SWAP....寫完這篇時，這步還在做，有機會做到半夜或明天。

再準備一份光碟說明檔 image/README.diskdefines:

#define DISKNAME  Wade-test CD 2008-08-14 - Release i386
#define TYPE  binary
#define TYPEbinary  1
#define ARCH  i386
#define ARCHi386  1
#define DISKNUM  1
#define DISKNUM1  1
#define TOTALNUM  0
#define TOTALNUM0  1 

順便產生一下光碟的 MD5 checksum:

sudo -s
(cd image && find . -type f -print0 | xargs -0 md5sum > md5sum.txt)
exit

最後最後，真的要來做成 iso 檔了:

cd image
sudo mkisofs -r -V "$IMAGE_NAME" -cache-inodes -J -l -b isolinux/isolinux.bin -c isolinux/boot.cat -no-emul-boot -boot-load-size 4 -boot-info-table -o ../ubuntu-remix.iso .

其實這些步驟跟 KNOPPIX 的重製步驟都大同小異，有興趣的也可以去這兒找找。

我相信會有人問，是不是可以放進 usb disk 中？是的，我以前放了十來個呢！有機會再與大家分享，不過原文件上也有講，只是我懶得寫下去，就先寫到這兒。
(未完待續)

開機畫面怎麼產生？有空再來寫仔細點，
一般我是用 Gimp, 選影像，把格式從 RGB 變成 indexed with 16 colours
存成 bmp 後，直接改名 .rle 即可。
底下也提供用 pbm:

pngtopnm splash.png > splash.pnm 或
jpgtopnm splash.jpg > splash.pnm 或
bmptoppm splash.bmp > splash.ppm

ppmtolss16 '#ffffff=7' < splash.ppm > splash.rle 或
ppmtolss16 "#000000=0" "#ffffff=7" < splash.pnm > splash.rle

perl 裡面處理 excel

原文請參考用 perl 產生 excel 檔一文。

我還蠻喜歡 perl 的，不過好久沒機會用了，看到這篇報導就推一推，以後要查也方便許多。用 perl 的機會通常是寫 CGI, 當你在網頁上要讓使用者「下載」一堆數據，用 excel 是個不錯的辦法。該文有講解怎麼產生，這邊就稍微貼一下，有興趣的人還是看原文較優些。

最重要的關鍵是

use Spreadsheet::WriteExcel; # 引用 Excel 套件
my $workbook = Spreadsheet::WriteExcel->new("-"); # 產生工作簿
my $worksheet = $workbook->add_worksheet("Cover Sheet"); # 產生 worksheet


要加入資料的話就像這樣

$worksheet->write(5, 0, "Division Number:", $bold);
$worksheet->write(5, 1, $division_number);


上面的 $bold 是格式，用法範例如下，當然要在使用者就準備好，這邊只是解說順序才擺後面：

my $bold = $workbook->add_format();
$bold->set_bold();

在用完要輸出前，要先 close:
$workbook->close();

uptime, /proc/loadavg 負載的意義

關於 uptime 指令，訊息常常搞不懂其中後面三項system upload 的意思，這指令也可以透過 cat /proc/loadavg 取得，底下做個簡單的說明，至少用 man uptime 查不到。

那三個數字，分別是過去(最近) 1, 5, 15 分鐘裡面的系統負載，至於負載的算法並非 cpu loading, 而是就 kernel 來說，在 run queue 裡的 process 數目對時間的平均值。

XUL 利用 stringbundle 有效的設定訊息

在開發 XUL 應用程式時，一定會用到不少訊息，為了要做到多國語言化，也就是 i18n, 當然要把訊息抽離放在 locale/ 目錄下，底下就簡介其中的操作邏輯：

首先，看看在 locale/ 下的 *.properties 檔，以 .properties 的命名規則是extension 樣版精靈產生的，裡頭就是放一堆訊息定義字串，其範例為：

helloMessage=Hello World!
helloMessageTitle=Hello
prefMessage=Int Pref Value: %d
extensions.svgeditor.description=svg editor to create 3D model for virtual reality 

注意到最後一條，依 Javascript 的語法來看，似乎是 extensions 物件下 svgeditor.description 屬性，事實上這一點在 defaults/preferences/svgeditor.js 中可以看到最後一行：
pref("extensions.svgeditor@wade.cc.chen.description", "chrome://svgeditor/locale/svgeditor.properties");

不過這用法似乎不怎麼方便，我們來看看其他地方怎麼引用這 properties 檔所定義的 helloMessageTitle 就可以知道些實作技巧:

請參考 overlay.js 有底下二行：

．this.strings = document.getElementById("svgeditor-strings");
．this.strings.getString("helloMessageTitle")

其中 svgeditor-strings 定義在 firefoxOverlay.xul:

  <stringbundleset id="stringbundleset">
    <stringbundle id="svgeditor-strings" src="chrome://svgeditor/locale/svgeditor.properties"/>
  </stringbundleset>

也就是，透過 把整個 properties bundle 進 svgeditor-strings 元素中

不過呢，每次都像上面那樣用也頂麻煩的，可以增加一個函數如下，用起來會方便許多：

function getStr(id, args)
{
    if (args && (args instanceof Array) && args.length > 0)
        return document.getElementById("locale-strings").getFormattedString(id, args);

    return document.getElementById("locale-strings").getString(id);
}
例如直接用 getStr("extensions.svgeditor.description") 即可，不必再宣告半天

細心的您也許有發現到 getFormattedString()，這個在 properties 檔中，等號右方的值若出現 %S(大寫的 S)的話，會被後面的 args 陣列取代，也就是第一個 %S 由 args 陣列第一個元素取代，第二個 %S 由 args 陣列第二個元素取代，依此類推。

openDialog() XUL 對「視窗」的處理

請參考 DOM:window.openDialog

window.openDialog() 算是 window.open() 的雙胞胎，當然有點不一樣，先來看看語法：

newWindow = openDialog(url, name, features, arg1, arg2, ...)

把後面的參數傳進去，在新開啟的 Dialog 裡頭要怎麼用呢？我們直接以語法裡傳了二個為例，在新開的 Dialog 中可以用 window.arguments[#] 取得，如：

var arg1 = window.arguments[0];
var arg2 = window.arguments[1];

有傳參數進去當然也要取得傳回值，方法就是把傳回值也當參數傳進去，如下：

var retVals = { address: null, delivery: null };
openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);

在新開的視窗中透過 retVal 設定要傳回的值，例如
var retVals = window.arguments[2];
retVals.address  = enteredAddress;
retVals.delivery = "immediate";

那麼在原視窗就可以透過 retVal 取得所要有值。

Ubuntu Release Party & Installfest '08 台北場最新消息

一直太少參與社群活動，底下跟大家分享一下：

首先，ubuntu 的母公司 Canonical 在台灣有成立分公司(?)，而 ubuntu 中文網址搬家了，剛上去看，發現有一個活動：

Release Party & Installfest '08 台北場將於 2008/8/23(六) 18:00~20:30 台大應力所國際會議廳舉行，活動目的在 分享 Ubuntu 心得，因此下列對象都適合：

1. 有新東西、有趣的技術想與大家分享的夥伴請寄信到：itsIjs小老鼠gmail點com
2. 有興趣與大家交流 Ubuntu 的夥伴
3. 其他想學習 Ubuntu 的夥伴

光看上面似乎是有點入門，不過，若想找同好的也適合不是？但是啊，整個兩天的活動是頗值得去的耶，我指的是 http://coscup.org/2008/，免費的哦，還有茶點，不過好像報名時間截止了，管它的，到時候或站或坐或躺，總不能趕人吧，可是剛剛看了 http://blog.coscup.org/ 說的，將不開放現場報名！嗯，這世界，是無賴就會贏，希望到時候進得了大門。

Building 快速開發 Firefox Extensions

這篇文章來自Building Firefox Extensions。

首先，要提醒大家要裝幾個附加元件，這有助於開發 XUL:

• Extension Developer
  
• Web Developer
  
• Console2
  
• 或是 Javascript Debugger
  
• Chrome List 或 Chrome Browser
  

在開發期間，也建議您建立專門用於開發的 Profile。Profile 的觀念原先是為了讓不同使用者建立其專屬的「環境」，這邊就算是同一個人也可以建立不同的身份。Mozilla/Firefox 會把像 Cache, cookies, bookmarks, history, plugins, extensions, searchengines 等等等依不同的 profile 分開放置，也就是說，在你開發期間，你不會與慣用的瀏覽行為混用，這樣做有一個非常大的好處，就是安全。建立新 Profile 的方法稍微要注意的是，先把所有 Mozilla 系列的產品關閉，至於要怎麼確認都關閉了呢？也很簡單，就是底下的命令與預期不合時就是了。在「開始」-->執行 下以 "firefox -profilemanager" 啟動瀏覽器，至於這一段的操作請參考Mozilla Profiles 是什麼及管理 Profiles二篇文章。

以我來說，我是照著文件上說的，建了一個 dev, 將 Profile dev 指向 C:\Temp\dev，而開發中的附加元件則放在 C:\Temp\ext-dev 下，其實是可以直接放在 C:\Temp\dev\extensions 下的，但是畢竟我在開發過程會有些不必要的檔，分開比較不會搞混。原教學文件上有提供 Profile Manager 的圖片如下，記得要更改存放路徑：



在進行開發附加元件時，當然可以參考進行開發 Mozilla 附加元件!這篇文章，但是有人已經開發出一個附加元件樣版開發精靈，用它當第一步會省卻不少 Keyin 工作。再次強調一下，像這種精靈是不錯用，但是基本功夫也要自己去紮實才行。

上一段提到 Wizard 這事，有個欄位恐怕有人會遇到跟我一樣的困擾，那就是 Update URL，這一點我無法提供有效的 URL, 所以我就隨便填個 https:// 開頭的值，否則無法正常安裝。我所填的值如下，其中 Additional Features 我全選，反正不要的時候再刪就好了：



填完後按最下方的「Create Extension」即可下載一個 zip 檔，它就是精靈幫你產生的附加元件樣版，存好解壓縮到您喜歡的目錄即可，我是存到 C:\Temp\ext-dev 下，其子目錄名稱就如我所填的 Extension Short Name 欄位的值，也就是 svgeditor。

接下來要安裝這個附加元件其實也很簡單啦，若要按照正常手續，必須先將之包裝成 XPI, 然後由瀏覽器解壓後執行 install.rdf 來安裝，不過為了節省開發期間的「壓縮」->安裝->解安裝->重新啟動瀏覽器 的繁瑣過程，可以變成「直接修改」->重新啟動瀏覽器 這樣的過程，那就按照Building Firefox Extensions所講的方法，在 dev 這個 Profile 所安裝的目錄下的 extensions，以我為例就是在 C:\Temp\dev\extensions 建一個檔其名稱為精靈中 Extension ID 欄位的值，如 svgeditor@wade.cc.chen ，其內容指向剛剛解壓完的目錄，以我為例就是 C:\Temp\dev\extensions\svgeditor@wade.cc.chen 這個檔的內容只有一行:
C:\\Temp\\ext-dev\\svgeditor
之所以會用 \\ 是因為微軟的路徑用的是脫跳字元，所以得採用兩個反斜線。

搞定上面的步驟後，重新啟動 Firefox 時，記得選擇 dev 這個 Profile, 應該就安裝完成，你可以透過附加元件管理員來查，畫面如下：


NOTE: 若你未提供安全連線的 Update URL 的話會無法正常安裝。


正確安裝的話，在網頁內容按滑鼠右鍵會看到 "Your Menuitem" 的選項，畫面如下：


或者也可以從瀏覽器上方功能表的「工具」看到 "Your localized menuitem" 選項，畫面如下：


在根據這個樣版來開發屬於自己的附加元件之前，研究一下附加元件樣版裡的檔案是第一要務：

svgeditor:        # 附加元件目錄
build.sh*         # 用來建立 JAR 及 XPI 用的，您可以在 cygwin 中用，正常是 Linux 下
chrome.manifest*  # 定義 chrome 的資源，例如語系，可用的目錄及其資源路徑，如後述
config_build.sh*  # build.sh 所需要的組態定義
content/          # 會被包進 chrome 裡的主要內容，通常會有一堆 xul, js 等，此外還有 locale, skin
defaults/         # 附加元件在瀏覽器的 about:config 裡的組態預設值
install.rdf*      # 安裝附加元件的資源檔，非常重要，如後述
locale/           # 語系，要中文化就得翻譯裡頭的檔，另文說明
readme.txt*       # 說明檔
skin/             # 等於是  theme 要用的資源，如CSS 或圖示檔等

在此並不打算一個一個介紹，只寫了簡單的說明，先來針對 install.rdf 多說一些，底下中文部份請在閱讀時自動視為註解。

<?xml version="1.0" encoding="UTF-8"?> XML 版本
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 xmlns:em="http://www.mozilla.org/2004/em-rdf#"> rdf 的命名空間
  <Description about="urn:mozilla:install-manifest">  描述此附加元件 
    <em:id>svgeditor@wade.cc.chen</em:id> "id" 就是附加元件的識別，早期程用 GUID
    <em:name>svg editor</em:name>      附加元件名稱
    <em:version>1.0</em:version>       附加元件版本
    <em:creator>wade cc chen</em:creator>  附加元件的撰寫者，可以擺多筆
    <em:description>svg editor to create 3D model for virtual reality</em:description>  這當然就是附加元件的說明
    <em:homepageURL>http://wadefs.blogspot.com</em:homepageURL> 附加元件的首頁
    <em:updateURL>https://wadefs.blogspot.comv/em:updateURL> 附加元件的更新網址
    <em:aboutURL>chrome://svgeditor/content/about.xul</em:aboutURL> 在附加元件管理員按滑鼠右鍵選「關於」會用到此 XUL
    <em:optionsURL>chrome://svgeditor/content/options.xul</em:optionsURL> 同上，附加元件的選項
    <em:iconURL>chrome://svgeditor/content/svgeditor.jpg</em:iconURL> 最件的圖示，在附加元件管理員每個附加元件前方的圖示
    <em:targetApplication>  適用的軟體，可以指定多個，這邊是針對 firefox
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox --> 適用軟體的 id, 採用 GUID 表示
        <em:minVersion>1.5</em:minVersion> 適用軟體的最小版本
        <em:maxVersion>3.0.*</em:maxVersion> 適用軟體的最大版本
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

上述 firefox id: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}, flock id: {a463f10c-3994-11da-9945-000d60ca027b}, thunderbird id: {3550f703-e582-4d05-9a08-453d09bdfdc6}

接下來看看 chrome.manifest 裡面的資源表示法，這個檔在您打算包成 JAR 檔時會有不同的表示法，以精靈產生的來說是沒被包成 JAR 格式，該檔內容如下，一樣，請把中文敘述自動當成註解：

content svgeditor content/                這三個目錄會被視為 chrome 資源
locale svgeditor en-US locale/en-US/   在下面包成 JAR 的範例中，寫法很不一樣
skin svgeditor classic/1.0 skin/   而下一行的 chrome:// 就是 chrome 資源表示法
overlay chrome://browser/content/browser.xul chrome://svgeditor/content/firefoxOverlay.xul
style chrome://global/content/customizeToolbar.xul chrome://svgeditor/skin/overlay.css 

由以上範例可以看到指定了 content, locale, skin, overlay, style, 底下看把 chrome 包成 jar 之後的表示法:

content extensiondev jar:chrome/extensiondev.jar!/content/ xpcnativewrappers=no
locale extensiondev en-US jar:chrome/extensiondev.jar!/locale/en-US/
skin extensiondev classic/1.0 jar:chrome/extensiondev.jar!/skin/

overlay chrome://browser/content/browser.xul chrome://extensiondev/content/firefoxOverlay.xul
overlay chrome://messenger/content/messenger.xul chrome://extensiondev/content/thunderbirdOverlay.xul
overlay chrome://navigator/content/navigatorOverlay.xul chrome://extensiondev/content/seamonkeyOverlay.xul

style chrome://global/content/customizeToolbar.xul chrome://extensiondev/skin/extensiondev.css 

後面就接著說明 chrome, 一直沒去想辦法搞懂 chrome 一詞的由來，查字典更是愈查愈模糊，總之，我知道它代表附加元件就對了，當然不包括那些雜七雜八的東西，也就是說，可以想成 chrome 就是被瀏覽器載入的東西即可。不過話說回來，依我這記性，每次要找附加元件都找半天，而且有人也為了不知道怎麼看 utf-8 的純文字檔而傷腦筋，這邊提供一個附加元件叫Chrome List 或 Chrome Browser也行，她會把瀏覽器載入的附加元件的 chrome 列出來，甚至可以在每個 chrome 內的檔案上直接快按兩下打開，哦，當然是用瀏覽器開，對瀏覽而言非常好用, 也可以知道到底被載入了哪些東西在你的瀏覽器所佔用的記憶體裡。

附加元件可以由是否「影響」瀏覽器(或其他附加元件)的外觀來分類，這，就得靠 Overlay 來做到，請見 chrome.manifest 裡有一行:
overlay chrome://browser/content/browser.xul chrome://svgeditor/content/firefoxOverlay.xul
這一行指明要用 firefoxOverlay.xul 來附加在 browser.xul 上，而後者就是你所見的瀏覽器外觀。所以我們先來看看這個檔:
<script src="overlay.js"/> 跟 overlay 有關的動作都定義在這兒了，包括按滑鼠右鍵要做什麼，在工具功能表按相關選項的相對應動作等都定義在這兒。
這個檔的其他部份定義了附加元件要呈現的元件，譬如選項，或是按鈕，或是訊息視窗等等。

上面說明並未提到 Overlay 的意涵，若你有打開 browser.xul 來看，會找到被 overlay.js 叫用的一個元件 contentAreaContextMenu，這也就是在網頁內容區按滑鼠右鍵會被增加一個 "Your Menuitem" 選項的實作原理。也就是說，瀏覽器載入網頁後，會在其內容的 contentAreaContextMenu 後面「附加」上 firefoxOverlay.xul 裡 <menuitem id="context-svgeditor" label="&svgeditorContext.label;" 所定義的 svgeditorContext.label, 這個值又被定義在 locale/en-US/svgeditor.dtd 中。看得出來若你想把選項文字變中文的，就是要針對這個 locale 動手腳，請見 如何將附加元件中文化, 或是看Mozilla 中文化計畫 - Howto一文更好。也許我後面會寫寫這部份。若您有注意到，可以發現引用的方式就是在 label 前面加上 &, 這就有點像寫 shell script 程式裡面用 "$" 一樣。

最後，看一眼上面提到的 overlay.js, 可以這麼說，在寫 XUL 時，JSON 是被廣泛採納的物件表示法，我前不久才寫了一篇 Javascript 物件的表示法，有興趣的人可以拿這個 overlay.js 來兩相比較。

最後，我並不想研究該文提到的picnik，因此剩下的就留待研究 SVGeditor 時再來說明，這邊就只說說Building firefox extensions 教學文件提到的一件事：

picnik 是採 flash 來編輯照片，但是她有開放 API, 就像 google 對 base, blogger, picasa, maps, earth 等等所做的事一樣，這有助於 3rd party 將 picnik 嵌入其 web 應用程式中。

最後強調一下，若你有改檔案，尤其是 chrome.manifest 請務必重新開啟瀏覽器。

由瀏覽器引來的一些東西

跟我熟的一向知道我愛 Open Source 的東西，也一直非常喜歡 Mozilla/Firefox, 因此特別介紹一個好東西，Mozilla 在 Mobile 裝置上的移植性探討，而在 DirectFB 上的移植上有提到「先前的工作」裡的網址，竟然是我一直以為沒被更新的資料，原來搬到這兒了，看來還是得投身原始站才是王道。

不過這不是我要說的，我曾在敝公司提到在裝置內採用 Webkit 而非 Opera, 結果引來該單位負責人(官位不小)說「用 Open Source」的東西都不完整也沒保障，我知道他們對 Opera 比較熟，只是想說丟個訊息出來大家討論，聽到這樣的話，我打從心裡敗給他們，因為人微言輕，不想多作辯論，只希望他們的案子能進行順利些。

做完 SVG Editor 後，再來好好研究一下 Mozilla over DFB, 有看到這篇的人願意的話也請把心得與我分享。

firefox extension 入門？

期待看入門？先自己看英文的吧，最重要的訊息來自Mozilla 開發者，不過啊，為了節省大家時間，有個Building firefox extensions也建議去看看，尤其最後面附的resources.

接下來要來寫 SVG editor，所以就先省略，到時再一併介紹整個過程，不過話說回來，我目前都在 Windows 上工作，至少要能找到 profile 吧，請在 開始-->搜尋-->檔案或資料夾 的右上角輸入 %APPDATA%\Mozilla\Firefox\Profiles\ 此時不必按 Enter 應該就會跳出你的 Profile 目錄。

我用的瀏覽器是 firefox 3.0.1, 在測試 extension 時，發現因為未提供 https 的安全更新網址造成無法正常安裝，後來提供一個假的 url, 也就是隨便給一個 https://xxx.yyy.zzz 來騙瀏覽器。話說這個安裝採用上面教學文章提到的方式，將安裝目錄寫進檔案中連結到我慣用的目錄，而不是由瀏覽器安裝到預設目錄，作法請自行參閱文章，不過在 Windows 下要注意的是斜線異於常理，所以貼上內容供大家參考一下：
C:\\Temp\\ext-dev\\svgeditor

等會兒我會貼一篇新文章專門翻譯Building firefox extensions。

self extract 以 bash script 建立自解壓的安裝檔

本文主要譯自這兒，用 bash script 建立可以自己解壓的安裝檔(self extract installing file)。

一般利用 tar 來壓縮檔案，在安裝時並不存在像 Zip類似的「解壓後執行」功能，因此無法建立自解壓的安裝檔。Unix 其實有很好的工具可以做到這一點，原理不難，就是利用一個標籤(本文用的是 __ARCHIVE_BELOW__ 來把 shell script 與壓縮檔分開，再利用 awk 與 tail 把此壓縮檔取出來後再安裝。

本文只是簡單示範，想要更聰明的安裝，例如事先指定安裝目錄等等，請自行修改，另外本文雖然示範安裝二個純文字檔，真正在用的時候並沒有此限制，您可以安裝任何檔。為了開放彈性的安裝程序，有個 installer 是解壓後執行，用來真正安裝檔案。

先把整個目錄結構介紹一下：

$ ls -FR .
.:
build*  decompress*  payload/  selfextract.bsx*

./payload:
files.tar  installer*

整個過程其目的是將 payload/files.tar 中被壓縮的檔案安裝到其他機器的系統中，目前該檔只有二個檔如下：

$ tar tvf files.tar
-rw-r--r-- Wade/Wade 11 2008-08-11 09:13 File1.txt
-rw-r--r-- Wade/Wade 22 2008-08-11 09:13 File2.txt

build 這個檔用來將 decompress 及 payload/ 包裝成自解壓的檔，而 decompress 是整個自解壓檔的「頭部」， payload 則是尾部，中間以 __ARCHIVE_BELOW__ 連接。所以這邊有三個 script file, 一個是安裝用的 installer, 一個是解壓用的 decompress, 一個是用來建立自解壓安裝檔用的 build，這三個檔的內容如下：

build:

#!/bin/bash
# 底下三行把 payload 包裝成 payload.tar
cd payload
tar cf ../payload.tar ./*
cd ..

if [ -e "payload.tar" ]; then
  gzip payload.tar  # 用 gzip 壓縮以減小檔案大小

  # 檢查確實有壓成功的話，再將之附到 decompress 後面變成新檔 selfextract.bsx
  if [ -e "payload.tar.gz" ]; then
    cat decompress payload.tar.gz > selfextract.bsx
  else
    echo "payload.tar.gz does not exist"
    exit 1
  fi
else
  echo "payload.tar does not exist"
  exit 1
fi

echo "selfextract.bsx created"
rm -f payload.tar.gz  # 捨棄不要的檔
exit 0

decompress:

#!/bin/bash
echo ""
echo "Self Extracting Installer"
echo ""
# 用 mktemp -d 建立暫時目錄
export TMPDIR=`mktemp -d /tmp/selfextract.XXXXXX`
# 取得前面的 payload.tar.gz 這個壓縮檔內容
ARCHIVE=`awk '/^__ARCHIVE_BELOW__/ {print NR + 1; exit 0; }' $0`
# 配合 tail 及 tar 將之解壓
tail -n+$ARCHIVE $0 | tar xzv -C $TMPDIR

CDIR=$PWD
cd $TMPDIR

# 執行 installer 安裝檔案
./installer

cd $CDIR
rm -rf $TMPDIR # 刪除不必要的暫時檔

exit 0

__ARCHIVE_BELOW__

installer:

#!/bin/bash
# 取得要安裝的目錄，此時的 $PWD 是上面提到的暫時目錄
echo -n "The install directory is ($PWD)? "
read INSTALLDIR
[ "x$INSTALLDIR" = "x" ] && INSTALLDIR=$PWD
# 處理安裝目錄已存在的情況
if [ -e $INSTALLDIR ]; then
  if [ -f $INSTALLDIR ]; then
    echo -n "The $INSTALLDIR is in file type, remove it at first (Yes)? "
    read REMOVE
    [ "x$INSTALLDIR" = "x" -o "x$INSTALLDIR" = "Yes" ] && rm -rf $INSTALLDIR || exit 0
  elif [ -d $INSTALLDIR ]; then
    echo -n "The $INSTALLDIR already exist, remove it at first (No)? "
    read REMOVE
    [ "x$INSTALLDIR" = "xYes" ] && rm -rf $INSTALLDIR
  fi
fi
mkdir -p $INSTALLDIR  # 產生安裝目錄
tar xvf ./files.tar -C $INSTALLDIR

特別強調一下，這個 installer 應視需要自行修改，執行畫面如下：

包裝成自解壓檔:

$ ./build
/home/Wade/installer/payload
selfextract.bsx created

$ \ls -FR .
.:
build*  decompress*  payload/  selfextract.bsx

./payload:
files.tar  installer*

執行 selfextract.bsx:

$ bash selfextract.bsx

Self Extracting Installer

./files.tar
./installer
The install directory is (/tmp/selfextract.Wo2424)? /tmp/files
File1.txt
File2.txt

$ ls -l /tmp/files
total 2
-rw-r--r-- 1 Wade Wade 11 Aug 11 09:13 File1.txt
-rw-r--r-- 1 Wade Wade 22 Aug 11 09:13 File2.txt

Javascript 中的物件導向

有不少人看輕 javascript, 也有更多人像我一樣，只學到古早的 javascript，我早知道 Javascript 可以實現物件導向觀念的程式架構，也早知道 JSON，這邊就來跟大家分享一下怎麼在 Javascript 實現物件導向的程式架構。

Javascript 是 prototype 導向的寫法，與一般 C++, Java, C# 都不一樣的方式，不過它卻讓 Javascript 這種解譯式的語言有辦法使用封裝、繼承、與多形。也正因為 javascript 的解譯式天性，讓你在設計程式時可以即時動態改變物件，包含屬性與方法，甚至是整個物件。

Javascript 的物件表示法有不同的形式，從 new Object, new Function, 或是直接由 JSON 建構都行。本文主要來自 Introduction to Object-Oriented JavaScript ，因此就以該文為範例。

function MyClass()
{
.....
}

var c = new MyClass();

上面的例子裡面，雖然函數(物件)命名為 MyClass, 但是基本上，Javascript 裡面對 Class, Object, Instance 的區分並不是非常嚴謹，只能在使用時來判斷它。譬如就上例而言，似乎 var c = new MyClass() 是產生一個 instance, 例是這個 MyClass 確實也是個函數，可以直接呼叫！不過只要想成呼叫時，也等於偷偷 new MyClass() 也行，或是說，其實背後，全都是 Object，那可能就不會太奇怪了。舉例：

  function MyClass()
  {
    this.MyData = "Some Text";
    this.MoreData = "Some More Text";
    alert ("in MyClass()");
  } // end of MyClass()
  var c = new MyClass();
  alert (c.MyData + ", " + c.MoreData);

上例的結果會出現兩次 alert, 想來也就順理成章了。若將最後兩行直接改成:
MyClass(); 這樣呼叫函數，嘿嘿，也說得通不是？至於 this 的用法應該不必多說吧？

  function MyClass()
  {
    this.MyData = "Some Text";
    this.MoreData = "Some More Text";
  } // end of MyClass()
  MyClass.prototype.showData = function()
  {
    alert ("MyData: " + this.MyData + ", MoreData: " + this.MoreData);
  } // end of showData()
  var c = new MyClass();
  // alert (c.MyData + ", " + c.MoreData);
  c.showData();

這例子把 MyClass() 的「屬性」顯示出來，原來是在外面存取屬性，改成增加「方法」 showData() 的方式。這範例主要在講方法，即 showData() 的定義方式，及其引用本身物件(類別?)內屬性的方法。

不過，這例子其實是很不好的示範，自己顯示自己常常會牽涉到 GUI 的議題，最好是交由「外面」模組來實作，也就是提供 getData() 取代 showData()

接下來講講封裝。Javascript 並沒有真正良好的封裝，譬如什麼 public, private, 什麼的一堆有的沒的，當然有好有壞，反正嘛，彈性太大是會有問題，但是只要你會用，易用，易除錯，彈性帶來的好處也不小。

  function MyClass()
  {
    this.MyData = "Some Text";
    this.MoreData = "Some More Text";
  } // end of MyClass()
  MyClass.prototype.setData= function(theData)
  {
    this.MyData = theData;
  } // end of setData()
  MyClass.prototype.getData = function()
  {
    return this.MyData;
  } // end of getData()

  var c1 = new MyClass();
  var c2 = new MyClass();
  c1.setData("I am wade");
  alert ("c1: " + c1.getData() + ", c2: " + c2.getData());

這邊真正示範了將 MyClass() 當成類別的作法，不止有屬性也有方法，自行研究研究。不同的物件(c1, c2)因為透過 setData() 而改變其屬性。事實上也可以寫類似 constructor 的方式。

function Animal(name)
{
  this.name = name;
}
Animal.prototype.say = function(what)
{
  if (what)
    alert (this.name + " said: " + what);
  else
    alert (this.name + " said something.");
} // end of say()

//Inherited class constructor
function Dog(name)
{
  Animal.call(this, name);
}
Dog.prototype = new Animal();

Dog.prototype.ChangeName = function(newname)
{
  this.name = newname;
}

var dog = new Dog("My Poppy");
dog.say();
dog.ChangeName("Wader");
dog.say();

這個例子先是展示了繼承，Dog 繼承了 Animial 的 say() 方法及 name 屬性, 這些繼承能力是透過 Animal.call(this, name); 再加上 Dog.prototype = new Animal(); 來完成的。這也透露出一件訊息，就是前面講 Javascript 是 prototype based 這件事，但是若對 OO 敏感的人也可以看出來，Function 在此處就表現了它自身是 Object 的概念。
而後面第二次的 say() 展現了跟先前 setData() 同樣的功效，只是這次是用在繼承上。

接下來看看多型，不過減省版面下，請將下面的碼直接接在上例的後面，當然要把上例後面四行拿掉再加上去也是不錯的作法：

Dog.prototype.say = function(what)
{
  alert (this.name + " woof: " + what);
} // end of say() of Dog

function Cat(name)
{
  Animal.call(this, name);
} // end of Cat()

Cat.prototype.say = function(what)
{
  Animal.prototype.say.call(this, what);
} // end of say() of Cat

dog.say("who are you?");
var cat = new Cat("Cat Girl");
cat.say("I love you");

Dog 的 say() 方法其實是用新的覆蓋掉 Animal 的，而 Cat 的 say() 方法，則是用繼承的作法。意思是，Cat, Dog 的 say() 其實已經與原來的 Animal 有不同意見了。

觸控面板與手寫輸入 windows programming

這幾天的研究，主要就是要看看標題所寫的問題要怎麼做，主要是針對 windows XP/Vista.

1. 呼叫輸入法
   
   1. 範例
      

      
      void   CNewUrlDlg::OnSetfocusEditNewurl()     
      {   
         //   TODO:   Add   your   control   notification   handler   code   here   
         CEdit   *pEdit=(CEdit*)   GetDlgItem(IDC_EDIT_NEWURL);   
         HWND   hwnd=pEdit->GetSafeHwnd();   
         HKL   hkl   =   GetKeyboardLayout(0);   
         if(!ImmIsIME(hkl))   
            ImmSimulateHotKey(hwnd,IME_CHOTKEY_IME_NONIME_TOGGLE);   
      } 
      

      
      其中 IME_CHOTKEY_IME_NONIME_TOGGLE 在Input Method一文中有說明。
      
      
   2. 自行呼叫應用程式
      Vista 下的手寫板是獨立應用程式，名稱叫 TabTip.exe, 可自行呼叫
      ShellExecute(GetParent()->m_hWnd, NULL, "TabTip.exe", NULL, NULL, SW_SHOWNORMAL);
      
   
   
2. 自行開發
   
   1. 可透過 InkEdit, InkPicture 等自訂手寫輸入外觀 ，可參考
      
   2. http://msdn.microsoft.com/zh-cn/library/ms812487.aspx
      
   3. 欲進行細部自訂請參考
      
   4. http://msdn.microsoft.com/zh-tw/library/system.windows.ink.aspx
      
   5. http://msdn.microsoft.com/zh-tw/library/system.windows.ink.inkanalyzer.aspx 用來分析手寫板
      
   6. http://msdn.microsoft.com/zh-tw/library/system.windows.ink.inkrecognizer.aspx 用於識別，由 InkAnylyzer 用於識別
      
   7. http://msdn.microsoft.com/zh-tw/library/system.windows.ink.gesturerecognizer.aspx  這似乎只在 Vista 下能用
      
   8. http://msdn.microsoft.com/zh-tw/library/microsoft.ink.textinput(VS.85).aspx 用於手寫板識別後的文字取得
      
   
   
3. XP 的支援
   http://www.microsoft.com/downloads/details.aspx?familyid=84bbefa4-7047-41df-8583-e3bdbf9d805f&displaylang=en
   
4. 參考書
   
   • Building Tablet PC Applications
     
   • by  Rob Jarrett and Philip Su
     
   • Pages 576
     
   • User Level All
     
   • ISBN 0-7356-1723-6
     
   • Release date 25 September 2002
     
   
   

Windows Programming -- Mouse Messages

前面說過，Windows Programming 是 Message looping 的機制，所以舉例來說要控制(Input/Output)滑鼠，那就要了解相關的 Messages:

WM_LBUTTONDBLCLK
The user double-clicked the left mouse button.
WM_LBUTTONDOWN
The user pressed the left mouse button.
WM_LBUTTONUP
The user released the left mouse button.
WM_MBUTTONDOWN
The user pressed the middle mouse button.
WM_MBUTTONUP
The user released the middle mouse button.
WM_MOUSEMOVE
The user moved the mouse cursor within the client area of the window.
WM_MOUSEWHEEL
The user rotated or pressed the mouse wheel.
WM_RBUTTONDOWN
The user pressed the right mouse button.
WM_RBUTTONUP
The user released the right mouse button.

不過我搞不懂，若有其他 button 怎麼辦？3D 滑鼠怎麼辦？

Windows programming 心得

一向對 Windows Programming陌生，來寫這心得可能會有朋友覺得奇怪吧。

Windows "Kernel" 其實是一堆 .dll 構成的，底下就先來介紹各個 dll

NTOSKRNL.EXE, 是整個 Windows 作業系統的核心，光這個檔名就可以看得出來，在 NT 之後才採這個版本，之前的是 9X 系列。除了這個檔之外，其他的就是 .dll 啦，可見這個檔的重要性。

HAL.DLL, 這個檔等於是 NTOSKRNL 與底層溝通最重要的檔，像 ports, monitors, keyboards, etc. 用來把硬體與核心抽離用的。

以上兩個檔可以算是最底層的

NTDLL.DLL 用來處理 File I/O, Threading, 同步, 計時, 訊息等等，這個檔算是 M$ 的機密，屬於未公開的部份，因此也被稱為 "Native Windows API"

WIN32K.SYS 的工作其實跟 NTDLL.DLL 很像，不過偏像圖形與操作介面上，而 NTDLL.DLL 則偏系統工作，而且 Win32K.sys 有很多 primitive kernel-mode code，這也就是讓 Windows 完全是圖形介面的重要檔案。

再往上一層提供了絕大部份 kernel mode 功能，也被稱為 Win32 API

kernel32.DLL, 這部份可以想成是 user mode 的 NTDLL.DLL, 正因為如此，是有不少人想跳過它直接呼叫 NTDLL.DLL, 不過因為微軟未公開，用了可能會被告，再且，依微軟的習慣，你亂用反而會出問題。

gdi32.DLL，顧名思義，就是用來畫圖的啦，微軟就是有這項好處，你不必再找其他解答去整合。

user32.DLL，就是做 user interfaces 要用的，不過啊， User32 其實是呼叫 GDI32.DLL 與 WIN32K.SYS

MSVCRT.DLL, 這就有點像 glibc

WS2_32.DLL, 這實作了 windows socket

windows programming 其實離標準 C 非常遠，我的意思是，你光懂 C 是無法寫 M$ 的程式的，這也是我的困擾。不過有個基本知識我倒是知道，畢竟也寫過一陣子 Windows Application, 那就是 Message looping....message based 的觀念其實在 X window 也有。

為什麼 open source 總是感覺粗鄙？

這題目譯自Why Free Software has poor usability, and how to improve it。一直都在使用開源碼，也因此會反省自己是不是犯了底下這些錯誤？

開源碼軟體的開發者大部份都是志願者，這本身雖然是好事情卻也造成兩個明顯的問題：

一、沒動機去改善使用性。這其實是相對的，商用軟體本來就是要賣給使用者，若是你操作感太差怎麼可能賣得掉？可是開源碼軟體不一樣，通常撰寫者自己用居多，另一方面用於學習的功能也佔不少比例，加上用戶數也少，得到的回饋相對上少(但絕非主因)，最重要的，作者通常懶得去強調。

解決方案：應該由政府鼓勵或舉辦設計大賽，不見得要新創軟體，還要鼓勵優良軟體的改善。廠商愈來愈多使用開源碼，也應該回饋到開源社群或建立適當的社群。

二、良好的設計師不多。雖然有音樂家本身也是作曲家，但是絕大多數都不是。一個好的程式設計師要兼顧著當良好的介面設計師是很難找的。

解決方案：建全開源碼社群的組織，讓使用介面設計師、優秀的測試師等都能加入，甚至更應該鼓勵使用者回饋其使用心得與建議。也就是在社群建立良好的開發者、設計師、測試、終端使用者間良好的互動。

為什麼優秀的設計師無法浮到檯面呢？

三、建議通常變成「歡迎自行補丁」。開源碼的一個現象就是，你有想法，請自行實現。建議很難被開發者擺入他們的心中。

解決方案：同樣的在社群活動中，應鼓勵這樣的行為，開發者應該把其他人的建議擺在第一位，而不是照自己的想法開發應用程式。當然，一個良好的 issue tracking 也不止是追踨臭蟲而應該加入任何建議。建議並不見得都是好的，良好的討論模式也應該被建立。

那為何開發者可以在面對臭蟲報告時的正向態度無法以同樣態度去面對可用性的建議呢？

四、難以衡量可用性，因而不被重視。其實有些共同項目是顯而易見的，例如啟動時間，佔用系統資源，執行速度，反應速度，運行時當機比例，但是這些對使用者來說都偏向隱含層面。真正的好用的軟體的操作介面設計是一門學問，而通常，這非開發者所關注與擅長。

解決方案：還是社群功能之一，建立測試與回饋機制。另外，開發者在開發軟體時，應該把使用的方便性擺在第一位，而不是功能的開發上。一般軟體在開發時，總是以追求功能性，甚少以負責任的態度把自己開發的軟體易用性擺第一位。

因此，缺乏良好的介面設計師引發了三個開源碼開發的文化問題：

五、軟體開發前缺乏設計流程。一般軟體開發流程講的都是先收集需求、進行規格設計、再進行開發，可是開源碼軟體卻相反，先開發，有人用了再來增加規格，最後才把需求收集完整。事實上能不能做到完整還得存疑。

解決方案：開源碼應該建立正規的軟體設計流程的文化。

六、人多嘴雜。這是一個難題，使用介面的設計是個見仁見智的問題，而且，誰也不服誰，加上前面說的，好的設計師通常無法自行實現想法。

解決方案：其實說多了都差不多，就是要有領導者，有一個值得信賴的人或組織願意領導大家，鼓勵建立這樣的機構是值得肯定的。

七、壟斷。舉例來說，開發者在編寫程式時會想到的操作介面通常是他們手邊的軟體，這雖然比較大眾化，但是不見得是優良的介面設計。

解決方案：鼓勵創新的設計，通過獎勵和其他宣傳來引領開發者。

開發者並未將專業的使用介面建議納入考量，這原因造成更多難解的問題：

八、孤芳自賞的心只追求自我滿足：開源碼的開發者通常開發出來的軟體是以同樣愛好者社群為使用群，滿足了這些人其實就像隔靴搔癢，無法滿足大部份群眾的操作習慣。

解決方案：最簡單的方式就是，鼓勵那些社群的人親自說服其身邊的親朋好友一起使用他們所開發的軟體，並且，誠心傾聽其建議。

九、被小細節打敗。很多小細節，改善應用程式的界面不是一件令人興奮的或能自我滿足的工作，也因此在開發者就功能面或技術面改善之前，他們大都不會花心力著墨在上面，惡性循環下引不起使用者興趣，因此開發者也得不到正向的回饋。

解決方案：在安排除錯的時候把除錯的時間因素放進去，這會使得開發者比較有機會注意到有些使用介面設計只需要花很少的時間。事實上這方案也常常無效，因為開發者會認為「那只是每個人對操作便利性不同的看法而已」。

十、更多的選擇可以安撫人們。若你受僱開發軟體，大抵上都沒有選擇權，就算不是你想要的你也得盡心盡力去完成，而開源碼軟體卻不然，常常都會讓開發者興起「此處不留爺，必有留爺處」，當然有能力的人就自己開發去了。

解決方案：產生一個強有力的社群維護者，以及一個單一的文化，建立一種更分散式的版本控制，讓人充分在標準與自訂之間游移，允許正式版本與變異版本共存。舉例來說像 kernel 就是。

十一、人多嘴雜：每個人意見不一，常常有人做了變動，可是外觀卻看不出來變化，當然也常常有人任意對開源碼做變動而不顧外觀上變化所產生的影響。

解決方案：提供像 google 關鍵字廣告這種商業宣傳，來對真正有貢獻的開發者作補償，並對影響使用介面的 source code 建立審查制度，並定期檢視「我們是否需要這一點」？

十二、開源碼的開發是「寬頻」的。因為開源社群都是分散在世界各地，因此各項聯繫幾乎都在網路上，但是，相反的，一般商業軟體卻大都是在同一建築物內。

解決方案：讓溝通更加無界限，發展和促進IP電話，視頻聊天，在虛擬白板上，人像素描，及動畫軟件，允許更容易溝通的設計理念，隨著國際互聯網。(此段純 google 翻譯)

十三、太早釋出軟體，太常釋出新版本，這會面臨不小的問題：先面臨到的當然就是因此使得差勁的使用介面變成很「自然」就出現了。

解決方案：前面有說過，開源碼的開發流程應該從軟體工程的角度出發，而不是依照自己的喜歡隨意開發。

十四、太任意就「模組化」。有些優良的開源碼都把使用介面與其核心功能分離，這當然是個好傳統，而且打從 Unix 時代就流行 pipeline 的方式讓眾多程式彼此合作。但是這樣的現象卻導致功能很強，卻沒有優秀的操作介面配合的窘境。

解決方案：在寫核心技術之前，先把操作介面設計出來。

十五、Gated development communities(不知道怎麼翻)：當你在用一個軟體系統時，常常是整合了不同的團隊所開發出來的模組，例如，你把你所見的這個網頁列印出來的時候，其實至少包括了瀏覽器核心，印表系統，視窗管理，各式各樣的 library，甚至還有驅動程式。而這些組成不見得都很好的整合過，以符合更佳的操作習慣。

解決方案：由「開源軟體」供應商居中協調跨組件工作。

原文寫的有點長，英文超過我的能力，因此我翻譯起來也相當辛苦，也正因為如此我才更需要試著去翻譯，若有錯誤請不吝指正。(註，錯誤是不小心的，漏掉是故意的)

何時不要用 bash scripting?

怪了，最近怎麼常寫 bash scripting? 在問何時用 shell script 才是比較好的問題時，我覺得應該先了解一下，什麼時候最好不要用 shell script?

為何要用 shell script這篇有提到，我就翻譯成中文與大家分享。

• 特別需要考量資源時，例如執行速度，shell script 在處理大量排序、hashing 或 recursion 等演算法上，相對會比較浪費時間。
  
• 包含大量數學運算時，尤其 shell script 可以說無法處理浮點運算，雖然如同 sort 或 filtering 等可以借助其他常用的命令來解決，但是會讓運算效能打折扣。
  
• 基於考量可攜性，shell script 雖然在 unix 系列移植性很大，但是光不同的 shell 本身就很難共用相同的 script, 要對硬體產生高移植性也是奢求。
  
• 複雜的應用程式，我想這一點沒人會否定，畢竟 shell script 相對上比較沒有像結構化的演算法特性，例如資料結構的局限性，或是遞迴，或是變數本身在在都限制住往大的應用程式開發之路。
  
• 對組織或公司影響深遠的關鍵應用程式最好別選擇用純 Shell scripting, 原因當然在前面有寫，最重要的是 shell script 也沒有很好的擴承特性，例如 OOP
  
• 高安全性要求的情況下，包括整個系統的高度整合，系統的保護、系統的穩定、系統的堅固性上，shell script 都具高度爭議性。這裡面也包括 scripting 的先天特性，應用程式無法封裝起來，任何人都可以看到你的程式碼。
  
• 包含聯鎖相依性的組成元素的專案也不適合，核心原因也跟前一議題一樣，尤其 shell script 的 lock 機制並不完善，因此在這議題的處理上容易出錯。
  
• shell scripting 對大量檔案的處理只能一次處理一個檔案的逐次處理，很難有最佳化表現，若再考量 cache 或 index 等等因素的話，對檔案處理上毫無競爭力。
  
• 具直覺性的多維陣列處理上，也非 shell script 擅長的，雖然 bash 具備陣列表示，總是不那麼自然。
  
• 需要像 linkly-list 這類的稍微複雜點的資料處理上，shell script 就是無法勝任，更不用講什麼 Tree 或 graphics
  
• 需要產生或處理圖形或圖形的介面時，雖然可以借助其他軟體套件像 tcl/tk, dialog 等等讓你在 shell scripting 下也能有 GUI, 畢竟，效率會比較差，彈性、擴充性也都是值得考量的。
  
• 需要直接存取系統硬體時，shell script 也比較少彈性，不過藉助 /proc 其實也可以得到不少資訊。
  
• 對 socket I/O, 甚至只是 IPC(程式間互動)的應用場合也較不適合
  
• 對採用 library 的應用程式，當然無法直接用 shell script 來處理
  
• 最後，若您不想公開源碼時，就別選 shell script! 不過若要把 shell script 變成 binary code 是不是可能呢？或許有人會提供像 php, python, perl 等 scripting 語言的 compiler, 但是我覺得，那會失去不少 scripting 的意義。
  

extglob (extended pattern matching bash) 讓你的 script 更有用

我很喜歡 Perl 簡潔有力，也很喜歡 Sed, Awk 等等，Bash 也打開了以往的限制，增加了 extglob 選項

?(pattern-list) 匹配零個或一個
*(pattern-list) 匹配零個或多個
+(pattern-list) 匹配一個或多個
@(pattern-list) 剛好一個匹配
!(pattern-list) 匹配除指定模式以外的任何字符

我是不太常用，這邊所提的內容您也可以搭配 grep 來達成。假設，我不想要 a開頭的所有檔，可以這麼寫：

$ shopt -s extglob
$ ls !(a*)

第一行只是要打開 extglob, 只需要做過一次即可。若想關掉，可以用 shopt -u extglob

ffmpeg 自製電影

不管是要轉檔，還是要編輯影片，甚至是想用照片製成電影，或是電影與照片混用，ffmpeg 都是很好的工具。

請自行參考Linux HOWTO 的說明, 有空再來貼一下我的使用心得。教學影片在這兒

由 VOB 重新產生 IFO 檔

DVD 格式中，有三種附檔，其中 IFO 記錄了不同的章節、語系、上一頁、下一頁等資訊，所以光有 VOB 檔是不夠的。若您也像我一樣，突然有此需求，所有 IFO 檔都不存在，只剩下 VOB 檔的時候，怎麼辦？以前我做過一次，忘了怎麼搞定的，底下的文章來自這裡。

Step 1. 下載 IfoEdit. 可以從這兒或那兒找到並下載 IfoEdit. 這是免安裝的，解壓後可以直接執行第二步。

Step 2. 執行 IfoEdit.exe, 找到畫面中下方的 'Create IFOs' 點下去.

Step 3. 選項基本上都可以不用變動. 只需要找到畫面中間 "1st VOB of Title-set" 右方的瀏覽按鈕載入你的 VOB 檔，通常是指定第一個 VOB 即可，例如 VTS_02_1.VOB，這一步只需要做一次即可，不必每個 VOB 檔都做(事實上會產生一樣的東西).

Step 4. 找到 'Same as source' 並勾選它.

Step 5. 按 OK 鈕開始分析並產生 IFO, 我只做到這一步，有興趣編輯 DVD 章節或語系的人自行往下看。

Step 6. 從上述 VOB 檔案(只需做一個)蒐集完所有需要的資訊後，會產生 VIDEO_TS.IFO 以及
VTS_01_0.IFO 兩個 IFO 檔案。

Step 7. 接下來再稍作修改，點選 VTS_01_0.IFO 檔案，你會看到音軌與字幕屬性並沒有指定語言。

Step 8. 要改變語言設定，需要雙擊音軌字幕資訊流(streams)，指定串流語言後並點選 OK 完成設定。

Step 9. 接著繼續處理視訊 IFO 檔案。由於 VIDEO_TS.IFO 保存有 Title-set 屬性，你也需要對 VIDEO_TS.IFO 做同樣處理。在 IfoEdit 選擇 VIDEO_TS.IFO 檔案，並為視訊軌字幕資訊流(streams)選擇語言。
(第6-9步譯自 S.J.H)

Intel Threading Building Blocks - multi-core C++???

Intel 最近釋出一個新版本的 TBB(Threading Building Blocks), 請見這裡的說明。

多核心除了硬體能力外，作業系統以至於程式語言的支援都很重要，使用 Multi-threading Programming 就算了嗎？平行運算能力還得加上 Scalable, 以及安全，此外系統並不具有任意多的資源，因此 task scheduler 也很重要，當然這也是 OS 的工作，瞧瞧 TBB 的能力或許有更好的解答？

For developers, the clear benefits of Threading Building Blocks are:

1. TBB 大量縮減程式碼大小
2. TBB 利用抽象化，隱藏了大量 Multi-threading 的程式複雜度
3. TBB's task manager 自動分析系統與軟體所執行的環境，自動選擇最佳的 thread 數目，會完成 load balance 在所有處理器核心上，達到系統最佳化。
4. 所以, TBB threaded applications 會自動有效的放大，適應將來更多核心的硬體環境。

利潤 profit

想像力到哪裡，你的世界就到那裡。

本文參考自這裡，是個值得深思的問題。

醫療器材，常常需要隨身攜帶，尤其在人類社會愈來愈老化的現在，醫療體系的支持非常重要，文中提到的小裝置，用來指引人透過控制呼吸來讓血壓下降，要價 300 美金，成本或許不到 20 元，其中的原因可能只是「專利」。

專利或許是最根本的原因，但是另一個原因在於利潤--市場因素。或許隨身裝置似乎都是個 SoC, 或許不是，文中提到難道不能跟真正的電腦連結，只是把血壓、呼吸資訊傳入電腦處理，讓裝置只是簡單的感應器，這樣或許可以降低成本，但是使用上應該不怎麼方便才是。

我在思考的，很多人也想過，怎樣創造多贏策略，也就是設計商、生產製造商、代理商、品牌商(客戶)、用戶等等的，或許這麼講野心太大。

設計商當然要專利保護，生產製造商當然要高利潤，代理商、通路商、或品牌商(客戶)當然要高單價銷路好，而用戶，卻又希望單價低又實用。嵌入廣告或許不失一個辦法，看似不怎麼實際，卻也充滿機會。當然我心中還有其他話要說啦，只是想透過圖來表達，有機會再貼上來。

Follow

我一直在跟別人提 Follow 的概念，這邊有一個與 Skype 連結的應用軟體，良好地示範了這個概念。

communication

skype developer算是很特別的東西，跟 skype 通訊竟然是用純文字。

最近在思考「溝通」這件事，人類與裝置的互動還停留在原始的狀態，雖然已經有語音輸入，也有觸控，也有手勢辨識，可是感覺都還停留在不怎麼實用的階段。你的裝置要怎樣與別人不一樣？或許，「溝通」就是非常急需去思考與面對的課題。

google reader

我不知道大家怎麼讀新聞的，這邊有個好東西跟大家介紹一下，或許知道的人不少。

附圖是我自己使用的畫面，當我用 Firefox 訂閱 RSS/ATOM 時，會問我是否用 google reader, 若您還沒有 google account, 建議去申請一個，而要用 google reader 也不見得用 firefox, 用 IE 也行，請至 google reader用了就知道。

以我來說，我可以同時訂閱 Yahoo news, UDN news, 還有一堆 google groups, 甚至是 blogs, 總之是一個帥啦！舉例來說，我不必登入好友的 blog 就可以看到一堆，新聞也是，對有興趣的標題再點進去讀，方便的很。

freemind 0.9.0

Freemind 0.9.0 新增了四個很重要的觀念，一個是對節點增加附記，一個是對節點增加屬性，一個是過濾，一個是 scripting(採用 Groovy)。因為 0.9.0 還不夠穩定，有個建議是與 0.8.x 並存，正式的產出用舊版的，實驗新性質才用新版的。不過，0.9.0 新增的這幾個功能並不被 0.8.0 所識別，因此我個人是直接用新版本。

我是懶得再寫像Freemind 教學，不過這幾個新功能我還算喜歡，只是有時我會拿 Freemind 來畫類似流程圖那種 cycle-link, 也就是說目前只能畫非環形的節點樹，有時不同節點會有相關性，用 freemind 無法表達。當然這也可以說是工具不正確造成的，最好是用 UML, 不過 UML 頗複雜就是了。

再次呼籲尚未使用過心智圖軟體(不一定是 Freemind)的人應該試用一下 Freemind，我想讓你有個清楚的思路非常重要，不管是不是用來開發軟體。

會有 script 功能說真的我也沒用過，不過既然有屬性，給它方法似乎看來也不必太怪異，有個範例是說幫 Node 加上「今天」的日期。也可以計算屬性之類的。有新的想法再來跟大家分享。

Linux 2.6.26 新發現

這篇文章算是純筆記，來自Linux 2.6.26 新鮮事及Linux 2.6.26 對嵌入式裝置的改善。

先從後面那篇寫起，因為比較短。linux 2.6.26 多的項目，對嵌入式裝置來說重要的發展有幾個：

．良好支援 KGDB, GDB 這東西本來就可以為 kernel 除錯，現在更提供選項，不知道有何改善，之前必須要patch, 現在是整合良好，算是一大功德。

．對 KVM 支援的硬體變多了，同時軟體特性也變多了：Itanium (IA64), S390, and PowerPC 440, plus lots of new KVM features such as x86 hardware task switching

．USB Video Class driver for better webcam support: 這是個好消息，不知道我那台中華電信送的可不可以用？

．802.11n improvements, and 802.11s mesh networking support via Open80211s：這項目在 OLPC 裡是我特欣賞的一項，現在整合進來，不知道是不是代表隨便的網卡都能動作？

．Read-only bind mounts (story): 在使用 chroot 時，我介紹過 mount --bind 這個命令，請見chroot with mount bind 一文及DirectFB 介紹。對 /proc 什麼的沒什麼影響，但是對 /etc 或 /var 就會有影響，增加這功能會讓系統安全點。

．Better documentation for real-time scheduling options

．Improvements in EXT4 (still an "experimental" feature): 既然還在實驗階段，用的人肯定不多，有機會好好來研究一下它的改進之處

．另外對很多嵌入式硬體做了最佳化，我就不特別列出來。

．x86 PAT support: 這一點存在很久了，早期的 MTRR 就可以做因而被延遲了下來，有了它，對記憶體的管理會做的更好。

．Device whitelist on cgroups: 不知道是啥，看起來是加強 mknod 的能力的，跟虛擬化似乎有相關性。例如，原來的裝置型態有 c(char), b(block), 現在多了 a(all)，而存取權有 r(read), w(write), m(mknod), 對 a(all) 而言，似乎更「開放」了。有興趣的人請讀cgroups一文。

．內建 Memtest: 看來系統除錯更容易建置了

．Export BDI attributes in sysfs: 不懂，有機會看看

．/proc/pid/mountinfo: 似乎對查出 process 用了哪些 mount point 有幫助？

當然還有更多改善，感覺對硬體的支援增加非常多，請自行看文章吧

進化 evolution

有一篇是這麼說的，當買電腦不再關心 CPU 運作速度，不再關心記憶體大小時，下一個關心的目標會是什麼？

她說是螢幕，我個人一直認為是輸入法，輸入裝置，貼近人類思想的輸入裝置。

在看這篇文章時，讓我想起一個很久以前想過的問題，「人類，還會再進化嗎？至少，在腦袋上，還有進化的空間嗎？」這問題問過的人不少，有人提出外星人是人類進化的樣本，我不知道。

電腦的發展，效能似乎不是最受人關心的，網際網路的發展，訊息的取得似乎不再是人們感興趣的，接下來呢？有人提出情感的媒介與交流。似乎，回歸更人性化才是發展的趨勢，我在想，人類，或許已經是發展的顛峰，剩下的問題是如何與大自然相處吧？如何與其他人更好的相處或許才是進化的未來趨勢。

我喜歡一個理論，叫蓋婭，相信人類要更好的往下走，勢必更好好思考這理論才是。

讓 Make 使用遞增的編號

本文算是從這兒翻譯來的。

本文主要目的，不是要你新增什麼源碼來產生或是記錄編譯次數，基本上若您有興趣配合著用也行。先說一下編譯時，通常是用 make, 也就是說，它會讀一個檔叫 Makefile，有在用 make 的人應該都知道 Makefile 可以定義變數，甚至請 make 把變數丟進源碼中。

那麼本文的目的是啥？就是希望讓你可以每次編譯，都產生一個獨立而遞增的編號，以便源碼能引用，以便區別，Kernel 就是這麼做的。先來看一個簡單的 Makefile 範例：

# Makefile

OBJECTS=bnum.o

a.out: $(OBJECTS)
   $(CC) $(LDFLAGS) -o $@ $(OBJECTS)

根據規則，會把 bnum.c 產生 a.out，每次都是這個結果。讓我們再來看一個修改過的 Makefile:

# Makefile

# Name of text file containing build number.
BUILD_NUMBER_FILE=build-number.txt

OBJECTS=bnum.o

a.out: $(OBJECTS) $(BUILD_NUMBER_FILE)
   $(CC) $(LDFLAGS) $(BUILD_NUMBER_LDFLAGS) -o $@ $(OBJECTS)

# Create an auto-incrementing build number.

BUILD_NUMBER_LDFLAGS  = -Xlinker --defsym -Xlinker __BUILD_DATE=$$(date +'%Y%m%d')
BUILD_NUMBER_LDFLAGS += -Xlinker --defsym -Xlinker __BUILD_NUMBER=$$(cat $(BUILD_NUMBER_FILE))

# Build number file.  Increment if any object file changes.
$(BUILD_NUMBER_FILE): $(OBJECTS)
   @if ! test -f $(BUILD_NUMBER_FILE); then echo 0 > $(BUILD_NUMBER_FILE); fi
   @echo $$(($$(cat $(BUILD_NUMBER_FILE)) + 1)) > $(BUILD_NUMBER_FILE)

這邊引進了一個變數 BUILD_NUMBER_FILE 用來當儲存媒介，儲存編譯次數，每次編譯時我們想辦法讓它遞增 1。這樣，就可以拿來產生不同的 target 出來。這個 BUILD_NUMBER_FILE，也就是 build-number.txt 一開始可以不必存在，機制設計上會自動把 '0' 寫進去，然後每次編譯自動遞增 1 寫進去，供讀進後設定成 __BUILD_NUMBER

不知道有沒有看到 BUILD_NUMBER_LDFLAGS 裡頭，把 __BUILD_NUMBER 傳給 Linker, 因此編譯器可以把它讓源碼看到，若有興趣的話也可以引用，底下是個範例：

#include 

extern char   __BUILD_DATE;
extern char   __BUILD_NUMBER;

main()
{
   printf("Build date  : %u\n", (unsigned long) &__BUILD_DATE);
   printf("Build number: %u\n", (unsigned long) &__BUILD_NUMBER);
}

要看執行結果嗎？原文裡面也有：

 $ rm bnum.o; make
 cc -c -o bnum.o bnum.c
 cc -Xlinker --defsym -Xlinker __BUILD_DATE=$(date +'%Y%m%d') \
    -Xlinker --defsym -Xlinker __BUILD_NUMBER=$(cat build-number.txt) -o a.out bnum.o
 $ ./a.out
 Build date  : 20080708
 Build number: 24
 $ rm bnum.o; make
 cc -c -o bnum.o bnum.c
 cc  -Xlinker --defsym -Xlinker __BUILD_DATE=$(date +'%Y%m%d') \
     -Xlinker --defsym -Xlinker __BUILD_NUMBER=$(cat build-number.txt) -o a.out bnum.o
 $ ./a.out
 Build date  : 20080708
 Build number: 25

使用案例 use case

目的:
．決定並說明系統的功能需求，結論是在關係人與建構系統的軟體開發人員之間達成共識。
．有關係統該做什麼，要給予清楚和一致的描述，如此才能在開發過程把模型拿來與所有開發人員進行溝通，瞭解系統有哪些需求，同時也作為設計模型的基
礎。
．作為執行系統測試的基礎，為了證實系統是否能適當的運作，並確認系統運作是否恰如其分。
．提供把追蹤所得的功能需求，轉換成實際類別和操作的能力。經由改變使用案例模型，接著追踨受到使用案例所影響的系統設計與實作，可以簡單地改變並
擴充系統。

不同的人關注的事有差異：
．關係人所感興趣的，是使用案例模型詳細說明系統的功能性，描述系統怎樣可以有這些功能，並說明如何使用這些功能。若讓關係人在塑模時扮演動主角色
顯得非常重要，因為可以依其願望調整模型，也可以採用其語言、術語等來描述使用案例。
．開發人員所感興趣的，是系統應該做什麼，並作為更詳細的塑模作業及編碼的基礎。
．專案管理者應用反覆與增量生命週期的方式，來建造反覆計畫，確保能成功地把使用案例實作出來。既然客戶瞭解使用案例模型的本質，也一定想要看到有
哪些功能，在每一段反覆計畫結束時，就應該要呈現出來。
．整合與系統測試團隊需要使用案例來測試系統，以確保系統所執行的功能就是使用案例所指定的功能
．任何人只要與系統有關聯的活動相關的話，就有可能是對使用案例模型感興趣的人，譬如銷售、支援、文件等團隊。

請參考來說明：

1. 人：當然就是參與者, actor
2. 楕圓：就是一個使用案例
3. 矩形：一個主題，可以包含多個使用案例
4. 套件：那圖形是指一個套件，譬如一個大學的入口網站可能有學院管理、員工資訊、學生資訊、一般資訊等套件，這邊通常引用已存在的套件。
5. 區塊：一個使用案例可以區分成數個小塊
6. 實直線：關聯, association, 連接元素或實例
7. 角箭號：也是關聯, association
8. 虛角箭號：依賴關係, dependency
9. 三角箭號：一般化，generalization, 通常表達繼承，或是指明某類別的實例
10. 折角紙：說明，note
11. 虛線：連結
12. 文字：加上文字

目前我也正在學習當中，以後再補實例上來

UML 名詞 - Views, Diagrams, 模型元素, 一般機制, 延申 UML

Views: 翻成觀點，用來展示各種不同的應用場合，或是面貌。我們這麼說吧，不同的觀點，可以組成的類別不太一樣，譬如，使用案例裡面「人」就扮演
重要角色，可是實作觀點，卻哪來的人？舉例來說，有使用案例觀點，邏輯觀點，實作觀點，程序觀點，部署觀點，實作觀點等。這是最重要的部份，UML 也
讓你能定義屬於自己的觀點。而不同的觀點間應該要容易切換著看，一件事有各種不同的觀點才是完整的。例如從使用案例來看使用者如何操作系統，也應該切換
到部署觀點看看實體架構裡如何部署系統。

Diagrams: 我一般是翻成(流程)圖，書上是翻成圖型。UML 圖型有很多，舉例來說有使用案例圖，類別圖，物件圖，狀態機，活動圖，互動圖，循序圖，通訊圖，元件圖，部署圖，合成結構圖。

模型元素: 不同的圖型，是由各種元素組成的。比較貼切的說法，模型元素應該是用來表達「觀念」的元素，它可以是語意，一個正規的定義，或是夠清楚的敘述，當然也可以是一個圖像符號。一些已經定義好的模型元素範例有，用來表達人員、類別、物件、訊息、關係、關聯、依賴性等等的圖素。

一般機制: 為模型元素提供額外的飾詞、註釋、資訊、規格或者是語意，這也讓不同的組織或領域，替自己擴展特有的 UML。

延申 UML: 三種機製為，造型(stereotypes)，標籤值(Tagged values), 限制(Constrains)

統一塑模語言 UML

請自行參考 UML 組織，這邊有工具列表，個人推薦BoUML。推薦一本書：Hans-Erik Eriksson, Magnus Penker, Brian Lyons, David Fado 著，朱子傑譯，碁峰出版的，UML2 百寶箱。

先簡單介紹一下 UML, 你要蓋房子，或讓人參觀預售屋，弄個模型屋出來是最正常的。蓋房子之前，會先把藍圖設計出來才開始蓋，車子也類似，還會先模擬風切、撞擊等，這一切，都叫「塑模」，也就是先建個模型，看看合不合用，再來真正動手。

台灣大部份的軟體工程師(硬體的我不熟，想來也差不多吧？)常常忽略這樣的步驟，做完需求，分析完，就開始動手寫程式，常常搞到最後該加的班加不完，臭蟲還是一直出現。因此跟大家介紹 UML，就是希望能讓大家少點加班時間，多點回家陪家人的時間，顧好自己的身體。

一般軟體工程的步驟：

需求：UML 以「use case」的方式來捕捉客戶或使用者的需求。從案例探討著手，會發現不同需求、需求間的關聯，怎樣進入不同的狀態，操作過程會有哪些活動等等。

分析：分析要從建立類別及物件著手，整個問題(系統)由什麼類別組成？其運作機制如何？類別間的關係如何？在使用案例裡又如何實現其間的活動？有些人以為這邊在講的是物件導向程式語言裡的類別，其實不算是，後面我們再來介紹。

設計：分析的成果，必須擴展成技術上的解決方案。這時才要考慮使用者介面，資料庫等等。設計必須定義詳細的規格。

實作：就是所謂的 coding。因為 UML 是以物件為基礎，因此一般也使用物件導向程式語言，例如 Java, C++, 甚至是 Perl, Python，卻沒有 C, shell script. 實作已經不算是 UML 真正有定義的事，但是卻有工具可以幫你把 UML 產生相對應的程式語言表示法，也算是相得益彰。

測試：一般測試常常由工程人員測完就算了，其實還可以分幾類，單元測試、整合測試、系統測試、生產測試、驗收測試。不同的測試團隊會有不同的測試模型，這也是 UML 重要的功用。

更技術的討論，我想移至wadefs 討論區去完成，希望將來也採這樣的方式進行。

程式設計師還是工程師 Programmer or Engineer

中譯來自電子工程專輯, 英文來自Embedded.com。後面再來以回覆的方式寫我自己的看法。

‘程式設計師’這個詞應該從字典中刪除。

我痛恨‘程式設計師’(programmer)這個詞，雖然我承認經常使用它，因為它在我們的文化中太根深蒂固了。就像那些無意說出的粗魯詞句，儘管不斷出現，但是又缺乏有效的防治方法。

Dictionary.com將‘程式設計師’定義為‘編寫電腦程式的人員；對設備(尤其電腦)進行編程的人員’

編寫程式的人稱為程式設計師。這個描述更像是‘編碼員’，日復一日地編寫著程式碼。編碼人員，如同技師及看門員一樣，都是不可缺少的員工。但是他們可能成為一個軟體專案的破壞性因素。

我認為，軟體專案失敗的十大理由之一，是團隊無法抗拒開始編碼的衝動。編碼不過只是軟體工程的一部份，類似於為橋鋪路面。沒有路面我們無法通過，但橋樑施工需要仔細的工程規劃、分區、籌款以及其他眾多比鋪路更複雜的活動，同時對於最終的結果來說也更重要。

糟糕的鋪路可以重來或進行修補，但是糟糕的橋樑設計可能會倒塌。劣質的軟體工程必將帶來專案的失敗，即使編碼人員(程式設計師)做得再好也無力回天。

我們之中大部份人是工程師：軟體工程師，韌體工程師，或是硬體/軟體工程師，儘管我們水準各異。實際上，近期的嵌入式網調查顯示只有13%的受訪者擁有電腦科學學位；80%具有工程學(EE或CE)的學位。

工程是一門解決問題的藝術，也可以說就是建構韌體。由架構設計開始，在這個過程中，我們思考如何設計、規格、團隊、工具以及得到解決方案的方法。

接著我們開始設計－這裡特別強調‘設計’－一個強壯的基礎。使用OS還是不用OS？劃分為多個處理器？我們如何劃分問題使其方便解決？何種資料結構更有效？

這時，編碼才真正開始，某種程度上講編碼可以交給另一個組織，或許採用外包方式。

編碼相對簡單；軟體工程卻很困難。軟體工程師是負責以某種合理的可重複方式建構可靠系統重任的專家

心智圖 Freemind

要建立心智圖有不同的工具，這邊介紹一個非常簡單易用的一套，叫Freemind, 可以到這兒下載，有各種作業系統版本。

什麼是心智圖？先貼一下原網站的說明：

FreeMind is a premier free mind-mapping (http://en.wikipedia.org/wiki/Mind_map) software written in Java. The recent development has hopefully turned it into high productivity tool. We are proud that the operation and navigation of FreeMind is faster than that of MindManager because of one-click "fold / unfold" and "follow link" operations.

So you want to write a completely new metaphysics? Why don't you use FreeMind? You have a tool at hand that remarkably resembles the tray slips of Robert Pirsig, described in his sequel to Zen and the Art of Motorcycle Maintenance called Lila. Do you want to refactor your essays in a similar way you would refactor software? Or do you want to keep personal knowledge base, which is easy to manage? Why don't you try FreeMind? Do you want to prioritize, know where you are, where you've been and where you are heading, as Stephen Covey would advise you? Have you tried FreeMind to keep track of all the things that are needed for that?

在進行教學前，先摘要說明一般操作會用到的步驟：
新增新智圖、更改節點文字、新增下一層(子節點)、新增同一層節點(兄弟節點)、移動節點、刪節點、存檔、匯出。
所需要的操作，可以完全用鍵盤的上下左右+Enter+Insert+Del 七個鍵來完成。

下圖第一張，是安裝好後執行的畫面，我是關閉舊檔另開新檔，所以是「心智圖2」



先來把心智圖的項目名稱改掉吧，直接用滑鼠點在名稱上即可進入編輯模式，不過這是在端末節點才有效，對非端末節點來說，應該按 Alt+enter, 按滑鼠右鍵也看得到相對應功能：



要在某節點上，增加下一層的新節點，也就是俗稱的子節點，這步很簡單，按 "Insert" 鍵即可。當然要給名稱，名稱若要修改的話，請見上一步。若是想建立的是同一層的兄弟節點，請見下一步：



接下來，要增加同一層的節點時，也就是俗稱的兄弟節點，只需要按「Enter」鍵即可。這邊要說明一下焦點的移動，可以透過鍵盤的上下左右鍵移動，也可以用滑鼠，因為對滑鼠很敏感，因此請小心移動滑鼠。

若您是要增加下一層的子節點，請見上一步，或用移動法搬移，請見下一步。



若層次錯了，想移動，只需要用滑鼠「抓住」即可移動，這一點自行試試，就是在要移動的項目上按左鍵不放再移動滑鼠，這邊先示範移到不同父節點。下一步示範移動到同一層的不同位置。



同一層的兄弟節點順序也類似上一步的移動方式，只是要注意的是想移到最後一項時，其實只要將目標位置改成父節點即可放在最後面。



關於移動還有一種，就是想放在視窗上不同位置。通常 Freemind 會自動排位置，照預設是一直往下放，若你想四面八方的放，那只好自己拖移，也很簡單，不過要自行練習。



我把最後結果顯示如下：



每個人的內心通常雜亂無章，運用上面的移動可以協助你好好整理思路，算是非常有用的功能。這邊再介紹一項利器，就是可以把項目縮起來，讓你暫時隱藏其他事物而專注思考特定項：




Freemind 有它自己的格式，若你想匯出成不同格式，底下畫面說明可以匯出的種類，算是非常多樣，但是匯出後無法匯入。