Sunday, July 22, 2007

Web on canvas and Dashboard widgets

There are days when I do something quite interesting and in my mind I can almost see myself on a stage in tight, tight spandex pants, long hair, perm, cowboy boots yelling angrily "are you ready to roock?!". People cheering, babies laughing, women throwing their bra's on the stage. It's poetic. Then I remember that I'm a computer scientist and I snap right out of it. I go back to the life filled with math equations on napkins, sleepless nights in front of buzzing computers, stacks of books in corners and no spandex pants (although I can deal with the last one just fine). The fact that I hate rock lessens the blow, but it doesn't make it any less disappointing. So in those moments of sadness I blog, yearning attention and approval, so readily available on the internet. Cough, cough...

I was wondering how hard would it be to create a QGraphicsItem that uses QtWebKit to render pages on a canvas. The idea being that combining full blown canvas like QGraphicsView framework with web rendering engine would give us quite a killer combination. So I've sat down today and done it. At first I had to redo some of the rendering code in QtWebKit and once I was finished I had a QWebGraphicsItem that beautifully renders pages. It being a QGraphicsItem all the effects available to graphics items in Qt are available for free to it. So you can animate, scale, rotate, perspective-transform and do a whole bunch of neat effects on it for free. Once I've done that I figured that it's obvious that this is the best way of getting Apple's Dashboard widgets to work. So I've done that too. I quickly hacked up a class that reads-in Apple Dashboard widget bundles and can render them on a QWebGraphicsItem. The compatibility is not 1:1 quite yet, because some of the Dashboard widgets use JavaScript objects that I haven't implemented yet, like AddressBook object. To be honest I'm not 100% sure whether I want to implement them, I think we can get those things done a lot nicer, it's just a question of whether 1:1 compatibility with Apple Dashboard is worth the extra effort needed to make all those JavaScript objects work on KDE.
First a screenshot of one Apple Dashboard widget rendered and on top a scaled to half its size KDE homepage:


Now a Dashboard widget with a perspective-transformed dot.kde.org page. Since this is QGraphicsView I can interact with the item while it's transformed so I've selected some text on it.

Crackalicious. (no drugs were used while hacking on this, but I did touch myself a little after getting it to work). Furthermore (yes, there's more... what can I say, I'm a giver...) in QtWebKit we have this neat interface that allows you to inject QObject's into the framework as JavaScript objects at run-time, so adding new JavaScript objects is trivial and getting Opera widgets to work would be very, very simple. No spandex pants included though.

28 comments:

Anonymous said...

Neat work; worth 5 units of Approval from me :)

"but I did touch myself a little after getting it to work"

thanks for this

Ivan Čukić said...

Salute!

Gopala Krishna said...

I guess qt5 will have most of its functionality(almost all widgets) implemented on GraphicsView framework ;)

Just kidding :p

Very nice work , as usual :)

Pinaraf said...

Nice !
Is it possible to download a Qt with QtWebKit somewhere or is it still ony available for trolls ?

Anonymous said...

*cheers and looks for bra to throw* - very cool.

Stan said...

Amazing work! I am really looking forward to testing this out.

Anonymous said...

Warning: Redundant borders! Isn't there any way to avoid redundant borders by default in Qt without making application developers fix them by hand every time?

Zack said...

Warning: I work on framework/libraries not applications, if you don't like borders, you shouldn't be adding them. It has nothing to do with me. Write a style where you fix that. Much love.

Oh, QtWebKit is in WebKit's svn repository, so you can get access to it. We'll evaluate and review patches I did for QWebGraphicsItem and either fold them in or just leave it as it is and depend on "widgets on canvas" implementation that is coming in Qt 4.4 anyway.

Vide said...

Anonymous: I ope that you are always the same "borders troll" (troll in the usenet meaning, not Qt) that's plaguing The Dot and all the other KDE's related places... you're just SO boring...

Anonymous said...

You're one crazy person ...

rmgraham said...

don't worry Zack, the interweb still loves you

skierpage said...

Use DHTML to overlay atop your blog posts a short video of you kicking a conference room door down and leaping through in a kilt like Axl Rose. You know you want to.

Did you see Mark Finkle's post using foreignObect to place HTML in SVG? Similar results to your web on canvas, different technique.

"bra's" "QTObject's". These are simple plural forms, so no apostrophe.

Diego said...

you rock dude!

keep up the good work!!

Anonymous said...

This is awesome! As usual, good job, keep up the great work Zack.

Alex said...

Hey Zack, very impressive work on those opengl plasmoids! I'm curious and as a 3D modeller, would the opengl plasmoid support perhaps collada (an open 3D XML format) with a certain library in the same manner as SVG's are being rendered? I have some wicked ideas for some interesting 3D animated models dancing around the screen exploiting crazy eyecandy like GLSL shaders and normal maps (for usability purposes of course, not just bling graphics hahaha). A possible idea of mine is "think about the OSX dock, only the programs are held by a massive 3D animated normal/specular mapped penguin :)"

Keep up the good work!

-Alex

David said...

what size do you need for your black shiny spandex pants?

I'll have them made for you here in Beijing so you can pick them up when you come over and show how powerful QtWebKit can be ...

.d

Aiua said...

"yearning attention and approval, so readily available on the internet. Cough, cough..."

Man, you are impressive !
Great work !

Graphics View is getting better and better and I'm already loving it :)

Schalken said...

"...yelling angrily 'are you ready to roock?!'"

OMG... I thought I was the only one!

Great minds think alike. ;)

Mike said...

wow thats great...just great

Mike said...

are you going to make this code available or is it planned to be in a release of Qt....

Anonymous said...

Funky. I'm not sure how I would use it right now, but I'll think about it.

>but I did touch myself a little after getting it to work

LOL!

Nikolas Zimmermann said...

Wow, great work Zack!

Mike said...

as diego said: You ROCK dude!

On to my self serving quest for knowledge:

I'm hatching a plot to embed .mp4 or H.264 video in a Qt app, and the best solution I seem to be finding is to mind-meld Qt with Helix (as was done in Qtopia, but with a more recent version to get the desired format support). I'm hoping that I'm missing something terribly obvious and you can tell me that QVideoKit is available for download from the svn repositories and it should be going Gold stable in the coming weeks?

Here's hoping.

Anonymous said...

http://www.mydigitallife.info/wp-content/uploads/2007/07/spt.jpg

I see usefullness in this; A 3d timeline of our web browser's history?

This can be done Zack:
http://www.mydigitallife.info/2007/07/19/enjoy-your-3d-browsing-experience-with-spacetime/

Diego said...

very nice ideas Alex!

Dimitri said...

It's very cool and I can't wait to try it out. I've downloaded Qt 4.4 for mac, compiled and installed it. Now I want to use QtWebKit to generate something similar like this. But I'm a little bit stuck. Where can I get QtWebKit to view webpages from within my application? Shouln't this be embedded in Qt? Can you help me getting started?

Kind regards,
Dimitri

Dimitri said...

I forgot to leave my mail address here, so someone can contact me to help me out: dimitri.frederickx at gmail dot com.

Anonymous said...

Did you perform an comparison between cairo and qt4?