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, orXara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) andgreat care is taken in designing a streamlined interface. It is very easy to edit nodes, performcomplex path operations, trace bitmaps and much more. We also aim to maintain a thrivinguser and developer community by using open, community-oriented development.

2 Application Domain

2.1 Vector Graphics

As written in the above description, Inkscape uses vector graphics. In contrast to raster graphics, whichuse a grid of pixels to represent an image (e.g. bitmaps, jpeg), Inkscape uses geometrical primitives such aslines, 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 compar-ison.

(a) Full size (b) Zoomed vector (c) Zoomed raster

Figure 2: Vector vs Raster graphics comparison

1

2.2 Scalable Vector Graphics (SVG)

Figure 3: d3.js Graph

SVG is a specification for an XML based vectorgraphics file format. It is an open standard devel-oped by the World Wide Web Consortium (W3C).SVG supports both static illustration, as well as in-teractive (scripted) or even animated content.

This technology can be found in most modernbrowsers nowadays, and can be embedded in htmldocuments. For example the d3.js framework usesSVG extensively to generate it’s graphics. As anexample Figure 3 shows a graph generated by d3,where the graphics are composed entirely by SVGelements.

3 Feature Proposal

3.1 Introduction

Figure 4: Inkscape Objects

A drawing in Inkscape is made up of objects, likeshown in Figure 4. The balloon is made up of 3 sep-arate objects, one for the rope, one for the balloonand one for the highlight in the top right corner.Furthermore Inkscape allows to bundle a set of ob-jects together in a group, which behaves just like asingle object.

There exists already tools, that allow to alignselected objects on the vertical/horizontal axis, aswell as arrange them on a grid. Few other toolsexists, such as one that randomizes object positions,or separates overlapping objects.

There is however no quick way to lay out objectsalong 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 onlyafterwards 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 inputwe 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 objectsrotate 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 (c) Output

Figure 8: Usage Example nr. 3

3

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 theobjects to follow the circle/ellipse/arc rotation.

3.3.1 Object order

Figure 9: Radial ordering

Picking the order in which the objects are placed on the circleis important if we have different objects with different shapes.In Figure 6 you can see that following the circle in a clockwisedirection, we have at the beginning the square, then the starand finally the circle. If we would choose a different order, thefinal output would turn out differently.

The user will be able to choose between two ways of de-termining this order. The first one will be order of selection,and the second one will be to order the objects according tothe angle w.r.t the center of the circle/ellipse/arc. Figure 9illustrates this graphically. The latter mode also allows to first roughly dispose the objects, and then applythe tool, without having to tediously select the order manually.

3.3.2 Object’s anchor point

Figure 10: Anchor points

As most objects in Inkscape are of irregular shapes, we need away to know, which point represents the object’s position. Allcalculations will then be done relative to this point, that is, theselected point will finally lay on the circle/ellipse/arc.

This so called anchor point can be chosen by the user, aseither one of the 8 points on the edges of the object’s boundingbox, the center of the bounding box, or the rotation center ofthe object. The rotational center of the object can be placedby the user in any location, even outside the bounding box, andis typically used to determine around which point the objectcan be rotated.

To clarify, the next example shows what happens if wechoose the top left corner of the bounding box as the anchor point.

(a) Input (b) Intermediate Result (c) Output

Figure 11: Anchor point example

4

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, thefirst, is to use the last selected circle/ellipse/arc object. And the other one is to parametrically input theshape of such circle/ellipse/arc. The values needed for this are x and y coordinates of the center, radius inx 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 maybe useful where precision is key.

4 User Interface

Figure 12: User Interface

The proposed feature will have its user interface as a tab inthe Rows and Columns panel, which currently allows only todo arrangements on a grid. Because of the new feature, thename ”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 anchorpoint as discussed above. The 9-button widget provides anintuitive way of choosing them. The icons on the widget couldhowever use some more work.

The next bunch of options are used to specify the cir-cle/ellipse/arc the objects will be placed onto. The user can ei-ther select the ”Last selected circle/ellipse/arc” option or man-ually enter the parameters. The user will also be able to choosethe units of the parameters (e.g. inches, centimetres, pixels,and so on).

Finally, by hitting the Arrange button in the lower rightcorner, the tool is applied to the selected objects.

5 Inkscape’s Architecture

5.1 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 storesinformation such as the center point. This class is then specialized into many other classes as for exampleSPText or SPImage.

As you may notice, also SPGroup, which represents groups of objects has also the same ancestor asnormal objects. This design is often called composite pattern.

The important classes for the implementation of this feature are highlighted in green. The gui itself usesgtkmm, 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, becauseit is not only platform independent, but can also generate project files for e.g. Eclipse, Code::Blocks and soon, 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 hostedon launchpad.net, owned by Canonical.

6