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: All All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard:
Keywords: difficultyMedium, easyHack, filter:svg, skillCpp
: 144785 (view as bug list)
Depends on:
Blocks: Slide-Transitions SVG-Save
  Show dependency treegraph
 
Reported: 2012-06-23 04:19 UTC by Marco Cecchetti
Modified: 2024-02-22 16:46 UTC (History)
7 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 Comment hidden (obsolete)
Comment 10 jani 2016-05-26 09:04:52 UTC Comment hidden (obsolete)
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
Comment 12 Stéphane Guillou (stragu) 2023-05-09 22:51:25 UTC
*** Bug 144785 has been marked as a duplicate of this bug. ***
Comment 13 Devansh Varshney 2024-02-19 14:33:02 UTC
Just a quick question the 'miscDiagonalWipe' is not present in the sd/xml/effects.xml 

but it's present int the filter/source/svg/presentation_engine.js

  'miscDiagonalWipe'  : MISCDIAGONALWIPE_TRANSITION,
var MISCDIAGONALWIPE_TRANSITION     = 24; // 7


same for the    

 'pushWipe'          : PUSHWIPE_TRANSITION,



but, as given in point 2 they are present in the -

TransitionType.idl and TransitionSubType.idl

So, I just want to clarify that do I have add same in the effects.xml ?
Comment 14 Devansh Varshney 2024-02-19 14:50:09 UTC
(In reply to Devansh Varshney from comment #13)
> Just a quick question the 'miscDiagonalWipe' is not present in the
> sd/xml/effects.xml 
> 
> but it's present int the filter/source/svg/presentation_engine.js
> 
>   'miscDiagonalWipe'  : MISCDIAGONALWIPE_TRANSITION,
> var MISCDIAGONALWIPE_TRANSITION     = 24; // 7
> 
> 
> same for the    
> 
>  'pushWipe'          : PUSHWIPE_TRANSITION,
> 
> 
> 
> but, as given in point 2 they are present in the -
> 
> TransitionType.idl and TransitionSubType.idl
> 
> So, I just want to clarify that do I have add same in the effects.xml ?

One more question -

I am adding the support for the triangleWipe -

In the offapi/com/sun/star/animations/TransitionSubType.idl there are already variables which are assigned the value as described on the w3.org -

"triangleWipe" 	"up" (103) [default], "right" (104), "down" (105), "left" (106) 


    const short FADEFROMCOLOR = 103;
    const short FADEOVERCOLOR = 104;

    // Most of those below are non-standard, not in SMIL 2.0
    const short THREEBLADE = 105;
    const short EIGHTBLADE = 106;
    const short ONEBLADE = 107;
    const short ACROSS = 108;
    const short TOPLEFTVERTICAL = 109; // Is in SMIL
    const short COMBHORIZONTAL = 110;
    const short COMBVERTICAL = 111;
    const short IN = 112; // Not actually a subtype, and apparently unused
    const short OUT = 113; // Ditto
    const short ROTATEIN = 114;
    const short ROTATEOUT = 115;
    const short FROMTOPLEFT = 116;
    const short FROMTOPRIGHT = 117;
    const short FROMBOTTOMLEFT = 118;
    const short FROMBOTTOMRIGHT = 119;

    // Below are for the triangleWipe
    const short TRIANGLEWIPE_UP = 103;
    const short TRIANGLEWIPE_RIGHT = 104;
    const short TRIANGLEWIPE_DOWN = 105;
    const short TRIANGLEWIPE_LEFT = 106; 



So should I do this ?- 

    // Below are for the triangleWipe
    const short TRIANGLEWIPE_UP = 120;    //103
    const short TRIANGLEWIPE_RIGHT = 121; //104
    const short TRIANGLEWIPE_DOWN = 122;  //105
    const short TRIANGLEWIPE_LEFT = 123;  //106
Comment 15 Devansh Varshney 2024-02-20 11:09:04 UTC
Or instead of adding new subtypes should I use the - 

    'up'                            : UP_TRANS_SUBTYPE,
    'right'                         : RIGHT_TRANS_SUBTYPE,
    'bottom'                        : BOTTOM_TRANS_SUBTYPE,
    'left'                          : LEFT_TRANS_SUBTYPE,

Currently I have added these -

    'triangleWipeUp'                : TRIANGLEWIPE_UP_SUBTYPE,
    'triangleWipeRight'             : TRIANGLEWIPE_RIGHT_SUBTYPE,
    'triangleWipeDown'              : TRIANGLEWIPE_DOWN_SUBTYPE,
    'triangleWipeLeft'              : TRIANGLEWIPE_LEFT_SUBTYPE
};


aTransitionInfoTable[TRIANGLEWIPE_TRANSITION] = {};
aTransitionInfoTable[TRIANGLEWIPE_TRANSITION][TRIANGLEWIPE_UP_SUBTYPE] = {
    'class': TRANSITION_CLIP_POLYPOLYGON,
    'rotationAngle': 0.0,
    'scaleX': 1.0,
    'scaleY': 1.0,
    'reverseMethod': REVERSEMETHOD_SUBTRACT_AND_INVERT,
    'outInvertsSweep': true,
    'scaleIsotropically': false
};

aTransitionInfoTable[TRIANGLEWIPE_TRANSITION][TRIANGLEWIPE_RIGHT_SUBTYPE] = {
    'class': TRANSITION_CLIP_POLYPOLYGON,
    'rotationAngle': 90.0,
    'scaleX': 1.0,
    'scaleY': 1.0,
    'reverseMethod': REVERSEMETHOD_SUBTRACT_AND_INVERT,
    'outInvertsSweep': true,
    'scaleIsotropically': false
};

aTransitionInfoTable[TRIANGLEWIPE_TRANSITION][TRIANGLEWIPE_DOWN_SUBTYPE] = {
    'class': TRANSITION_CLIP_POLYPOLYGON,
    'rotationAngle': 180.0,
    'scaleX': 1.0,
    'scaleY': 1.0,
    'reverseMethod': REVERSEMETHOD_SUBTRACT_AND_INVERT,
    'outInvertsSweep': true,
    'scaleIsotropically': false
};

aTransitionInfoTable[TRIANGLEWIPE_TRANSITION][TRIANGLEWIPE_LEFT_SUBTYPE] = {
    'class': TRANSITION_CLIP_POLYPOLYGON,
    'rotationAngle': 270.0,
    'scaleX': 1.0,
    'scaleY': 1.0,
    'reverseMethod': REVERSEMETHOD_SUBTRACT_AND_INVERT,
    'outInvertsSweep': true,
    'scaleIsotropically': false
};
Comment 16 Devansh Varshney 2024-02-22 16:46:11 UTC
(In reply to Marco Cecchetti from comment #0)
> 
> 2) For a list of transition type constant look at:
>
> You need to update aTransitionTypeInMap, aTransitionTypeOutMap, 
> aTransitionSubtypeInMap and aTransitionSubtypeOutMap accordingly.
> 


The aTransitionSubtypeOutMap and the aTransitionTypeOutMap were removed on on Jan 23, 2017 because the reverse mapping can be done at run time. 

https://github.com/LibreOffice/core/commit/30672569d5576e86ea47e92c8bcb40416ebadd7c