2013/10/30

初嚐 Greasemonkey: LpTable


有時會想要在任意的網頁上加入一些特殊設定或是需要重新排版成看起來比較爽的頁面,舉例來說:在 facebook 的登入畫面做一個快速切換帳號的按紐;又或是最近在用 Lauchpad 的 bugs 覺得它的排版很鳥,所以自己重新用 jQuery 的 tablesorter 重新排一下。

想要解決這樣的問題,一來是可以寫瀏覽器的外掛來改,二或是用我今天要介紹的方法 userscript 來達成,以 firefox 的使用者需要先安裝 greasemonkey,chrome 的使用者則要安裝 tampermonkey

這次就 Launchpad 為例,原先 Launchpad 的 bug 列表長這樣



經過了 LpTable 的 script 會變這樣



Firefox 的使用者來說,在安裝完 greasemonkey 後,再到 LpTable 的頁面按下 Install 即可使用了


基本上寫這些 script 如果已有網頁基本能力寫起來很容易,因此我就在做 LpTable 用到的一些手法來介紹。


jQuery


要在 userscript 裡載入其他 javascript 檔,只需在檔頭的部分加入 @require filepath 即可,如下:

// @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// @require     http://datatables.net/release-datatables/media/js/jquery.dataTables.js


CSS


要加入自訂的 CSS 也有幾種方法可以用,舉例來說第一種用 GM_getResourceText,再用 GM_addStyle 將樣式加入,在使用之前記得要先用 @grant 取得權限。又或是用比較原始的的手法,自己建立一個 style element 插在 head 裡如下:

function initStyleSheets() {
    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

    var css_alert = '.alert {padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; color: #468847; background-color: #dff0d8; border-color: #d6e9c6}';

    addGlobalStyle(css_alert);
    var stylesheets = ['https://dl.dropboxusercontent.com/u/23905041/media/css/demo_table.css',
                       'https://dl.dropboxusercontent.com/u/23905041/media/css/jquery.dataTables.css'
                       ];
    $.each(stylesheets, function(index, value) {
        var link = window.document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = value;
        document.getElementsByTagName("HEAD")[0].appendChild(link);
    });
}


Persistent Storage


要將某些資料存起來,在下次 reload 網頁時再用,可用 GM_getValue and GM_setValue 這組 API。使用前記得要 grant 權限,


TableSorter


最後是關於網頁表格的應用,跟 greasemonkey 完全沒關係。當初是希望能有一個表格,可輕鬆動態插入資料,排序,過濾資料,google 一下很快就找到了 TableSorter 這個 jQuery plugin。這部分的線上文件範例都超多,自己網上看看吧。

2013/10/13

desktop-mirror 串流螢幕上的影像及聲音到其他電腦上




desktop-mirror 最近在玩的 project,這隻程式主要是讓使用者的電腦上的畫面及聲音可以即時傳送給其他同網域的電腦,相類似的應用如 AirPlay Mirroring and Miracast

所有程式可在 github 上找到。


目前 desktop-mirror 在以下環境下測試皆能順暢的分享螢幕上畫面及聲音 Windows 7, Ubuntu 12.04 and XBMC。以下是實際使用的影片:



技術細節 - 影音串流


螢幕畫面的串流是用 ffmpeg 及 crtmpserver。其中,ffmpeg 配合著影像輸入為 x11grab (Ubuntu) 或 dshow (Windows) 將影像編碼成 H.264 baseline profile,聲音則是輸入為 ALSA 編碼成 mp3,最後封裝成 flv ,透過 TCP 傳出去。在接收端為非 XBMC 的情形下,ffmpeg 會將輸出結果送至 crtmpserver,接著 crtmpserver 為改成用 rtmp protocol 等待接收端來要求影音。

在這整個流程中有很多其他選擇,但考慮到跨平台及不同的接收端,最後才採用這樣的(奇怪)組合。

技術細節 - Windows/Ubuntu 平台移植


這隻程式使用的語言及 GUI library 是 wxPython,因此在各個平台之間的移植沒遇到什麼大問題。當然,前提是在選擇 library 及 external program 要十分注意,像是 mDNS (Avahi/Bonjour) 在 python 上介面是不是跨平台等。

唯一踩到的地雷是在 python 處理 process 輸出時用到的 select/epoll,這類的 function 在 Windows 上只支援 socket descriptor,因此重新用 Queue 及 thread 重新做了一個類似功能的東西。

最後打包成安裝檔的部分。在 Windows 就準備 py2exe,一堆的動態鏈結的程式庫和執行檔,及 NSIS 的包裝檔。Ubuntu 的部分則就準備 debianize 的資料匣,再準備個 recipe 讓它定期自行去 github import 程式,再自動編成 package 放到 PPA。

最後


這個 project 自認為很好玩,也還有一些遠端遙控的部分功能可以加強,只是我又想到別的好玩東西了,這個案子就做到這裡就好。

後記:參加了 QNAP 舉辦的 APP 競賽得到了第一名節殊榮