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,

Image with annotations,

Features
Some key features of iPhotoDraw are: Simple, intuitive user interface 3

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 4

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

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.

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.

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

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
10

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 11

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.

12

13

After the image is opened

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 and drop the whole shape to the new location. . You can drag

3. Rotate
14

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.

15

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.

16

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.

17

18

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

19

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.

20

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. 21

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. 22

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.

23

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.

24

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
25

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) 26

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.

27