Article image

Configuration file

The configuration file consists of the components to place, their configuration and wire definitions to connect them all.

The components

The exact configuration parameters differ, but here are some examples:


"+": {
"component": "Power",
 "position": [20, 30],
 "label": [10, 5]

The parameter component is mandatory, it tells what component to generate. The name of the JSON object is the component name, here "+".

It is a power source at the position (used by most components) of 20px from the left and 30px from the top.
A lot of components support the label parameter. This usually has two or three parameters: relative position in x and y coordinate and optionally a text. If the text is empty, most use the name of the component.

What parameters are support can be seen in the source code of the component (for now, documentation will be added part by part).
The basic parameters are:
scale: an optional scaling value, default is 1
scaleX: an optional horizontal scaling value, default is 1
scaleY: an optional vertical scaling value, default is 1
rotate: optional rotation in degrees, positive is clockwise
mirror: optional mirroring of the component "x" for horizontal mirroring, "y" for vertical mirroring
extraclass: optional extra classes for styling
label: optional label text, see description above or a simple string for center position
ref: optional reference label


Each component either uses above options directly or extends the object with extra values.

Example for the JKFlipFlop:

interface JKFlipFlopParam extends BaseComponentParam {
  default?: boolean;

Here you have the options above and additionall an optional default value. Optional is marked by using the ? after the parameter name.
In this case this is the default state (on or off) of the component.

Example for LED:

interface LEDParam extends BaseComponentParam {
  color: string;

So here you need an extra parameter the color. It isn't optional, there is no ? after the name.

The wires (connections)

The components alone are nice, but pretty worthless without the connections between them, the wires.
You can connect two or more pins or connection points.

The wires can have 3 (technically 5) states.

  • Floating: no component is driving the wire (connected to power or ground)
  • High (connected to power)
  • Low (connected to ground)
  • Pulled high (connected to power via a pull-up register), treated by the components as high
  • Pulled low (connected to ground via a pull-down register), treated by the components as low

Let's start with an example:

  "signal1": {
    "component": "Wire",
   "path": ["S1.q", ["p", "p50"], ["n", "p", true], "R1.a", null, 2, ["n", "p"], "P1.a"]

Wires are basically configured similar to other components. They have a name and the component is "Wire".

The magic happens in the path configuration.
Here we have a connection from the component called "S1" pin "q" noted by "S1.q". From there the wire goes over several steps (explained soon) to component "R1" ping "a" and to "P1" pin "a".
For optical reason you probably don't want direct lines across the screen. This is where to coordinates come into play.
You could use coordinates like [50, 100]. Another way is to use relative coordinates.
The second connection point is ["p", "p50"]. Each coordinate can start with a p for previous r with n for next. Previous is using the coordinate from the previous listed component, next is the following point. You can chain previous as well as next, the simulator logic will back track the coordinates for you. If you add a number after the p or n you define offset, so ["p", "p50"] uses the previous connection and goes 50 pixel down.

Going up would be "p-50".
If you define an optional ", true" parameter like the third one, you create a connection point.
Using a null creates a disconnection. The next parameter starts a new wire that is connected to the previous parts. The next value should use a previous point that uses the connection point. Instead of defining the coordinates again, you can reference the point by number. Here number 2. The numbering starts at 0 so 2 means third point in above list. Which has the ,true optional connection.

If you want to group wires you can define multiple wires when using a list with the paths parameter (note the extra s):

"signals": {
    "component": "Wire",
    "paths": [
      ["Q5.q", ["p20", "p"], ["p", "n"], "Q6.a"],
      ["Q2.q", ["p20", "p"], ["p", "n"], "Q6.b"]

The pairs of wires are not connected.

A final example


The json file for this can be downloaded.