Bug 51357 - SVG: Add support for more shape transition effects to svg documents exported by Impress
Summary: SVG: Add support for more shape transition effects to svg documents exported ...
Status: NEW
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: Impress (show other bugs)
Version:
(earliest affected)
4.0.0.0.alpha0+ Master
Hardware: Other All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard:
Keywords: difficultyBeginner, easyHack
Depends on:
Blocks: Slide-Transitions
  Show dependency treegraph
 
Reported: 2012-06-23 04:19 UTC by Marco Cecchetti
Modified: 2018-02-22 12:39 UTC (History)
6 users (show)

See Also:
Crash report or crash signature:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Marco Cecchetti 2012-06-23 04:19:19 UTC
In order to add a shape effect 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 shape effect for illustrating the steps to follows for adding a shape transition:

1) Choose the shape effect from here: http://cgit.freedesktop.org/libreoffice/core/tree/sd/xml/effects.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 utilize 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/shape_transitions-week3/
Comment 1 Horacio 2012-07-20 18:34:51 UTC
Created attachment 64460 [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:04 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:13 UTC Comment hidden (obsolete)
Comment 4 d.sikeler94 2014-08-29 11:14:26 UTC
Hello, I'm going to add the support for the Iriswipe-Transitionl.
Comment 5 d.sikeler94 2014-09-01 08:50:19 UTC
Hello,
I have a problem with the export. In the exported svg-file there is no javascript integrated. So i can't test anything. Are there any special parameters for the autogen.sh to set? What else can be the reason for my problem?
Thanks for helping me.
Comment 6 d.sikeler94 2014-09-08 07:48:39 UTC
I'm sorry, but I can't do the IrisWipe-Transition anymore, because I get some kernel rejected CS messages when using the IrisWipe. So it's still left to be implemented.
Comment 7 Robinson Tryon (qubit) 2015-12-13 10:12:11 UTC Comment hidden (obsolete)
Comment 8 Robinson Tryon (qubit) 2016-02-18 14:51:38 UTC Comment hidden (obsolete)
Comment 9 jani 2016-04-18 07:29:31 UTC
A polite ping, still working on this issue?
Comment 10 jani 2016-05-26 09:04:52 UTC
Unassign due to lack of work
Comment 11 Ekansh Jha 2018-01-28 19:58:28 UTC
Hello, I would like to work on this issue,
I have few doubts about the first task

>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.

What do you mean by *correct order*?Could you please brief it.

>You need to update aTransitionTypeInMap, aTransitionTypeOutMap,  >aTransitionSubtypeInMap and aTransitionSubtypeOutMap accordingly.

Moreover I can't find aTransitionSubtypeOutMap and aTransitionTypeOutMap in https://cgit.freedesktop.org/libreoffice/core/tree/filter/source/svg/presentation_engine.js