Tuesday, August 08, 2006

Magic

So lets say you're writing an application. It's a pretty good looking application too. Lets say your gui is completely vector based. It's so nice because an artist designed it! But there's a problem, a large portion of your users doesn't really like the artist's style. Furthermore accessibility wise your application is a nightmare. To add insult to injury your application doesn't match at all the color scheme of any desktop environment. What do you do?

Crying is certainly an option. One used extensively by a lot of ISV as well (with limited success). What would be really cool is if you could have an external stylesheets that the desktop environment can affect, that your users can style with accessibility features, color schemes and basically whatever people want. So one would need a highly extensive support for external CSS stylesheets in SVG. One that goes a little beyond what SVG standard offers because SVG doesn't allow styling of things like "transform" element which would be very useful for number of things.

At this point it's probably very clear that is exactly what I did today.

QtSvg in 4.2 will have full support for external CSS stylesheets. That support includes all svg properties and attributes that we use.

So lets create a very simple application that loads its UI from a SVG file and lets one style it by editing an external CSS file. The SVG file that we come up is here. We add a style, that looks like this and we're well on our way. Now we add logic to our application. In this case we'll render gears as in the ever famous GLX example, but we'll do it 2D vector style. So our application looks like this: . Neat.

K, but it's pretty gray, so lets change it. First of all we'll add
#viewport {
fill:white;
}
to make sure our background is white. Then we'll change gradient on our controls by adjusting stop-color and stop-opacity properties. Then we'll change the font on our "Gears" sign. Add a wider stroke to the control container and change the stroke on our view. Final stylesheet is here. Suddenly our application looks completely different and we haven't changed one line of code. In fact we haven't really touched the application at all but it looks like this:

Magic. Let me create a bullet points with exact description of how this works:
  1. Artist creates a gui in SVG
  2. Developer does logic in his/hers favorite language
  3. Application loads the SVG and does selective rendering (as described in the last blog)
  4. ----- magic -----
  5. Flexible, good looking, accessible, scalable application.
I take full responsibility for point #4.

But lets continue. Now lets say this application has rather small controls and some of our friends have problems clicking on some elements and reading the text. So changing colors is not what we want, we would like to make it easier to read and click on elements. It's all vector graphics, so could be zoom the whole interface? Yes! We'll add
#wholeapp {
transform: scale(2,2);
}
to our stylesheet to zoom whole application and make it look like this:


Notice that because it's vector graphics you don't get artifacts you'd normally get when zooming. One can (as in the example before) extend the borders, zoom only certain elements... Well, basically rearrange everything.

The things we can do with this are pretty amazing and I've been playing with it for the last two hours and it's a little scarry how much fun it is to change the complete look and feel of an application this way. Especially the amount of things that can be changed while keeping the application still behaving more-less like the initial version, is amazing. I hope people will have a lot of fun with this.

8 comments:

Anonymous said...

Very, very cool! (Oh, and useful too.)

Anonymous said...

Sounds pretty phat dude. I'm looking forward to seeing all of this when its all put together. Hope things are good in your world. Later dude... Alan

Ryan James said...

Damn hot. This is one of the coolest things I've seen developed/thought up in a while. And if integrated more tightly into a desktop environment I can see some very powerful graphically cool stuff happening on even -old- computers. Kudos to you.

P.S.: First time I've ever posted to a blog!

Anonymous said...

Zack, I sent you an email from my home account last night. I showed my boss some of your stuff and we'd like to talk to you about some side work.

-scorp1us
PS. We're in Baltimore.

Anonymous said...

Dude, you are my hero!!! The stuff you are able to produce is so extremely cool. I only have one problem with you, because you are the reason I can't wait for KDE 4 anymore ;-)

DeKay said...

This is really nice, but 26 and 30 fps in gears is pretty low. Is this because it is CPU intensive, you have a really lousy graphics card, you're throttling the frame rate, or ??? I know I can't expect the big numbers you'd get from OpenGL here, but if it clobbers a person's PC because it is software rendering, it might have limited usefulness.

Anonymous said...

This looks alot like the work that andy fitzimmons has been doing with the ettiquite icon set.

You should give the man a call.

Anonymous said...

This is exactly what is described here:

Revisiting visual interface programming: creating GUI tools for designers and programmers
UIST2004

http://portal.acm.org/citation.cfm?id=1029632.1029678

stephane