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!!!

Script fun

If you use Gnome, then you can use this quick script for setting casual reminders from command line.

$ cat ~/bin/remind
#!/bin/bash

msg=$1
shift
( sleep $* && notify-send $msg -t 0 ) &

Usage:

$ remind "Laundry done" 48m
$ remind "Group meeting" 1h 10m

At the end of time, you will see a popup with the reminder message.

Visualizing source code

I always find it difficult to understand the legacy code after joining a new project. I cannot understand it until I can visualize it. Cscope, Ctags have been great help in this effort, but they don't present the source code structure in visual form. I tried KScope a while back, it's good. But today I got working a very useful method of visualizing the program execution. It's documented in this article on IBM Developerworks.

If your project has a C binary, then using the pvtrace utility mentioned in the article (which uses addr2line) and graphviz, you can create awesome picture of your C source code. (I haven't tried this yet on C++). One hiccup that was keeping me from getting this to work was resolved today. I was running it on an executable that was linking to a shared library. So even though I was compiling the whole library and the executable with debug symbols, the addr2line utility couldn't get the symbols that were in the shared library. When I realized that, I re-ran the linking part of my executable, so that it would now link the .a file statically, instead of .so file dynamically. The resultant binary had all the symbols.

After following all the steps in the article I came up with this picture.

OpenMoko photo tour

Today on the OSiM blog, I reviewed 3 major distribution efforts on OpenMoko phone.

Here are the slideshows of the screenshots I collected.

om2007.2



om2008.8



fso



Check out the full article for more into.

New connection with the past

Recently I've been busy and couldn't post here lately. Between playing with my OpenMoko phone, writing the OSiM blog every weekend, hacking librsvg (why? 'll post about it if it takes any shape), a trip to Bartlesville, OK and of course full-time day job; I couldn't manage enough cycles to write here. However I had many things to write about.

... anyway. Today I felt extremely happy when I came across Prof. John Riedl's blog. He has been my favorite Teacher among all the ones I ever came across in my life. Back in my school days I used to be the "full-attendance" student, but I have slept in almost all teachers' classes in my college days (sitting on first bench ;). In Prof. Riedl's class, I could never even felt like sleeping even if I was awake for past 24 hrs (yes, there were many such night-outs in those couple semesters). I had taken Advanced Internet Programming and later Advanced Operating Systems with Prof. Riedl. Both of them were the best courses I ever took in my life. What was so great about them? It is not important what programming languages/ technical skills/ theoretical foundations were taught in those courses. What I learnt there was passion for technology (no, that's incorrect... passion can't be 'learnt'. More correctly, our interests resonated perfectly and that boosted my passion for technology).

I didn't immediately understand the techniques Prof. tried to teach us in Advanced OS class. Most of the classic Operating systems papers that we read, were too tough for me and I could barely add any new insights (something we were supposed to do in our writeups) to the original ideas. But after 1-2 years when I was settled in my job, I reread some of those papers (this time with a focused interest on OS virtualization technologies) and I understood the significance of the techniques that Prof. Riedl were trying to teach us back then. It doesn't surprise me, why only Prof. Riedl has managed to influenced me. Because he comes from the startup culture, which I am so much in awe of.

If you are In U of M CS department, (and "love" computing), then never ever miss an opportunity to take Prof. Riedl's course (if it is offered of course... I feel lucky I got that opportunity twice).