Software Engineering Project Proposal Declara Denis March 21, 2012
Figure 1: Inkscape logo
1
About Inkscape
As stated on the official Inkscape website (http://inkscape.org/): An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format. Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.
2 2.1
Application Domain Vector Graphics
As written in the above description, Inkscape uses vector graphics. In contrast to raster graphics, which use a grid of pixels to represent an image (e.g. bitmaps, jpeg), Inkscape uses geometrical primitives such as lines, circles, cubic bezier curves and many others. This approach allows to scale a drawing without loosing any detail. Take a look at Figure 2 for comparison.
(a) Full size
(b) Zoomed vector
(c) Zoomed raster
Figure 2: Vector vs Raster graphics comparison
1
2.2
Scalable Vector Graphics (SVG)
SVG is a specification for an XML based vector graphics file format. It is an open standard developed by the World Wide Web Consortium (W3C). SVG supports both static illustration, as well as interactive (scripted) or even animated content. This technology can be found in most modern browsers nowadays, and can be embedded in html documents. For example the d3.js framework uses SVG extensively to generate it’s graphics. As an example Figure 3 shows a graph generated by d3, where the graphics are composed entirely by SVG elements. Figure 3: d3.js Graph
3 3.1
Feature Proposal Introduction
A drawing in Inkscape is made up of objects, like shown in Figure 4. The balloon is made up of 3 separate objects, one for the rope, one for the balloon and one for the highlight in the top right corner. Furthermore Inkscape allows to bundle a set of objects together in a group, which behaves just like a single object. There exists already tools, that allow to align selected objects on the vertical/horizontal axis, as well as arrange them on a grid. Few other tools exists, such as one that randomizes object positions, Figure 4: Inkscape Objects or separates overlapping objects. There is however no quick way to lay out objects along a circle. I propose a tool, that allows to dispose the selected objects in a circular way. The following image shows an example, where this new feature would be useful:
(a) Input
(b) Output
Figure 5: Usage Example As you may see in Figure 4, several copies of the same object are laid out on the circle provided as input. This is just one usage example, in the following section, I would like to show some more usages and only afterwards talk about the technicalities.
2
3.2
Examples
In this section I will provide mostly graphical usage examples. The left image will always be the input we give to the tool. The one in the middle is the output with the addition of some conceptual guidelines. Finally the picture on the right shows the result. 3.2.1
Example nr. 1
The first example simply shows 3 object laid out on a circle
(a) Input
(b) Intermediate Result
(c) Output
Figure 6: Usage Example nr. 1
3.2.2
Example nr. 2
This next example shows a more practical usage, with more objects. As you may notice this time the objects rotate when following the circle, where in Example nr. 1 they did not.
(a) Input
(b) Intermediate Result
(c) Output
Figure 7: Usage Example nr. 2
3.2.3
Example nr. 3
Finally this example shows how to arrange the stars like in the European flag. Similarly to the first example, also here the objects do not rotate.
(a) Input
(b) Intermediate Result
Figure 8: Usage Example nr. 3
3
(c) Output
3.3
How it works
The process of arranging the selected objects on to a circle can be broken down in the following steps: 1. Determine the order in which the objects will be placed on the circle/ellipse/arc. 2. Determine an anchor point for every object that will be used for the calculations. 3. Determine the parameters of the circle/ellipse/arc to place the objects onto. 4. Move the objects, so that their anchor points match the circle/ellipse/arc and eventually rotate the objects to follow the circle/ellipse/arc rotation. 3.3.1
Object order
Picking the order in which the objects are placed on the circle is important if we have different objects with different shapes. In Figure 6 you can see that following the circle in a clockwise direction, we have at the beginning the square, then the star and finally the circle. If we would choose a different order, the final output would turn out differently. The user will be able to choose between two ways of determining this order. The first one will be order of selection, Figure 9: Radial ordering and the second one will be to order the objects according to the angle w.r.t the center of the circle/ellipse/arc. Figure 9 illustrates this graphically. The latter mode also allows to first roughly dispose the objects, and then apply the tool, without having to tediously select the order manually. 3.3.2
Object’s anchor point
As most objects in Inkscape are of irregular shapes, we need a way to know, which point represents the object’s position. All calculations will then be done relative to this point, that is, the selected point will finally lay on the circle/ellipse/arc. This so called anchor point can be chosen by the user, as either one of the 8 points on the edges of the object’s bounding box, the center of the bounding box, or the rotation center of the object. The rotational center of the object can be placed by the user in any location, even outside the bounding box, and is typically used to determine around which point the object can be rotated. To clarify, the next example shows what happens if we choose the top left corner of the bounding box as the anchor point.
(a) Input
(b) Intermediate Result
Figure 11: Anchor point example
4
Figure 10: Anchor points
(c) Output
3.3.3
Circle/Ellipse/Arc
The user must be able to specify the shape to arrange the objects onto. This can be done in two ways, the first, is to use the last selected circle/ellipse/arc object. And the other one is to parametrically input the shape of such circle/ellipse/arc. The values needed for this are x and y coordinates of the center, radius in x and y direction (for ellipses), begin and end angle (for arcs, or sections of circle/ellipses). The first method is certainly more user friendly and should be used by default, however the second may be useful where precision is key.
4
User Interface
The proposed feature will have its user interface as a tab in the Rows and Columns panel, which currently allows only to do arrangements on a grid. Because of the new feature, the name ”Rows and Columns” might no longer be appropriate, and the whole panel might be dubbed to something else. The first few options, allow to choose the object’s anchor point as discussed above. The 9-button widget provides an intuitive way of choosing them. The icons on the widget could however use some more work. The next bunch of options are used to specify the circle/ellipse/arc the objects will be placed onto. The user can either select the ”Last selected circle/ellipse/arc” option or manually enter the parameters. The user will also be able to choose the units of the parameters (e.g. inches, centimetres, pixels, and so on). Finally, by hitting the Arrange button in the lower right corner, the tool is applied to the selected objects.
5 5.1
Figure 12: User Interface
Inkscape’s Architecture Object Tree
Figure 13: Object’s UML diagram In Figure 13 you can see how Inkscape internally handles objects. The base class is SPItem which stores information such as the center point. This class is then specialized into many other classes as for example SPText or SPImage. As you may notice, also SPGroup, which represents groups of objects has also the same ancestor as normal objects. This design is often called composite pattern. The important classes for the implementation of this feature are highlighted in green. The gui itself uses gtkmm, which is a C++ port of the gtk library. 5
5.2
Build Environment
Inkscape contains both make files as well as newer CMake configuration files. CMake is really handy, because it is not only platform independent, but can also generate project files for e.g. Eclipse, Code::Blocks and so on, ready to use. Therefore I decided to use Eclipse to develop this feature. For revision control, Inkscape uses Bazaar which is a distributed revision control system and is hosted on launchpad.net, owned by Canonical.
6