Electronic Measurements

Circuit Editor user's guide

These instructions and information belongs to the Online Circuit Editor

Last Modification: April 20, 2017
Online circuit editor
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.


Component library drop down menu
Component library drop down menu.

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.

Component value form
Selected component with value form.

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

Custom part select form
Selected a component from the made 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

45 deg angle wire
A 45° angle wire.

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

settings tool button
Settings buttons.
special characters tool button
Special characters buttons.

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

zoom tool buttons
Zoom-in, zoom-out, zoom-all and drag drawing buttons in the toolbar.

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


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>.

Caution!
The stored circuit drawings will be lost when the browser history is cleared.

Import and export

import export form
Import/export form.

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.


Tips and tricks

Marking logic gates
Marking a logic gate as a schmitt-trigger nand.

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.

Please enable Javascript if you want to respond.

Reply to this message

Name:
Email:
County:
Comment:
Email notification :
X

Login

Name:
Password: