Desktop Linux Applications with Javascript

[joebert]

January 22nd, 2009, 12:04 pm

I stumbled across an article I've been waiting to read for years yesterday outlining some things called GObject introspection, and Seed.
I was so excited to read this article, I didn't go to bed. Instead, I stayed awake and played with Seed on my Ubuntu Desktop.

Now I'm not very familiar with the "sources.list" file for apt, so it took me awhile to figure out what I needed to do with the URIs here and how to do it.

I opened my sources.list file in gedit as a super-user like so, and pasted the two URIs at the bottom with a note about what they're for.

Code: [ Download ] [ Select ]

sudo gedit /etc/apt/sources.list

After I saved that file, I ran update.

Code: [ Download ] [ Select ]

sudo apt-get update

Once that was done and the sources were added I installed Seed.

Code: [ Download ] [ Select ]

sudo apt-get install seed

Once that was done I pasted the code from the article I read into a "test.js" file which I gave execute permissions to and I was staring at a Hello World window with a click-me button in it.

Now that I knew it was working I decided to whip up a small system tray icon to monitor skill training in Eve Online.

I already had a copy of the Eve toolkit, so I dug through the images in there and pulled out a copy of the 32x32 character sheet button image into my project directory.

Once I started playing with code I quickly realized there was going to be a lot of guess work involved with determining method names and properties, so I wrote the following utility based on what I could find and previous experience with Javascript to peek inside of things.

Code: [ Download ] [ Select ]

#!/usr/bin/env seed
 
Seed.import_namespace("Gio");
 
var obj;
try
{
    obj = eval(Seed.argv[2]);
}
catch(e)
{
    Seed.import_namespace(Seed.argv[2]);
    obj = eval(Seed.argv[2]);
}
var props = "";
for(var prop in obj)
{
    props += (prop + " : " + obj[prop] + "\n");
}
Seed.print(props);

1. #!/usr/bin/env seed
2.  
3. Seed.import_namespace("Gio");
4.  
5. var obj;
6. try
7. {
8.     obj = eval(Seed.argv[2]);
9. }
10. catch(e)
11. {
12.     Seed.import_namespace(Seed.argv[2]);
13.     obj = eval(Seed.argv[2]);
14. }
15. var props = "";
16. for(var prop in obj)
17. {
18.     props += (prop + " : " + obj[prop] + "\n");
19. }
20. Seed.print(props);

I saved that as "dump.js" in my projects directory so I could run it from the same terminal as I was testing my application from. It basicly takes an object or class name as an argument and dumps a list of methods/properties. The old for(in) trick from Actionscript1 and Javascript. It definately made translating the methods/properties I looked up in program headers easier.

Code: [ Download ] [ Select ]

./dump.js this
props :
prop : prop
obj : [object Object]
EvalError : function EvalError() {
    [native code]
}
...

1. ./dump.js this
2. props :
3. prop : prop
4. obj : [object Object]
5. EvalError : function EvalError() {
6.     [native code]
7. }
8. ...

Then since I hate programming UI elements, I used Glade-3 to put together a simple UI for entering my user_id, character_id, and api_key. As well as a context menu for the tray icon. Since I use GtkBuilder which uses XML files instead of the GLADE files that Glade exports, I had to convert my glade files using gtk-builder-convert.

Code: [ Download ] [ Select ]

gtk-builder-convert ui-settings.glade ui-settings.xml

Then I spent I don't know how long writing my application.

Here's a screenshot. You can see the settings window on top and the tray icon below in the taskbar. The taskbar icon has a tooltip attached to it that displays the number of days/hours/mins/etc remaining on the skills training time. Once training is complete the icon starts to blink. Simple, and probably a little buggy, but a start.

Attachments:

I went ahead and attached a ZIP file with the icon, JS, glade, and XML files if anyone wants to pick through it.

Attachments:

skill-mon.zip

(5.93 KiB) Downloaded 14 times