Nodoka Widget Drawing - Starting From Scratch

I know everyone will hate me now, but I've decided to break my current development of gtk-nodoka-engine-0.8.x and start working on it from scratch. I don't know what was the real push to do that, but I felt I needed to support wider configurations in the engine (with future in mind), develop more consistent, usable and pleasing look and feel and write the drawing code in a way that would be independent on the toolkit. As for the design itself as inspiration serves basically the widget design on iPhone (and OSX in general), current nodoka, the 0.8.x sketches and existing implementation, Chromium and much more.

For faster tuning of the gradients I've wrote a simple GTK application filled with sliders... And I later extended it for showcasing and testing drawing code of the widget. Forgive me for not publishing the source code, because it's total mess. The widget drawing code will eventually go to gtk-nodoka-engine, so I try to keep that part less messy, but creating the gui, writing event handlers, ... has been made in way that it just works (TM)...

I have to say that it's pretty interesting to write GTK applications using all the GObject and GtkWidget magic, and I've come to a deep understanding of why it's mostly inevitable to use tools like Glade to design more complex GUIs. The app currently looks like this:

The top left image serves for tuning the fill gradient settings, with the four sliders right of it I can control the base color and transparency, the other five sliders are for the actual gradients settings. With this I've finally came up with something I was satisfied with for button and added entry (because it often combines with button). The result is such:

Now, even though current GTK (AFAIK) does not directly support button groupings, it is possible that in the future such feature will be there, so I decided to have the drawing code prepared. Since the drawing code is independent on widget toolkit, I can simulate everything I want in my small app, which is why the bottom part of the app was added. It has an drawing area in which I draw the widgets (currently buttons only) and a button which serves as a reference for testing various states. You can notice, that I have grouped the buttons by three – that's to test all the various cases that can happen: button is first in group, button is last in group and button is in group but is neither first nor last.

Next feature not implemented AFAIK anywhere else than pango (and perhaps other text rendering libraries) is complete writing style support. That means not only the left to right, then top to bottom (used e.g. in Latin, English, ...) and right to left, then top to bottom (used e.g. in Arabic) cases covered by CSS, GTK, ... but also top to bottom, then right to left (used e.g. in East Asian scripts) and top to bottom, then left to right (used e.g. in Mongolian). At one point this was part of CSS3 specification, but for some reason it has been dropped. Anyway, because in code it means only implementing two new cases which basically means only using different transformation matrix, and thus should not affect speed of the rendering, I decided to implement it.

Thus in the preview in the app, there are actually four button groups – the top one is usual LTR, with the left button being treated as first, the one bellow is usual RTL, with the right button being treated as first, and bellow the left one is top to bottom, then left to right case, with the top button being treated as first and the remaining is top to bottom, then right to left case, again with top button being treated as first.

The lighting follows "paragraphs flow" – meaning that for horizontal text the light shines from mostly from top, and in vertical text depending on the flow either from left (Mongolian) or from right (Japanese). Now it would be even greater if I could add some text to the buttons to test how it would look with it included, but I don't know how (or rather I am too lazy to study pango from scratch and quick google search does not seem to reveal any nice pango tutorials)...

And now some video of the buttons "in work".

Download