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 