1

Introduction to iPhotoDraw

iPhotoDraw lets you add annotation to an image file. You can add texts, arrows, dimensions, lines, and ballons etc. to an image.

People are using iPhotoDraw's annotation capabilities to:

Name people in photos.

Add descriptions for objects.

Show dimension information of an object.

Show enlarged details of an object in the bollons.

The following is an example of what we can do with iPhotoDraw.

Original image,

2

Image with annotations,

3

Features

Some key features of iPhotoDraw are:

Simple, intuitive user interface

4

Every feature and user interface element has been designed to be immediately intuitive and easily learned without assistance. iPhotoDraw is designed to be immediately familiar to users of MS Office and any other

commercial graphics software.

Instant visual effect when setting properties

When configuring the properties of annotation objects, you will see the instant effect without having to click the [Ok] button.

Annotation data is stored in a separated file from the original image

Annotation is not writen directly on the image. Actually they are stored in a separated xml file. So you

don't need to worry that the original image will be messed up.

System Requirements

Software Requirements

Windows XP SP3 or later (e.g. Windows Vista, Windows 7, Windows Server 2008), 32 bit / 64 bit

.Net Framework 3.0 or later

Hardware Requirements

800 MHz processor

512MB of RAM

1024 x 768 screen resolution

100+ MB hard drive space

5

User Interface

iPhotoDraw provides standard and easy-to-use user interface. Operations are very straight forward.

Main Interface

The main user interface includes the following parts,

Main panel

Toolbar buttons

Toolbox

Property panel

Overview

Ruler

Status bar

6

7

1. Main panel

The main panel is at the center of the application's UI. It shows the image that's being edited.

2. Toolbar buttons

The toolbar buttons provide common operations for editing such as open, save, print, cut/copy/paste,

redo/undo, and zoom etc.

3. Toolbox

Toolbox provides all the annotations (e.g. lines, rectangles, text, and callout boxes etc.) you can add to

the image. It also provides operations like selection, zoom-in, and image panning.

4. Property panel

Property panel shows the basic properties for the currently selected annotation object. It's context

sensitive. For example, if you are editing a line object, the Fill property is greyed out.

To see / modify the all the properties for the current object, you can right click on the object in the main panel, from the pop-up menu, choose [properties].

5. Overview image

The Overview shows the whole image. The yellow box is the current focused part in the main panel. You can drag the yellow box to move the focused part in the main panel. It's handy when you are editing a big

image or zoom in to details. You can drag the yellow box

6. Ruler

The ruler shows the size of the image (in pixels) and the current position of the mouse cursor.

8

7. Status bar

Status bar shows information about the current image, such as storage size and the space size (in pixels).

Menu

iPhotoDraw's menu consists of the followings,

File

Edit

View

Tools

1. File

1.1 Open

Open an image file to add annotation. The following image format are currently supported: BMP, PNG, JPG,

TIF, and GIF.

1.2 Close

Close the current image file.

9

1.3 Save

Save the data to the annotation file. This is an xml-format file.

1.4 Export

Once you finish editing the annotation on the image, you can export it to a new image file. The possible export image formats include BMP, PNG, JPG, and GIF.

1.5 Print

Print the content of the current image.

2. Edit

2.1 Undo

This command undoes the most recent action that you've taken when editing the annotation on the the

image, if any.

2.2 Redo

This command redoes the most recent action that you've undone, if any.

2.3 Cut

10

This command puts the selected annotation object onto the clipboard and remove it from the image as

well.

2.4 Copy

This command puts the selected annotation object onto the clipboard.

2.5 Paste

This command gets the data from the clipboard (if any) and puts it on the image.

2.6 Delete

This command deletes the selected aannotation object from the image.

3. View

3.1 Properties

This turns shows / hide the property panel from the main user interface.

3.2 Ruler

This turns shows / hide the ruler from the main user interface.

4. Tools

11

4.1 Options

This command opens up the [Options] dialog and allows you to config the system settings for iPhotoDraw. On the [Preference] tabpage, you can set the default settings used to create a new annotation object.

Tutorials

iPhotoDraw allows you to draw annotations on images. By using different drawing tools and selecting

12

appropriate properties, you can easily add annotations to the image. This tutorial uses a very simple case

as an example to walk you through some of the basic functionalities iPhotoDraw.

Open Image File

Step 1. Open Image File

Choose the menu item File>Open or the [Open] icon from the toolbar buttons.

Toolbar buttons

From the 'Open File' dialog, choose the image file you want to open.

Step 2. Zoom the image to the appropriate level

Once the image is opened, by default it's zoomed to the full extent so that the whole content is displayed.

You can change the zoom level by setting the [Zoom Level] combobox in the Toolbar. You can also do that by scrolling the mouse wheel button.

13

After the image is opened

14

Edit

iPhotoDraw supports a variety of annotation shapes. Different shapes may have different charateristics. But the editing operation follows the same rules. And these rules are similar to any graphic editing software in the market. So the operation is very straight forward and easy to follow.

Edit Shapes

1. Choose the shape to edit

Choose the (Select) button from the toolbox. When you move the mouse over a shape, the cursor is

changed to . Left click the mouse to choose the shape. The selected shape will be in EDIT status. when

a shape is in EDIT status, it is drawn with the following elements if applicable,

Frames (and resize handles)

Vertices

Rotation handle

Control points

2. Move the shape

After a shape is selected, move the mouse over the shape, the cursor will be changed to . You can drag and drop the whole shape to the new location.

3. Rotate

15

When a shape is selected, you will see a red circle on top of the shape. This is rotation handle. You can

drag the rotation handle to rotate the shape.

A rotated callout box

4. Resize

There are 8 resize handles that are associated with the shape being edited. Drag and drop the resize handles to resize shape.

16

A line with resize handles

Tips: For some shapes (e.g. rectangles and ovals), you can hold the [Shift] key while dragging

operation to normalize the shape. For example, to make a square instead of rectangle, or a round circle instead of an regular oval.

5. Move vertices

Some shapes (e.g. lines, polygons) may contain vertices. The vertices are drawn with small circles (like

the following pictures shows). You can drag and drop the vertices to a new position.

A line with vertices

6. Move the control points

Different shapes have different control points. Control points are displayed as little yellow dimonds. You

can drag the control points to move them to new position. The following picture shows the control point for a callout box.

17

Control point for the callout box

Edit Text

Some annotation shapes may contain text. To input or modify the text content, just right click on the shape and choose [Properties] from the popup menu. Choose the [Text] tabpage on the "Shape

Properties" dialog. You can input the text, specify the text margin and alignment.

18

19

Input text

Dimension Line

A dimension line consists of 3 parts,

Main line - The major part of the dimension line. It shows the starting point and ending point of the which has a starting point of the object being measured.

Witness line - There is a witness line at each end of the main line.

Text - Shows the measurement or other information.

A dimension line

1. Draw a dimension line

20

1. To create a dimension line, first of all you need to select the "Dimension Line" button from the

toolbox. See the toolbox section in the introduction of the main UI.

2. Click the mouse on the image as the starting point of the dimension line.

3. Move the mouse to a desired position and click on the mouse to set the ending point.

4. Input the text for the dimension line in the popup dialog.

Create a dimension line

2. Modify a dimension line

Once a dimension line is created, you can modify it.

21

Edit a dimension line

2.1 Change the starting/ending point

Starting / ending point of the dimension line is drawn with a circle. You can drag them to a new location.

2.2 Change the witness lines

There are 2 witness lines with the dimension line. Each has 2 vertices. You can drag them to change the length and the rotation of the witness line.

By default,

The witness lines are kept in the same length. That means when you drag the control point for a

witness line, the length of 4 segments of the witness lines will be changed all together.

The witness lines are vertical to the mainline.

You can change these default settings modifing the dimension line properties. Right click on the dimension

line, and choose "Properties" from the popup menu. Choose the "Dimension" tabpage in the popup dialog.

22

Modify the property of the a dimension line

In the "Witness Lines" group box, uncheck the "Keep Same Length" if you want witness line has different length. In this case, you can freely move a witness line's control point without changing

other witness line segments.

After uncheck the "Vertical to Main Line" option, the witness line will be rotated when you move the

control point.

Tips: If you want to keep the same length for the witness line segments that are on the same side,

just hold the [Shift] key while dragging the witness line control point.

23

Bezier Curve

A Bezier Curve consists of a starting point and an ending point. A control point controls the arc of the curve.

A Bezier curve

1. Draw a Bezier curve

1. To create a Bezier curve, first of all you need to select the "Bezier Curve" button from the toolbox. See the toolbox section in the introduction of the main UI.

2. Click the mouse on the image as the starting point of the curve.

3. Move the mouse to the desired position and click the mouse to set the ending point.

4. Move the mouse and you see the change of the arc. Click the mouse to finish the operation.

24

2. Modify a Bezier curve

Once a Bezier curve is created, you can modify it.

2.1 Change the starting/ending point

Starting / ending point of the Bezier curve is shown as a small circle. You can drag them to a new location.

2.2 Change the arc of the curve

You can drag the little yellow control point to change the arc of the Bezier curve.

Other

Technical Support

Bug Report

If you find errors during the usage of the application, Please following the steps to report the bug to the

author. That will help us to improve the quality of the software. And your effort will be appreciated.

Step 1 - Expand the error dialog to show the detailed information.

25

Step 2 - Copy the details of the error to clipboard.

Step 3 - Email the error message to the author by simenwu@gmail.com. It will be very helpful if you could describe the scenario when the error happens in the email.

Feedback / Suggestion

26

If you have any ideas of improving the current iPhotoDraw, or there are any other features you would like

to see in the future version, please email the author by simenwu@gmail.com.

License

iPhotoDraw is provided free-of-charge with generous licensing terms.

You may use iPhotoDraw for personal, commercial, education, and government use -- the iPhotoDraw

application is free for all of these purposes. You may install it on as many systems as you'd like. The main restriction is that you may not modify the iPhotoDraw software itself (e.g. change the name, add/remove

features, "don't modify the DLL or EXE files"), and as a corollary you may not distribute modified copies of iPhotoDraw.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR

PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT

OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Frequently Asked Questions

When I click [Save], why iPhotoDraw just saves annotation objects in a separated file? Why not

save to the original image file?

That's by purpose. We save the annotation data into a separated xml file (in the format of xxx_data.xml)

27

so the original image file is intact. Once you decide the work is done, you can choose menu item [File\Export] to export the image as well as the annotation to a new image file.

What's the technology you use in iPhotoDraw?

iPhotoDraw is developed with pure .Net technology. It based on Microsoft .Net 3.0 framework and no other 3rd party Dlls/Components are needed.

Does iPhotoDraw support multi-language?

As the first release, we only support English. Supports on other languages (e.g. Chinese) are underway.

Volunteers on the translation are very wellcome. Please see the Technical Support session.

Will it ever be ported to Mac OS, iOS, Android, Linux, or any other non-Windows operating

systems?

There is no plan for that in the near future. For now, we only focus on Windows.