[pygtk] webkit as custom gtk widget ?

[Andre "Osku" Schmidt]

Hello pygtk World,

i'm now and then playing with the idea to be able to just draw your zui
widgets in like inkscape, "tag" them, and you're ready to go. the prior
experiments we're made with svg+javascript[0] but i dropped it pretty
soon, as i was afraid the performance on more complex widgets would be
horrible.

then i tried to learn c, so i could use clutter[1], to get hardware
acceleration at least for moving the "sprites". well, it[2] worked, but
i really don't want to write so much code what you need for c. alone the
hassle with xml and unicode...

so, now that i'm waiting for vala to go "main stream" ;) i got pretty
exited about the new <audio> tag in html5. made my custom svg+javascript
slider widget, only to realise that no browser yet supports a way to get
the size of buffered audio (nor current volume)... i got unispired, as
the widget would then be not so cool ;P

then i saw this cool tutorial couple days a go
http://www.aclevername.com/articles/python-webgui/

and got something done that does python<->webkit(javascript)
http://osku.de/simsui/simsui.js-pygtk-webkit-prototype.ogg
(a volume slider, to replace my gnome volume applet, if i knew how;)

yes, performance is bad (with complex widgets). but it would at least be
a nice simple (as simple in no need to handle svg parsing and drawing
the elements, nor events) experiment "framework". (yes, you can use
"any" browser to test the svg+javascript widgets, but you cant use any
system hardware nor libraries == very boring apps, at least for me)

so, is it possible to do a custom gtk widget from webkit ?

like having:

- mywebkitwidget.myfunction() in python executing a javascript function
myfunction() in the webkit document.

- mywebkitwidget.value in python would get a variable from the javacript
in the webkit document.

- gtk events i could trigger from the webkit document javascript...

i'm way over my (self learned wannabe coder) head with this stuff, 
so i may be talking all bollocks...

cheers
Andre "Osku" Schmidt

[0] http://osku.de/svg/gui-examples/
[1] http://www.clutter-project.org/
[2] http://osku.de/simsui/simsui-PROTOTYPE3.ogg

ps. if it's not obvious, (in this "volume/buffer" slider example) the
idea is that you have svg elements (yes groups are also allowed) that
have id's "track", "thumb", "stark" (comes from lautstärke and is 5
chars long. lol, didnt come up with anything more appropriate, sorry:)
and "stark_clip".

"track" (yes, it may have opacity 0) is which width (or height, if i
would have implemented it) "thumb" follows. "stark_clip" must be a
rectangle in the clip-path used by "stark", as its width is modified to
clip the "stark".

thats it.























































the code is so ugly and shamelessly assimilated from the tutorial,
so it's trying to hide down here...
http://osku.de/simsui/simsui.js.py.tar.gz
bugs included! ;)