Skip to content

Home

Jump to bottom Edit New page
Matthias edited this page Jul 8, 2013 · 27 revisions

Table of Contents

Typical usage

  • possibility to design elements in Inkscape or Adobe Illustrator
  • application runs in web browser (Chromium)
  • drag'n'drop desired elements onto schematic (SVG, PNG or JPG)
  • add/mark electrical terminals
    • and may be edited manually
  • arrange elements on the canvas
  • inter-connect element terminals
  • (layouting: suggest optimizations for element placement/layout to disentangle wires where possible)
    • (mark wire crossings)
  • export circuit schematic as SVG with meta information, e.g. terminal coordinates and JavaScript update functions

Elements

Elements are JavaScript objects. They consist of an electrical and a graphical sub-object. The electrical object contains properties for the simulation of the circuit, the graphical object contains properties for the visualization and links to the dynamic SVG object representing the element. This allows for the electrical functions to update graphical properties circuit during simulation.

Elements in Version 1

The first elements to be supported by this software shall be a basic set of standard components:

  • wire
  • battery
  • LED
  • resistor
The next elements on the list would be:

Terminals

Terminals are JavaScript objects. A global list of terminals exists, but contains only links to the real objects. All terminals belong to an element. The simplest element is a wire, which interconnects two or more terminals. A terminal's voltage must be set using the Terminal.setVoltage(V) function, such that an onChange() function may be invoked to update the other terminals of the corresponding element using the corresponding element's electrical functions. This way a terminal voltage update also triggers updates of associated terminals and elements which in turn update the whole circuit.

Terminal directions

Additionally to position, terminals can also have a direction property. This is useful/necessary for most regular electrical elements, like resistors etc., as the wires in these cases actually do direct away from the element casing, which should be respected specifically by wires originating from a terminal.

The direction property is optional as the terminals of e.g. BGA elements actually do not have a direction.

Terminal labels

IC terminals usually are assigned a specific function, such as VCC, GND, IN, OUT etc. It would be very useful to show a tiny label with these functions when hovering the terminal of an IC element. There may even be two label texts: One short, like "VCC", and - when staying with the mouse cursor on a label for one second or longer - a more descriptive, longer label "VCC - Power supply (3-6 Volt)".

Wires

Wires are objects of type Element. They have a simple electrical simulation function: Their two or more terminals are all set to the same voltage, when one of them is changed. Pseudocode: 

 wire1.terminal[0].onChange = function() {
  for (terminal in wire1.terminals except thisterminal) {
    terminal.setVoltage(thisterminal.getVoltage());
    }
  }
Graphically the are represented as simple lines.

Programming circuit elements for simulation

Every element's electrical behaviour should be programmable using JavaScript functions. Lateron these function should also be exportable inside the element's SVG represenation to allow an element or circuit to be simulatable in-browser even without/outside of this software.

Example: Programming a virtual hex inverter IC: 

 // logical "not" IC: hex inverter

 // constants
 var TERMINAL_DISCONNECTED = null;
 var TERMINAL_VCC = 'VCC';
 var TERMINAL_GND = 'GND';
 var TERMINAL_INPUT = 'INPUT';
 var TERMINAL_OUTPUT = 'OUTPUT';

 // init terminal functions
 var element1.role = [];
 element1.role[terminal1] = TERMINAL_VCC;
 element1.role[terminal8] = TERMINAL_GND;
 element1.role[terminal2] = TERMINAL_OUTPUT;
 element1.role[terminal3] = TERMINAL_INPUT;

 // init levels
 var element1.level = [];
 element1.level[terminal1] = 5 * Volt; // switched on
 element1.level[terminal8] = 0 * Volt;
 element1.level[terminal3] = CMOS_LOW;
 element1.level[terminal2] = CMOS_HIGH;

 invert = function(currentOutputLevel, inputLevel) {
   var VCC = this.level[terminal1]-this.level[terminal8];

   if (VCC < 3*Volt || VCC > 15*Volt) // inactive or destroyed; null = disconnected
     return TERMINAL_DISCONNECTED;

   if (currentOutputLevel == CMOS_LOW && inputLevel >= CMOS_LOW_TO_HIGH) // input = HIGH
        return CMOS_LOW
   else if (currentOutputLevel == CMOS_HIGH && inputLevel <= CMOS_HIGH_TO_LOW) // input = LOW
        return CMOS_HIGH
   else return currentOutputLevel; // hysterese (e.g. Schmitt-Trigger)
   }

 update = function(event) {
   this.level[terminal2] = this.invert(this.level[terminal2], this.level[terminal3]);
   this.level[terminal4] = this.invert(this.level[terminal4], this.level[terminal5]);
   this.level[terminal6] = this.invert(this.level[terminal6], this.level[terminal7]);
   this.level[terminal15] = this.invert(this.level[terminal15], this.level[terminal14]);
   this.level[terminal12] = this.invert(this.level[terminal12], this.level[terminal11]);
   this.level[terminal10] = this.invert(this.level[terminal10], this.level[terminal9]);
   }

 element1.onclick = update;

Representation types

In practice a circuit may be represented in various ways. Generally there is the schematic and layout representation.

The schematic representation can be complete in the sense that all wires are drawn as direct lines from source to sink terminal. This is especially useful for small circuits.

The schematic representation can also be element-based meaning that wires come from the element terminal and end with a label, which specifies where the wire will be leading to, while no direct lines connect the electrically connected elements to each other. This representation is useful to oversee more complex circuits.

In the layout representation all elements are placed on the position where they actually appear on the board. This way of representation usually is more difficult to oversee and makes the circuit more difficult to understand, but has the advantage of being able to plan the details of the board production (size requirements etc.).

The render representation is a special type of layout representation in which additionally to actual element positioning all elements are rendered as they actually look like in the real world, e.g. an (electrolyte) capacitor is not represented as two parallel lines but as a circle. This feature shall allow to preview how the final board will look like.

Representation switching

The different ways of representation are all based on the same electrical wiring. Therefore it should be possible to switch from one type to another without changing the circuit. This feature is not necessary for now, but may lateron be added maybe even with nice element moving animations.

Oscilloscope / Logic analyzer

Wishlist: Ideally this software should offer the opportunity to select a terminal and monitor it's voltage during circuit simulation to allow for circuit debugging.

Links

Add a custom footer
Add a custom sidebar
Clone this wiki locally