2010/05/24

[筆記] Firefox Screenshot 整個瀏覽器

這段 code 從 UploadScreenshot.com Capture 延伸套件還有 Canvas - MDC 拼湊出來的。

function onScreenshot (event) {
    var canvas = document.createElementNS ("http://www.w3.org/1999/xhtml", "html:canvas");
    var width = document.documentElement.scrollWidth;
    var height = document.documentElement.scrollHeight;
    canvas.style.width = String (width) + "px";
    canvas.style.height= String (height) + "px";
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext ("2d");
    ctx.clearRect (0, 0, width, height);
    ctx.save ();
    ctx.drawWindow (window, 0, 0, width, height, "rgb(255,255,255)");
    ctx.restore ();
    saveCanvas (canvas, "/tmp/test.png");
}

function saveCanvas(canvas, destFile) {
    // convert string filepath to an nsIFile
    var file = Components.classes["@mozilla.org/file/local;1"]
                       .createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(destFile);

    // create a data url from the canvas and then create URIs of the source and targets  
    var io = Components.classes["@mozilla.org/network/io-service;1"]
                     .getService(Components.interfaces.nsIIOService);
    var source = io.newURI(canvas.toDataURL("image/png", ""), "UTF8", null);
    var target = io.newFileURI(file)

    // prepare to save the canvas data
    var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"]
                          .createInstance(Components.interfaces.nsIWebBrowserPersist);

    persist.persistFlags = Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_REPLACE_EXISTING_FILES;
    persist.persistFlags |= Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_AUTODETECT_APPLY_CONVERSION;

    // displays a download dialog (remove these 3 lines for silent download)
    var xfer = Components.classes["@mozilla.org/transfer;1"]
                       .createInstance(Components.interfaces.nsITransfer);
    xfer.init(source, target, "", null, null, null, persist);
    persist.progressListener = xfer;

    // save the canvas data to the file
    persist.saveURI(source, null, null, null, null, file);
}

[筆記] Nexus One 的 USB tethering

Nexus One Android 2.2 版的 USB tethering 用的 driver 是 cdc_ether (Communications Device Class, Ethernet Control model)。

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

2010/05/21

用 eclipse 開發 Firefox/Thunderbird Extension

再次聲明,我自己是用 vim 寫 mozilla application,搞 eclipse 純粹只是自 high。

前置作業


要用 eclipse 開發 Mozilla Application,首先需要 WTP (Web Tools Platform)。一樣也是 [help] → [Install New Software], work with 填入 http://download.eclipse.org/webtools/updates,接著安裝最新的 WTP。在撰文時最新的版本是 Web Tools Platform (WTP) 3.1.2。

安裝完畢後,或許你還會有興趣安裝 XulBooster。請到 Sourceforge 下載最新版本的 XulBooster,並且在  [help] → [Install New Software] 按下 Add → Archive,選擇剛下載的 XulBooster 的 zip file 安裝。

開發延伸套件


通常會有兩個狀況:(一)你已經自己有 extension,只是想轉換開發環境為 eclipse。(二)你想要全新開發一個 extension。如果你是第二種狀況,XulBooster 有提供 XUL project 幫你建立簡單的 extension 結構。或是也可以用 Extension Wizard 建立,不過用 Extension Wizard 建立的話,要在自己建立 .project file,在你匯入專案時他才會認得你的 project,請參考 [筆記] 在 eclipse 用 git

如果你是第一種狀況的使用者,同樣的你也要建立 .project file。接下來就可以在 eclipse 開發了。

安裝延伸套件


安裝套件很麻煩。這邊我寫了兩個 script 分別處理 windows 跟 linux 的安裝。EXTENSION_NAME 請自行取代成你的 extension 名稱。使用方式都一樣:

Linux:
./install.sh trxw3c99.default

Windows:
install.bat trxw3c99.default

trxw3c99.default 請改成在你電腦上的目錄名稱。

Linux 版 (Linux 版我多處理了 vim 的暫存檔問題, 刪除 compreg.dat 等問題)
#!/bin/bash

FF_PROFILE="$HOME/.mozilla/firefox/$1"
FF_EXT="extensions/EXTENSION_NAME"

echo "copy files...."
find . -maxdepth 1 -mindepth 1 \
        ! -name '.git' ! -name '*.swp' \
        -printf "\t%f\n" -exec cp -r {} $FF_PROFILE/$FF_EXT \;

if [ -e "$FF_PROFILE/compreg.dat" ]; then
    echo "remove compreg.dat"
    rm "$FF_PROFILE/compreg.dat"
fi

echo "delete vim swap files..."
find $FF_PROFILE/$FF_EXT -name *.swp \
     -printf "\t%f\n" -exec rm {} \;

Windows 版本要有兩個檔案 exculude.txt 跟 install.bat
exclude.txt 裡面指包含一行: .git

install.bat:
xcopy * %APPDATA%\Mozilla\Firefox\Profiles\%1\extensions\EXTENSION_NAME /E /Y /EXCLUDE:exclude.txt

在 eclipse 安裝延伸套件


寫好安裝 script 之後,在 eclipse 的安裝就簡單的多。在 [Run] → [External Tools] → [External Tools Configurations] 在 Program 按右鍵選擇 New,取名為 Install。Location 按 Browse Workspace 選擇 install.bat,Working Directory 按 Browse Workspace 選擇你的 extension project。選擇完畢之後應該長這樣:


設定完畢後,按下 toolbar 上面的 選擇 install 就可以安裝了。

相同的如果你想跑 Firefox 也可以用相同的設定方式跑 Firefox :)

[筆記] 在 eclipse 用 git

我這個人還蠻無聊的。自己是用 vim 開發,不過還是想試試看用 eclipse 設置開發環境。我之前的開發環境是 vim editor 配合指令介面的 git,就這樣。設定開發環境的目標是把整個開發過程都可以在 eclipse 內完成。

首先在你的 git repository 建立一個 .project 檔案,這是 eclipse 的 project, 匯入 project 時會用到
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>entegomode</name>
    <comment></comment>
    <projects></projects>
    <buildSpec></buildSpec>
    <natures></natures>
</projectDescription>

[eclipse]
eclipse 裡面可以用 EGit 操作 git,EGit 包含了一個用 java implement git 的套件 jgit。不過簡單的說用 egit 就是了。在 eclipse 的 [help] → [Install New Software], work with 填入 http://download.eclipse.org/egit/updates ,安裝 egit 與 jgit 重新啟動即可。

重新啟動後按 file → import,選擇從 git repository 匯入,接下來的東西你用過 git 就知道該怎麼做了。不過要注意一點,如果你沒建立 .project 檔案時,到最後會沒有 project 可以匯入,切記。

還有一件事也很麻煩,就是 egit/jgit 還不支援 ssh key 。

[筆記] 使用 sed 轉換 HTML tag

貼 blog 時常用到 html/xml tag 的時候,直接貼上去 blogger 都會很聰明的當成你要使用 html tag。有個轉換小工具可以處理這件事情總是好的。

源自 http://www.html-tags-guide.com/html-xmp-tag.html

建立檔案 convert.sed:
s/&/\&amp;/g
s/"/\&quot;/g
s/</\&lt;/g
s/>/\&gt;/g

使用以下指令來轉換你的 XML/HTML
sed -f convert.sed <your-xml-file>

2010/05/17

[筆記] 關於 XUL Tree 對於拖曳移動位置的實做

最近一直在看 XUL 裡面關於 Tree 拖曳的實做。不論哪種 UI framework 裡面的 Tree 都還真的挺複雜的。

以下是自己實做 TreeView 需要 implement 的 method:
http://doxygen.db48x.net/mozilla-full/html/d1/dbc/interfacensITreeView.html

其中 canDrop () 跟 drop () 的參數 orientation 可以拿來判斷現在 drag 的 item 到底是在 target item 的正上方 (DROP_ON), 前面或後面 (DROP_BEFORE/DROP_AFTER)。所以如果你正巧要實做把 item 移動到資料夾,又需要實做 ordering item 時,就可以利用 orientation 來判斷要執行這兩種動作的那一種。

以下的程式就可以拿來印出 drag 的狀況:

_printDrop: function (aRow, aOrientation) {
    let targetFolder = mytreeview._map[aRow]._folder;
    let aDropText = null;
    if (aOrientation == -1) 
        aDropText = "DROP_BEFORE";
    else if (aOrientation == 0)
        aDropText = "DROP_ON";
    else
        aDropText = "DROP_AFTER"
    Application.console.log (aDropText + ": " + targetFolder.name);
  },

五月份 TIOBLE 程式語言排行贏家:Objective-C, Go

參見
http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

由於 iPhone 程式愈來愈重要的關係,1980 年代發明的 Objective-C 突然之間就衝上了第十名,Ruby 正巧被擠出前十名。另外由 Google 開發的 Go 程式語言也是一匹黑馬,從 2009 十一月正式發布後,竟然在半年後衝上十八名。

TIOBLE 排行就跟夜市人生一樣精彩阿,不過相同的也只需要久久看一次就好,反正劇情都接得上。

2010/05/14

你愛 Javascript 的 Array 嗎?

最近開始常寫 javascript 後,發現了不少好東西 -- 尤其是 Array。有幾個新 function 不得不提。

[filter]
可以把過濾用的 function 丟給 filter 去過濾,範例:

let items = [1, 10, 20, 50, 80, 100];
function aFilter (element) {
  if (element >= 50)
    return true;
  return false;
}
let filterItems = items.filter (aFilter);

[some]
上面那篇已經提過了,如果有任何符合條件的就 return true:

let items = [1, 10, 20, 50, 80, 100];
function someGreatThan50 (element) {
  if (element > 50)
    return true;
  return false;
}

if (items.some (someGreatThan50)
  alert ("some element great than 50");
像上面這兩個例子一樣好用的 function 有 forEach, every. 詳情請查閱 MDC
https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Array

python 的 if item not in items 的 javascript 版本?

平常在 Python 底下 if not in 還蠻好用的。舉例:
items = [1, 2, 3, 4]
if 2 in items:
  print "in here!"
else
  print "not in here"
那 javascript 有什麼簡單的方法可以作這判斷呢?目前還沒想到,所以用以下方法。
let targetItem = something;
let items = [1, 2, 3, 4];

function containItem (item) {
  if (item == targetItem)
    return true;
  return false;
}

if (items.some (containItem))
  alert ("in here");
else
  alert ("not in here");
好多行阿,懇求 javascript 高手釋疑。

[updated]
下面的迴響提供了 array.indexOf 這個更好用的方法。感謝
items = [1, 2, 3, 4];
if (items.indexOf (2) >= 0)
  alert ("in here");
else
  alert ("not in here");

2010/05/13

了解你的 snippets.vim - javascript

今天翻了 snippets.vim 的 javascript 部份,才發現有些拿來寫 XUL/Javascript 還蠻方便的。比如說寫 Mozilla Application 常會用到 object method。其實安裝 snippets.vim 之後只要輸入

:f

按下 tab 就可以補齊成

method_name: function (attribute) {
},

很久沒更新的 Yuren's Info Area...

最近發現實在太久沒有更新了。不過也不是因為沒什麼新鮮事情,只是沒時間長篇大論的寫一些東西。作為應對方式,以後 Post 的文章會比較簡短一點。配合直接用 email 發文,希望可以提高一些更新頻率囉。

當然提高更新頻率的前提是內容要有趣啦 :P

[筆記] 擷取滑鼠座標或操作滑鼠自動測試

可以用 xdotool 這個工具。例如要用滑鼠按右鍵:

xdotool click 3

man 裡面有些範例可以看。

寫 HTML/XML 讓你很煩心嗎?你需要 zen coding

http://code.google.com/p/zen-coding/

他有 vim 外掛,裝上去後,開啟你的 XML/HTML。如果你想要以下結構
<div class="main">
  <p></p>
  <p></p>
  <p></p>
<div>

只要打
div.main>p*3
按下 Ctrl + Y,再按下逗點就可以展開成上面的語法了。

[筆記] 打開 vim 時就在多個 tab 開啟檔案

vim -p file1 file2 ...