We extend the inkscape as the GUI designer for the MadButterfly. This extension will help us to

• Edit the multiple scene SVG file.
• Assign the name of the object which can be modified by the javscript.
• Edit the animation.
• Edit the UI flow

The extension itself is implemented by the Python under the inkscape-pybind framework.

Object editor

Animation editor

The animation is implemented as part of the scene editor. We can use the tween type selector to change the tween type between

• Duplicate
• transform

When we change the type to be transform, the SVG animation tag will be inserted into the scene group automatically. We will compare the elements in the two scene groups and then generate correct animation tags. For each elements in the original scene group, we will search for the elements in the target scenen group. If a match is found, we will generate the animation tag in the original scene group.

The search algorithm is

• Search for the objects with the same inkscape:label
• Search for the object with the same tag name and style

If no object is found, we will generate an animation tag which remove the object in the end of the animation.

In the inkscape, we need to add a tween type selector. This is the easy part.We only need to search the scene, which contain the selected frame and then update the type in the class frameline.

The difficult part is to calculate the animation by using the above algorithm. Since we support group animation only, all attributes will be applied to the scene group. We need to keep an original copy of the transform matrix as well so that we can restore it when we save the file. Users should not modify the intermediate frame which is generated freom the key frames. Therefore, when we diswplay a scene group outside the key frame, we should prevent users from editing it. Instead, we should create a copy of the scene group and modify the transform matrix of it instead. In this way, it won't affect the final result even the users unlock the scene group manually and modify it. Actually, the better way is to implement a new facility which can disable the editing function of selected objects permamently.

So, the scene selection algorithm will become.

1. Scan for all layers and do the following job for each layer
2. For each layer, if it does not have a scene which contains the current frame, hide it.
3. If the intermediate_group of the layer is not empty, delete it.
4. Otherwise, if the current frame is a key frame, display the scene group directly.
5. If this is not a key frame for this layer, we need to duplicate the scene group and then modify the transform matrix according to the duration and the current frame time. Save the duplicate group id to the intermediate_group of layer object.

The following items is added into the MadButterfly module for the inkscape.

• A combo box to select the tween type.
• A function to generate the intermediate scene group.
• A function to remove the intermediate scene group.
• A function to insert the SVG animation tag according to the tween defined in the scene.

Javascript API for the animation

Once the animation is designed correctly in the inkscape, we need to import it into the nodejs and then draw the animation inside the MadButterffly. However, there is no timeline concept in the MadButterfly. We need to define a way to associate the timeline into the MadButterfly animation model.

In the MadButterfly, the animation is composed of a set of tweens against objects. We need to start an animation. This means that the timeline is stalled until we start it. In addition, there are different timeline for different objects.  In our inkscape tool, we have one timeline only. When we change the scene, all objects might be modified in the same time.

Another differentce is that Madbutterfly have no concept to play backward. All animation is played toward the future. The timeline-based animation allows us to play go back to the past. The MadButterfly will change the transform affine matrix directly. This disable us to restore the setting. Therefore, we need to modify the MadButterfly to "remember" the original styles so that we can go back to the past.

Another problem is the objests in different frame. Currently, we assum that objects in different scene are different. They are actually different objects in the differetn groups. For example,

<g id='layer1'>
    <g id='scenea-1'><rect id='1122' /></g>
    <g id='scenea-2-3'><rect id='1122-1' /></g>
</g>    

The  rect 1122 and 1122-1 are the same object in the different scene. However, when we change from scene 1 to scene 2, we are actually remove the rect 1122 and add rect 1122-1 even they have exactly the same attributes. This is OK for scene change. However, for the animation, this will degrade the performance a lot. Therefore, our animation module muyst ne smart enough to detect the object are the same so that we don't need to add a new obejcts at all.

Currently, the Madbutterfly is far from that. We only simplily hide the group scenea-1 and show the group scenea-2-3. In order to improve the performance, when we change from opne scene to the otehr one. We need to check

1. We need to scan all objects in the original scene.
   
   1. If the object is not available in the new scene, hide it.
   2. If the object is available, update the attribute according to the scene setting.
2. Scan all obejcts in the new scene
   1. If the object has been used in step 1, hide it.
   2. Otherwise, this is a new object, we need to show it.

In order to get hiest performance, we can not judge if two objects are the same in the runtime. Instead, the inkscape tool must decide it for us. When we duplicate the keyframe, we should set an attribute ref for every objects. The value of it is the id of the original objects. If we duplicate the keyframe again, we need to copy the ref directly. For example, we may have

<g id='layer1'>
    <g id='scenea-1'><rect id='1122' /></g>
    <g id='scenea-2-3'><rect id='11221' ref='1122' /> </g>
    <g id='scenea-4-8'><rect id='112212' ref='1122' /></g>
</g>

The 1122, 11221 and 112212 are the same objects. We should use the objects in the origin group only. Therefore, when we parse the SVG tree. All objects with the ref attribute will not be created physcially. They are only hold the attributes which is required by the animation module.

UI flow editor

Component Manager

A component is a group in a SVG document with a set of actions.  The SVG elements of a group is representation part of a component.  Actions of a component is behavior part.  An action is actually an animation instruction sequence.  We need a Component Manager to define components.  The component manager looks like a layer manger of Inkscape, is a list of components.  Users add a component to the list by select a group and add to the list by a dropdown menu.  Of select a group and click on "Add" button below the list.  The group content of a component can not be changed by users, except the user make inkscape entering "action editing mode".  It is triggered by click on the component entry in the component list, and select an action on the action list for the component to enter "action editing mode".

The action list is a list of actions associated with the selected component.  The action list is updated when a component, other than current one, is selected.  You can add/remove or rename an action in the list by clicking buttons below the list.  The component list is a list of components, you can add/remove/rename a compnent by clicking buttons jsut below the list.

When the user make a group as a component, the group was moved to <svg:defs> section.  And create a xlink at its origin location in the SVG dom-tree.  When edit a scene, you add an instance of a component to the scene from the component list.  It create a xlink in the subtree of th scene.

Action Manger

An action is a sequence of animation instructions.  A component; a button for example, is associated with some actions.  The program call an action of a component to play an animation as the response for user's action.  For example, grow a button if a user press the button.  The program call an action to grow a button.  The action manager is a list of actions with the capability to add/remove/rename actions.

Action Eidting Mode

When the Inkscape is in action editing mode, all nodes in the canvas can not be modified, except the component that editing action is associated with.