Aakriti's blog

Posts Tagged ‘stage

Presentations, the [new] Stage way!

with 10 comments

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.



Written by aakritigupta

August 6, 2011 at 5:13 pm

Posted in Work

Tagged with , , , , ,

GSoC project: Single canvas presentation mode in Calligra Stage

with 3 comments

Hello Planet!

This blog post is about a new kind of presentation in Calligra Stage which I will be implementing as my project for Google Summer of Code.

The conventional style of presentation is a slideshow. But this paradigm is one in which thoughts are presented in a linear fashion. But certain presentations need the flow of thought to be shown more clearly. You would want to present your ideas in the manner that they occurred to you.

This feature will create for the user a single canvas on which he can add his ideas anywhere in the form of images or text (and videos in future?)
The user can jot down the content of the presentation on the canvas and mark out sections of the canvas as ‘frames’. The presentation will proceed from one frame to the next by spatial movements and rotations. Different zooming levels can be set for each frames: you can emphasize on a point and then zoom in to show the details.

You could even have frames within frame within frames. Think of it as zooming into a particular rectangular section of a ‘slide’ so that it fills up the screen. And then zooming inside that new section again into another section/frame. And so on and so forth. 😉

The presentation will essentially be an animated SVG and can be played in any browser that supports SVGs. The animations can be done using either SMIL (SVG’s own implementation of declarative animations) or Javascript – the js code can be embedded inside an SVG’s XML.

Sample SVG presentations:
Kevin Ottens used a single canvas SVG presentation at the KDE4.6 release party at Toulouse, France this March.
Lydia Pintscher used this SVG presentation for her talk at conf.kde.in. in March this year.
Just use the arrow keys to proceed through the presentation, for example the right arrow key to go forward and left to go one frame back in the flow.
These presentations were made using Sozi of Inkscape.
Similar presentations can be made online at Prezi; but these use flash :/
I will be adding support for animation to the SVG filter used by Karbon.
Right now, the community bonding period has started; I’m using this time to to get familiar with the community, the code base, and have started working on adding support for exporting a text shape to an SVG. This had been filed as a bug here.
A big thank-you to Thorsten Zachmann and Jean-Nicolas Artaud who are mentoring me for this project, and to the KDE community in general for the warm welcome. 🙂

Written by aakritigupta

May 2, 2011 at 7:09 am

Posted in Uncategorized, Work

Tagged with , , , ,