base64 encode 如何把外部的檔放進同一個 html 中？

底下要談的主要是針對 SVG, 但是一般的 HTML 其實也行，只是範例是使用 SVG 來講解而已，請參考SVG 範例, HTML 範例

這邊有講解，並且有示範用 perl 如何完成。之所以能將外部的檔案放在 html / svg 裡，其原理是要先對想包的內容利用 base64 的演算法編碼過，這樣才不會在內容中有特殊字元，例如 ", ', <, >，或一般的控制字元(ASCII < 0x20)，而這樣的事是 W3C 制定的標準，因此瀏覽器必須支援.....(不支援的大概就是沒聽過的瀏覽器)

若要轉換，可以參考底下的線上轉換工具，或是安裝 cygwin, 或是在 Linux 下，都有預設的工具，其命令名稱就叫 base64(在 coreutils 套件下):

http://webnet77.com/cgi-bin/helpers/base-64.pl
http://rumkin.com/tools/compression/base64.php
這邊有一個用 javascript 寫的工具，你可以自己寫頁面來轉換, 上面有提到utf-8 的問題，值得大家參考。還有一點參考資料可助理解 base64. 這邊有一個號稱效率更高的演算法，用的是查表法.

在SVG 範例裡面，可以看到用法上如下，其中 &si; 其實是個變數，定義在前面

<!ENTITY si 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA'>

<symbol id="Invader1b">
<image width="8" height="8" xlink:href="&si;EAAA...." />
</symbol>
====== 上面相當於 =====>
<symbol id="Invader1b">
<image width="8" height="8" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAA...." />
</symbol>

上面 href="data:image/png;base64, 是型別宣告，若你的內容是 gif, jpg 請改成適當的字串值，後面接著的就是經過 base64 編碼後的內容，通常你用純文字檔檢視即可，複製後再貼上即可。要用 base64 進行轉換相當簡單，譬如把 a.png 編碼成 a.png.base64:
% base64 a.png > a.png.base64
反編碼(解碼)的話如下:
% base64 -d a.png.base64 > a.png

同樣的事若是放在 C/C++ 中呢？可以參考這一篇說的方式去做，這邊的意思是，原來說的是文字檔，其實任何檔都可以看成是文字檔不是嗎？差別只在於你怎麼用而已，而不是在轉換過程。這麼說不是沒根據的，譬如網頁，怎麼傳圖片？譬如 email 怎麼夾帶圖片與影片？我說個最簡單的，你想想看，同樣的內容用 printf() 裡面的 %d, %f, %x, %s 來印，結果是不是不相同？why?

Windows 7 Touch Digitizer 心得

本文要說明的主要來自微軟的文件

For Windows 7, touch digitizers appear through HID as a touch digitizer (page 0x0D, usage 0x04).
The following usages are required:
• X (page 0x01, usage 0x30) and Y (page 0x01, usage 0x31).
• Contact ID (page 0x0D, usage 0x51).
• Tip switch (page 0x0D, usage 0x42) - 指示出手指是否碰觸到螢幕(Digitizer Surface)
• In-range (page 0x0D, usage 0x32).

關於 z 軸我一直覺得很有用，微軟有一段說明如下:
If the device supports z-axis detection, it reports in-range correctly. If the device does not support z-axis detection, the driver reports packets with in-range and tip switch set when a finger comes in contact with the digitizer.

我試著解釋一下(不保證我的理解正確):
如果有 z 軸值，就放在 In-Range 中，此時 Tip Switch 不必設定。
如果沒有 z 軸值，那麼碰觸時請設定 Tip Switch 及傳回適當的 In-Range 值。
(註: 這一版本與之前的 OS 規範不一樣，如與 XP Tablet PC，請見Windows XP Tablet PC OEM Preinstallation Kit (OPK))

底下的資訊是選擇性的，意思是硬體有支援再提供即可:
• Confidence (page 0x0D, usage 0x47) - 這一點很奇怪，意思是前面的觸控點資訊有可能是意外產生時，可以由裝置設定這個值。
• Width and height (page 0x0D, usages 0x48 and 0x49).

來看看一個 USB HID device report 的 sample:

Here is a sample report descriptor for a touch digitizer device:
    0x05, 0x0d,                         // USAGE_PAGE (Digitizers)          0
    0x09, 0x04,                         // USAGE (Touch Screen)             2
    0xa1, 0x01,                         // COLLECTION (Application)         4
    0x85, REPORTID_TOUCH,               //   REPORT_ID (Touch)              6
    0x09, 0x20,                         //   USAGE (Stylus)                 8
    0xa1, 0x00,                         //   COLLECTION (Physical)          10
    0x09, 0x42,                         //     USAGE (Tip Switch)           12
    0x15, 0x00,                         //     LOGICAL_MINIMUM (0)          14
    0x25, 0x01,                         //     LOGICAL_MAXIMUM (1)          16
    0x75, 0x01,                         //     REPORT_SIZE (1)              18
    0x95, 0x01,                         //     REPORT_COUNT (1)             20
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         22
    0x95, 0x03,                         //     REPORT_COUNT (3)             24
    0x81, 0x03,                         //     INPUT (Cnst,Ary,Abs)         26
    0x09, 0x32,                         //     USAGE (In Range)             28
    0x09, 0x37,                         //     USAGE (Data Valid-Finger)    30
    0x95, 0x02,                         //     REPORT_COUNT (2)             32
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         34
    0x95, 0x0a,                         //     REPORT_COUNT (10)            36
    0x81, 0x03,                         //     INPUT (Cnst,Ary,Abs)         38
    0x05, 0x01,                         //     USAGE_PAGE (Generic Desktop) 40
    0x26, 0xff, 0x7f,                   //     LOGICAL_MAXIMUM (32767)      42
    0x75, 0x10,                         //     REPORT_SIZE (16)             45
    0x95, 0x01,                         //     REPORT_COUNT (1)             47
    0xa4,                               //     PUSH                         49
    0x55, 0x0d,                         //     UNIT_EXPONENT (-3)           50
    0x65, 0x00,                         //     UNIT (None)                  52
    0x09, 0x30,                         //     USAGE (X)                    54
    0x35, 0x00,                         //     PHYSICAL_MINIMUM (0)         56
    0x46, 0x00, 0x00,                   //     PHYSICAL_MAXIMUM (0)         58
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         61
    0x09, 0x31,                         //     USAGE (Y)                    63
    0x46, 0x00, 0x00,                   //     PHYSICAL_MAXIMUM (0)         65
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         68
    0xb4,                               //     POP                          70
    0x05, 0x0d,                         //     USAGE PAGE (Digitizers)      71
    0x09, 0x60,                         //     USAGE (Width)                73
    0x09, 0x61,                         //     USAGE (Height)               75
    0x95, 0x02,                         //     REPORT_COUNT (2)             77
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         79
    0x95, 0x01,                         //     REPORT_COUNT (1)             81
    0x81, 0x03,                         //     INPUT (Cnst,Ary,Abs)         83/85
#ifdef _ CUSTOMVENDORUSAGE _
    0x06, 0x00, 0xff,                   //     USAGE_PAGE (Vendor Defined)  0
    0x09, 0x80,                         //     USAGE (Vendor Usage 0x80)    3
    0x09, 0x81,                         //     USAGE (Vendor Usage 0x81)    5
    0x15, 0x00,                         //     LOGICAL_MINIMUM (0)          7
    0x27, 0xff, 0xff, 0xff, 0xff,       //     LOGICAL_MAXIMUM (0xffffffff) 9
    0x75, 0x20,                         //     REPORT_SIZE (32)             14
    0x95, 0x02,                         //     REPORT_COUNT (2)             16
    0x81, 0x02,                         //     INPUT (Data,Var,Abs)         18/20
#endif
    0xc0,                               //   END_COLLECTION                 0/1
    0xc0,                               // END_COLLECTION                   0/1

底下的資訊由微軟提出，隨時有可能修正:

Proposed Additions to the HID Specification to Support Multitouch

Description	Page	Type	Name	ID
Contact identifier	Digitizer	DV (Dynamic Value)	Contact identifier	0x51
Configuration	Digitizer	CA (Collection Application)	Configuration	0x0E
Input mode	Digitizer	DV (Dynamic Value)	Input mode	0x52
Device index	Digitizer	DV (Dynamic Value)	Device index	0x53
Actual contact count	Digitizer	DV (Dynamic Value)	Contact count	0x54
Maximum number of contacts supported	Digitizer	DV (Dynamic Value)	Maximum count	0x55

Reporting 模式有三種, 建議採用 Parallel Mode:
• Serial mode: 一次只有一個單一接觸點. 這種模式有可能會改變裝置報告的速度。
• Parallel mode: 每個封包夠寬，足以容納所有接觸
• Hybrid mode: 混合模式可以將前面兩個模式視為它的特例，它擁有固定寬度的封包，卻同時可以擁有多個封包內容。

Parallel Mode 會使用到 Actual contact count 及 Null Value, 底下有個範例，根據 maximum count 及 actual count 的不同可以視為 Parallel Mode 或 Hybrid Mode:

    0x05, 0x0d,                         // USAGE_PAGE (Digitizers)
    0x09, 0x04,                         // USAGE (Touch Screen)
    0xa1, 0x01,                         // COLLECTION (Application)
    0x85, REPORTID_PEN,                 //   REPORT_ID (Touch)
    0x09, 0x22,                         //   USAGE (Finger)
    0xa1, 0x02,                         //     COLLECTION (Logical)
    0x09, 0x42,                         //       USAGE (Tip Switch)
    0x15, 0x00,                         //       LOGICAL_MINIMUM (0)
    0x25, 0x01,                         //       LOGICAL_MAXIMUM (1)
    0x75, 0x01,                         //       REPORT_SIZE (1)
    0x95, 0x01,                         //       REPORT_COUNT (1)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x32,                         //       USAGE (In Range)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x47,                         //       USAGE (Touch Valid)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x95, 0x05,                         //       REPORT_COUNT (5)
    0x81, 0x03,                         //       INPUT (Cnst,Ary,Abs)
    0x75, 0x08,                         //       REPORT_SIZE (8)
    0x09, 0x51,                         //       USAGE (Contact Identifier)
    0x95, 0x01,                         //       REPORT_COUNT (1)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x05, 0x01,                         //       USAGE_PAGE (Generic Desk..
    0x26, 0xff, 0x7f,                   //       LOGICAL_MAXIMUM (32767)
    0x75, 0x10,                         //       REPORT_SIZE (16)
    0x55, 0x00,                         //       UNIT_EXPONENT (0)
    0x65, 0x00,                         //       UNIT (None)
    0x09, 0x30,                         //       USAGE (X)
    0x35, 0x00,                         //       PHYSICAL_MINIMUM (0)
    0x46, 0x00, 0x00,                   //       PHYSICAL_MAXIMUM (0)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x31,                         //       USAGE (Y)
    0x46, 0x00, 0x00,                   //       PHYSICAL_MAXIMUM (0)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0xc0,                               //    END_COLLECTION
    0xa1, 0x02,                         //    COLLECTION (Logical)
    0x05, 0x0d,                         //     USAGE_PAGE (Digitizers)
    0x09, 0x42,                         //       USAGE (Tip Switch)
    0x15, 0x00,                         //       LOGICAL_MINIMUM (0)
    0x25, 0x01,                         //       LOGICAL_MAXIMUM (1)
    0x75, 0x01,                         //       REPORT_SIZE (1)
    0x95, 0x01,                         //       REPORT_COUNT (1)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x32,                         //       USAGE (In Range)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x47,                         //       USAGE (Touch Valid)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x95, 0x05,                         //       REPORT_COUNT (5)
    0x81, 0x03,                         //       INPUT (Cnst,Ary,Abs)
    0x75, 0x08,                         //       REPORT_SIZE (8)
    0x09, 0x51,                         //       USAGE ( Temp Identifier)
    0x95, 0x01,                         //       REPORT_COUNT (1)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x05, 0x01,                         //       USAGE_PAGE (Generic Desk..
    0x26, 0xff, 0x7f,                   //       LOGICAL_MAXIMUM (32767)
    0x75, 0x10,                         //       REPORT_SIZE (16)
    0x55, 0x00,                         //       UNIT_EXPONENT (0)
    0x65, 0x00,                         //       UNIT (None)
    0x09, 0x30,                         //       USAGE (X)
    0x35, 0x00,                         //       PHYSICAL_MINIMUM (0)
    0x46, 0x00, 0x00,                   //       PHYSICAL_MAXIMUM (0)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0x09, 0x31,                         //       USAGE (Y)
    0x46, 0x00, 0x00,                   //       PHYSICAL_MAXIMUM (0)
    0x81, 0x02,                         //       INPUT (Data,Var,Abs)
    0xc0,                               //    END_COLLECTION
    0x05, 0x0d,                         //    USAGE_PAGE (Digitizers)
    0x09, 0x54,                         //    USAGE (Actual count)
    0x95, 0x01,                         //    REPORT_COUNT (1)
    0x75, 0x08,                         //    REPORT_SIZE (8)
    0x15, 0x00,                         //    LOGICAL_MINIMUM (0)
    0x27, 0x08,                         //    LOGICAL_MAXIMUM (255)
    0x81, 0x02,                         //    INPUT (Data,Var,Abs)
    0x09, 0x56,                         //    USAGE(Maximum Count)
    0xb1, 0x02,                         //    FEATURE (Data,Var,Abs)
    0xc0,                               // END_COLLECTION

Top-Level Collection 每個裝置一定要有此描述內容，至少要指出來裝置是單點輸入、多點輸入或是滑鼠。

Collection Applications (CAs) 值對應的裝置若為底下的值，均可以用來做多點輸入:

Digitizer - 1
Pen - 2
Touch Screen - 4
Touch Pad - 5

多點觸控裝置應該在 top-level collections中採用 Finger (0x22) CL (Collection Logical) 來裝 data 及控制訊息。

多觸控裝置的尋找與組態能力:
尋找是透過 report descriptor 裡的 input mode 完成，也應該允許作業系統重新規劃成 multi-input, single-input, or mouse top-level collection。為了系統安全考量，此項 report descriptor 只允許作業系統存取，不開放第三方應用程式存取。這一點跟舊的 Vista 或 XP, 2000 都不一樣，舊的作業系統允許第三方應用程式透過 feature report 重設裝置為 single touch or the mouse。

Feature Report Requirements
所有裝置都需要一個 feature report 在其 report descriptor 中，以便報告裝置的組態。底下來看個實例:

    0x06, 0x0d                          //   USAGE_PAGE (Digitizer)
    Ox09, 0x0E                          //   USAGE (Configuration)
    0x85, REPORTID_FEATURE,             //   REPORT_ID (Feature)
    0xa1, 0x01,                         // COLLECTION (Application)
    0x09, 0x52,                         //   USAGE (Input Mode)
    0x09, 0x53,                         //   USAGE (Device Index)
    0x15, 0x00,                         //   LOGICAL_MINIMUM (0)
    0x27, 0x08,                         //   LOGICAL_MAXIMUM (255)
    0x75, 0x08,                         //   REPORT_SIZE (8)
    0x95, 0x02,                         //   REPORT_COUNT (2)
    0xb1, 0x02,                         //   FEATURE (Data,Var,Abs)
    0xc0,                               // END_COLLECTION

Input Mode的值有:

Mode	Value
Mouse (recommended default)	0x00
Single-input (single touch or stylus)	0x00
Multi-input	0x02

所以，多觸控點裝置是可以被重新設定成單一輸入裝置的，此時要表現的如作業系統所期望才行，而且微軟建議所有的多觸控裝置都預設採用 Mouse Mode。

Device Index
The device index usage selects the top-level collection to configure. A value of 0 tells the device to change the mode for every multi-input top-level collection in its report descriptor. A value of 1 and higher indicates the position of the top-level collection in the report descriptor. Applications that use values other than 0 must correctly handle the positions of the multi-input top-level collections in the report descriptor.

參考文獻:

1. Device Class Definitions for Human Interface Devices (HID)
   
2. HID Usage Tables

Introduction to InterProcess Communication IPC 簡介

探討 IPC 的文章與文件相當多，例如 http://www.linuxhq.com/guides/LPG/node7.html, http://ai.ee.ccu.edu.tw/os/projects/2004fall/ipc_11/os-3.ppt及http://www.comms.scitech.susx.ac.uk/fft/computer/ipc.pdf是兩篇我覺得寫的很棒的文件，當然不是我寫的。

這邊畫蛇添足地說明一下，正常情況下，OS 為了保護每個 Process 的獨立性，不止從 User 來切割整個作業環境，而且也從 Process 來切割，意思是，每個 User 間是獨立的，互相不會影響，不會因為甲用戶惡搞當機而造成乙用戶也跟著當機，當然行程也是如此。這就導致行程間要互相溝通必須做到一件事：

透過 Kernel!

是可以自行利用 file lock 來溝通，但是這也會有問題，例如別人是否也想這麼做？同步問題怎麼解決？附件有提到幾種正規的作法我就不多談，只是要強調出來，正規作法，其實都是透過 kernel 來達成的。因此有必要對　Kernel 提供的機制進行瞭解，包括 Pipe, Name Pipe, Socket, 信號、共享記憶體等等作法都是如此。

事實上 Kernel 提供出來的機制除了 system call 外，還有其他作法，例如 /proc filesystem, 不過這一點有機會再來說明，這邊簡單的說一下，很多情況下，不止是 Process 間要溝通，連裝置間或是裝置與 Process 間要溝通，透過 /proc filesystem 是非常方便的，甚至比 ioctl 來得簡易。但是簡易不代表有效率。當然這作法有一種限制，你必須去改 kernel, 但是若你剛剛好是作嵌入式系統，必須動到 Kernel , 那麼順便修改並提供利用 /proc filesystem 來溝通的機制也是相當方便的。

/proc, /sys 等，都透露出 kernel 愈來愈 Open, 學習是值得的。


Best Regards
--
自由的精靈, 狂想的空間
Free Spirit, Fantasy Space
Marie von Ebner-Eschenbach  - "Even a stopped clock is right twice a day."

Open Source 法律問題

想知道你的程式中，用了多少 Open Source 的片斷嗎？有一種暴力搜尋法軟體可以用，但是在說明之前先來回答一個問題，我猜會有人問「既然是 Open Source, 怎麼還會有法律問題」？答案其實很明顯，Open Source 所 Open 的是 Source, 並非智慧，也就是軟體並非免費，而是無價(ps:中文就是棒)。

台灣的自由軟體鑄造場裡頭還有工具可以幫你決定要採用哪一種授權，這邊直接回到主題：

http://www.blackducksoftware.com/ 上面問題的答案。
http://www.palamida.com/ 還可以幫你買保險，讓產品減少授權爭議的損失
http://fossology.org/ HP 丟出來的開源軟體

應用程式間的通訊 RegisterWindowMessage

本文在說明的主要是針對「應用程式間的通訊」這一需求而來。可參考的文章有:

VC++ Example Capture Print Screen to Clipboard including dropdown menu, SetWindowsHookEx and UnhookWindowsHookEx, with RegisterWindowMessage


RegisterWindowMessage, WM_USER, VC++ MFC Example

RegisterWindowMessage Function
Using Common Dialog Boxes
FINDMSGSTRING Notification

第一個參考資料有 source code，這篇心得主要是針對研究此一 source code 而得。我們先不管整個程式到底在幹嘛，只需要知道訊
息是怎麼傳送的。

首先，在 HScr2Clpbrd_DLL\HScr2Clpbrd_DLL.cpp 有一行:
::PostMessage(hWndReceiver,UWM_ClickPrnScrn,0,0);

可以想像到一件事，我用中文來說，這個 DLL 的功用是:
截取鍵盤事件，若偵測到使用者按 PrintScreen 這個按鍵時，就發出我們註冊的事件:
UWM_ClickPrintScreen_B2ABC742-0A63-49c3-9ACB-CF0068027A66

那麼，是怎麼註冊的？在前面，透過下面這行，要知道的是 UWM_ClickPrnScrn 這個變數意義不大，別被搞混了:
UWM_ClickPrnScrn = ::RegisterWindowMessage
("UWM_ClickPrintScreen_B2ABC742-0A63-49c3-9ACB-CF0068027A66");

好啦，兩行解決發送，那麼接收呢？在上一層 HScr2ClpDlg.cpp 這個主程式中:
也是兩行，一行也是註冊訊息，其實是一模一樣的先註冊:
UWM_ClickPrnScrn = ::RegisterWindowMessage
("UWM_ClickPrintScreen_B2ABC742-0A63-49c3-9ACB-CF0068027A66");

接下來就是接收:
ON_REGISTERED_MESSAGE(UWM_ClickPrnScrn, OnClickPrintScreen)

就這樣子啦，真的是夠簡單了。真正比較重要的是上面那個自訂的訊息，是可以自己定義的字串，重點是別人要知道它的內容是什麼，才有辦法接收到你傳出來的
訊息，而且又要盡量獨特，以免跟其他訊息衝突到:
UWM_ClickPrintScreen_B2ABC742-0A63-49c3-9ACB-CF0068027A66

PS: 這個程式還展示了怎麼截收鍵盤按鍵，是值得學習的
PS2: 微軟有非常多自訂的訊息，其中像 Find & Replace 中用的就是 RegisterWindowMessage

網頁也能動態載入 Javascript 嗎－－續2

直接貼範例，說明在範例中

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test eval</title>
<script type="application/javascript" src="mtm.js"></script>
<script type="application/javascript" src="net.js"></script>
<script>

  var extJS = [
    { name: "smile", file: "smile.js", },
    { name: "dance", file: "dance.js" },
  ];

  var Objs = new Array(); // In my mind, this will not know length now.
  var msg;

  function Ext(obj) {
    this.obname = obj.name;
    this.file = obj.file;

    // use net.ContentLoader() to load external javascript file
    this.load = function() {
      msg.innerHTML += "<P>Loading " + this.file;
      var ajax = new net.ContentLoader(this.file, this.onload, null, 'GET', this.obname);
    }

    // when loaded, use mtm.insertJS() to insert into document
    // 注意，此時已經離開本物件範例而是回到 net.ContentLoader() 的範圍，所以
    //     才會是使用 this.id, 而非 this.obname, 故意取不同名稱以便識別
    this.onload = function() {
      mtm.insertJS(this.req.responseText);

      // use eval to "new" object which defined in ext js
      eval('Objs['+Objs.length+'] = new '+this.id +'("wade");');
      msg.innerHTML += "<P>"+Objs[Objs.length-1].show();
    }
  }

  function init()
  {
    msg = document.getElementById('msgbar');
    msg.innerHTML = "";
    for (var i=0; i<extJS.length; i++) {
      (new Ext(extJS[i])).load();
    }
  }
</script>
</head>
<body onload="init()">
<div id=msgbar>Waiting......</div>
</body>
</html>

// smile.js
function smile(name)
{
  this.show = function () {
    return name + ' smile :-)';
  }
}

// dance.js
function dance(name)
{
  this.show = function () {
    return name + ' dance happily';
  }
}

網頁也能動態載入 Javascript 嗎－－續

上一篇網頁也能動態載入 Javascript 嗎？雖然也算動態載入，但是它無法等到正式取得之後（或是失敗）再處理，因此會有已經下命令取得外部檔，卻還沒載入完成。這是標準的 Ajax 的問題，就用 Ajax 的方式來解決。底下是另一個 mtm.js 及 net.js, 我本來的設計就是物件化的，內容如下，至於範例另外再寫一篇:

// mtm.js
function MTM()
{
  this.import = function(path) {
    var i, base="";
    var src = 'mtm.js';
    var scripts = document.getElementsByTagName("script");
    var hadExisted = false;
    path = path.replace(/\./g, "/") + '.js';
    for (i=0; i<scripts.length; i++) {
      if (scripts[i].src.match(src)) {
        base = scripts[i].src.replace(src, "");
      }
      if (scripts[i].src.match(path)) {
        hadExisted = true;
      }
    }
    if (!hadExisted) {
      document.write("<" + "script src=\"" + base + path + "\"></" + "script>");
    }
  }
  this.insertJS = function(js) {
    var scripts = document.getElementsByTagName("script");
    var scr = document.createElement("script");
    scr.innerHTML = js;
    document.body.appendChild(scr);
  }
}
var mtm = new MTM();

// net.js
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;


/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,id,params,contentType){
  this.req=null;
  this.onload=onload;
  this.id = id;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}


net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  if (ready==net.READY_STATE_COMPLETE){
    var httpStatus=req.status;
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"\n\nreadyState:"+this.req.readyState
    +"\nstatus: "+this.req.status
    +"\nheaders: "+this.req.getAllResponseHeaders());
}

怎樣讓 shell script 把自己丟入背景？

這議題似乎不怎麼吸引人，原文來自這兒。

sub shell 的意思，就是把某個片斷的 shell script 擺在 () 內，裡面的運作是獨立的，含 shell 環境變數。不過別搞錯我的意思，前句話的意思是說，sub shell 裡頭的變數不會讓外面的看到，卻看得到外面的變數。若有興趣的話，可以見比較完整的說明及範例。

網頁也能動態載入 Javascript 嗎？

答案是肯定的。先來看一個小片斷取名為 mtm.js:

  function import (path) {
    var i, base="";
    var src = 'mtm.js';  // 這裡的 mtm.js 要與「存有這程式片斷的檔案」相同的檔名
    var scripts = document.getElementsByTagName("script"); // 照理說，這是一個陣
列
    var hadExisted = false;
    path = path.replace(/\./g, "/") + '.js';  // 會幫忙加上副檔名 .js
    for (i=0; i<scripts.length; i++) {
      if (scripts[i].src.match(src)) {
        base = scripts[i].src.replace(src, "");
      }
      if (scripts[i].src.match(path)) {
        hadExisted = true;
      }
    }
    if (!hadExisted) {
      document.write("<" + "script src=\"" + base + path + "\"></" +
"script>");
    }
  }

再來看示範檔案，這邊用的也是 javascript:

/* in Matrix.js */
import ('core.math.MathHelper'); /* 路徑可以用 . 也可以用 / */
import ('core.math.const');

function Matrix(args)
{
....

}

/* in Vector.js */
import ('core.math.MathHelper'); /* 路徑可以用 . 也可以用 / */
import ('core.math.const');

function Vector(args)
{
....

}

這樣用的原因是，在定義物件時，可以以比較模組化的方式設計，因此有些元件可以跟別的物件共用，在使用上有可能別人已經載入了，所以透過
import 來判斷，若已載入就不要重複載入。

慶祝我的 3G 無線網卡開通

以前一直為了無法在 ubuntu 8.04 之前的版本使用華為的 3G 無線網卡而很少使用 Ubuntu, 說到這個，因為之前跑去鴻海這個鳥地方，網路常常被擋，所以申請 3G 門號後，把家裡的 ADSL 停掉了，也因此變成只能用 Windows 上網，幸好，今天在灌了 Ubuntu 8.10 rc1 之後，終於通了。

8.10 絕對是值得使用的，除了 3G 之外，還有藍芽也變得好設定，無線網路也是，總之一個爽。另外還看到多了一個 "Create USB startup disk", 雖然這功能我都是手動處理。

遠端備份？ tar netcat

大家都知道可以用 tar 來備份 copy filesystem between computers教你怎麼在多台電腦上互相備份。

電腦 A, IP 192.168.10.101
cd /mnt/sda1
tar -czpsf - . | pv -b | nc -l 3333

電腦 B,
cd /mnt/sdb1
nc 192.168.10.101 3333 | pv -b | tar -xzpsf -


其中 pv 是 pipe viewer, 功用是用來看傳檔過程的「進度」，不見得系統中有此命令，可以安裝後再用或是直接省略掉，那就變成:
電腦 A, IP 192.168.10.101
cd /mnt/sda1
tar -czpsf - . | nc -l 3333

電腦 B,
cd /mnt/sdb1
nc 192.168.10.101 3333 | tar -xzpsf -

淺談觸控螢幕 what difference between touch screen, mouse, keyboard

觸控螢幕的價值，在於讓使用者對裝置(含 NB, Mobile)的操作習慣更人性化。當然離人性化或許也還很長。

現有的作業系統，全都在滑鼠、鍵盤的裝置上操作。其中鍵盤是為了輸入，要人性化必須加入語音與手勢，硬體相對麻煩，而滑鼠則用來定位。這兩者都容易扭曲人體力學，容易罹患什麼網球肘之類的疼痛。觸控螢幕可以減低這種痛苦，另外也減輕滑鼠定位的不便性，甚至可以利用來做手寫輸入，對小裝置而言，在設計上也可以減少滑鼠、鍵盤帶來的不便性(醜、貴)。

觸控螢幕不應該只視為滑鼠，在我想像中，它就是輸入裝置，應該是滑鼠與鍵盤兩種兼具，因此勢必打破現有的作業系統架構。在 Windows 上，有兩種作法，簡單說明如下:

一、利用 DLL 共享資訊。Application 應該有能力自行取得觸控螢幕的資訊，像有幾個觸控點，位置，大小，移動速度等。
二、利用 SendMessage 搭配 WM_COPYDATA 訊息來溝通。這一點主要是要用來做手勢，想像中，應該有一個「服務」就叫 gesture service, 要有辦法像滑鼠事件或鍵盤事件，傳遞手勢事件出來。當然，這在現行作業系統中並無此項設計，所以才說搭配 WM_COPYDATA。這機制可以自訂訊息格式。

觸控螢幕與鍵盤滑鼠不同的地方在於，它並不像鍵盤有那麼多按鍵，也沒有滑鼠的「左右鍵」。因此硬要將之轉換成滑鼠鍵盤事件，總是有很大的差異，而限制也很大。譬如，怎麼發出滑鼠右鍵？事實上，滑鼠的設計有單鍵、雙鍵、三鍵、三鍵+滾輪等不同的設計，沒必要硬要讓觸控螢幕當成滑鼠。


參考資料:
http://msdn.microsoft.com/en-us/library/ms644950(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms649009(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms648710(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms649010(VS.85).aspx

Dillo, embedded browser 嵌入式裝置的良伴

若要選擇嵌入式的瀏覽器，相信很多人會選擇 Opera, 或是 Webkit, 但是我曾經選過 Dillo, 又小速度又快，就算只拿來當 UI 也很棒，因此推薦給大家，目前正推出 2.0 版。其實不少人愛用 Dillo, 雖然它沒有良好支援 Javascript，但是拿來看日常的網站也都正常。

SVN 版本控管

這樣的文件雖然很多，但是這篇是我的同事寫的，在我的辦公室經驗同仁驗證，我只是代為貼上來，他叫 Johnnie.

什麼是SVN?

SVN全名Subversion，是一個版本控制系統版本控制系統，相對於的RCS、CVS，採用了分支管理系統，它的設計目標就是取代CVS。網際網路上免費的版本控制服務多採用Subversion。
本文主要簡述：1. SVN Repository的架設 2. User如何在client端的電腦透過SVN對檔案作版本控制。
需要更詳細的說明，可參考下面的資料：
Subversion官方網站
TortoiseSVN官方網站
SVN Book(英文)
SVN Book(中譯)
Wiki
TortoseSVN 使用簡介
相當實用的電子書

Subversion (Sever端) 資料庫的建立流程



1. 首先到 SVN官方網站 http://subversion.tigris.org/下載Subversion, 並且在server端的電腦安裝 svn-1.4.3-setup.exe
2. 安裝完後, 點選 開始à執行，輸入 cmd svn
3. 接下來, 建立一個你要的資料庫(目錄/資料夾),例如 C:\Repository\test, 在文字模式底下輸入命令

svnadmin create C:\Repository\test

4. 在剛建立的目錄下(test), 裡面會有 3 個檔案
authz
passwd
svnserve.conf

5. 將這3個設定檔換成下面的範例
passwd 檔案設定範例
[users]
User = 123456

svnserver.conf 檔案設定範例
[general]
anon-access = none
auth-access = write
password-db = ../../passwd #小技巧可以讓很多Project 共用一份密碼檔案
authz-db = ../../authz ##小技巧可以讓很多Project 共用一份權限設定


authz 檔案
[groups]
# 註解
RD = User

[:/]
#root 的存取權限
@RD = rw
User = rw

[AlarmTest:/]
#每個目錄都需要來一段，要不然不會動
@RD = rw

[temp:/]
#temp 任意人都可以讀取
* = r

6. 點選 開始->執行, 然後在文字模式底下輸入命令輸入：
sc create Subversion binPath= "c:\Program Files\Subversion\bin\svnserve.exe --service -r C:\Repository" DisplayName= "Subversion" start= auto depend= TCPIP
7. 點選我的電腦按右鍵, 管理->服務及應用程式->Subversion
並且在服務狀態那點選啟動

8. 進行測試，在文字模式底下輸入命令：
svn co svn://localhost/test C:\MyProject
localhost 為本機的網域名稱(因為SVN架在自己的機器上面所以使用 localhost或是 127.0.0.1)，理論上應該伺服器的IP或是網域名稱
P.S 如果還不行連到svn 的database，去檢查防火牆是否開啟，在控制台底下點選Windows防火牆，點選 例外->新增連接戶->確定，然後新開一個port：
名稱 ：Subversion
連接戶編號：3690

TortoiseSVN (Client端) 使用流程

1. 首先到SVN官方網站下載TortoiseSVN，並且在你的電腦安裝 TortoiseSVN-1.5.4.14259-win32-svn-1.5.3.msi
2. 安裝成功後，按下滑鼠右鍵，應該可以看到下圖：

3. 取得(Checkout) Repository？

例如：在你的桌面上新增一個Working資料夾，點選滑鼠右鍵，選擇 SVN Checkout…，在URL of repository欄位中，輸入server端資料庫的路徑：
svn://10.243.12.167/test

輸入使用者的帳號和密碼，點選OK

4. 如何新增檔案或目錄到Repository？

需在檔案或目錄的icon上面，按滑鼠右鍵並且選擇TortoiseSVN->Add，TortoiseSVN會把要加入的檔案或目錄顯示出來，打勾的表示要被加入到Repository。 注意！Add的動作並未將檔案放到Repository中，它只告知SVN準備要在Repository中放入這些檔案，因此，如果你檢視這些檔案時，會看到一個驚嘆號標誌在檔案icon的下方。
注意：新增的檔案要經過提交(Commit)的動作才回真正的放入Repository

5. 如何提交(Commit)修改過的檔案或目錄？

需在檔案或目錄的icon上面，按滑鼠右鍵並且選擇SVN Commit…

在Message欄位中輸入本次提交的紀錄訊息，以利日後版本追蹤

6. 更新(Update)檔案或目錄

為何需要更新？由於版本控制系統多半都是由許多人共同使用。所以，相同的檔案可能還有人會去進行編輯或修改。為了確保你工作目錄中的檔案與Repository中的檔案是同步的，建議你在編輯前都先進行更新的動作。

在想要更新的檔案或目錄icon上面按下滑鼠右鍵，並且選擇SVN Update

winXP 回復 mbr?

最近拿了顆外接硬碟灌了 ubuntu, 結果卻害我的硬碟無法從原來的 C: 開機，後來找到這篇restore your MBR，裡頭提到工具可以在此找到 ，執行時要加參數，所以你要知道放哪兒，文中提到放 C:\ 最簡單，命令如下:

MbrFix /drive 0 fixmbr /yes

讓 bash script 具多重檔案的輸入

bash redirecting input multiple files一文提到怎樣讓你的 shell script 能夠同時由標準輸入轉向讀多個檔，簡單講就是像:

#!/bin/bash

while read f1 <&7
do
    read f2 <&8
    echo $f1 $f2
done \
    7<$1 \
    8<$2

這寫法有幾點可以提出來談：
一、 while 那行尾部的 <&7 及 <&8 這種寫法，是把 file handler 轉向輸入，若你會寫 C/C++ 的話，可以用 fileno(FILE*) 來取得 file handler, 是個整數，沒錯，就是這邊的 7, 8 的意思。(註: 或由低階函數 open() 所傳回的也是此 file handler)
二、檔案後面二行的 7<$1 及 8<$2 是把命令參數第一個當 file handler 7, 第二個參數當 file handler 8。因此搭配第一點就變成: 把第一個參數的檔由 f1 讀，而第二個參數的檔由 f2 讀
三、這種寫法適用範圍不多，因此少有人提，若不是像文中所提要拿來比較(或逐行並列)的話，比較常見的用法是把多個檔一行一行讀進來，那很簡單只需要用 cat File1 File2 | YOUR_SCRIPT 的方式即可。

你的PRIVACY 2.0

在【科學人2008年第80期10月號】裡有一篇文章講「你的PRIVACY 2.0」，也非常值得深思，我一樣再摘出一小小段與大家分享：

■隱私遭到侵犯通常被當成是其他類型的傷害。

■「失去隱私」事實上可能是「失去安全」。

■如果每個人都能夠負擔得起醫療照護，那麼對遺傳隱私的焦慮應該會消失大半。

■民眾應該有權監控並公佈與政府活動及政府官員相關的資訊。

■人們正獲得有效的工具，可以自行掌控想要公佈哪些個人資料，以及所公佈的對象。

資料融合：整合你的一舉一動

科學人2008年第80期10月號裡面有一篇文章說到「資料融合：整合你的一舉一動」這件事，我個人到底是什麼想法呢？先不管，但是大家可以前往看看。

該網址已經是書摘了，我把摘一小小段出來:

資料融合的用途廣泛，而應用在尋找潛藏的恐怖份子時，引起了最激烈的公共辯論。美國海軍少將彭岱特（John Poindexter）與國防高等研究計畫署（DARPA）的波普（Robert L. Popp）在2006年表示：「偵測恐怖份子的關鍵在於觀察現在與過去恐怖攻擊的計畫，據此尋找恐怖攻擊計畫的行動模式。」他們認為如果美國政府能從市場交易的資料庫中，找出不是農民卻大量購買肥料的記錄，那麼1993年的世貿中心爆炸案、1995年的俄克拉荷馬爆炸案都是可以避免的。但是想要取得這些購買記錄，並與農田所有者與聘僱記錄的資料庫媒合，政府必須史無前例地取得私人電腦系統的使用權，全國每個人的每筆轉帳記錄都會在沒有正當理由的情形下受到監控。基於上述理由，國會決定在2003年取消彭岱特與波普的「全面資訊監控」（TIA）研究計畫。

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一文