iDesign Version 1.7 - User Guide - TouchAware · © 2010-2015 TouchAware iDesign Version 1.7 –...

© 2010-2015 TouchAware iDesign Version 1.7 – User Guide 1

iDesign Version 1.7 - User Guide [2015-09-25] www.touchaware.com

This document describes the iDesign user interface and provides step-by-step instructions on how to use the features in the app.


Contents 1! The%User%Interface%...............................................................................................................................%4!2! Toolbox%...............................................................................................................................................%5!3! Toolbars%..............................................................................................................................................%8!4! Board%Settings%...................................................................................................................................%10!4.1! Setting the Grid ...................................................................................................................................... 10!4.2! Setting the Snap ..................................................................................................................................... 11!4.3! Setting the Units ..................................................................................................................................... 11!4.4! Setting the Board Size & Drawing Scale ................................................................................................ 12!5! Zooming%&%Panning%...........................................................................................................................%14!6! Drawing%............................................................................................................................................%15!6.1! Inserting shapes ..................................................................................................................................... 15!6.2! Inserting and editing text ........................................................................................................................ 16!6.3! Inserting Images .................................................................................................................................... 17!6.4! Selecting shapes .................................................................................................................................... 17!6.5! Moving shapes ....................................................................................................................................... 19!6.6! Resizing shapes ..................................................................................................................................... 20!6.7! Rotating shapes ..................................................................................................................................... 20!7! Basic%Edit%Functions%...........................................................................................................................%21!7.1! Removing shapes .................................................................................................................................. 21!7.2! Copy & Paste ......................................................................................................................................... 21!7.3! Undo / Redo ........................................................................................................................................... 22!8! Shape%Properties%...............................................................................................................................%23!8.1! Applying style attributes ......................................................................................................................... 25!8.2! Applying colors ....................................................................................................................................... 25!8.3! Gradients ................................................................................................................................................ 27!9! Point%&%Path%Editing%..........................................................................................................................%28!9.1! Editing shapes points ............................................................................................................................. 28!9.2! Adding and removing points ................................................................................................................... 29!9.3! Closing an open shape .......................................................................................................................... 30!9.4! Converting a shape to a path ................................................................................................................. 30!9.5! Convert Text to Path .............................................................................................................................. 30!9.6! Editing control points on a path .............................................................................................................. 31!9.7! Straightening or curving a segment ....................................................................................................... 31!9.8! Break apart or weld shapes together ..................................................................................................... 32!10! Object%Functions%...............................................................................................................................%33!10.1! Grouping and un-grouping shapes ....................................................................................................... 33!10.2! Explode or Join shapes ........................................................................................................................ 34!10.3! Changing the z-order of shapes ........................................................................................................... 34!10.4! Flipping shapes .................................................................................................................................... 34!10.5! Aligning shapes .................................................................................................................................... 35!10.6! Boolean Operations ............................................................................................................................. 35!11! Layers%...............................................................................................................................................%36!11.1! Adding a new layer ............................................................................................................................... 37!11.2! Removing a layer ................................................................................................................................. 37!11.3! Inserting shapes on a layer .................................................................................................................. 37!11.4! Showing & hiding layers ....................................................................................................................... 37!11.5! Setting a layer as the current layer ...................................................................................................... 38!11.6! Locking a Layer .................................................................................................................................... 38!11.7! Renaming a layer ................................................................................................................................. 38!11.8! Changing the order of layers ................................................................................................................ 38!


12! Setting%a%Background%Image%..............................................................................................................%39!13! Designs%.............................................................................................................................................%40!13.1! Automatic save & crash recovery ......................................................................................................... 41!13.2! Save As a new design .......................................................................................................................... 41!13.3! Create a new blank design ................................................................................................................... 41!13.4! Opening an existing design .................................................................................................................. 42!13.5! Clearing a design ................................................................................................................................. 42!13.6! Removing a design .............................................................................................................................. 42!13.7! Renaming a design .............................................................................................................................. 43!14! Exporting%Designs%.............................................................................................................................%43!14.1! Setting the export background ............................................................................................................. 44!14.2! Selecting the export source .................................................................................................................. 45!14.3! Setting the export size .......................................................................................................................... 45!14.4! Setting the export type ......................................................................................................................... 46!14.5! Sharing iDesign files ............................................................................................................................ 46!15! Importing%Designs%.............................................................................................................................%47!16! Backup%Designs%.................................................................................................................................%49!17! Settings%.............................................................................................................................................%51!18! Dimension%Tools%...............................................................................................................................%52!18.1! Length Dimension Tool ........................................................................................................................ 52!18.2! Angle Dimension Tool .......................................................................................................................... 53!18.3! Dimension Settings .............................................................................................................................. 53!18.4! Apply To All .......................................................................................................................................... 55!


1 The User Interface The iDesign user interface is designed to provide a full screen drawing surface with menus and toolbars displayed only when needed. User interface elements that permanently take up screen space are kept to a bare minimum, toolbars and rulers can be turned on or off easily as required.

Design Board Toolbars

Design Board - The content area used for drawing and editing. The board is hosted within a scrollable and zoom-able view which encloses the entire screen. Message View - Top (top left for iPad) portion of the screen where context related help messages are displayed. Messages appear and disappear as and when required if context messages is set to On in Settings. Measurements View - Top portion of the screen where measurement readouts are displayed. The measurement readouts only appear during insert, edit or move operations. Toolbox Button - Located at the bottom right corner. This button opens the toolbox which has the full set application functions organized into a set of menus and panels. Toolbar Toggle Buttons - To turn the toolbar on or off. Nudge Control Toggle Button – To turn the nudge controls on or off Nudge Controls - Allows accurate and fine position adjustments for the selected shapes Toolbars - Scrollable toolbars located around the screen edges. Ruler Button - To turn the ruler on or off. Rulers - A floating set of unit aware horizontal and vertical rulers which aligns with the grid and can be moved anywhere on the screen. Ruler Handle - Handle to grab and move the floating rulers. Pan/Scroll Lock Button – Switches between selection and panning/scrolling mode.

5

2

1

3

4

1

6

3

5

4

2

7

9

10

8

9

10

11

11

5 512

12

6

7

8


2 Toolbox

Toolbox The toolbox is organized into multiple levels of menus, panels and buttons, which are displayed based on the current context. The bottom row has a set of root level menu buttons, which displays a set of panels for that menu. There are different ways to open the toolbox menu, some of them are context based and depending on the current shape selected on the board, the appropriate panel is displayed for quicker access to the required functions. Ways to invoke the toolbox menu:

• Using the menu button located on the bottom right corner of the screen. This will open the context menu in its default state the first time with the home panel displayed. On subsequent menu button presses, it will show the menu with the last panel which was kept open before it was dismissed.

• Double tapping anywhere on the empty board area This is similar to using the menu button but is quicker to access if your finger is away from the menu button and closer to an empty board area. This is especially useful on the iPad due to the larger screen and you do not need to move your hand back and forth from the main menu button.

• Double tapping on a shape on the board This opens the Properties panel, which is otherwise located in the tools menu. The properties panel allows you to set the shapes measurements, edit the shapes properties and quickly switch between a set of panels for setting the shapes style, color etc.

• Double tapping on text on the board This opens the Text edit panel, which allows you to edit the text, set the font, font size, font style and alignment.

13

4

14

15 18

16

17

Toolbox Button – Opens the Toolbox

Toolbox – Hosts the menus and panels containing all the tools and functions

Menu Buttons – For switching between top level menus

Panel Buttons – For switching between panels within a menu

Panel – Holds the related Tools or Functions

Tool / Function buttons - To invoke the functions of the app

Close button – To close the toolbox

14

4

13

15

16

17

18


TIP: When navigating to any of the sub panels in the properties menu, at any stage you can go back to the previous menu using the properties button located on the top right corner in portrait mode (or bottom left corner of the menu in landscape mode on iPhone/iPod). This is handy when you need to move back and forth between menus for setting different shapes attributes one after the other. Toolbox Menus & Panels

Home Menu Functions

Home Delete, Copy, Paste, Undo, Redo, Zoom +/-25%, Actual & Fit

Board Board settings for Grid, Snap, Units, BoardSize & Scale

Tools Menu

Tools Select, Line, Polyline, Curve, Path, Square, Rectangle, Circle, Ellipse, Polygon,

Star, Text

Align Align Left, Center Horizontal, Right, Top, Center Vertical, Bottom

Object Group, UnGroup, Raise, Lower, Top, Bottom, Rotate +/- 90, Flip Horizontal, Flip Vertical

Properties Menu

Properties

X, Y, Width, Height for Square, Rectangle, Ellipse, Polygon shapes. X1,Y1 and X2,Y2 for Line, Arc, Length dimension & Angle dimension.

Length, Angle

Center (X,Y), Radius

Rotation

Delta Transform – Move, Scale, Rotate based on entry value increments

Stroke – Line Width, Dash Pattern, Arrow Markers, Line End, Line Cap

Stroke Color & Opacity

Fill Color & Opacity

Custom Colors & RGB Color Mixer

Gradients

Text Edit Text entry, font size, font type, font style, alignment

Path Edit Convert to Path, Close Shape, Add Point, Remove Point, Corner, Smooth,

Symmetric, Apply To All Points

Layers Menu

Layers Layers List, Add, Remove, Show/Hide, Set Current, Lock/Unlock, Raise, Lower, Top, Bottom, Layer Preview Image

BG Layer Select Background Image, Background ON/OFF, Hi-Res ON/OFF


Designs Menu

Designs Designs (Files) List, Open, Add New, Save As, Clear, Delete, Lock

Export Source, Size, Export to Photo Library, Email as JPEG, PNG, Transparent PNG,

PDF, SVG (InkScape & Illustrator), Share iDesign files via Email

Import Dropbox & iCloud Import

Backup Backup and restore, email backups, restore from email backup

Info Menu

Help Context Messages ON/OFF, Links to User Guide, Video Tutorials, Version Update Info, Support & Feedback

Add-ons Sample Designs

Settings Continuous Insert ON/OFF


3 Toolbars Toolbars provide a one-touch access to many of the commonly used tools and functions which are also available through the toolbox menu interface. All the toolbars are scrollable and can be turned ON/OFF easily using the toolbar toggle buttons.

3

2 5

1

3

2

4 1

5

4 OR

iPad

iPod, iPhone

Tools Toolbar – Shape tools to insert and draw shapes

Edit Toolbar – Common operations like remove, copy, paste, zoom etc.

Functions Toolbar – Functions like Grouping, Ordering, Aligning, Boolean Operations etc.

Path Edit Toolbar – Replaces the Functions Toolbar when in path edit mode, with path edit functions like add/remove points, point types etc.

Fill & Stroke Toggle Button – Toggles the Colors Toolbar with Fill or Stroke colors

3

1

2

4

5


Tools Toolbar Edit Toolbar Functions Toolbar Path Edit Toolbar

Select

Delete

Group

Convert To Path

Line

Copy

Ungroup

Close Shape

Polyline

Paste

Explode

Open Segment

Curve

Undo

Join

Add Point

Path

Redo

Rotate +90

Remove Point

Square

Zoom +25%

Rotate -90

Break At Point

Rectangle

Zoom -25%

Flip Horizontal

Weld At Point

Circle

Zoom Actual

Flip Vertical

Corner Point

Ellipse

Zoom Fit

Raise

Smooth Point

Polygon

Lower

Symmetric Point

Star Colors Toolbar

Raise to Top

Straight Segment

Text

Fill Color

Align Left

Curve Segment

Image

Stroke Color

Align H Center

Freehand

Align Right

Length Dimension

Align Top

Angle Dimension

Align V Center

Align Bottom

Unite

Intersect

Subtract

Exclude

Combine

Separate

3 2 4 1

5


4 Board Settings Menu ! Home ! Board panel

All the drawing board related settings, which include Grid, Snap and Drawing Scale, are done using the Board panel.

4.1 Setting the Grid Menu ! Home ! Board panel ! Grid

The grid can be turned ON or OFF using the Grid Switch. Selecting the Grid item on the board panel will open the Grid Settings panel. Grid settings are units and drawing scale aware.

3

1

2

Grid Settings – Opens the grid settings panel

The grid switch turns the grid on or off

Snap Settings – Opens the snap settings panel

The snap switch turns on or off all the different kinds of snap in snap settings

Units – Opens a list of standard units to specify the one used for the design

Board Size & Scale – Opens the board size and scale settings panel for specifying predefined or custom board size and set a drawing scale

3

1

2

4 4

3

1

2

Auto Grid - Turn this switch ON to automatically set the grid and rulers based on the Units. Turning it OFF will enable custom grid settings Grid Size – Use the slider or tap on the value field to enter the grid size by keyboard. Value range is 0 to 100 points (or converted units) Separator Steps – A value between 0 to 12 for the major grid line separators ZoomOut Grid 10 Steps – Set to ON for 10 step separators when you reduce zoom beyond the level when grid lines become too close ZoomOut Grid Separator Steps – Set to ON for 10 step separators when you reduce zoom beyond the level when grid lines get too close

3

1

2

5

4 5

4


4.2 Setting the Snap Menu ! Home ! Board panel ! Snap

Snap can be turned ON or OFF using the Snap Switch. Selecting the Snap settings on the board panel will open the Snap Settings panel. Snap setting is units and drawing scale aware. When object & points snap is ON, a red cross mark indicator is displayed when object or point snap is activated to indicate that the object or point has snapped onto an adjacent object or point. TIP: Turn ON Snap for drawing accurately in fixed steps/increments. This is extremely useful in drawing precise or To-Scale drawings. Turn Snap To Grid off for free flow art work drawings.

4.3 Setting the Units Menu ! Home ! Board panel ! Units

The default unit for a new design in the iDesign coordinate system is in Points. This can be changed for any Design to one of the supported units.

• Points (pt) • Inches (in) • Feet (ft) • Millimeters (mm) • Centimeters (cm) • Meters (m)

1

2

Snap To Grid - Turn this switch ON to set the snap to the grid. Turning it ON will disable custom snap settings Custom Snap – Turn this switch ON to enable custom snap setting. Turning it ON will disable Snap To Grid Snap Size – Use the slider or tap on the value field to enter the snap size by keyboard. Value can be a decimal Object & Point Snap – When ON, automatically snaps on to points and end points of objects Rotation Snap – When ON, rotating using the rotation handle rotates in one degree increments

1

2

3 3

4

5 4

5


iDesign displays shapes in real unit measure on the display of the device (iPhone/iPod and iPad) based on its DPI. On 1:1 zoom for a unit setting in centimetres, a line of 2 centimeters will be exactly 2 centimeters if you measure it with an external ruler on the device screen. The rulers, grid and snap all are unit aware. Setting or changing the units will affect all the measurement related display and input fields (X,Y, Width, Height etc) but will not change the internal representation of the points in the design and can easily be changed back to another unit. If the Unit setting is changed, the measurement display/input values will be converted based on the change. Example1: Points to Centimeters For a Drawing Size of 480x320 with a Square at location (100,100) of size (100x100) if the units is changed from Points to Centimeters, The measurement readouts and values in the properties menu for the location of the square will be (1.56, 1.56) and size (1.56 x 1.56) calculated based on the conversion for Points to Centrimeters for the specific device DPI. Example2: Inches to Centimeters For a Drawing Size of 480x320 with a Square at location (1,1) of size (1 x 1) if the units is changed from Inches to Centimeters, The measurement readouts and values in the properties menu for the location of the square will be (2.54, 2.54) and size (2.54 x 2.54) calculated based on the conversion for Inches to Centimeters which does not involve any device specific calculation.

4.4 Setting the Board Size & Drawing Scale Menu ! Home ! Board panel ! Board Size & Scale ! Drawing Scale

iDesign uses a unit aware coordinate system with an extendable board size and Drawing Scale setting for setting the drawing limits as required. Board Size A set of standard board sizes options are available for convenience (iPhone, iPad, A0 to A5, B4,

3

1

2

Board Size – Opens the board size options panel Custom Width & Height – Enabled when Board Size options is set as Custom Drawing Scale – A multiplier applied to the board size for all measurement display and input fields. Useful to setup very large drawing limits to scale. Landscape – Set landscape or portrait, only applicable if a predefined board size is selected Apply board size changes – Applies the changes to the current design

3

1

2

5

4

5

4


B5, Letter, Legal, Tabloid). You can also set a custom board size (capped at 1 million) as your Board Size. Board Size is set in the selected units. Note that Board Size is not Drawing Size, Drawing Size = Board Size x Drawing Scale. Changing the board size for a design: 1. Open the Menu ! Home ! Board panel ! Board Size & Scale ! Board Size

2. Select a predefined board size from the list of available board sizes or Custom for specifying a custom board size

3. If the custom board size option is selected, Width and Height fields are enabled. Enter the required Width and Height using the keyboard available by taping on the field. Press the Done button on the keyboard after entering the values.

4. Note the new Drawing Size values displayed based on the new Width and Height.

5. Press the “Apply board changes” button to apply the new board size to the design TIP: For very large unit based drawings like large floor and site plans, you may need to try different approaches of setting Scale as 1:1 or using a scale multiplier. The scale setting will affect the measurement and ruler display. Drawing Scale A Drawing scale can be set separately from Board Size. Default drawing scale is 1.0. Setting or changing the Drawing Scale will affect all the measurement related features of the co-ordinate system, display and input but will not change the internal storage values. Values stored by iDesign internally will always be at Scale 1.0 Example: Refer the sample : iDesign Menu !Info ! Add-ons ! Sample Designs ! House Plan The House Plan sample is drawn at a scale of 1:100 with units in Millimeters. If the units are changed to Meters, the dimension values will reflect the change and will be displayed in Meters • The drawing scale is set before you start off with the drawing. This is similar to drafting on

paper where the scale is determined before you start drawing. As the scale value is a multiplier to the actual value of the dimension, changing the scale after drawing will not rescale the drawing.

• If your drawing grows larger than the board size, you can increase the board size. Changing the scale will not automatically rescale the existing shapes, if you change the scale you may need to resize the existing shapes.

• All the measurement readouts, X, Y, Width, Height settings, Grid and Snap values reflect the changes on the drawing scale.

To set a custom drawing scale: 1. Open the Menu ! Home ! Board panel ! Board Size & Scale

2. Touch on the Drawing Scale value field to enable the keyboard


3. Enter the required drawing scale and press the Done button on the keyboard

4. This will set the new value as the drawing scale

5 Zooming & Panning The drawing content area supports unlimited zooms. The board can be zoomed using the pinch zoom method, which is standard way to zoom on the iPhone, iPod and iPad. Preset zoom options are also available in the Tools menu. • Pinch zoom – Touch down two fingers on the drawing area and move the fingers apart while

to increase the zoom. Move the fingers towards each other to decrease the zoom. • Zoom presets – Presets for +25%, -25%, Actual size and Fit are available in the Tools menu.

The Actual size option is particularly useful to bring the board back to the original size. Fit can be used to show the whole board to fit onto the screen. The zoom presets are available at: Menu ! Home ! Home Panel ! Zoom preset buttons +50%, -50%, Actual, Fit

TIP: The pinching gesture needs to be started as soon as both your fingers touch down on the surface, otherwise it will move the shapes which come under the fingers instead. Note: The Pan/Scroll mode button is at the top right corner of the screen. On the iPad - When ON (blue) it is in Pan/Scroll mode and any swipe or move gesture will move the board. To move shapes you need to turn the Pan/Scroll mode OFF (grey). On the iPhone/iPod – When ON (blue) it is in Pan/Scroll mode but you can still select, move and edit shapes. The way it differentiates between Scrolling and Selection/Move is with the touch or swipe gesture. Touch down and hold to move or select shapes. A quick swipe results in scrolling. If you turn the Pan/Scroll button OFF (grey) then Pan/Scroll is completely turned off to allow moving/editing of shapes with the board locked in position.


6 Drawing

6.1 Inserting shapes Menu ! Tools ! Tools Panel ! Select a shape to insert OR Tools Toolbar (Located at the left of the screen) ! Select a shape to insert

The following general steps describe how to insert a shape. 1. Select a shape tool from the tools panel OR toolbar

2. A message will appear on the message view area with a tip on how to insert the shape based on the tool selected. If context help is set to Off in Settings this message will not be displayed.

3. Touch down and hold for a second, then drag out to any direction

4. The shape will now be inserted and will begin resizing based on your drag action

5. While dragging, the measurements area will show the X, Y, Width and Height of the shape being inserted and resized

6. Once you have the right size for the shape stop dragging and lift up your finger to finish TIP: On the iPhone, when you touch down your finger to insert the shape, touch down and hold for a second before you drag so that it is not the gesture for scrolling/panning the board. Touching down and immediately dragging will become a swipe gesture for scrolling/panning the board. Specific steps need to be followed based on the tool selected: • Line Tool – Touch and drag to insert the line, lift up your finger to finish. • Polyline Tool – Touch and drag to insert the first segment, lift up your finger to finish the first

segment. Touch down again and drag to insert the second segment, lift to finish the segment. Repeat this for as many segments required. Double tap to end the polyline.

• Arc Tool – Touch and drag to insert the center point and specify the radius, lift finger and then touch and drag to specify the angle and end point.

1

2

Drawing Tools – All the tools are also available in the Tools Toolbar Number of Sides buttons – “+” and “-“ buttons to specify the number of sides for polygon and star shapes

1

2


• Path Tool – Touch and drag to insert the first point and its control point. Touch and drag again to specify the next point and its control point. Repeat this for more points. Double tap to finish drawing the path OR double tap on the first point to close the path and finish.

• Square, Rectangle, Circle, Ellipse Tools – Touch and drag to insert the shape, lift your finger to finish.

• Circle Tool – Touch to insert and specify the center point, then drag to specify the radius, lift your finger to complete.

• Polygon, Star Tools – Touch and drag to insert the shape, lift your finger to finish. Number of sides for the shape is based on the selection using the “+” and “-“ button in the Tools panel.

• Freehand Tool –Touch and draw freehand to sketch a freehand path. The path is automatically smoothened after the freehand insertion is completed

• Length & Angle Dimension Tools – Refer section ‘Dimensioning’ for instructions You can move the previous points (and control points) when you are drawing a polyline, curve or a path even before completing it. This can be very handy when drawing complex polylines or paths. You can also undo/redo previous points before completing a polyline or path. Continuous Insert Menu ! Info ! Settings Panel ! Continuous Insert ON/OFF Switch Turning the continuous insert setting ON will keep the selected tool active and enables you to insert shapes continuously in succession without switching to select mode. This is required only when you need to insert many similar shapes using the same tool. When using this option, you have to explicitly switch to the Select tool for moving, resizing or editing shapes.

6.2 Inserting and editing text Menu ! Tools ! Tools Panel ! Select the Text button OR Tools Toolbar (Located at the left of the screen) ! Select Text tool button

3

1

2

Text Entry Field– To enter and edit text for the selected text shape. Supports standard cut-copy and auto correction features Font Size – Can be specified using the slider or by keyboard. Touch on the numeric field for keyboard entry Font Type – Select from a list of fonts available on the device Font Style – A list of available styles for the selected font type Alignment – Horizontal alignment options for Left, Center and Right alignment Text To Path – Text to Path conversion

3

1

2

6

4

5

4 5 1

6


To insert text: 1. Select the Text button

2. A message "Touch and drag to insert shape" should now appear on the message area and the design mode indicator on the right corner will have a text insert mode icon. Note that the message is displayed only if context help is switched on in Settings

3. Touch down anywhere on the board and drag your finger just like you insert a rectangle, when you lift your finger, a text box with a default text "[Text]” and a dashed outline for the bounding box will be inserted on the board

4. To change the text, double tap on the text box, which will then open the Text Edit panel for you to enter the text and change its properties (font, size, style, alignment)

6.3 Inserting Images Menu ! Tools ! Tools Panel ! Select the Image button OR Tools Toolbar (Located at the left of the screen) ! Select Image tool button The image picker is displayed to select and image from the photo library. Selecting an image will insert the image onto the board, which can then be moved and resized as required.

6.4 Selecting shapes Both single and multi-selection are supported. Selecting a shape:

• Shapes can be selected by touching on them • Shapes with a fill color can be selected by touching anywhere on the shape • Shapes without a fill color can be selected by touching on the line/path only • When a shape is selected, it will have four grey pegs located at the four corners • To unselect a shape, touch outside on the empty board area

Note: On iPad, the Pan/Scroll mode button (at the top right corner of the screen) should be turned OFF (grey) to allow selection. TIP: Give a one second gap after you touch and lift your finger on the empty board area to unselect as this is the time to differentiate between double tap for opening menus and single tap for un-selecting.


Single Selection (touch) Multi Selection (drag rectangle)

Selection Handles – Indicates that the enclosed shape or set of shapes are selected. Moving the handles will resize the shape in the corresponding direction. Selection handles are positioned outside the shapes bounding box so as to not obstruct the view of the shape while resizing when the touch finger is over the handle when moving it Bounding Box – Shows the bounding box of the shape, useful for indicating and aligning rotated shapes

To select a single shape touch anywhere on the shape or inside the shapes fill area to select the shape. If the shape does not have a fill set on it you need to touch anywhere on the line or path segment of the shape to select it. To multi-select shapes there are two methods - steps below: Method 1 – Multi-touch selection 1. Touch on the first shape

2. With the finger down on the first shape, touch another shape with another finger, this will multi select two or more shapes

3. Repeat this for selecting more shapes Method 2 - Multi selection by touching and dragging on the board 1. Touch and hold your finger down on the empty board area anywhere near the shapes

2. Drag your finger over the shapes to be selected, a semi transparent grey rectangle will indicate the drag over area while you are dragging

3. The drag area rectangle should cover the shapes to be selected, the shapes which are partially inside with at least one point (edit point) inside the drag area will also be selected

4. Lift up your finger to finish the selection, all the shapes inside the drag area will now be selected in a single selection frame with grey pegs on the corners

1

2

1

2 1

1


TIP: Method 2 selects and holds all the contained shapes in a single selection frame allowing all the contained shapes or groups to be resized, rotated or moved as a single entity.

6.5 Moving shapes To move a shape: 1. Select the shape (Refer “Selecting shapes”)

2. Touch down anywhere on the shape and drag the shape to a new location

3. Lift up your finger to complete the move All the selected shapes are moved together if multiple shapes are selected. (Refer “Selecting shapes” on how to select multiple shapes) Note: On iPad, the Pan/Scroll mode button (at the top right corner of the screen) should be turned OFF (grey) to allow selection/moving. TIP: iDesign implements true multi touch which allows you to drag different shapes with different fingers/touches simultaneously. You can move a shape with one finger while another shape is being moved with a different finger. This multi touch mechanism is applicable for resize as well.

To make fine adjustments you can use the nudge controls for moving the selection in any of the left, right, top or bottom directions using the nudge control arrow buttons.

2

Nudge Control Toggle Button – Turns the nudge controls on or off Nudge Controls – For precise and fine adjustments to position the selected shapes. The four arrow buttons allow precise movements in four directions to position the selected shapes Nudge Level button – Allows to set 1 pixel or 2 pixel unit movements when snap is off and 1xSnap or 2xSnap units when snap is on

2

3

3

1

1


6.6 Resizing shapes To resize a shape: 1. Select the shape. Four grey pegs will appear at the corners when a shape is selected

2. Touch down on any peg and pull in the direction you want to resize the shape

3. Measurement readouts will appear at the top of the screen indicating the location, height and width of the shape while you are resizing the shape

4. Lift the finger when you are done resizing the shape A multi selection can also be resized using the same method.

6.7 Rotating shapes Shapes can be rotated using a multi touch gesture or using the rotation handle.

Rotation Handle Rotation Center Handles

Rotation Handle – Allow easy one touch rotation for selected shapes Rotation Handles can be swithed on or off with the setting Menu ! Info ! Settings ! Rotation Handle Switch Rotation Center Handles – Allows moving and setting the center for rotation

To rotate a shape using the rotation handle, select the shape or multi-select a set of shapes and touch on the red peg which is the rotation handle and turn. To rotate a shape using multi-touch gesture: 1. Select the shape

2. Touch down two fingers at the same time on the shape and hold for a second

2 1

1

1 2


3. Twist and turn the two fingers in the direction you want the shape to be rotated

4. Lift the fingers when you are done rotating the shape Shapes can also be rotated using rotation presets in 90 degree increments using the tools menu Menu ! Tools ! Object panel ! “R +90” or “R -90”

7 Basic Edit Functions

7.1 Removing shapes Menu ! Home ! Home Panel ! Remove button. OR Edit Toolbar (Located at the top of the screen) ! Remove button. Remove – Removes the selected shapes from the board. Remove does not copy the shapes to the clipboard. To copy you need to explicitly use the Copy button.

7.2 Copy & Paste Menu ! Home ! Home Panel ! Copy & Paste buttons. OR Edit Toolbar (Located at the top of the screen) ! Copy & Paste buttons. Copy – Copies the selected shapes to the clipboard, which can then be pasted back onto the board using Paste. Paste – Pastes the shapes previously copied onto the clipboard. NOTE: Shapes need to be selected before using Cut or Copy. Refer to the section “Selecting shapes” on how to select shapes

1

2

Edit Functions – Delete, Copy, Paste, Undo & Redo. All options are also available from the Edit Toolbar Zoom Presets – +25%, -25%, Actual and Fit options. All options are also available from the Functions Toolbar

1

2


7.3 Undo / Redo Menu ! Home ! Home panel ! Undo / Redo buttons OR Edit Toolbar (Located on the top of the screen) ! Undo / Redo buttons

• Undo – reverses the last action performed

• Redo – reverses the last undo operation A multi level undo/redo stack is maintained by iDesign from the time you started the current session. You can undo / redo an unrestricted number of steps (based on available device memory) back to where you stared the current session. The undo/redo stack is cleared when a new session is started in the following cases: • When a new design is created or opened

• When the app is exited

• When the current design is cleared using the “Clear” button in Designs ! Design Details panel Layer operations also have undo/redo support.


8 Shape Properties The properties panel is displayed by double tapping on a shape.

5

3

6

1

4

7 8 9 Value Fields Selection – Display and entry

fields for Location, Size, length, Angle, Center, Radius, Rotation – based on the button selected Value Fields for Location – Display and entry for X,Y, Width and Height for multipoint shapes or X1,Y1 and X2,Y2 for two point shapes Delta Transform – Display entry fields and buttons for moving, scaling and rotating selection based on an incremental value Sub panel buttons – Opens panels for setting Style, Pen, Fill Colors, Color Mixer & Gradient Edit Points – Switch to make the points of the selected shape editable Aspect Ratio – Switch to make the shape maintain its aspect ratio when resizing Text Edit – Opens text edit panel with text entry and style options for selected text shape Path Edit – Opens path edit panel with options to close a shape, convert to path and set

3

1

2

5

4

6

7

2

8

Length, Angle – Display or Enter Length and Angle values for selected Line shapes

1

1


Center – Display or Enter center point X and Y for Arc and Circle shapes Radius – Display or Enter Radius for Arc and Circle shapes

1

1

Rotation – Display or Enter Rotation for the selected shape

1

1

1

Delta Field Values – Enter Delta values for Move, Scale or Rotate based on the delta operation selected on the right. Move, Scale, Rotate – Set the Delta mode for Move, Scale or Rotate, then enter the delta value in the value field and then press the selected mode button again to apply the delta to the selection

1

2 3

2 3

2 3

2 3


8.1 Applying style attributes Menu ! Properties ! Properties panel ! Stroke button ! Stroke panel

Select the shapes and double tap on any one of the shapes to open the properties panel directly. The stroke panel options allow you to set the line width, line style (pattern), Start and end arrow markers, line end and line join style.

8.2 Applying colors The Stroke, Fill and Mixer panels are opened from the main properties panel.

Stroke Color Fill Color Color Mixer

Line Width – Stroke width for the selected shape set by the slider or touch on the number to enter by keyboard. Line Style - A set of 6 standard and commonly used dash patterns are available Arrow Markers – Type of Arrow on the line ends based on the line width or None Line End – Butt cap, Square cap or Round cap Line Join – Miter join, Bevel join or Round join Properties Back Button – To switch back to the properties panel

4

1

5

2

3

1

2

5

4 3

6

6


Fill colors and Line colors are set separately. Colors can be set using the predefined color swatches or specified by RGB values using the color mixer. Select the shapes and double tap on any one of the shapes to open the properties panel directly. To set the fill color using the color panel (swatch palette): Menu ! Properties ! Properties panel ! Fill button ! Fill panel ! Select the required color OR Color Toolbar (Located on the right side of the screen) ! Toggle to Fill mode ! Select the color To set the fill color using the RGB mixer panel: Menu ! Properties ! Properties panel ! Mixer button ! Mixer panel 1. Select an empty color cell from the first row of blank cell buttons (Color 1 to Color 4) on the

mixer panel

2. Move the sliders for each of the RGB values to mix the required color then press the “Mixer to Object” button to apply the fill color to the selected shape

The mixer panel is shared between the Fill and Line colors. Colors mixed from the Fill ! Mixer panel will appear in Pen ! Mixer for Pen/Line colors To set the line color using the Pen panel (swatch palette): Menu ! Properties ! Properties panel ! Pen button ! Pen panel ! Select the required color OR Color Toolbar (Located on the right side of the screen) ! Toggle to Pen mode ! Select the color TIP: You can switch between the Color toolbar between Fill and Stroke(Pen) mode using the first button in the Color Toolbar.

The opacity of the fill or stroke color can be set using the opacity slider on the Fill or Pen panel. Opacity is set in a range of 0 to 100, 100 being fully opaque and 0 fully transparent.

Picking object colors and transferring panel colors to the mixer:

- To pick colors from existing objects using the “Object To Mixer” Button. - To transfer colors from the fill panel to the mixer use the “Fill to Mixer” Button. This option can be used to make variations based on the predefined colors in the fill panel.


8.3 Gradients Menu ! Properties ! Gradient OR Double tap on object to open Properties panel ! Gradient

RGB gradient stop color mixer – Selected gradient stop’s RGB color value input Gradient Strip – Display’s the gradient based on the current set of gradient stops Swiping on the strip will reverse the gradient. Touching on the strip at a location where a stop does not exist will create a new gradient stop. Gradient Stops – Each stop can be selected, its location can be moved and the color can be adjusted using the mixer Gradient ON/OFF – Allows the gradient for the object to be turned ON or OFF Fill, Remove, Linear/Radial – The Fill button sets the selected gradient stop color with the value selected in the Fill color panel. The Remove button removes the selected gradient stop (if the number of stops is more than two). The Linear/Radial button toggles between linear and radial gradients for the object. Gradient Handles – The start and end location handles for the gradient, which can be moved

1

3

4

2

1

3 6 2

54

6

5

6


9 Point & Path Editing Double tap on a shape to open the properties menu, then select the Path Edit panel for points and path editing options.

9.1 Editing shapes points Double tap on the shape to open the Properties panel ! Edit Points switch ! Turn ON the switch A shape’s points can be moved independently by turning ON the “Edit Points” setting. Note that this setting is separate for each shape. The switch is disabled if a shape is not selected.

2

4

Convert, Close, Open – Convert option converts the selected shape to a path, Close option closes an open shape, Open option open the shape at selected segment. Add / Remove point – The “+” option adds a new point in the middle of the selected segment. The “-“ option removes the selected point. Corner, Smooth & Symmetric – Options to set the selected shape points control point movements as corner, smooth or symmetric Apply To All – Switch to apply Corner, Smooth or Symmetric setting to all of the selected shapes points Line, Curve – Convert the selected segment from line to curve or curve to line Break, Weld – Break the shape at the selected point or Welds two shapes together at selected end point

1

2 1

3 3

4

5 6

5

6

1

2

Shape Point – Edit points for the shape have a blue peg and when selected have a red peg at its center Offset Handles – Four offset handles around a selected edit point allows positioning the point without obscuring the view when moving with the finger

1

2


Selecting and editing a shape which has Edit Points set as ON: 1. The first touch on the shape selects the shape and Selection and Resize Pegs (grey pegs) at

the corners appear

2. Double tapping on the shape will change it to edit mode enabling the edit points Individual points of the shape can now be moved

3. A further double tap on the shape will open the properties panel for setting or changing any of the shapes properties

Note that when the “Edit Points” switch is turned on, the shape is directly changed to edit mode. • Double tap on a shape with edit points enabled to switch from selection mode to point edit

mode • Use offset handles to precisely position points without obscuring the view while moving it

• Turn offset handles on or off with the setting Menu ! Info ! Settings ! Offset Handles Switch

9.2 Adding and removing points Double tap on the shape to open the Properties panel ! Path Edit ! “+ Points” or “- Point” button To add a point: 1. Select the shape

2. Double tap on the shape to change to edit mode If “Edit Points” switch is not ON, turn this ON (Refer section “Edit shapes points”)

3. Select the line segment on which you want to add a new point To select the line segment, single tap on the line between any two points on the shape. Both the end points for the segment will change from Blue to Red when the line or path segment is selected

4. Double tap again on the line segment – this will open the properties panel

5. Press the “+ Point” button in the properties panel – this will insert a point at the middle of the line segment

6. You can now move the new point to the required location To remove a point: 1. Select the shape

2. Double tap on the shape to change to edit mode If “Edit Points” switch is not ON, turn this ON (Refer section “Edit shapes points”)

3. Select the point to be removed by single tap on the point. The point will change from Blue to Red

4. Double tap on the point to open the properties panel

5. Press the “- Point” button in the properties panel – this will remove the point


9.3 Closing an open shape Double tap on the shape to open Properties panel ! Path Edit ! “Close” button Open multi line shapes and open paths can be closed using the Close button.

9.4 Converting a shape to a path Double tap on the shape to open Properties panel ! Path Edit ! “Convert” button Converting a shape to a path changes it to a Bezier curve with control points for each point. • Any shape can be converted to a path

• Converting to path adds control points for each point in the shape

• End points will have only one control point each

• Inner points will have two control points each

9.5 Convert Text to Path Menu ! Properties ! Text Edit panel ! Text To Path button OR Double tap on a text object ! Text Edit panel ! Text To Path button

Text To Path – The text to path button converts the selected text object into a path with sub-paths. The points that make up the text can be edited after converting the text to path

12

2

1


9.6 Editing control points on a path Control points can be moved to alter the structure of the shape/path. 1. Select a shape

2. If the shape is not a path, convert it to a path (Refer “Converting a shape to a path”)

3. Double tap on the shape to show the edit points. If edit points are not visible, in the Properties panel turn the “Edit Points” switch to ON

4. There will be two control points for each of the shapes inner points and single control point for the end points. These control points are only visible when you touch on the shapes point. Control points have a black square handle and a grey peg appears when you touch on them.

5. You can move the control points to curve the shape at each point/segment To make a shapes point a Corner, Smooth or Symmetric point:

1. Select the shapes edit point

2. When a shapes edit point is selected, its selection color changes from blue to red with a grey circular region around it

3. Double tap on the point to open the Properties panel ! Path Edit ! Corner / Smooth or Symmetric button

4. To make all the edit points in a shape the same type, turn on the “Apply To All” switch in the Path Edit panel before you press the Corner/Smooth or Symmetric button.

Corner Point - Setting a shapes edit point as a corner point makes the control points freely moveable in any direction with a sharp corner between the joining segments Smooth Point - Setting a point as smooth makes the control points constrained so as to be opposite to each other but freely move to any distance away from the edit point Symmetric Point - Setting a point as a symmetric point makes the control points constrained to move in a symmetrically opposite manner maintaining the same distance as the other from the shapes edit point

9.7 Straightening or curving a segment Individual segments in a shape or path can be selected and they can be curved or straightened. Double tap on the shape to open Properties panel ! Path Edit ! “Line” or “Curve” button To straighten a path segment: 1. Select the segment by touching on the segment. Both end points will be highlighted in red

2. Select the “Line” option in the Path Edit menu or toolbar

3. The control points for the segment will be removed and the segment will become a straight line segment


To curve a line segment: 1. Select the segment by touching on the segment. Both end points will be highlighted in red

2. Double tap on the segment to open the properties panel and press the Curve button in the path edit panel OR press the “Curve” button in the path edit toolbar

3. Control points for the segment will be added.

4. Touch on any of the segment end points and the control point (with black square handles) will become visible.

5. You can now move the control points at the segment end points to curve the segment

9.8 Break apart or weld shapes together Shapes can be broken at a selected point or segment. They can be welded together at the end points if the end points are close to each other. Double tap on the shape to open Properties panel ! Path Edit ! “Break” or “Weld” button To break a shape at the selected point: 1. Select the point at which you want to break the shape or path. The selected point is highlighted

in red

2. Double tap on the point to open the properties panel and press the Break button in the path edit panel OR press the “Break” button in the path edit toolbar

3. The shape will now be broken and split into two distinct shapes with one of them selected To break a shape at the selected segment: 1. Select the segment which you want to break out. The end points of the selected segment are

highlighted in red

2. In the Properties ! Path Edit panel press the Break button OR press the “Break” button in the path edit toolbar

3. The segment will now be broken out of the shape To weld two shapes at the selected end point: 1. Position the shapes such that the end points which are to be welded are close to each other

2. Select any one of the shapes end point at which you want to weld the shapes together

3. Double tap on the point to open the properties panel and press the Weld button in the path edit panel OR press the “Weld” button in the path edit toolbar

4. The shapes will now be welded together at the point to form one single shape


10 Object Functions

10.1 Grouping and un-grouping shapes Menu ! Tools ! Object panel ! Group or UnGroup buttons OR Functions Toolbar (Located at the bottom of the screen) ! Group or UnGroup buttons Shapes can be grouped hierarchically to create complex objects. To group a shape: 1. Select the shapes to be grouped

Refer to the section “Selecting shapes” for selecting multiple shapes

2. Use the Group button – to group the shapes together Grouped shapes will have a common set of 4 selection pegs, the individual shapes within a group cannot be selected separately unless the group is UnGrouped

3. You can now select and move the group just like a shape. Most of the operations done on the shape (resize, rotate, flip etc.) can now be done on the group

A group can be further grouped with other shapes or groups (hierarchical groups) To un-group a group: 1. Select the group to be un-grouped

2. Use the UnGroup button – to un-group the group The shapes will now be ungrouped with each sub shape or group having its own 4 selection pegs Note that for hierarchical groups, only the shapes and groups one level below the current group is ungrouped to maintain the hierarchical grouping

3. The grouping will now be removed can you can now select individual shapes

Group – Groups together the selected shapes UnGroup – UnGroups the selected group R+90, R-90 – Options to rotate the selected shapes/groups by +/- 90 degrees Raise, Lower, Top, Bottom – Changes the z-order of a shape by bringing it to the front or back, top or bottom FlipH, FlipC – Flips the selected shapes/groups horizontally or vertically Explode, Join – Explode creates separate shapes for each segment, Join successively welds all the shapes aligned at end points in the selection to form a single shape Combine, Separate – Combines selected set of shapes points into one shape but maintaining sub paths. Separates sub paths into separate shapes Boolean Operations – Boolean operations on selected shapes for Unite, Intersect, Subtract, Exclude


10.2 Explode or Join shapes Shapes can be exploded into individual segments, each segment to be a separate shape. They can be joined together at end points if the end points are close together. Double tap on the shape to open Tools panel ! Tools ! “Explode” or “Join” button OR Use the Explode or Join buttons on the tools toolbar at the bottom of the screen To Explode a shape: 1. Select the shape

2. Double tap on the shape to open the menu, press the “Explode” button in the Tools menu OR press the “Explode” button in the tools toolbar

3. The shape will now be broken and split into separate shapes, each segment will be a separate shape

To Join multiple shapes aligned at end points: 1. Position the shapes such that the end points which are to be welded are close to each other

2. Select all the shapes to be welded together

3. In the tools menu panel press the “Join” button OR press the “Join” button in the tools toolbar

4. The shapes will now be joined together to form a single shape with each overlapping end point welded together with the nearby shapes end point

10.3 Changing the z-order of shapes Menu ! Tools ! Object panel ! Raise, Lower, Top, Bottom buttons OR Functions Toolbar (Located at the bottom of the screen) ! Raise, Lower, Top, Bottom buttons Shapes can be created and placed on top of other shapes. The order of the shapes which determine which shape is higher in the stack is referred to as its zOrder. No two shapes can have the same zOrder. One is always over the other when it overlaps. To raise or lower a shape, select the shape and press the “Raise” or “Lower” buttons in the tools panel. When there are many overlapping shapes, for raising a shape to the top use the “Top” button in the tools panel or for lowering the shape to the bottom use the “Bottom” button.

10.4 Flipping shapes Menu ! Tools ! Object panel ! Flip H - for flipping shapes horizontally Menu ! Tools ! Object panel ! Flip V - for flipping shapes vertically OR Function Toolbar (Located at the bottom of the screen) ! Flip-H and Flip-V Buttons Flipping shapes is the same as mirroring shapes across X or Y axis with the origin as the shapes center itself.


10.5 Aligning shapes Menu ! Tools ! Object panel ! Align Left, H Center, Right, Top, V Center, Bottom buttons OR Function Toolbar (Located at the bottom of the screen) ! Align Buttons Multi select the shapes you need to align and press the required align button to align them.

10.6 Boolean Operations Menu ! Tools ! Object ! Unite, Intersect, Subtract, Exclude, Combine & Separate OR Functions Toolbar (Located at the bottom of the screen) ! Boolean operations

Boolean Operations – Unite, Intersect, Subtract, Exclude Combine / Separate Combine - combines the points in separate objects into a single shape with sub paths and the points can be edited as one shape. This is different from grouping where each individual shape retains its own set of points. Separate – separates a shape into sub paths, each sub path will become a separate shape. Functions Toolbar – Boolean operations can also be accessed easily via the Functions Toolbar

1

2

3

2

1

2


11 Layers Menu ! Layers ! Layers panel

Delete Layer – Deletes the current and selected layer indicated by the tick mark Show Layer – A toggle button when green indicates a visible layer Hide Layer – A toggle button when gray indicates a visible layer Copy Layer – Creates a new copy of the current layer Merge Layer – Merges the current layer down to the layer below it Add Layer – The “+” button opens a panel to add a new layer Change Layer Order – Change the order of the layer by dragging the layer using the handle to another location in the list Current Layer – Touch on the name of any of the layers in the list to make it the current layer. The current layer is indicated by a tick mark Lock Layer – A lock icon Indicates the layer is locked and cannot be edited, touch on the lock icon to unlock it, touch again to lock Layer Opacity – Set the layers transparency Rename Layer – Touch on the layer name of the current layer to open the layer detail panel, and touch on the layer title to enable the keyboard for renaming the layer

Shapes can be organized into different layers. A layer can be visualized as a separate transparent sheet on the board which holds a set of shapes. • Multiple layers can be created to organize the design logically

• Each layer’s visibility can be turned ON or OFF

• Each layer can be locked or unlocked, locked layers are not editable

• There is always a layer which is identified as the current layer, this layer can be set

9

1

6

3

5

4

2

7

8

9

2

10

3

6

8

7

11

1

4

5

10

11


• Any new shape created or pasted on the design will be located on the current layer

• You can move and edit shapes on other visible layers

• Layers can be raised or lowered, raising or lowering a layer will bring all the objects on the layer to the front or back depending on the zOrder of the layers

TIP: Turning off unused layers will boost the rendering and editing performance

11.1 Adding a new layer Menu ! Layers ! Layers panel ! “+” button To add a layer: 1. Use the Menu ! Layers ! Layers panel ! “+” button – to open the Add New panel

2. The Layer Name text field is auto populated with a new layer name of the format “Layer N” where N is the number of layers + 1

3. To change the default layer name, touch on the Layer Name text field for the keyboard to appear and enter the name, press Done on the keyboard when finished entering the name

4. Press the Add button to create the new layer

5. The new layer will now appear at the top of the list in the layers panel and will also be set as the current layer as indicated at the bottom caption in the layers panel

11.2 Removing a layer Menu ! Layers ! Layers panel ! Select the layer in the list ! Trash can icon You can remove a layer using the trash can icon in the layers panel. Removing a layer sets the layer right below the removed layer as the current layer. If there is only one layer in the list, Delete is disabled as there is a minimum of one layer for a design.

11.3 Inserting shapes on a layer New shapes inserted or pasted on the board automatically belong to the current layer. Refer “Setting a layer as the current layer” for changing/setting the current layer.

11.4 Showing & hiding layers Menu ! Layers ! Layers panel ! Toggle the Show/Hide button An icon at the start of each layer item in the layers list shows the visibility of the layer. The inner portion of the icon has a green color if the layer is set as visible or grey color if it is hidden. To show or hide a layer:


1. Open the layers panel - Menu ! Layers ! Layers panel

2. Touch the toggle button at the beginning of the layer list item to turn it to green for making it visible. Touch on the toggle button when green to make it hidden (gray)

11.5 Setting a layer as the current layer Menu ! Layers/Board icon ! Layers panel ! Touch on the name of any layer item in the list To set a layer as the current layer: 1. Open the layers panel - Menu ! Layers/Board icon ! Layers panel

2. Touch on the name of any layer item in the list, the current and selected layer will be indicated by a tick mark on the list item

11.6 Locking a Layer Menu ! Layers ! Layers panel ! Lock/Unlock button on the list item If a layer is locked, a lock icon will be visible on the layer item in the layers list. To show or hide a layer: 1. Open the layers panel - Menu ! Layers ! Layers panel

2. Lock or Unlock any Layer using the Lock/UnLock button in the list

11.7 Renaming a layer Menu ! Layers ! Layers panel ! Touch on the layer name ! Touch on the title Touching on the layer name in the layers list will open the layer details panel, touching on the layer title in the layer detail panel will show the keyboard and enable editing to make changes to the layer name.

11.8 Changing the order of layers Menu ! Layers ! Layers panel ! Drag layer item using the handle Any layer can be brought to the front of another layer or sent under another layer. To raise or lower a layer, use the handle at the end of each layer item in the list touch down and drag the item up or down to the position you want to reposition the layer in the list.


12 Setting a Background Image Menu ! Layers ! BG Layer panel

A background image can be set from the photo library, which will be laid under the grid. This feature is intended for tracing, copying or marking raster images. To set a background image: 1. Open the BG layer panel - Menu ! Layers ! BG Layer panel

2. Press the “Select Background Image” button – opens the photo library folder or the camera roll

3. Select the required image to be set as background by touching on it

4. A loading indicator will appear. Wait for few seconds for the image to be imported

5. Once the image is loaded, the thumbnail of the image will be visible on the panel

6. Turn ON the Background switch to enable the background image under the grid The “High Resolution” button sets a full resolution image as the background for tracing at higher zoom levels. Low resolution is still good for tracing at normal and lower zoom levels. TIP: Raster images takes up memory and affects performance. Turn off the “High Resolution” switch when you are doing excessive scrolling and zooming with the background OFF for better performance. Turn it ON only when you are doing intricate tracing. Turn OFF the Background image when you are done tracing for performance reasons.

1

2

3

4

BG Image Thumbnail – The thumbnail image of the selected background image Select Background Image – Button to open a list of images from the photo album to select as the background image Background ON/OFF – Switch to turn on or off the background High Resolution – Switch to set the background image on full resolution or low resolution for faster performance

1

2

3

4


13 Designs Menu ! Folder ! Designs

Source – iCloud or Local. Refreshes the designs list based on selection of source Design List Item – Opens the design details panel for the design Current Design Indicator – Caption indicates the current open design Add New Design – The “+” button opens a panel to add a new design Design Preview – Preview thumbnail image of design Design Lock – Disable editing by turning the switch off to lock the design Open – Automatically saves the current design and opens the selected design Download– If Source is iCloud, Download will download the design to the device Clear – Removes all the shapes in the current design Delete – Removes a design. You can also swipe right on the designs list to delete a layer Move To – Move To iCloud or Move To Local, based on the Source selected. “Move To” is disabled if the design is currently open. Open another design to Move the current design between iCloud and Local.

Designs are the equivalent of files and holds all the iDesign drawings. The Designs menu allows you to create and manage your designs. The designs panel shows a list of all your designs. This is a scrollable list of design names and any design can be selected. Selecting a design will open a sub panel with a design thumbnail and options for opening, clearing, locking or deleting the design. iDesign version 1.7 onwards has full iCloud support for automatic sync between your iPhone, iPad and XDesign (the Mac version of iDesign).

2

3

4

7

8

9 5

6

1

6

3 1

5

4

2

7

8

10

9

10

1

11

11


13.1 Automatic save & crash recovery Designs are automatically saved. Even in the event of a crash, designs are saved to the point right before the crash. • The very first time when the iDesign app is launched, a blank design with name “Design 1” is

created and loaded. You can rename this design or save it as a new design.

• On application launch, the last (current) design is automatically loaded for you to continue your work.

• In the event of a crash when the app is launched again, it tries to load the current design.

• Designs are auto-saved whether it is in the Local-list or on iCloud.

• Design on iCloud are synched to iCloud in the background.

13.2 Save As a new design Menu ! Folder ! Designs ! “+” button for Add New panel ! “Save As New Design” button To save the current design as a new design: 1. Open the Add New panel using Menu ! Folder ! Designs ! “+” button for Add New panel

2. A default design name is automatically created. To change this name, touch on the design name field to enable the keyboard. Press the Done button on the keyboard when you have finished entering the new name

3. Press the “Save As New Design” button on the Add New panel to create a new design which is a copy of the current design

13.3 Create a new blank design Menu ! Folder ! Designs ! “+” button for Add New panel ! “New blank design” button To create a new blank design: 1. Open the Add New panel using Menu ! Folder ! Designs ! “+” button for Add New panel

2. A default design name is automatically created. To change this name, touch on the design name field to enable the keyboard. Press the Done button on the keyboard when you have finished entering the new name

3. Press the “Select board size” button on the Add New panel.

4. Select a predefined board size from the list of available board sizes or Custom for specifying a custom board size

5. If the custom board size option is selected, Width and Height fields are enabled. Enter the required Width and Height using the keyboard available by taping on the field. Press the Done button on the keyboard after entering the values.

6. Change the Drawing Scale if required (applicable for very large drawings – refer to section “Setting the Board Size & Scale”


7. Note the new Drawing Size values displayed based on the new Width and Height.

8. Select the Back button to go back to the Add New panel

9. Press the “New blank design” button on the Add New panel to create a new blank design TIP: The default board size for a new blank design is the screen size of the device. Skip all steps after step 3 and press “New blank design” to create with the default size. If the device is in landscape mode, a landscape board size will be created.

13.4 Opening an existing design Menu ! Folder ! Designs panel ! Select design ! “Open” button To open a design: 1. Open the Designs panel using Menu ! Folder ! Designs panel

2. Select the design in the list. This will open a sub panel with the options for the design

3. Press the Open button to open the design The current design will be closed and saved before opening the selected design

13.5 Clearing a design Menu ! Folder ! Designs panel ! Select the current design ! “Clear” button To clear a design which is open: 1. Open the Designs panel using Menu ! Folder ! Designs panel

2. Find the the current design in the list and select it. This will open a sub panel with the options for the design

3. Press the Clear button to clear all the shapes in the design

13.6 Removing a design Menu ! Folder ! Designs panel ! Select design ! “Delete” button OR Menu ! Folder ! Designs panel ! Swipe right on the design item ! “Delete” button There are two ways to delete a design: 1. Using the Delete button on the design sub panel which is shown when a design item is

selected in the designs list A confirmation panel will appear with a Confirm button to delete the design permanently

2. Swiping right on the design item in the designs list, which will show a Delete button on the right of the list item


13.7 Renaming a design Menu ! Folder ! Designs panel ! Select design ! Touch on the title / design name Touching on the design title in the design detail panel will open the keyboard and enable editing for the design title. Note: Designs on iCloud can only be renamed if the design is not currently open. Open another design and then go back to the list to rename the design.

14 Exporting Designs Menu ! Folder ! Export

iDesign supports high quality export output in both raster and vector formats. The following formats are supported: Vector export formats: SVG (handles differences for Illustrator and InkScape support), PDF Raster export formats: JPEG, PNG (with or without transparent background) For JPEG & PNG, output resolutions of 1280x1920 on the iPhone and 2304x3072 on the iPad are supported. Vector format outputs (SVG & PDF) can be scaled to any resolution without any loss of clarity. • Designs can be exported in all supported formats as Email attachments

• Designs can also be exported to the photo library as JPEG images.

• Designs can be exported directly in “iDesign File” format to Dropbox and can be imported back from any device using the same Dropbox account.

To export a design:

3

1

2

Background – Opens a panel with background options Source – Opens a panel with source options Type – Opens a panel to specify the export format type Size – Opens a panel to specify custom export size options Export Option Buttons – Email, Dropbox, Photo Library and Print.

3

1

2

5

4 5

4


1. Open the design which needs to be exported (Refer “Opening an existing design”) if it is not currently open

2. Open the Export panel : Menu ! Folder ! Export

3. Select the export background

4. Select the export source

5. Select the export size

6. Select the export type

7. Press any of the supported export option buttons and wait few seconds for the design to be exported

a. For export to Photo Library, the export menu will close after the export is done.

b. For export via email, an email send window will appear with the exported design as attachment ready to be sent. Note that email should be configured on your device before export can be used to email.

c. For export to Dropbox, the export continues in the background and a spinning activity indicator is shown on the right hand top portion of the export panel while the exported file upload is in progress.

d. For export to iCloud, the exported file is sync’d to iCloud by the device in the background. There is no indicator as to when the sync is completed as this is done by the iCloud in background. To completely ensure whether the iCloud export is completed, refresh the Import list for iCloud on another device with iDesign. The usual time taken to export should be same as exporting to Dropbox.

e. To Print, use the Print option button. The design is exported based on the export settings and then printed via AirPrint.

14.1 Setting the export background Menu ! Folder ! Export panel ! Export Background

3

1

2

Transparent BG – To make the background transparent when exporting to PNG BG Layer Image – If ON, includes the background layer image in the export Grid – If ON, includes the Grid in the export

3

1

2


The background options allow including the background layer, the grid in the exported image and making the background transparent when exporting to PNG format.

14.2 Selecting the export source Menu ! Folder ! Export panel ! Export Source

14.3 Setting the export size Menu ! Folder ! Export panel ! Export Size

Designs can be exported at the board size or a custom size can be specified.

3

1

2

Board Size – Use the designs board size as the export size. (Capped) Custom Size – Enables the scale, width and height buttons to specify a custom export size Export Width, Height – Display and entry fields for export width and height Scale – Export scale as a % of the board size or selection. Note: There is a cap on export size (width/height of 3072px for iPad or 2048px for iPhone/iPod) for pixel based export formats (JPEG, PNG, Photo Library). No cap applies for PDF as it is a vector format.

3

1

2

4

4

There are four options available for what to export from the design: 1. Visible Layers

2. Current Layers

3. All Layers

4. Current Selection (only the selected objects on the board)

The current selection option uses the selection frame size instead of the whole board size for exporting


To specify a custom size for export, select the custom size option in the Export Size panel. This will enable the controls for setting the scale in percentage or width and height.

14.4 Setting the export type Menu ! Folder ! Export panel ! Export Type

14.5 Sharing iDesign files Menu ! Folder ! Export panel ! Export Type ! “iDesign File” option, and press the required Export option button for Emai or Dropbox Different ways you can share design files: 1. Save onto iCloud.

iDesign has full iCloud support and design files will be synched automatically with your devices and also with XDesign for Mac. Note: You should be using the “iCloud” list in the Designs panel for new designs to be created in iCloud. The “Local” list is not synched.

2. Share via Email attachment. This option can be used to share iDesign files with other users or with other devices. To open the attachment on the other device, open the email with the attachment – the attached iDesign file will be shown with the iDesign icon on it. Press and hold the attachment for an option to appear for opening using iDesign. Once the file is opened, it will be imported and added to the designs list.

3. Share via Export-Import to Dropbox Exported files can be imported back into iDesign from any device via the Import menu.

Export format options 1. iDesign File

2. JPG

3. PNG

4. PDF

5. SVG for Illustrator

6. SVG for InkScape


15 Importing Designs iDesign supports SVG Import and its own .idesign format for import. Files can be imported into iDesign from Dropbox or Email attachments. iCloud import for .idesign format is supported for older versions on iDesign. New versions do not need this due to full iCloud sync support of designs in the iCloud list. Menu ! Folder ! Import

Import Source – Select Dropbox or iCloud as import source and the list below will refresh with the files from the selected source Import File List – List of design files will be loaded based on the import source selected Downloaded Indicator– A green tick mark indicates that the file is downloaded locally Download – Downloads the selected design file from the imports list. The download is done in the background and an activity indicator is shown on the right side of the menu panel Delete – Removes the design file from the import source location. It deletes the file permanently from the cloud source

1

2

34

5

1

3 1

5

4

2


Activity Indicator – The activity indicator is shown when a file list refresh or download is in progress Delete Download – Removes the locally downloaded copy of the design file Import To Designs – Imports the downloaded design file into the apps designs list and opens the design Delete – Removes the design file from the import location (Dropbox or iCloud)

To import an iDesign file from Dropbox or iCloud: 1. Select the Import Source (Dropbox or iCloud)

This will refresh the imports list with all files from the selected import source location.

2. Select any of the files in the list. A details panel will be opened with further options to download the design file locally from the import location.

3. Download the file by pressing the Download button An activity indicator will be shown on the top right side of the panel while the design file is being downloaded.

4. When the download is complete a green tick mark will appear against the file in the list.

5. Select the file in the list and press the Import to Designs button. The file will be added to the Designs list and opened.

To Import iDesign files from email attachments: 1. Open the email with the attachment – the attached iDesign file will be shown with the iDesign

icon on it.

2. Press and hold the attachment for an option to appear for opening using iDesign.

3. Once the file is opened, it will be imported and added to the designs list.

6

8

9

7

6

8

9

7


16 Backup Designs Menu ! Folder ! Backup

Backup Location – Select Dropbox or iCloud as the backup location and the list below will refresh with the files from the selected location. The third option for local device backup is for backward compatibility to access local backups created using previous versions of iDesign. Backup List - List of all the iDesign backup files at the backup location Create new backup – “+” button. New backups are discontinued since iDesign version 1.7 with file based storage and full support for iCloud to automatically sync designs. Download – Downloads the backup file from the backup location to the device locally Delete – Removes the selected backup from the backup location

1

3

4

2

3 4

5

8

9 10

1

11

12

5

2


Downloaded Indicator– A tick mark indicates that the file has been downloaded locally from the backup location Delete Download – “+” button to create a new backup of all current designs Restore from backup – Restores from the selected backup by overwriting all current designs with the designs in this backup Email backup – Opens an email with this backup as attachment to send externally Delete - Removes the selected backup from the backup location. It deletes the file permanently from the cloud source.

8

10

11

9

12


17 Settings Menu ! Info ! Settings

Wireframe Zoom & Pan – Faster performance when enabled for zooming and panning for large designs with objects having fill colors and gradients Cloud Settings – iCloud / Dropbox – Settings for enabling/linking iCloud & Dropbox iCloud – Enable or disable iCloud for the app. Turning it off will disable iCloud access but all existing files in iCloud will be retained and can be accessed when you turn it ON again Dropbox – Enable or disable Dropbox for the app. Turning it off will disable Dropbox access but all existing files will be retained and can be accessed when you turn it back ON again Link/Unlink Dropbox – Link or unlink the app with a Dropbox user account. When you link it, a Dropbox login screen with be displayed to enter your Dropbox user ID and password.

3

1

2

Continuous Insert – Allows repeated insertion of the selected shape tool on subsequent touch, until the Select tool is selected Offset Handles – Enables the offset handles during point editing. Shaped as a cross layout over the selected edit point, these four handles allow you to see the actual point without the finger blocking it while moving using the offset handles. Rotation Handle – Enables the rotation handle for the current selection, a red handle appears on the side of the selection to rotate the selected objects Rotation Center Handles – Allows the rotation center of the shape to be changed Allow Restore – Enables restoring designs from an external iDesign database via email attachments

3

1

2

4

4 5

5

6

8

7

6

8 9

7

10

9

10


18 Dimension Tools Menu ! Tools ! Tools panel ! Length & Angle dimension tools OR Tools Toolbar (Located at the left of the screen) ! Length & Angle dimension tools

Length & Angle dimension tools – Available in the Tools menu panel Length dimension tool – The length tool can also be easily accessed from the Tools Toolbar Angle dimension tool – The angle tool can also be easily accessed from the Tools Toolbar

18.1 Length Dimension Tool To insert a length dimension: 1. Select the Length tool from the tools panel OR toolbar

2. Touch down at the location where you want to start the length dimension and hold for a second, then drag out to any direction to insert the shape and continue dragging towards the second point

3. While dragging, the measurements area will show the length of the dimension being inserted and resized

4. Once you have the right length stop dragging and lift up your finger to finish

12

3

2

1

3


18.2 Angle Dimension Tool To insert an angle dimension: 1. Select the Angle tool from the tools panel OR toolbar

2. Touch down at the location where the center of the circle for the arc is - to specify the radius and hold for a second, then drag out to any direction specify the first point

3. Once you have positioned the first point correctly, stop dragging and lift up your finger to finish inserting the first point

4. Touch down again and drag to specify the second point of the arc

5. Once you have positioned the second point, stop dragging and lift up your finger to finish inserting the second point

18.3 Dimension Settings Menu ! Properties ! Dimension panel OR Double tap on a dimension object ! Dimension panel

2

1

3

456

Auto – Enables automatic values as the dimension text for the length or angle dimension based on the specified end points Value – If Auto is set to OFF, you can specify a custom value as caption Dimension Style – Specify the arrow style and enable or disable the end marker lines Dimension Format – Specify the decimal places, fractional format, comma separators and unit suffix Text Location – Specify the location of the text (center, left, right, top, bottom) and whether the text is always horizontally aligned Apply To All – Apply the enabled and current dimension settings to all the dimensions in the design

2

3

4

5

6

1


1

2

3

4

5

6

8

9

Dimension Style – Dimension arrow style selection End Marker Lines – Turn ON/OFF end marker lines at the end points

Decimal Places – Number of decimal places for the displayed dimension value Fractional Format – Display the value in fractional format, useful when Feet and Inches are used as the drawing units Architectural Format – Display the value in feet+inches+fractions. Only enabled if Board Units are set to Feet. Comma Separators – Adds comma separators to the displayed dimension value based on the device/country settings Unit Suffix – Adds unit suffix to the displayed dimension value based on the current unit settings

Text Location – Specify the location of the displayed dimension value Horizontal Text – If horizontal text is ON, the displayed dimension text is rotated horizontally to the board at the specified text location irrespective of the rotation or slope of the dimension

8

9

3

4

5

6

1

2

7

7


18.4 Apply To All Menu ! Properties ! Dimension panel ! Apply To All

1

2

3

45

Dimension Style – Turn ON/OFF dimension style for apply to all Dimension Format – Turn ON/OFF dimension format for apply to all Line Style – Turn ON/OFF line style for apply to all Text Style Turn ON/OFF text style for apply to all Apply To All – Applies the current dimension settings based on the above 4 options to all the dimensions in the current design

1

2

3

4

5

iDesign Version 1.7 - User Guide - TouchAware · © 2010-2015 TouchAware iDesign Version 1.7 –...

Documents

Transcript of iDesign Version 1.7 - User Guide - TouchAware · © 2010-2015 TouchAware iDesign Version 1.7 –...