Unicode Circuit Art

U Circuit Art Drawing Application User Guide

Few Jar Smith

The U Circuit Art webpage is a self contained web application for using Unicode to “draw” electronic circuits in a form that can be included as part of a text file – in particular as part of a source file for a micro controller such as the Arduino.

                    ┌───────┐
                    │   ┌───┴┐
              o─────┘ ┌─┤O││O│
       ┐      o───────┘ │ └┘ │
    OUT├─────>o─────────┤<──>├─┐
       ┘      o────────┐└────┘ │
              o────┐   └───────┘
                   │
                   │
                   │
                   │
                 ┌─┴─┐
                  GND

Warnings
Copyright
Running the App
Application Window
MOVE mode
TEXT mode
KEYED mode
SELECT mode
DRAG mode
Emulated File System
Drop Down Menus
PLOT button

Warnings

For use in an ES6 compliant browser such as a recent Firefox or Chrome or Safari or Opera browser.
Assumes a mono space font such as Courier is being used. Please read the NOTE in the description of the TEXT option of the VIEW menu.
It was written as an amusement and is NOT commercial grade software.
Assumes a keyboard with Enter, Backspace, Shift, and arrow keys.
The creation and editing of a circuit is performed primarily using the keyboard. The mouse is only used to access the menus at the top of the window.

Does not keep a conceptual model of a circuit – just the symbols used to draw something – it need not even be a circuit.

      ┌────┐
      │╲  ╱│
      │O││O│
      │ └┘ │
      │┌──┐│
      ││  ││
      └────┘

Not suitable for drawing large complicated circuits.
This is not a tutorial !!!

Copyright

Copyright 2025 Few Jar Smith

Permission to use, copy, modify, and/or distribute this software and user guide for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Running the App

U Circuit Art uses a rectangular canvas to draw circuits. This is organized into a grid of single Unicode drawing characters.

Circuits are saved as emulated files. Since access to user files in a web browser is awkward, a file system is emulated using several megabytes of space allocated to the web browser. This is explained later.

Use of the phrase “file system” will refer to the emulated file system. The phrase “user file system” will refer to the usual file system on the computer.

U Circuit Art is a Single Page Application (SPA) consisting of a single self-contained web page file named ucircuitart.html

The current version of the app is 1.0.1-J

As a consequence, the user can save that file to their computer for use offline. The details of that process vary from one operating system and browser to another.

In any case the reader can start the app using this link: U Circuit Art

In order to read this user guide while at the same time using the app, it is suggested that the reader start two copies of their browser, point both of them to this user guide, and use the above link in one of the copies to start the app.

NOTE: After clicking in this user guide (or anywhere outside the app's canvas), your keyboard will be focused on that window. Keystrokes meant for the drawing app go to that window instead of to the app. Click back in the app's canvas to resume using it.

Application Window

U Circuit Art helps the user draw an electronic circuit using a canvas organized as a grid of “squares” with a specific number of rows and columns.

Each “square” of the grid can hold ONE (16 bit) Unicode character. Such a “square” is actually rectangular in shape since most mono fonts are taller than wide.

Above the canvas is a table of control information.

At the top of the table is a row of drop down menus labeled:

MODE CIRCUIT IMAGES EDIT FILE VIEW

These are activated using the mouse.

Below the row of drop down menus on the left is the file path name of the current circuit and on the right a pink status/error message space.

Auto Direction

To the left of the MODE menu is an entry labeled DIR. It provides a preferred cursor movement direction used by some operations. This will be called the “auto direction”. It can be changed by holding down the Shift key and pressing an arrow key.

Drawing is done using the keyboard and is performed in several different “Modes” which determine what actions the keys produce.

All modes use a (color coded) cursor to indicate which “square” in the canvas will be affected. Most modes put what they draw in the old cursor position before the cursor moves. Thus the cursor will end up over a blank square or whatever had been drawn there earlier.

Below the MODE menu is a button --HELP-- which will provide a summary of the keys used in the current mode (as shown in the MODE menu). The arrow keys are not described. There is a Click button beside each summary that will activate the described action and close the help dialog. Using the help menu for each drawing operation will be clumsy, it is better to learn which keys do what.

The menu labeled MODE can be used to choose the drawing mode but it is more convenient to use the keyboard as described just below.

MOVE mode (cursor color is gray)

This is mostly for moving the cursor around the canvas using the arrows keys.

Other keys change the mode as follows:

w	for WIRE mode
t	for TEXT mode
k	for KEYED mode
s	for SELECT mode
d	for DRAG mode
p	Inserts a pin (wire terminal) and changes to WIRE mode.
e	for ERASE mode
i	to insert a DIP component without changing the mode (think integrated circuit) Asks for pins names using two rows. Assuming there are 2k many pins, the top row is for pins #2k to #(k+1) and the bottom row is for pins #1 through #k. It will draw a dimple (⊃) on the short side adjacent to pins #1 and #2k.

the Backspace does an UNDO operation – see the UNDO option in the EDIT menu.

TEXT mode (cursor color is violet)

Draws text entered from the keyboard.

After entry, the cursor moves as indicated by the auto direction. Change the desired auto direction (shift+arrow) before typing the text character.

The Backspace key does NOT work as expected, instead it does an UNDO.

The Enter key terminates this mode and returns to MOVE mode.

KEYED mode (cursor color is blue)

Draws individual special Unicode shapes. Along with using the PLOT button, this allows arbitrary unicode drawing for the brave-at-heart. Note that the keyboard position of some of the letters below hints at the Unicode shape – for example the e-r-d-f keys form the corners of a square on the standard keyboard. The auto direction controls movement of cursor after a shape is drawn.

e	┌	upper left box corner
r	┐	upper right box corner
f	┘	lower right box corner
d	└	lower left box corner
w	┴	upward join
s	├	rightward join
a	┤	leftward join
z	┬	downward join
U	∪	cup up
N	∩	cup down (think lower case n)
C	⊂	cup rightward
D	⊃	cup leftward
E	∈	belong
B	∋	reverse belong
O	Ω	capital omega
M	µ	lowercase mu
+	┼	crossing wires (connecting each other)
-	─	horizontal wire segment
i	│	vertical wire segment
/	╱	rightward leaning diagonal – slightly over-sized
\	╲	leftward leaning diagonal – slightly over-sized
>	►	solid triangle pointing right
<	◄	solid triangle pointing left
^	▲	solid triangle pointing up
v	▼	solid triangle pointing down

Any other keys are treated as ordinary text.

There are many interesting unicode drawing characters, but they often fail to be useful in a fixed size (mono-font) drawing grid.

Even Courier will often substitute a non-conforming glyph for some of the unicodes. When produced as text, this will shift all the parts of the drawing located to the right of the non-conforming glyph.

WIRE mode (cursor color is green)

Draws wires and connected components.

Wires are drawn using the arrows keys. The wire is left behind the cursor as it moves. The cursor usually moves onto a blank square.

In order to bend the wire sensibly, this mode keeps track of the previous direction of the wire. That previous direction is displayed in the auto direction arrow below the DIR label.

When the WIRE mode is first entered, the auto direction arrow determines a default previous direction. Hence moving at an angle will immediately produce a turn (elbow). Immediately moving directly opposite the auto direction will be ignored.

Trying to draw the wire backwards will erase its most recent line segment. This can be repeated to erase the wire. Use this feature instead of the backspace key.

When the wire is drawn across another wire – it is assumed that they are NOT connected and so a gap is left in the wire being drawn.

A component can be inserted onto the wire by typing one of the following keys:

r	Insert a resistor – drawn as a box with its value labeled inside. It will ask for the label and the box will be long enough to hold the label. An “R” character in the label will be drawn as an omega Ω. The orientation of the resistor box is determined by the auto direction. The wire will continue being drawn on the other side of the box.
c	Insert a capacitor – drawn conventionally. It will ask for a label which will be drawn along a lead of the drawn capacitor. The label will be split into a numeric value and units. The numeric value will be drawn on one side of the lead and the unit on the other. A “u” character will be drawn as a mu μ. The orientation of the capacitor is determined by the auto direction. The wire will continue being drawn on the other side of the capacitor.
p	Insert a labeled terminal connection (a pin) and return to MOVE mode. It will ask for a label. If the label has several parts separated by blanks, then a multi pin terminal will be drawn. The wire being drawn will connect to the first of these. The orientation of the terminal is determined by the auto direction. The WIRE mode is terminated in any case.
d	Insert a diode. It will ask for a label which will be drawn along a lead of the drawn diode. The orientation of the diode is determined by the auto direction. The wire will continue being drawn on the other side of the diode.
l	(lower case L) Insert an LED - It will ask for a label which will be drawn near the drawn diode. This is distinguished from a diode by the presence of a pair of tall slashes (╱╱). The orientation of the diode is determined by the auto direction. The wire will continue being drawn on the other side of the LED.
j	(lower case j) Join the wire being drawn to another existing wire passing at the cursor. This terminates WIRE mode and returns to MOVE mode. Otherwise drawing the wire across an existing wire will just skip over it as explained in the introduction to this mode.
J	(upper case J) Join the wire being drawn to another existing wire passing through the cursor. This produces a ┼ shape connecting the two wires and continues drawing the current wire on the other side.
Enter	Terminate WIRE mode and return to MOVE mode.

SELECT mode (cursor color is orange)

SELECT mode together with DRAG mode can be used for two different purposes. One is to move a portion of the canvas to another location. The other is to create and save a repeatable image that can be duplicated in other drawings (or elsewhere in the same drawing)

Drag Image

For either purpose a rectangular portion of the canvas can be copied and set aside for use elsewhere or in another drawing. The copy is called the "drag image" and is moved around using DRAG mode. There can only be one drag image at a time. However any drag image can be saved in the file system and retrieved later.

The SELECT mode allows selection of the rectangular area to be copied as the drag image. The selected area will be colored yellow. The cursor will remain orange and be displayed at the lower right corner of the area.

The position of the cursor when SELECT mode is first entered will remain the upper left corner of the selected area while in SELECT mode. To change that position, press the ENTER key to return to MOVE mode, move the cursor with the arrow keys and press s again.

Once in SELECT mode, the arrow keys change the extent of the selected area. The selection begins at the entry cursor position and extends down and to the right. Moving the cursor above or left of the selected area is prevented.

This rectangular portion of the drawing selected in SELECT mode can be set aside as the drag image. This is done by pressing the x or c keys. The application then enters the DRAG mode (see below). Once in DRAG mode the lines and text of the drag image will appear in red.

Besides the arrow keys, there are a few other lower case keys recognized:

x	Save the selected lines and text as the drag image and then erase the portion of the drawing that was selected in yellow. The drag image will appear in red and DRAG mode will begin. Note that the erased portion now still appears (but in red) since DRAG mode displays the drag image. This operation is primarily used to move a part of a drawing to a new location using DRAG mode.
c	The selected lines and text will be kept as the drag image which will now be drawn in red and DRAG mode will begin. The selected portion of the canvas will not be erased – but is temporarily hidden by the red drag image.
s	Save the selected portion of the canvas as a file in the folder selected by the IMAGES file chooser. A new file name will always be requested – even if the IMAGES browser has already selected an Image file. To edit an Image file, load it from the CIRCUIT file browser, edit it as if it were an entire circuit and SAVE it from the FILE menu.
Enter	Terminate SELECT mode and return to MOVE mode. The yellow selection of the canvas will return to its normal black and white.

DRAG mode (cursor color is brown)

A drag image has been created (or loaded). The SELECT mode above explains how a drag image is created. The drag image is displayed with red lines and text on a yellow background.

Note that as arrow keys are used to move the drag image around the canvas, existing parts of the drawing will be progressively covered and uncovered.

The drawing on the canvas is not changed by motion of the drag image. Only use of the c or Enter key (see below) will alter the canvas.

The arrow keys move the drag image around the canvas. They do not change its size.

These other keys are recognized:

c	(lower case) Deposit the drag image at its location on the canvas. Remain in DRAG mode so that multiple copies of the drag image can be deposited.
Enter	Deposit the drag image at its location on the canvas and return to MOVE mode. Effectively a c operation followed by an escape.
Escape	Terminate DRAG mode and return to MOVE mode. The drag image is left unchanged but no longer visible. If the d key (in MOVE mode) is used to re-enter DRAG mode, the same drag image will be seen.
r	Rotate the drag image 90 degrees clockwise. This will cause the drag image to apparently change size – since the canvas “squares” are not really square, turning them on their side changes the aspect of the image. To rotate 180 degrees, press r twice. To rotate 90 counter clockwise, press r three times. Not all unicode characters rotate well – some are just left unchanged.
f	Flip the drag image left and right sides. This is not the same as two r commands.
F	Flip the drag image top and bottom sides. This is not the same as two r commands.

Emulated File System

Web pages are not normally allowed to freely access the user’s file system. So U Circuit Art uses a portion of the web browser’s storage to emulate a file system. Use of the phrase “file system” will refer to the emulated file system. The phrase “user file system” will refer to the usual file system on the user’s computer rather than the emulated one. The user should BACKUP (see FILE menu) the file system fairly often, since the web browser’s local storage can be easily (and inadvertently) deleted.

Emulated File Paths
Emulated File Chooser

Emulated File Paths

The files in the file system are identified by Linux style path names with a slash ( / ) used to separate folder names and an initial slash ( / ) to denote the top level folder. A backwards slash ( \ ) is not used for that purpose.

Emulated File Chooser

The File Chooser used to navigate the emulated file system is designed to occupy very little space – no file structure window or folder tree is provided.

This will take some getting used to. It is recommended that the user play around with creating sub-folders and silly circuits, and deleting them before doing any serious work.

A choice of file path name is represented as a stack of drop down menus (for example the stack under the CIRCUIT label).

Each menu represents the contents of a folder in the file system. That folder is the one selected in the menu immediately above (but see below).

The top menu represents the root of the file system. If clicked, it shows the folders and files in the file system root. This is an exception to the previous comment.

The bottom menu represents the contents of the last folder in the path. It can be blank if no selection has been made in that folder.

The menu immediately above the bottom menu (if any) should give the name of the last folder in the path.

For example, if the path was:

/Any/Audio/easyAmp

Then the CIRCUIT stack of menus would be:

Clicking a menu in the stack, provides alternatives to the file or folder shown in that menu. The contents of a folder shown in a menu is in the menu just below.

Selecting a path to a folder will usually leave the next menu below it blank. Clicking that will show the files (and sub-folders) in that folder.

Every menu in the stack has a [NEW] entry which can be clicked to create a new circuit or a new sub-folder.

The top menu in the stack also has a [ROOT] entry which can be clicked to remove all but the top menu and make its selection blank. This is mostly useful for moving a detached drawing into the root folder. It can also be used to completely delete the (emulated) file system (using DELETE from the FILE menu).

File and folder names cannot contain a blank or a slash ( / ) or a less than ( < ) or a open bracket ( [ )

Q and A

Q: What about transistors?
A: Use the browser "save as" feature to save this set of drag images: ucircTransist to wherever you keep your downloads. Then use the APPEND option to load them into the IMAGES folder.
You can use the DRAG mode r and f and F keys to rotate and flip them.
Q: What about inductors?
A: Have not found good unicode symbols for a coil. Below is a poor attempt - so was not implemented in JS code.
```
 ┌┴┐ 
( 1( 
 )0 )
( m( 
 )H )
 └┬┘
```
Q: Where can questions and suggestions be addressed?
A: Constructive comments can be addressed to smith@fewjarsmith.com Don't expect an answer very soon.

FILE Menu

SAVE	Save the drawn circuit in the emulated file whose path is shown in the lower left corner of the control table. If that is blank, a file name will be requested for the circuit. WARNING: if you (somehow) erase the content of the canvas, and then select SAVE, it will clear the content of the emulated file whose path is shown in the lower left corner of the control table. Instead, to begin with a new empty drawing, select the `[NEW]` option in an appropriate folder under CIRCUIT.
DETACH	The path name of the drawn circuit is cleared. This allows the circuit to be stored in another folder and under another name. Navigate to the desired folder before selecting the SAVE option. Since the circuit path name was cleared, a file name will be requested for the circuit.
DELETE	Delete the circuit file or folder named in the CIRCUIT menu stack. It will ask for authorization. To select an earlier folder in the menu stack, simply click its name in the menu in which it appears. It will then become the bottom-most folder showing in the stack (perhaps with an empty selector below it). The DELETE operation will delete the selected folder and all of its children (after asking for confirmation)
BACKUP	Combine all the information in the file system and save it in the user’s download directory under a name like: `ucircuitart`yyyymmdd-hhtt`.ucab` where yyyy is the current year, mm is the current month, dd is the current day of the month, hh is the current hour (24 hour mode) and tt is the current minute. Any duplicates saved within the same minute will be labeled such by your web browser. It is recommended that a BACKUP be performed prior to any substantial changes to the file system – especially before using RESTORE.
RESTORE	Request the user select a user file of type `.ucab` (or .txt). This will likely be in the download folder used by the web browser. Supposedly the browser will only show user files ending in `.ucab` or in `.txt` -- however the details of how the selection is made vary from browser to browser - although most have an option () allowing all user files to be shown. Subfolders are always shown. Be CAREFUL* since the RESTORE clears out the current file system and replaces it with the information from that selected file.
OUTIMGS	Saves all of the drag images stored in the /IMAGES folder in a text file named: `images`yyyymmdd-hhtt`.txt` This file can be shared with other users via email. It is a text file containing the drawing of each of the saved drag images, preceded by a line giving the file name. There are two blank lines between each of the saved images. After downloading the file, another user can load the file of images into U Circuit Art using the APPEND option in the FILE MENU. WARNING WARNING WARNING Be sure to use the APPEND option to load these images and not the RESTORE option - since the latter will first erase all your existing work.
APPEND	Request the user select a user file of type `.txt` This will likely be in the download folder used by the web browser. Supposedly the browser will only show user files ending in `.txt` or in `.ucab` -- however the details of how the selection is made vary from browser to browser - although most have an option () allowing all user files to be shown. Subfolders are always shown. The APPEND appends the information from the selected file. In case of duplicate file name paths, the information from the requested user file replaces any conflicting information in the (emulated) file system. Be CAREFUL since the APPEND replaces existing circuits with ones with the same path name from that selected file.

Refiling a Circuit

To refile a circuit under a different name and perhaps different folder, first load the circuit using the CIRCUIT menu stack. Then select DETACH from the FILE menu. Next navigate to the new folder (creating it via [NEW] if necessary). Then select SAVE from the FILE menu. It will request another name for the circuit (it can be the same name).

If wanted, delete the original circuit by re-selecting it in the CIRCUIT menu and then use the DELETE option from the FILE menu.

Circuit Menu

This is a File Chooser for navigating emulated files. See the earlier section on the emulated file system.

IMAGES Menu

This is a File Chooser for saving and retrieving the drag image.

The file name (if any) in the bottom menu of the IMAGES stack can be accessed with the d key while in MOVE mode. The chosen file will become the drag image.

All of the files seen in the IMAGES menu can also be seen in the CIRCUIT menu. However they will be treated as circuits there rather than reusable images.

NOTE: An IMAGES file or folder can only be deleted by accessing it in the CIRCUIT menu and using the DELETE option of the FILE menu.

EDIT Menu

SIZE	Asks for a new size for the displayed circuit. Enlarges or clips the drawing to the requested size. Click CANCEL to the requested size if the circuit size should not be changed.
STASH	Saves the current drawing on an “UNDO” stack and clear the “REDO” stack. Clicking the Backspace key will perform an UNDO operation as described below. An automatic “STASH” operation is performed in WIRE mode every time that mode inserts a component.
UNDO	Remove the most recent drawing saved on the “UNDO” stack and place it on the canvas after saving the current version on the “REDO” stack. The original version of the circuit as loaded from an emulated file will always remain at the bottom of the “UNDO” stack – so selecting UNDO often enough will return the canvas to that state.
REDO	Remove the most recent drawing added to the “REDO” stack and place it on the canvas.
CLEAR	Erase the drawing for the current circuit, keeping the same file name and board size.

VIEW Menu

DRAW	Enter normal drawing operation. The canvas displays the grid of Unicode “squares”. This grid will be displayed on a white background.
TEXT	Convert the canvas to text and display it in a normal web browser text editor. This text will be displayed on a pale green background. The usual browser text editing operations work as normal In particular keying ctrl-A will select the entire text and keying ctrl-C will copy it to the user’s clipboard – from where the user can paste the text wherever they wish (perhaps a C++ or Python source file or an email) NOTE: if the text is pasted to a destination not using Courier font unicode, it may not display well. Editing this text does NOT change the original drawing - that can only be done in drawing mode. Selecting DRAW from the VIEW menu will return to the canvas version of the drawing.
C++	Similar to TEXT but with a // comment control inserted at the beginning of each line of text.
PYTHON	Similar to TEXT but with a `#` comment control inserted at the beginning of each line of text.
CLEAN	Some Unicode characters are larger than the standard characters used in the canvas. When these are moved in DRAG mode, they may leave small marks on the canvas. This option will redraw the canvas without those marks. Unfortunately some Unicode characters are wider than standard. Use of these will shift any part of the canvas to their right. There is currently no cure for this. Avoid using such characters for drawing.
FONT	You may use this to choose a different font. After selecting a new font, check its actual text appearance with the TEXT option of the VIEW menu. Fonts that are not mono-space will scramble most circuit drawings. The font you choose will be saved in the (emulated) file system under the path name `[font]` and will be recovered when you restart the application.

PLOT button

This is not a drop down menu, but is a button which can be clicked. It converts the hexadecimal number below it into a Unicode character and plots that character at the current cursor position. The cursor position is then automatically moved as per the auto direction setting (seen below the DIR heading).

This together with the KEYED mode can be used to draw arbitrary shapes on the canvas drawn with Unicode characters. This will be somewhat painful.

Please note that even though the canvas has been selected to draw mono space Courier font – some characters are not present in that font and the browser may substitute characters from some other font that is not mono-spaced or may have a different footprint. Such characters will shift any drawing to the right of their position some unspecified amount – causing misalignment.

The PLOT option can be used to experiment with this. Draw a vertical section of wire to the right of where you will plot alternate unicodes. To see if this works well, use the VIEW TEXT option. If the alternate unicode is nonconforming, the section of line to its right will be displaced horizontally.