Circuit Editor user's guide
These instructions and information belongs to the Online Circuit Editor
The "Meettechniek Circuit Editor" is an online tool for drawing electronic circuits. This tool is written in Javascript, so it is instantanious aviable withoud the need of downloading or installing apps or programs.
The circuit editor can output various formats. First of all images in JPG, GIF or PNG format. Second it can generate SVG-files that can be included in webpages where a scalable circuit drawing is needed. Circuits can be exchanged between users by the export and import of RAW file strings.
The curent version works fine on desktop PC's and laptops. A mouse is recommended. Future versions will support touch screens.
Place library components
Components are selected from the green drop down menu. As long as the selected menu item is highlighted, it can be placed by a mouse click in the circuit field. Also a ghost image under the cursor is visible to make placing a component easier.
When a component is selected it will be colored blue. It can then be dragged with the select tool. While a single component is selected it can be rotated <r> or mirrored <m>. The rotate and mirror functions are also supported by buttons in the toolbar.
When a single component is selected, the corresponding value form is shown. Here the part number, primary and secondary value are filled in and will be immediately updated in the circuit. The component labels can be individual moved.
The value form can be called by double clicking a component.
Custom parts
Except the collection of stock symbols, new symbols can be made or excisting symbols can be customise with the Online Symbol Editor. It can also be called by pressing the button on the top in the form shown aside.
If a component is created with the symbol editor, it can be called right away in the shown menu.
Wires and junctions
There are two types of wire available: a solid line for general connections and a dashed line to draw sheeldings. Except this difference there is no further distinction between these two line styles.
To draw a wire: activate the wire tool in the toolbar and start the wire by a single click in the circuit area. By moving the cursor a horizontal and vertical wire are drawn. The sequence of these depends on the initial movement of the cursor.
A left mouse button click will fix the latest movable wire and create a new segment. Double click to end the wire drawing.
If an 45 deg angle wire is desired: press and hold down the <shift> key.
Texts
There are two text tools availeble: The first one marked "T" is for adding general text and remarks to the circuit. The second one is to provide parts with pin labels and numbers.
With the text-tool selected a text can be added in the circuit area by a click and a textbox will appear. To edit a existing text: select the text-tool and click on the textline. A text can be moved with the select-tool active.
A menu with usefull special characters can be toggled on or off with the assosiated tool button.
The size of the three types of text: general, pin and symbol labels, can be set in the setting menu. Also the font type can here be set.
Coloring
The drawn schematic or sections of it can be colored. Toggle the color paller on or off with the assosiated button.
Viewing
Zooming can be done with the mouse scroll-wheel. Or by selecting the zoom-in or zoom-out button in the toolbar, and clicking in the circuit area.
To find all items in the drawing click the zoom-all button.
With the drag drawing button selected the whole drawing can be moved around.
Select items
To select items in the circuit drawing the select tool must be active. Click on a single part to select it. By holding down the <ctrl> key multiple items can be selected.
Multiple parts can also be selected by dragging a selection rectangle over the items. To do so: hold down the left mouse-button while moving the cursor. Multiple areas can be added by holding down the <shift> key.
All items selected are colored blue.
With the select tool active the selected items can be dragged, with the left mouse button hold down, over the circuit area.
Quick reference
action | key/mouse | remark |
Placing components | ||
Place | left mouse button | |
Rotate | <R> | Only single component. |
Mirror | <M> | Only single component. |
General | ||
Select components, wires or juncton | left mouse click or drag with left mouse button down. | hold down <Ctrl> to select multiple sections. Select tool must be active. |
Cut | <Ctrl> + <X> | Cut section to clipboard. |
Copy | <Ctrl> + <C> | Copy selection to clipboard. Hold down <Ctrl> to (un)select a multiple parts. Select tool must be active. |
Paste | <Ctrl> + <V> | Place clipboard content. |
Delete | <Delete> or <Backspace> | Selected circuit section. |
Zoom-in Zoom-out | mouse scroll wheel | |
Terminate: • place components • draw wire • place junctions | <esc> |
Import and export
The import end export menu will popup by pressing the button shown on the left.
Images
The image size can be set by filling the parameters in the form. If on of the parameters is changes the remaining fields are automaticaly recalculated. The generated images can be an GIF, PNG or JPG type. The images will be opened in a new window.
SVG
Also scaleble vector grapics can be generated. The output is a text string that will open in a new window. The text can be copied and used in the HTML source code of webpages.
The <svg> code starts after directly after a short line of <style> code. In the first line of the <svg> code the width and height are specified. These can be adjusted as desired.
File exchange
To exchange schematics between users, to export a drawing to another browser or to make backups, RAW file strings can be generated. These will popup in another window. Similar file strings can also be imported and further processed.
Save and load files
The circuits are stored locally on your computer under a browser specific storage area. This area is not accessible by other programs except by your browser for safety reasons. A circuit drawing can be deleted by selecting the file in the open or save menu and press <delete>.
The stored circuit drawings will be lost when the browser history is cleared.
Create an account
As mentioned, to make use of the cloud storage, it is necessarily to have an account for this site. An account can be created by writing a comment below on this page. You will receive then an email with a link from where you can activate your account.
Tips and tricks
Logic symbols
Only the basic logic symbol shapes for 1,2 and 3 inputs, inverting and non-inverting gates are available. To indicate which logic function the gate has add this to the primary value. The placeholder is already aligned in the center of the gate.