聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

九月 6, 2012

Yuren's Info Area
yurinfore
is about »

tag cloud

» cinnamon - 用 Javascript 高度客製化的 GNOME3


看了 小 Q 的 Facebook 之後，我也裝了 cinnamon 來用用。我之前一直推想 cinnamon 應該是把 GNOME3 裡面的 gnome-shell 的高度客製化，這次裝起來果然是這樣。一個很簡單的確定方式就是按 alt + F2 輸入 lg，就會從下面拉起一個 javascript console, debugger 跟 inspector 合一的開發工具 LookingGlass。


如果去查看 cinnamon 的套件檔案列表，也包含相當多的 Javascript。

因為很多人不知道，所以我再強調一次，整個 gnome-shell 都是 Javascript 寫的，所以 cinnamon 也都是整個用 Javascript 寫的。

比起 Ubuntu 整個砍掉重練用 compiz 重寫一個 unity 桌面環境，我覺得 cinnamon 用 GNOME3 既有的成果開發桌面環境是比較好的選擇，畢竟 Javascript 一來是比較多人會用的程式語言，另外在需要擴充功能的時候，Javascript 也可以很快的就寫好擴充。

更何況 cinnamon 就算是高度客製化他還是 GNOME3，很多資源都是可以共享的，而 unity 就等於完全新開一個獨立的分歧，恐怕濃厚的 Ubuntu 色彩會讓其他 distribution 不太願意使用。（不過 Fedora 18 似乎要把 unity 加入 repository 裡面 ）

by Yuren Ju at 8:53 AM under cinnamon , gnome , gnome3 , gnome-shell
四月 16, 2011

Yuren's Info Area
yurinfore
is about »

tag cloud

» [簡報] 手把手教你寫 gnome-shell 擴充套件

前幾週在 GNOME 3 Release Party 給了這個 Talk 『手把手教你寫 gnome-shell 擴充套件』，分享一下探索下一代 GNOME3 的桌面環境擴充套件，並且簡單的示範如何使用 Javascript 寫出下面這個 Screenshot 的擴充套件



GNOME3 的桌面可是充滿著絢麗動畫的 framework 呢 :)

簡報在下面，歡迎參觀。不過提醒一下 GNOME3 這次發佈並沒有提到 extension 系統的部份，想必是 API 目前也還沒有穩定。歡迎敢死隊現在就開始寫 gnome-shell extension!

step by step to write a gnome-shell extension
View more presentations from Yuren Ju

by Yuren Ju at 11:35 PM under gnome , gnome3 , gnome-shell , gnome-taiwan
九月 19, 2010

Yuren's Info Area
yurinfore
is about »

tag cloud

» 吃了蘑菇的 gnome-shell




會變大～

上面這個影片主要是 demo 目前 gnome-shell 的 extension 可以控制 gnome-shell 裡面的任意元件，所以才可以做出讓 calendar 放大的外掛。有興趣可以看一下源碼。

這是在 ICOS 的講題 Javascript in Linux Desktop，雖然跟 COSCUP 講的題目一樣，不過經過了一個月當然是要升級一下啦。

這次不一樣的地方還有加入了 seedkit 的部份。不過瞄準的是略有開發經驗的聽眾，所以技術細節其實並沒有提很多。這次 seedkit 的範例用了 seedkit 原本就內附的 dbus, libnotify 範例外，也加了使用 wnck, 用 javascript 控制視窗的範例。

下面這個影片依據 demo 用 dbus 控制 Ubuntu music player - rhythmbox 的上下首變更、libnotify 跳出通知訊息、以及用 wnck 取得視窗標題以及最後的操作所有視窗最小化。



而操作這些動作的全部都是使用 html 與 javascript, 範例源碼如下：
HTML 部份

<html>
    <head>
    <link rel="stylesheet" href="./ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="./ui.js"></script>

    </head>
    <body>
    <div class="demo">
        <img id="cover-art"></img>
        <div id="prev-button" class="button">Prev</div>
        <div id="next-button" class="button">Next</div>
        <div id="notify-button" class="button">notify</div>
        <div id="wins-button" class="button">get wins</div>
        <div id="min-button" class="button">minimize</div>
        <div id="file-uri"></div>
    </div>
    <ul id="windows-list"></ul>
</body>
</html>

Javascript 部份：
Seed.include("./dbus-rhythmbox.js");

function sendNotification(summary, body, timeOut) {
 var notification = new Notify.Notification({summary:summary, body:body});
 notification.set_timeout(timeOut);
 notification.show();
}

function getWindows () {
        Wnck = imports.gi.Wnck;
        Gtk = imports.gi.Gtk
        Gtk.init(Seed.argv);

        var screen = Wnck.Screen.get_default();
        while (Gtk.events_pending())
            Gtk.main_iteration();
        return screen.get_windows();
}

$(document).ready(function(){
 var shell = new RhythmboxShell();
 var player = new RhythmboxPlayer();

 Notify = imports.gi.Notify;

 $("#wins-button").click( function() {
        var wins = getWindows();
        Seed.print (wins.length);
        for (var i = 0; i < wins.length; i++) {
            Seed.print (wins[i].get_name());
            $("#windows-list").append("<li>" + wins[i].get_name() + "</li>");
        }
    });

 $("#min-button").click( function() {
        var wins = getWindows();
        for (var i = 0; i < wins.length; i++) {
            wins[i].minimize();
        }
    });
 
    Notify.init("Webview");
 $("#notify-button").click( function() {
  sendNotification("Raised from a WebView","Raised from a WebView", 500); 
  Seed.print("clicked");
 });

 //playeplayer.getVolumeRemote(function (volume) {print("oi")});
 $("#next-button").click(function(){
  player.nextRemote();
 });

 $("#prev-button").click(function(){
  player.previousRemote();
 });

 player.connect("playingUriChanged", 
         function(emitter, uri){
   //var song = shell.getSongPropertiesRemoteSync(uri);
   //print(song); 
         });

 player.connect("playingSongPropertyChanged", 
         function(emitter, title, property_name, old_value, new_value){
   if (property_name == "rb:coverArt-uri")
    $("#cover-art").attr('src', new_value);
 });
});

dbus 的操作一樣的是比較複雜，你可以參考上一篇。不過相對起來 wnck, libnotify 就簡單許多。而這整個操作，全部都可以使用 jquery 的方式操作，撰寫起桌面應用程式就跟網頁一樣。


最後是 slide。謝謝昨天大家的聆聽

Javascript in linux desktop (ICOS ver.)
View more presentations from yurenju.

by Yuren Ju at 8:18 AM under gnome , gnome-shell , icos , javascript
八月 2, 2010

Yuren's Info Area
yurinfore
is about »

tag cloud

» gnome-shell 擴充套件簡介

有用過 Firefox 的延伸套件嗎？那是個很好的功能擴充模式，使用者可以選用自己喜歡的延伸套件後，增強 Firefox 的功力。感覺就像洛克人拿到手部裝備一樣厲害。

有想過如果你的桌面也可以有這麼好用的延伸套件可以用嗎？gnome-shell 正在逐漸的啟用這種延伸套件模式。相信過沒多久，gnome-shell 就能全面啟動了 (笑)

基本上 gnome-shell  有幾個特點：

  1. 可變更原有的元件：跟 Firefox 一樣，你可以隨意變更已存在的元件。Firefox 使用 overlay 的概念，而 gnome-shell 你可以從 Main 或 Global 參數裡面取得原有的元件，再做修改。
  2. gnome-shell 延伸套件使用的程式語言是 Javascript!
  3. gnome-shell 的樣式是採用 CSS!
如果你寫過 Firefox 延伸套件，相信 gnome-shell 延伸套件對你來說會非常親切的。如何開始第一步呢？首先當然你要先啟用 gnome-shell，在 Ubuntu 底下你可以安裝 gnome-shell，然後在終端機輸入以下指令啟動 gnome-shell。
gnome-shell --replace &
要如何開始撰寫擴充程式的第一步呢？gnonme-shell 提供了建立一個簡易擴充套件的方式，鍵入以下指令：
gnome-shell --create-extension
接下來要輸入 Name, Description 跟 Uuid。輸入完畢之後，gnome-shell 會開啟你預設的編輯器，開啟一個由 gnome-shell 提供的樣板延伸套件。

// Sample extension code, makes clicking on the panel show a message
const St = imports.gi.St;
const Mainloop = imports.mainloop;

const Main = imports.ui.main;

function _showHello() {
    let text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
    let monitor = global.get_primary_monitor();
    global.stage.add_actor(text);
    text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2));
    Mainloop.timeout_add(3000, function () { text.destroy(); });
}

// Put your extension initialization code here
function main() {
    Main.panel.actor.reactive = true;
    Main.panel.actor.connect('button-release-event', _showHello);
}

這個 javascript 放置於家目錄的 .config/gnome-shell/extensions/ 裡面。這個樣板延伸套件會讓你點擊 panel 的時候在螢幕中央出現一個 Hello world 的 label:


簡單吧？程式碼中：

  • 17-18 行：將你的 panel 設置成可互動 (reactive)，然後將 panel 的 mouse click/release event 連結到 _showHello 的 callback。
  • 8-12 行：建立一個 text label，接著取得你的螢幕參數，並且把 text label 塞到螢幕的中間。最後指定 3 秒後 destroy 掉 text label。
如果還想做進一步的操作，請參考 gnome-shell 的程式碼，有相當大一部分都是使用 javascript 寫成，位置在 /usr/share/gnome-shell/js/ui。


[update]

忘記說一件事情，弄好你的延伸套件後按 alt + F2，輸入 r 按 enter 就可以重新啟動 gnome-shell 了。

by Yuren Ju at 1:32 PM under gnome , gnome-shell , javascript
A Feedjack powered Planet
• A Django site. •
• •