How to Use SimpleDraw

Quick links:

• Basics
• Drawing Lines
• Zoom and Navigation
• Working with Text
• Undo & Redo
• Line Properties
• Rectangles
• Export, Save & Load

SimpleDraw Basics

Supported Devices

At this time, SimpleDraw is designed for desktop / laptop computers with a keyboard and mouse.

Support for tablets with touchscreen controls is something I hope to deliver in the near future.

SimpleDraw is not intended to be used on mobile phones. It would be very difficult to offer a high-quality drawing experience on such a small screen.

User Interface Basics

The SimpleDraw UI has 3 key elements:

• The Toolbar, along the top
• The main drawing Workspace, which takes up the majority of the screen
• The Properties Panel to the right. This contains dynamic content depending on what tools are active, and which elements are selected.

The UI is primarily mouse-driven, but with keyboard shortcuts for some common operations (Ctrl-Z for undo, Ctrl-C, Ctrl-V for Copy/Paste, Escape, Delete, Shift-click for multiple selections etc.).

The Toolbar contains 6 areas, from left to right:

• Click tools. These are tools that are activated by clicking on the drawing. E.g. the Line Tool

  

• Drag tools. These are tools that are activated by holding down the mouse button, and dragging the mouse with the mouse button down. E.g. the Move Tool

  

  • An important point to note is that a “Click Tool” and a “Drag Tool” can be active at the same time. This reduces the frequency of “tool swapping” while using SimpleDraw

• Hints panel. This contains context-dependent hints and instructions, and controls to scroll through the available hints.

  

• Actions. These buttons trigger actions like Undo, Redo, Copy, Paste and Delete.

  

• Modifiers. These indicate when a key is held down that modifies the behaviour of a tool, e.g. Shift, or the Vertical / Horizontal constraints.

  

• File operations. New Drawing, Save, Load, Export.

  

Each of these tools is explained in the following sections.

Drawing Lines

To draw a line

• Select the Line Tool:
• Start the line by clicking where you want the line to start
• Click again at the point you want the line to end.

To modify a line (option 1)

• Use the Select Tool:

• Click on the line to select the line

• In the right panel, adjust the co-ordinates of the start and end points as required

  

To modify a line (option 2)

• Use the Move Tool:

• Hover over either the start or end point: a circle should appear around the point.

  

• Hold the mouse button down, and drag the point to the desired position.

• You can use the mouse wheel to zoom in for finer control:

  

To draw multiple connecting lines

• Hold down “Shift” to draw multiple connecting lines
• Or use the Multiline Tool
• Lines will stop when you finish at an existing point or line

• Press the Escape key to stop at any time…
• … or just deselect the Multiline Tool to finish.

To draw horizontal or vertical lines

• Hold down H or X to constrain a line to be horizontal
• Hold down V or Y to constrain a line to be vertical
• Or: Hold down C to constrain a line to be either horizontal or vertical.

Zoom and Navigation

SimpleDraw aims to offer high levels of precision and accuracy, and zoom capabilities are a key part of this.

There are multiple different zoom mechanisms offered by SimpleDraw, to allow for user convenience

Mouse Wheel Zoom

The mouse wheel can be used to zoom in and out of the drawing, to any level, at any time.

When zooming using the mouse wheel, the zoom will be centered on the mouse pointer, so make sure the pointer is over the area that you wish to zoom in to.

Zoom Tool

The Zoom Tool is located in the Click Tools Toolbar. When the Zoom Tool is selected, you can zoom in using left click, and zoom out using right click. Again, the zoom will be centered on the mouse pointer.

Zoom Slider

The Zoom Slider is located at the top of the Properties panel.

This can be used to zoom in/out at any time. The zoom will be centered on the middle of the drawing.

Quick Zoom

At any time, you can press and hold Z for a quick 5x zoom, centered on the current mouse pointer position.

When the Z key is released, the drawing will return to the original zoom.

Scroll Bars

When the zoom level means that the whole drawing is not visible in the workspace, scroll bars will appear on the right and bottom of the workspace.

Use these scroll bars to navigate around the drawing without zooming out.

Working with Text

To add text

• Select the Text Tool:

• Position the text where you want it on the drawing

  

• Use the right panel to adjust the text content, position and font size as required. You can adjust the text and font size either before or after you place the text.

  

• When you have finished placing text, deselect the Text Tool.

Modifying or moving text

• Use the Select Tool:
• Click on the text to select it
• Use the right panel to adjust the text content, position and font size as required.
  • You can also reposition text by dragging it using the Move Tool:

Undo and Redo

The Undo and Redo buttons can be used at any time to undo (or redo) recent operations.

You can also use Ctrl-Z as a shortcut for Undo, and Ctrl-Y as a shortcut for Redo.

SimpleDraw tracks the last 100 changes made to a drawing, so can undo up to 100 operations.

Selecting Multiple Elements

You can select one or more drawing elements. When a group of elements is selected, you can:

• modify the properties of any element in the group using the right panel

• move group of elements as a whole using the Move Tool:

• duplicate the entire group of elements, using the Copy and Paste Tools (or Ctrl-C & Ctrl-V keyboard shortcuts)

To select multiple elements

Using the Select Box Tool:

• Choose the Select Box Tool

• Use the mouse to drag a selection area

• All elements within that selection area will be selected.

Or, using the Select Tool:

• Choose the Select Tool:

• Hold down the Shift key

• Click on each of the elements to be selected.

With multiple elements selected…

• In the right panel, you can use the left and right arrows to navigate between selected elements:

• the entire selection can be moved using the Move Tool:
• the entire selection can be duplicated using the Copy and Paste Tools (or Ctrl-C & Ctrl-V keyboard shortcuts)

Line Properties

In addition to their start and end points, lines have some other properties that can be useful to modify.

These properties can be modified using the right panel, after selecting a line using the Select Tool:

Display Length

• When the “display length” property is set, the length of the line is always shown alongside it. When this property is not set, line lengths are only shown when a line is being drawn.

Fixed Direction

When the “fixed direction” property is set, the direction of the line is fixed. This means that if one end of a line is moved, the other end of the line moves with it, to preserve the direction of the line (although not it’s length)

For example, this means that moving the corner of a rectangle will result in a change to the dimensions of the rectangle, with right angles preserved.

This image shows what happens if you move the corner of a rectangle, and “fixed direction” was not set on both sides of the rectangle.

By default, lines do not have “fixed direction”, unless they were created by the Rectangle Tool . But you can set fixed direction on any line. The only constraint is that no more than two lines meeting at a point can have “fixed direction”.

Rectangles

The Rectangle Tool is a handy shortcut for drawing 4 lines to form a rectangle.

To draw a rectangle

• Select the Rectangle Tool

• Hold the mouse down where you want the top left corner of the rectangle

• Drag the mouse to the bottom right corner of the rectangle, and release.

  

• The dimensions of the rectangle are shown while it is being drawn. If you want to continue to show dimensions after the rectangle is drawn, you can adjust the line properties.

To modify a rectangle

Once a rectangle is created, it becomes a collection of lines, which can be independently modified or deleted.

• To move the rectangle as a whole, you will need to select all 4 points, or 4 sides, using the Select Box, or Shift+Select Tool. Once you have selected the 4 points or 4 sides, you can move the rectangle using the Move Tool:
• To adjust the size of the rectangle, just select any corner point, and move it using the Move Tool, or the properties of the point.
• You can also modify the sides of the rectangle individually. For example, you can remove one side of a rectangle to join it with another, like this:

Export, Save and Load

To share a drawing outside of SimpleDraw, you will need to Export it.

Currently SimpleDraw supports exports in PNG image format.

To export an image

• Press the Export Button

• Choose whether to include the background grid, and choose an image resolution

  

• Press the “Export” button.

The image will be downloaded to your “Downloads” folder.

Note that the size at which points are rendered in the export varies, depending on your zoom level at the time of export: I will fix this soon!

To save a drawing

Note that exported drawings can’t be loaded back into SimpleDraw. To save a drawing for future use in SimpleDraw, you need to save it:

• Press the Save Button
• This will save the drawing data to a file in your downloads folder.
• Note that this file is in a propretary format used by SimpleDraw. You won’t be able to view the drawing in a file, other than by re-loading it within SImpleDraw.
• Each time you save a file, SimpleDraw will create a new file in your Downloads folder. Filenames contain a timestamp, so they should never clash with each other. You should move these files to to a safe location for long-term storage.

I am aware that this is a slightly cumbersome mechanism for saving files. Unfortunately, as a web application, SimpleDraw does not have access to your file system, other than your Downloads folder. In future, I will be offering a cloud storage option for saving drawings, which should be much more convenient to use.

To load a saved drawing

If you want to work further on a saved drawing (or if you want to export it to a PNG file), you can load a saved drawing as follows:

• Press the Load Button
• This will open a file-picker window. Navigate to the file that you wish to load, and select “Open”
• The file should open in SimpleDraw.
• Note that next time you save the file, it will create a new timestamped save file in your Downloads folder - the file that you loaded will not itself be changed.