I am currently at the Desktop Summit in Berlin. The city is awesome and it has been great walking around the cathedrals, talking boat rides and clicking lots of pictures.
I am building a new mode in Stage where a user can make animated SVGs, as my GSoC project. Today I presented my work and an animated presentation at the Desktop Summit. 🙂 Sozi‘s javascript codebase is used for the animations. A change from the typical slide shows, ‘Sozi’ is a toolkit to make animated SVG presentations.
Right now, I’m testing this work in Karbon, which has superior SVG support. This is nice because a lot of the code is shared in Calligra. Once the UI is done in Stage, I will be testing there.
This is the work I’ve done so far – for those who don’t like long posts, scroll down to a video of making a short presentation and my presentation at the DS.
Step #1
Make some SVG-related classes used in Karbon, generic.
Karbon had good SVG making tools. So, I first made these SVG specific classes generic and ported them to a new lib, ‘libsvg’.
However, later Jan Hambrecht started working on a new library for SVGs, with the aim to promote SVG support. Thats a great idea.
So for now I am using my own ‘libsvg’, but once his library is done, I will remove my library, and use his, for it will be a more generic and better one.
Step #2
Making a new shape – PresentationViewPortShape
A PresentationViewPortShape or PVPShape for short, is ‘[ ]’ (square bracket) – shaped. It is used to mark out a region on the SVG poster or canvas. The shape is a view port.
Imagine a huge poster, where the camera frame moves from one portion to another instead of the poster moving itself.
Each view port in the presentation is numbered. When the SVG, animated through Javascript is ‘played’, it displays the elements contained in the rectangular region marked out on the canvas by the PVPShape. Zooming, transition style, transition duration, etc. can be set to define the animation for between pairs of viewports.
You can even add a viewport inside a viewport! This lets you display an idea first and then zoom in to the details of it.
The shape was a nice idea from my mentor, Thorsten Zachmann.
Step #3
Saving and loading of a PVPShape
This was simpler. I save the rectangular region marked out by the PVP as an SVG ‘rect’ and save the attributes for animation as a custom defined element, ‘calligra:frame’.
The ‘hide’ attribute of the custom element is kept to be ‘true’ always, so that only the contents of the view port are visible without the rectangle itself been drawn around it.
This gives the effect of a continuous single canvas.
Step #4
Tool Options for the PresentationViewPortShape
This is what I am trying to finish off at the moment. The tool options will let the user set the animation properties of the view port.
Future steps:
Step #5
Design an intuitive way to adjust sequence of view ports in the SVG editor, may be by inserting an arrow between 2 view ports. An arrow shape?
Using the ‘sequence’ attribute of the ‘calligra:frame’ connecting arrows will be drawn on the canvas while the user is editing the presentation in Stage.
Step #6
Integrate this tool in Stage
So far I have been testing my work in Karbon. I will now work on the UI for the new mode in Stage to make these presentations.
Video and presentation
The SVG presentation I displayed at the Desktop Summit can be found here. Use the left and right arrow keys, space bar or the return key to run the presentation.
(Doodling credits: Aditya Bhatt)
Here is a video of the workflow (that can be used so far) and here is the SVG made in this video.
Horses and Cherries 
Great work!
This looks *awesome!* The opportunity for business / project demonstrations here is very, very high. I can actually see myself sketching illustrations in Krita, laying them out in Karbon and then animating in Stage.
Any idea when this will hit master?
For now, I have been testing all my work in Karbon, so eventually you can make the entire presentation in Stage itself, with some illustrations from Krita maybe.
After the Google Summer of Code period is over, I will spend some time improving the codebase according to reviews. You can find the code in the branch stage-singlecanvas-aakriti for now.
This_Is_Something_What_Have_Been_Needed_!
Presentations are boring without animations. Yes, you can always overuse the animations but something small to now and then to catch attention is needed.
i just took a look at those types of presentations shortly – just if you don´t know them all:
what i found – the first one to come up was prezi ( http://www.prezi.com/) – commercial one, uses flash – quite similar http://www.ahead.com (also commercial).
Based/Inspired on prezi there are (all opensource):
Jessyink – http://code.google.com/p/jessyink/ – can be integrated into inkscape
Sozi – the one you mentioned – just the same – integrated into inkscape
and finallay: Dizzy – a prezi “copy” – using java instead of flash.
I myself would prefer Dizzy´s approach – because of the simpleness.
Cheers
Really nice work so far, keep going on like you do !
See you.
Great work, your presentation at the DS was awesome! I’m proud etc. 😀
dude you need a better demo … some text, some real animations, something showing that this is actually a presentation. The only reason I understand what you’ve done is because I’ve tried Sozi already; any new users will be like “it’s a picture of a pig, so what?”
You have missed out the line in the post with a link to a presentation. “The SVG presentation I displayed at the Desktop Summit can be found here. ”
This is the link: http://db.tt/1FaMr4v
The video was a small outline to the workflow.