Bug 51358 - SVG: Add support for more slide transitions to svg documents exported by Impress
Summary: SVG: Add support for more slide transitions to svg documents exported by Impress
Status: NEW
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: Presentation (show other bugs)
Version: 4.0.0.0.alpha0+ Master
Hardware: Other All
: medium normal
Assignee: Not Assigned
QA Contact:
URL:
Whiteboard: EasyHack DifficultyBeginner SkillJava...
Keywords:
Depends on:
Blocks:
 
Reported: 2012-06-23 05:08 UTC by Marco Cecchetti
Modified: 2013-10-19 00:58 UTC (History)
3 users (show)

See Also:
i915 platform:
i915 features:


Attachments
Support for the checkerboard transition effect (464.02 KB, image/svg+xml)
2012-07-20 18:42 UTC, Horacio
Details

Description Marco Cecchetti 2012-06-23 05:08:55 UTC
In order to add a slide transition you need to work with the JavaScript presentation engine:
http://cgit.freedesktop.org/libreoffice/core/tree/filter/source/svg/presentation_engine.js
Don't be scared by the fact the file is really large you need to work only on small portions of it.
We use the barWipe slide transition for illustrating the steps to follows for adding a slide transition:

1) Choose the slide transition from here: http://cgit.freedesktop.org/libreoffice/core/tree/sd/xml/transitions.xml
For a visual description of the effect go here: http://www.w3.org/TR/2005/REC-SMIL2-20050107/smil-transitions.html#TransitionEffects-Appendix

2) For a list of transition type constant look at:
http://cgit.freedesktop.org/libreoffice/core/tree/offapi/com/sun/star/animations/TransitionType.idl.
For a list of transition subtype constant look at:
http://cgit.freedesktop.org/libreoffice/core/tree/offapi/com/sun/star/animations/TransitionSubType.idl.

If not present add the constants related to the transition you want to implement to the JavaScript engine: search for the BARWIPE_TRANSITION constant in the JavaScript file, the list of transition types is there; then search for DEFAULT_TRANS_SUBTYPE constant the list of transition subtypes is there.
Near to some type or subtype constant you can see a number commented out that number is the value of the constant in the C++ file, please keep such constants in the correct order.
You need to update aTransitionTypeInMap, aTransitionTypeOutMap,  aTransitionSubtypeInMap and aTransitionSubtypeOutMap accordingly.


3) You can get the transition parameters to be used here:
http://cgit.freedesktop.org/libreoffice/core/tree/slideshow/source/engine/transitions/transitionfactorytab.cxx
For the BARWIPE transition type with subtype LEFTTORIGHT we have:

    {
        // mapped to BarWipePolyPolygon:
        animations::TransitionType::BARWIPE,
        animations::TransitionSubType::LEFTTORIGHT, // (1)
        TransitionInfo::TRANSITION_CLIP_POLYPOLYGON,
        0.0, // no rotation
        1.0, // no scaling
        1.0, // no scaling
        TransitionInfo::REVERSEMETHOD_FLIP_X,
        false, // 'out' by subtraction
        false // scale isotrophically to target size
    },

You need to port such transition info to the JavaScript engine: search for aTransitionInfoTable, and create the correct info entry for your transition effect. For the barWipe transition effect we have:

aTransitionInfoTable[BARWIPE_TRANSITION][LEFTTORIGHT_TRANS_SUBTYPE] =
{
    'class' : TRANSITION_CLIP_POLYPOLYGON,
    'rotationAngle' : 0.0,
    'scaleX' : 1.0,
    'scaleY' : 1.0,
    'reverseMethod' : REVERSEMETHOD_FLIP_X,
    'outInvertsSweep' : false,
    'scaleIsotropically' : false
};

Note that there is no need to port the first two info entries (type and subtype).

4) Now we need to modify the createClipPolyPolygon method. First off look at the C++ implementation here: http://cgit.freedesktop.org/libreoffice/core/tree/slideshow/source/engine/transitions/parametricpolypolygonfactory.cxx. Then search for the JavaScript createClipPolyPolygon function: you will find the lines:

        case BARWIPE_TRANSITION:
            return new BarWipePath( 1 );

For the transition effect you want to implement you need to add the related "case" for the transition type and if it is needed also for the transition subtype (look at the pinWheelWipe transition case).
Now the final implementation step.

5) Create the class that implements the transition effect you have chosen.
Transition effect classes can be found here: http://cgit.freedesktop.org/libreoffice/core/tree/slideshow/source/engine/transitions.
For instance barwipepolypolygon.hpp and barwipepolypolygon.cxx implements the barWipe effect.
You need to port the class related to the transition effect you want to implement to JavaScript.
For the barWipe effect the JavaScript class is named BarWipePath.
In order to create or precompute the initial base path you can utilize helper functions such as PathTools.normalizePath and PathTools.createPathFromEllipse, give a glance to the EllipseWipePath class.
You can read more on how slide and shape transition has been ported/implemented here: https://docs.google.com/document/d/1GSLPSIWRGSDTSi69dT9Te8tRyTJcAekxT7scoCoGO2M/edit?pli=1#heading=h.zak45bwtec07.

6) Now you need to create a presentation with Impress that utilizes the transition effect you have ported. Please be sure that the presentation has at least 2 slides or the JavaScript engine will not be embedded into the exported svg document. Open the exported svg document with a browser and look how it works. Maybe you'll need to install some debug tool. For instance for Firefox there is the Firebug extension.
For a working example you can look at: http://users.freedesktop.org/~thorsten/gsoc-2012/slide_transitions-week3/
Comment 1 Horacio 2012-07-20 18:42:16 UTC
Created attachment 64462 [details]
Support for the checkerboard transition effect

The checkerboard transition effect was implemented following the steps in this easyhack. Check the attachment for the effect. The code can be viewed at
http://cgit.freedesktop.org/libreoffice/core/commit/?id=6ee666c53da83982784ea59894479a8b93c8ecd7
Comment 2 Björn Michaelsen 2013-10-04 18:47:59 UTC
adding LibreOffice developer list as CC to unresolved EasyHacks for better visibility.

see e.g. http://nabble.documentfoundation.org/minutes-of-ESC-call-td4076214.html for details
Comment 3 Robinson Tryon (qubit) 2013-10-19 00:58:42 UTC
Removing comma from whiteboard (please use a space to delimit values in this field)
https://wiki.documentfoundation.org/QA/Bugzilla/Fields/Whiteboard#Getting_Started


Use of freedesktop.org services, including Bugzilla, is subject to our Code of Conduct. How we collect and use information is described in our Privacy Policy.