This page contains information for the MadButterfly verb of the inkscape. In order to integrate the inkscape with firefox seamlessly, we implement a special effect which can replace the document with a new one from the firefox. We will explain the protocol and procedure in this page.

The UI design is available at MadBuilder.

The inkscape helper

The inkscape helper will play the following roles.

• It will launch inkscape with customized menu and toolbar to keep necessary items only.
• It will execute a daemon which can help the javascript to send USR2 signal to the inkscape.
• It will proxy the RPC call from the javascript and redirect it to the inkscape with correct port number.

We should execute the inkscape helper instead of the inkscape itself in the mozplugger. The helper will execute inkscape and tell it to use special configuration files. The mozplugger will recognize the window created by the inkscape and embedded it into the browser.

After initialization, the inkscpae helper will play as a RPC proxy at port 19120. Therefore, the javascript can use XMLHTTPRequest to send RPC calls to this port. The inkscape helper will proxy all calls to the inkscape except

• start: Send a USR2 signal to the inkscape to start the extention. The helper will start a persistent connection to the inkscape.
• finish: The helper will terminate the session created bvy the start.

MB SVG file

The MadButterfly will save all of its data inside a SVG file. This SVG file is called MBSVG file.

Switch scene

When we switch scene, we need to hide a list of groups and show another set of groups according to the scene definition section. When load an MBSVG file, the firefox will read the scene section and then use it to build a table that each column represent a scene. When we click on any cell, we will tell inkscape to hide all groups in the previous scene and show all groups in the new scene.

This is done via the EffectMadButterFly verb of the inkscape. This effect will start a HTTP server on port 19121 and wait for the command from the inkscape helper. It will be executed until it receive a PUBLISH or CANCEL commands. If a PUBLISH command is received, it will output the new SVG file back to the inkscape. Otherwise, it will return the old data instead.

Therefore, when users press the cell, the javascript will connect to the 19120 port of the inkscape helper and then send SCENE commands to the MadButterfly effect filter to change the display properties of these groups. Finally, it will send a PUBLISH command to terminate the effect filter and then the inkscape redraw itself to reflectthe new scene.

Switch time

Animation

When we are in a scene, we may define animation for each objects in the scene. Each objects in a scene may be in different states in different time. For example, an object may appear from 0 to 3 seconds and another one may have different size in different time. In the language of the MadButterfly, we can create a program for each scene. Each obejct in this program can have one or more actions on it. Each action has the following properties

• Start time
• End time
• Action type
• Action parameters

For example, if we want to move one object from (0,0) to (100,100) in fixed speed from 1 second to 4 second. The properties of the action will be

• Start time: 1
• End time: 4
• Action type: Move
• action parameters
  • Origin: (0,0)
  • Target: (100,100)
  • move method: Linear

In this case, when the current time is 3. The location of this object will be (66.7,66.7).

In the animation editor, we will allow users to add as many actions as possible in a scene. Each action will be executed during its start time and end time. In the UI, we will show multiple horizontal timeline and one vertical time line. The vertical time line indicate the current time. When we want to move an object, we should move the vertical time to the start time and then click 'Add word'. You will see an rectangle block is display at the time line. Please select the action type as 'shift'.

You can drag the thumbnail in the global time line to change the start and end time of a word. When a word is selected, the object will be moved to the target location, which is (100,100) in this case. We can move it to any place. When we move the object, the vertical time line will be moved to the end of the word to indicate the location is the end location of the action. If the action requires more than one time parameters, multiple vertical time line may be displayed. We can drag the location of these lines to adjust the parameters. In addition, please click the tag line before you adjust the parameters.

The video in http://tw.youtube.com/watch?v=ir-PjD4dIPI[[http://tw.youtube.com/watch?v=ir-PjD4dIPI]] illustrate how to use this interface.

When we move the vertical line, the firefox will send command to the inkscape to ask it to adjust the location and transformation of the SVG objects to reflect the current situation of the scene. However, the inkscape will not be editable unless the time line is 0. The Madbutterffly effect must lock the whole SVG file unless the timeline is zero. However, we can still edit a single object by click the object and select edit object effect. In this case, we will invoke another instace of the inkscape to edit it.

RPC API

SCENE

PUBLISH

CANCEL

ConvertToSymbol

ConvertToButton