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 will play the following roles.
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
The MadButterfly will save all of its data inside a SVG file. This SVG file is called MBSVG file.
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.
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
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
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]] 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.