Sunday, September 07, 2008

Inkface - SVG based GUI design

I have always wondered why are there so many advanced technologies to learn to create the GUI for a software application. GUI is what we see, then if we want to design or customize it, then it should be as simple as editing an image in an Image editor. This becomes more important with the next-gen handheld devices, where the GUIs will be handled more intuitively - by fingers - rather than keyboards or mice. However the problem and its solution wasn't very apparent to me.

... until I read this post by Andre Schmidt on Clutter mailing list few months back. In his simsui project, he has designed a slider widget from an SVG image and used clutter to render its differnt parts. This little project defined the problem and solution I was looking for. I played with the simsui source code. Unfortunately, that code is written for very specific widget and had some duplicate implementation of some rendering logic.

So I decided to give a try to a generic SVG (vector graphics) based GUI framework. I looked for open source SVG rendering libraries. I chose librsvg (which is now part of the Gnome desktop) for this purpose. It took me a month to understand its internals and to extend them to fulfill my needs. I eventually got it working. I now have created a fork of that library - dubbed 'libaltsvg' - under my altcanvas project.

What I have achieved so far is complete isolation of GUI from the application logic code. I have coded two samples apps - A music player and A virtual keyboard for handhelds - using this new GUI framework. As you can see in the following demo video, the GUI look-n-fill can be changed by merely changing the input SVG filename. In this framework the app logic gets simplified as well. The code for the two apps can be found in player.c and keyboard.c.


high-res version on Blip.tv





The complete source code can be found here in altcanvas repository.

The demo above is prepared on my desktop, however I have tested these on my n810 as well. Of course, the animation effects are too much for it to handle. But it works decent at minimum frame rates. I will post packages for n810 diablo in next couple of days.

To put this in perspective: this framework lets you do on your desktop/mobile, what Adobe flash lets you do on the web (and on mobiles too) - with an added benefit of coding in C (and python or other popular languages, once I get their bindings ready). There are some closed source projects for doing vector graphics based GUIs for mobile devices (ikivo, bitflash). But I haven't found any open source initiatives so far. Let me know for sure if you have.

If you are attending OSiM or Maemo summit next week in Berlin, then look for me. I will be happy to give a demo.

Update (Sep 12):
A package for trying the Inkface demo on Nokia n810 is available now. Download the .deb file.
[Note that the keyboard/music player are not fully functional apps. They are proof-of-concept apps for showing Inkface GUI framework benefits.]
I will be flying tommorrow afternoon for Germany. If any of you guys are in OSiM or Maemo summit, I will be glad to meet. After I come back from the trip, I will work on further improvements to this project. Till then... have fun!!!

7 comments:

oskude said...

Awesome!

exactly this is why i love FLOSS, the best environment for real innovation. gotta check your code right away! :)

ps. there's yet another same kind of project http://www.assembla.com/wiki/show/MadButterfly

exactly what i was hoping for, as i'm not a good coder, i just want to use it/them ;)

liquid said...

Jayesh,
I believe we met at the maemo summit :)

I have just had to implement a VKB from scratch inside liqbase, and whilst I was doing it was thinking of what you suggested and remembered the quick glimpse I had of your very cool looking software.

If you are an irc user, pop into #liqbase and we can discuss some options - i think your experience in this field will help immensely. If you don't use irc, I'm certain you can find my mail address somewhere online :)

I know we have users from many countries and keyboards need to be customizable, I don't know the first thing about this and have implemented a very simple down to earth qwerty affair.

Gary (lcuk on #maemo and #liqbase)

Anonymous said...

Hi, very interesting project. How do i build it, do i need to build everything under libaltcanvas? I have managed to build the libaltsvg directory but not player.c and keyboard.c can you tell me what i need to do to build these, do i need to build the inkface directory as well?? Also what is altX, do i need it?

Thanks in advance for any/all the answers recieved!

Nick

Jayesh said...

Hi Nick,

For the inkface project, there are 2 base packages - libaltsvg and inkface-python.

libaltsvg is a customized version of librsvg. The best way to build is "cd trunk/altcanvas; ./build.sh -p libaltsvg" This will build a .deb package. Ignore the player.c and keyboard.c; they are old apps, now replaced by equivalent python apps in "trunk/inkface/{tests,apps}" directories.

inkface-python is the python-bindings package. To build it you need scons installed. You need to execute "cd trunk/inkface; scons -Q python-debian". This will build the inkface-python*.deb.

Hope this helps!

Mohsin Hijazee said...

Really innovative approach.
That's awesome. That would make possible to have skinnable apps which are mostly shown by media players, system utilities and anti virus software on Windows.

Hats off!

Anonymous said...

This is pretty neat.

The problem I tend to run into with a static file for the UI is that I always end up needing a level of flexibility that pure static images can't provide. But if this could be combined with a mechanism for, say, runtime DOM manipulation (maybe even using JS, since SVG can embed JS, IIRC), it could be quite a powerful combination.

Nice work!

asad_ddos said...

I have been thinking about this for years. And you can see how many developers are doing this now...for an example check out:
http://jamesanderson613.com