Single-canvas Presentation Mode in Calligra Stage

Aakriti Gupta

Short description: A new mode in Stage to make a single canvas (SVG) presentation: The user can jot down his ideas on a single infinite canvas and mark out sections of the canvas as frames.The presentation will proceed from frame to frame. Different zooming levels can be set for the frames: you can emphasize on a point and then zoom in, to show the finer details, in the next frame. So, you can make the presentation as you think and think as you make and the audience follows your chain of thought when you present!

Name: Aakriti Gupta
Email Address: aakriti.a.gupta@gmail.com

Freenode IRC Nick: aakriti
IM Service and Username: Google Talk, user name - aakriti.a.gupta
Location: Gandhinagar, India, UTC + 05:30

Proposal Title: Single-canvas Presentation Mode in Calligra Stage

Motivation:


First of all, a very impressive example. Follow this link for Kevin Ottens' (ervin) SVG presentation at the KDE4.6 release party in March, 2011. [It is best viewed in Firefox browser.]
This presentation made using Inkscape's tool Sozi, alone explains the concept behind this project and why this would make Calligra so much more awesome!


Thoughts and ideas are not produced linearly. Then why present them in a linear
fashion using slides?

Why not like a mind-map?

In a conventional slide show we often encounter things like:
"..and I have explained this a few slides later.." or
"Let us go back to the beginning of the discussion.." <back back back...>

Sometimes the audience tends to lose focus seeing the same slide template again
and again or because the presenter may not able to depict a clear link between
his ideas.

While making the presentation we often wish to jot down ideas as they come and
then present them in the way that they first occurred to us.

A single canvas presentation will let you do precisely that!

    The work flow would be in such a way (described below) that you can think as you
make the presentation or make it as you think! As the audience will follow your chain of thoughts they will stay focused for longer! Not to forget, the animations and graphics will visually appeal to them more.

How to make this presentation?

Step 1: Choose single canvas presentation mode in Stage
Step 2: Thrown in your ideas on the canvas as they come!
Step 3: Collect and re-arrange similar ideas.
Step 4: Mark out frames* by selecting a region on the canvas
Step 5: Set frame properties - transition time, zooming level,
frame title, link frame to,etc. (This will be a new docker for frame properties)
Step 6: Test your presentation (In a full screen QWebView opened by Stage or in a browser.)
Step 7: Impress!
Display your presentation in a browser or the QWebView opened by Stage.


Who can use this tool?

  • Kevin Ottens uses an SVG presentation at the KDE4.6 release party!
  • Lydia Pintscher, our community manager, uses it to give a talk at conf.kde.in

Here is her presentation: somuchtodo.svg
(This presentation is best viewed in Firefox browser.)


  • A middle school Science teacher could explain the food chain using this tool.
  • A journalist or crime investigator could explain his estimate of the chain of events on a crime scene and how he reached the conclusions.
  • The idea behind a marketing project can be explained just as it came to the presenter.


                                                  OR

  • YOU could use it as a photo presentation tool and display your last summer trip's photographs on your website!

Where can similar tools be found?
Tools like Sozi in Inkscape and Prezi are used to make such single canvas presentations. Here as a example of SVG (Sozi) embedded in a web page.
But no office suite has it yet. Calligra Stage could now have another style of making presentations!

What makes this SVG presentation even more desirable?
This animated SVG presentation can be played in any browser that supports SVG. So, you can embed it in a web page or even run it on your mobile phone browser!

 

Implementation details:
What I need?

  • An SVG export filter to save all the animations other than the usual attributes of an SVG.
  • A QWebView to test the presentation
  • A changed set of menus for this new mode as the work flow will be different from conventional slide shows.
  • A new docker for frame properties.


What I have?

  • Presently there is an SVG export filter in Karbon. It saves a Karbon document as an SVG.
  • All KoShapes (artistic text box, image, rectanlge, polygons, etc used in Calligra) except for a text box(KoTextShape) are exported successfully.


What I will need to do?

  • Port the SVG export filter to the libs so that it can be used by other apps of Calligra too.
  • Add support for saving KoTextShape. (This is listed as a bug and I am already working on this.)
  • Add support for saving attributes of the frames. From the SVG presentations I ahve seen so far, I have decided on adding the following attributes for animation, which I think will be enough for a good animated SVG:
    • To render each frame, the SVG attribute - 'viewBox' will be used.
    • Frames would have attributes: time span for which to display, zoom percent, sequence, frame title, width, height, x, y, transition style (linear,etc.), transition duration.
    • For now I think these would be good enough to make a good SVg animation. Work for exporting of shapes is already done. I would need to define the attributes for the frames.So much of work this can be completely in the time I have set aside for it. As I learn of other attributes needed I will add them.
  • Support for user control while presenting
    • The are 2 ways of animating an SVG - SMIL or Javascript.The edge that javascript has over SMIL is that, the former offers better user control over the SVG. Since this will be a presentation feature, I will be using Javascript to implement certain animations and user control features.
  • Add custom data to KoShapes:
    • Each frame* will have properties such as - zooming level, transition time, title, rotation,etc.These would be the custom data of the KoShapes.
    • The frames will be stored with IDs.
  • A QWebView for testing/viewing the presentation:
  • UI aspects:
    • A new docker for frame properties
    • Change of menus as required
    • The links between the frames will be shown by numbering the frames and showing paths(primary path and alternate paths) to other frames.

*What is a frame?

  • A rectangular region marked out on the canvas.It will occupy the entire screen at the time of presenting, like a slide in conventional slideshows.
  • The user can move from one frame to another by arrow keys.
  • A frame can contain frames within itself, i.e.child frames. Child frames can be viewed to elaborate on a point made in the presentation. A shape or grouped-shapes can be marked as a frame.
  • Each frame would be a node in a connected graph.These nodes will be assigned IDs to be stored in a list.This will be according to the default paths of the frames set by user.Thus the order of display of frames will be determined.


Tentative Timeline :


Community bonding period: April 27 - May 24
Study the code base further, bond with the community better and plan out finer
details of the project

Coding period: May 25 - August 16
Documentation and writing tests - This will be done along with the coding work so that it is not left for the last minute.


Week 1 - 6: May 25 - July 10
Add animation attributes as custom data to KoShapes
Port the SVG export filter to the libs.
Add enhancement to the SVG export filter to save the animation attributes.
Implement new docker for frame properties
Implement selection of frames


Week 7 - 8 : July 11 - July 24
Mid-term evaluation
Implement setting paths from frames
Add QWebView widget

Week 9 - 10: July 25 - August 7
Rigorous testing and bug fixes
Improve animations/transitions

Week 11 August 8 - August 16
Testing and bug fixes
Pencils down!

Week 12 : August 17 - August 21
Finalizing all documentation and tests.

Week 13: August 22 - August 26
Firm 'pencils down'.
Submit final evaluations to Google.


Post GSoC:
If time permits during the GSoC period or after it I would like to do the
following:


I would like to make this project better by adding the following features
as and when I get time:
1. Conversion of slides to SVG presentations.
2. Templates/Themes
3. Any suggestions from the community that can make this tool even better!

    As I discussed with Thorsten Zachmann, Jean-Nicolas Artaud and Jan Hembrecht, we could create a new app for this feature and isolate it from Stage.This way a user can easily choose between Stage and the new app according to his needs. After GSoC I will work with Jean on this new app.
Tentative timeline: August 22 - August 31 and September 12 onwards again.



Time commitments :
    I will be available for work all through the specified GSoC period, i.e. April 27 - August 26 and also after that, as I have mentioned below. My summer break is from May 1 - July 24. By then most of my coding work would be complete and I will be able to manage the documentation work after school re-opens.
    During the summer break, I won't have any major commitments that could hinder my
coding work. I will be devoting at least 40 hours of work per week.

Why this project is important for me?
   With this project I will be beginning my contribution to open source software! That would be a great way of giving back to the community. I will also get to see millions of people use my code!!
   I will spend the summer constructively learning good software development.
... and simply because I find this feature cool and want to implement it!

Why should I be selected for this project?

My preparation for the project:
   I have been touch with- Thorsten Zachmann (Zagge) , Kevin Ottens (ervin), Jan Hambrecht (jaham) and Jean-Nicholas Artaud (morice-net) regarding this project.
   After long discussions on the mailing lists, the IRC and during the recent Calligra Sprint we planned out this implementation, so that it is feasible in the time duration and also good in terms of usability.
   During this process of planning out the project, I acquainted myself with the code base of Calligra and the scripting of SVGs which is needed for this project.
   I specifically studied the export filter for SVG in Karbon.

My experience:
   Having used KDE for about a year, I got interested in contributing to it and compiled KDE4 from the git repository. I am comfortable with Qt and C++.
   Also, for quite some time I had been thinking of a note taking app, mainly to learn Qt.
So I started with a little app - MindPadIts incomplete since I started searching on this project once I found this idea on KDE wiki.
   While discussing the project with Zagge and morice-net, I learnt a lot about SVG filters, usability issues and most importantly how friendly the community is!
   I have worked in a team of developers, reviewers and story board designers before and developed J2ME games as part of a research project, MILLEE for almost a year. I am experienced in working with people from different cultures and in different time zones.
   I learnt to figure out things myself by digging out details, Googl-ing and asking for help only if I cannot solve it myself.

About Me :

   I am a 2nd year student of Information and Communication Technology at Dhirubhai
Ambani Institute of ICT,Gandhinagar, India.
   I am an open source enthusiast and eagerly wish to contribute to this great community. I believe in the power of open source because working in the ‘open’ ensures high quality development, the best that a community of awesome developers can produce. Contributing to open source is satisfying because you get freedom to make software as you like it (and of course for others too) and your work is used by millions!
   It means good work, intellectual satisfaction and a lot of cool and important stuff for the users.
   Apart from coding, I like to read books, ranging from philosophy to comedies, fantasy to biographies. My favourite author is Ayn Rand.
   I love watching cartoons! Tom and Jerry is my favourite.
   I love to laugh and I laugh very hard!

  I believe in learning constantly from mistakes and not giving up!