Simple Wires Help

- Getting Started: /manual/docs/getting-started.html
- Projects Dashboard: /manual/docs/projects.html
- Sharing Projects: /manual/docs/sharing.html
- Drawings and the Start Page: /manual/docs/drawings.html
- The Drawing Editor: /manual/docs/editor.html
- Functional Blocks and Ports: /manual/docs/blocks.html
- Master Library: /manual/docs/equipment-library.html
- Warehouses: /manual/docs/warehouses.html
- Racks and Rack Panels: /manual/docs/racks.html
- Drawing Cables: /manual/docs/cables.html
- Off Sheet Pointers: /manual/docs/off-sheet-pointers.html
- Shapes, Text and Images: /manual/docs/shapes-text-images.html
- Page Setup and Drawing Settings: /manual/docs/page-setup.html
- Printing and Exporting: /manual/docs/print-export.html
- Project Data Grids: /manual/docs/project-data.html
- Signal Types: /manual/docs/signal-types.html
- Drawing Revisions: /manual/docs/revisions.html
- Teams: /manual/docs/teams.html
- Billing and Plans: /manual/docs/billing.html
- Your Account: /manual/docs/account.html
- Themes and Appearance: /manual/docs/appearance.html
- Keyboard Shortcuts: /manual/docs/keyboard-shortcuts.html
- FAQ and Troubleshooting: /manual/docs/faq.html


# Shapes, Text and Images

Lines, shapes, text boxes and pictures turn a wiring diagram into a readable sheet, and on their own they
make concept drawings. This page covers the drawing tools, the **General**, **Text** and **Image** tabs of
the properties pane, and page borders.

## Drawing tools

The **Active Tool** buttons at the top of the properties pane choose what a click or drag on the canvas
does. Hover over a button to see its name.

| Button | Tool | Draws |
|---|---|---|
| Arrow | **Select Tool** | Nothing. Select, move and edit items, and drag between ports to draw cables. |
| Connected line | **Polyline Tool** | An open line with any number of segments. |
| Closed outline | **Polygon Tool** | A closed, filled shape with any number of sides. |
| Letter T | **Text Tool** | A text box. |
| Picture | **Image Tool** | A frame that holds a picture. |
| Shapes, with an arrow | **Shape Tool** | A shape you pick from a list. |

New items take their outline and fill from **Settings > Active Stroke** and **Settings > Active Fill**; see
[Page Setup and Drawing Settings]({{< relref "page-setup" >}}). A polyline has no fill.

A drawing tool stays active after you draw, so you can draw several items in a row. Click **Select Tool**
when you want to select or move things again.

{{< screenshot name="shapes-text-images-tools" alt="The Active Tool buttons with the Shape Tool list open" >}}

### Polylines and polygons

1. Click **Polyline Tool** for an open line or **Polygon Tool** for a closed shape.
2. Click on the canvas where the first point goes, then click at each corner.
3. To finish, right-click or press <kbd>Enter</kbd>. A polyline needs at least two points and a polygon at
   least three.

While drawing, press <kbd>Z</kbd> to take back the last point, or <kbd>Esc</kbd> to cancel.

To change the outline afterward, select it with **Select Tool** and drag the handles on its points.

<!-- VERIFY: Esc cancels an in-progress polyline/polygon, and selecting a finished polygon shows per-point reshape handles (GeometryReshapingTool). -->

### Text boxes

1. Click **Text Tool**.
2. Drag a rectangle on the canvas. A box reading `Text` appears.
3. Switch to **Select Tool**, click the text and type. Click elsewhere on the canvas to finish.

Text wraps to the width of the box; drag the box's handles to resize it. A text box has its own outline and
fill, can hold a picture from the **Image** tab, and cables can connect to it.

<!-- VERIFY: how a user moves a text box versus starting a cable from it (the text box node is linkable, so dragging its body may start a cable). -->
<!-- VERIFY: does Enter insert a new line in a text box or finish editing (TextBlock is not multiline-restricted here)? -->

### Picture frames

1. Click **Image Tool**.
2. Drag a rectangle on the canvas. An empty picture frame appears.
3. Switch to **Select Tool**, select the frame, and pick a picture on the **Image** tab. See
   [Images](#images).

### Shapes

1. Click the arrow on **Shape Tool** and pick a shape. The list has rectangles, squares, ellipses and circles,
   triangles, lines and curves, polygons from pentagon to dodecagon, stars and bursts, and symbols such as
   **Cloud**, **Heart** and **NotAllowed**.
2. Drag on the canvas to draw it.

Shapes have an outline and fill and can hold a picture. Cables don't connect to shapes.

## Shape formatting

Select one or more items (anything except cables) and use the **General** tab. The top of the tab has
**Count in BOM** and **Lock Position**; see
[Lock Position and Count in BOM]({{< relref "blocks#lock-position-and-count-in-bom" >}}).

**Shape**

The **Shape** button shows the current shape. Click its arrow and pick another shape to change the outline
of every selected item. This works on functional blocks, text boxes and picture frames as well as shapes.

**Stroke**

- **Width**: outline thickness, from 0 to 20.
- **Line Type**: **Solid**, **Dot**, **Dash**, **Long Dash**, **Dash Dot**, **Dash Dot Dot**,
  **Dash Dot Dot Dot Dash** or **Dot Dash Dot**.
- **Color**: outline color.

**Fill**

- **Shadowed**: **Yes** adds a drop shadow.
- **Color**: fill color.

<!-- VERIFY: Shadowed has a visible effect on functional blocks (their isShadowed binding is commented out in nodetemplates.js) and on shapes/text boxes. -->

To change a cable's line, use the **Cable** tab instead; see
[Cable properties]({{< relref "cables#cable-properties" >}}).

{{< screenshot name="shapes-text-images-general-tab" alt="The General tab for a selected shape, showing Shape, Stroke and Fill settings" >}}

## Text

The **Text** tab styles the text of the selected items. Each piece of text belongs to a **Text Kind**, and
you pick which kind to change.

1. Select the items.
2. In **Text Kind**, choose the text to change:
   - **(All)**: every kind at once.
   - **Plain Text**: the text in text boxes and page border titles.
   - **Cable Number**
   - **Manufacturer**, **Model**, **SysName**, **Alias**, **Location**: the labels on blocks, racks and
     panels.
   - **Drawing Name**
   - **Left Connectors**, **Left Ports**, **Right Connectors**, **Right Ports**: the connector and port
     labels on each side of a functional block.
3. Change any of these:
   - the **bold** and **italic** buttons,
   - the eye button, which hides that kind of text while it is pressed,
   - the up and down arrow buttons, which make the text a step larger or smaller,
   - **Font**: **Arial**, **Calibri** or **Verdana**,
   - **Size**: 6 to 72,
   - **Foreground**: the text color,
   - **Rotation**: 0 to 359 degrees.

Only the chosen kind changes on the selected items. For example, select every block in a drawing, pick
**SysName**, and set **Size** to 12 to make all the SysNames larger without touching port names.

When the selection includes cables, the text settings apply to the cable labels, and the eye button hides
the labels at both ends of the cable.

The style for new items comes from **Settings > Active Text Style**; see
[Page Setup and Drawing Settings]({{< relref "page-setup" >}}).

<!-- VERIFY: Rotation has no effect on Plain Text and Drawing Name (CSSStringToModel sets no angle for those kinds). -->

{{< screenshot name="shapes-text-images-text-tab" alt="The Text tab with Text Kind set to SysName for a selected functional block" >}}

## Images

The **Image** tab puts a picture into the selected items: picture frames, text boxes, shapes, functional
blocks, rack panels and page borders.

- **Image URL** is the address of the picture. Clicking a picture under **Uploaded Images** fills it in.
  Clear the field to remove the picture from the selected items.
- **Visible** shows or hides the picture without removing it.
- **Stretch** sets how the picture fits its frame:
  - **None**: natural size.
  - **Fill**: stretched to fill the frame, even if that distorts it.
  - **Uniform**: as large as fits inside the frame, keeping its proportions.
  - **UniformToFill**: fills the frame, keeping its proportions and cropping what doesn't fit.
- **Upload Image** adds a picture file to the project. Click the button to browse, or drop a file on it.
  Only image files are accepted, up to 20 MB.
- **Uploaded Images** lists the pictures uploaded to this project, so every drawing in the project can use
  them.

**To add a picture**

1. Select the item.
2. On the **Image** tab, upload the picture if it isn't already under **Uploaded Images**.
3. Click the picture under **Uploaded Images**. It is applied with **Stretch** set to **Fill**; change
   **Stretch** if you want another fit.

**To delete an uploaded picture**, right-click it under **Uploaded Images** and choose **Remove**. This deletes
the file from the server. Items that used it may keep showing it for a while from your browser's cache, so
replace the picture in those items too.

<!-- VERIFY: can users type an external image URL into Image URL, and does such an image appear in PDF/PNG/SVG exports? -->

{{< screenshot name="shapes-text-images-image-tab" alt="The Image tab with an uploaded logo selected under Uploaded Images and Stretch set to Uniform" >}}

## Page borders

The **Page Borders** section of the library pane has title blocks and frames to describe the sheet. Switch
the section to **List** to read what each one is.

**Title blocks**

- **Title block**: a horizontal block for the bottom of the page, with a frame for your logo.
- **Side strip**: a tall strip you can resize to the height of the page.
- **Classic title block**: drawing number, revision, sheet number, and lines to sign off who drew and
  checked the drawing.
- **Revisions**: a table of revision rows. Right-click it to **Add revision row** or **Remove last
  revision row**, then fill in each row.

**Frames and strips**

- **Page frame**: a frame that fits itself to the page margins when you drop it, with lettered and numbered
  zones along its edges.
- **Bottom strip**: a title strip that fits the width of the page, at the bottom.
- **Frame, bottom strip** and **Frame, right strip**: a page frame with a title strip along the bottom or
  down the right side.

A frame or strip sizes itself to the drawing's margins as you drop it, so set the page size first (see
[Page Setup and Drawing Settings]({{< relref "page-setup#page-size-margins-and-units" >}})). The others you
resize yourself.

Drag one onto the canvas and fill it in:

- Select the border and choose a logo on the **Image** tab. It appears in the grey picture area.
- Click the title and each line of text to edit it.
- The date and **Drawing Name** fill in on their own.

Each line of text uses a Text Kind, so you can style it on the **Text** tab: the title is **Plain Text**,
and the lines below use **Manufacturer**, **Model**, **SysName** and **Alias**. Turn on **Lock Position**
on the **General** tab so the border doesn't move while you work.

<!-- VERIFY: the date on a page border shows the current date each time the drawing is displayed, not a saved date. -->
<!-- VERIFY: the horizontal title block (titleBlock0) is not resizable; the side strip (titleBlock1) is. -->
<!-- VERIFY: the older title block and side strip fill in today's date each time the drawing is displayed; the newer templates fill theirs in once, when you drop them. -->

{{< screenshot name="shapes-text-images-page-border" alt="A page border title block placed on the page with a logo, title and Drawn By and Checked By lines" >}}