Logic Circuit Diagram with Simple Simulation

Try clicking on the switch or the battery to toggle them.

This logic circuit implements a three-bit adder (see Wikipedia for more information). The switches connected to the batteries on the left side of the diagram are the inputs, and the lamps at the top are the outputs. By opening or closing the switches, different numbers can be added (up to 7+7=14!), with the lamps reflecting the sum of those numbers in real time.

This sample allows the user to make circuits using gates and wires, which are updated whenever a Link is modified and at intervals by a looped setTimeout function.

The updateStates function calls a function to update each node according to type, which uses the color of the links into the node to determine the color of those exiting it. Red means zero or false; green means one or true. Clicking an input node (battery or switch) will toggle true/false.

Mouse over a node to see its category, displayed using a shared Adornment set as the tooltip. A Palette to the left of the main diagram allows the user to drag and drop new nodes. These nodes can then be linked using ports which are defined on the various node templates. Each input port can only have one input link, while output ports can have many output links. This is controlled by the GraphObject.toMaxLinks property.

Diagram Model saved in JSON format:

{ "class": "GraphLinksModel",
      "linkFromPortIdProperty": "fromPort",
      "linkToPortIdProperty": "toPort",
      "nodeDataArray": [
    {"category":"xor","key":-1,"loc":"-230 -860"},
    {"category":"xor","key":-2,"loc":"-120 -880"},
    {"category":"and","key":-3,"loc":"-150 -810"},
    {"category":"and","key":-4,"loc":"-150 -740"},
    {"category":"switch","isOn":true,"key":-5,"loc":"-340 -890"},
    {"category":"switch","isOn":true,"key":-6,"loc":"-320 -710"},
    {"category":"or","key":-7,"loc":"-80 -780"},
    {"category":"or","key":-8,"loc":"80 -550"},
    {"category":"switch","isOn":true,"key":-9,"loc":"-210 -620"},
    {"category":"switch","isOn":true,"key":-10,"loc":"-190 -680"},
    {"category":"and","key":-11,"loc":"-10 -510"},
    {"category":"and","key":-12,"loc":"-10 -580"},
    {"category":"xor","key":-13,"loc":"-10 -650"},
    {"category":"xor","key":-14,"loc":"-90 -630"},
    {"category":"or","key":-15,"loc":"220 -370"},
    {"category":"switch","isOn":true,"key":-16,"loc":"-130 -390"},
    {"category":"switch","isOn":true,"key":-17,"loc":"-100 -440"},
    {"category":"and","key":-18,"loc":"30 -370"},
    {"category":"and","key":-19,"loc":"150 -420"},
    {"category":"xor","key":-20,"loc":"150 -500"},
    {"category":"xor","key":-21,"loc":"50 -450"},
    {"category":"output","key":-22,"loc":"40 -950","isOn":true},
    {"category":"output","key":-23,"loc":"90 -950","isOn":true},
    {"category":"output","key":-24,"loc":"140 -950","isOn":false},
    {"category":"output","key":-25,"loc":"-10 -950","isOn":true},
    {"category":"switch","isOn":true,"key":-26,"loc":"-430 -690"},
    {"category":"switch","isOn":true,"key":-27,"loc":"-430 -660"},
    {"category":"switch","isOn":true,"key":-28,"loc":"-430 -630"},
    {"category":"switch","isOn":true,"key":-29,"loc":"-430 -510"},
    {"category":"switch","isOn":true,"key":-30,"loc":"-430 -480"},
    {"category":"switch","isOn":true,"key":-31,"loc":"-430 -450"},
    {"category":"input","isOn":true,"key":-32,"loc":"-520 -640"},
    {"category":"input","isOn":true,"key":-33,"loc":"-520 -460"},
    {"category":"input","isOn":false,"key":-34,"loc":"-480 -910"}
    ],
      "linkDataArray": [
    {"from":-5,"to":-1,"fromPort":"out","toPort":"in1"},
    {"from":-6,"to":-1,"fromPort":"out","toPort":"in2"},
    {"from":-1,"to":-2,"fromPort":"out","toPort":"in2"},
    {"from":-1,"to":-3,"fromPort":"out","toPort":"in1"},
    {"from":-6,"to":-4,"fromPort":"out","toPort":"in2"},
    {"from":-3,"to":-7,"fromPort":"out","toPort":"in1"},
    {"from":-4,"to":-7,"fromPort":"out","toPort":"in2"},
    {"from":-9,"to":-11,"fromPort":"out","toPort":"in2"},
    {"from":-11,"to":-8,"fromPort":"out","toPort":"in2"},
    {"from":-12,"to":-8,"fromPort":"out","toPort":"in1"},
    {"from":-10,"to":-14,"fromPort":"out","toPort":"in1"},
    {"from":-9,"to":-14,"fromPort":"out","toPort":"in2"},
    {"from":-14,"to":-13,"fromPort":"out","toPort":"in1"},
    {"from":-14,"to":-12,"fromPort":"out","toPort":"in1"},
    {"from":-7,"to":-13,"fromPort":"out","toPort":"in2"},
    {"from":-7,"to":-12,"fromPort":"out","toPort":"in2"},
    {"from":-16,"to":-18,"fromPort":"out","toPort":"in2"},
    {"from":-18,"to":-15,"fromPort":"out","toPort":"in2"},
    {"from":-19,"to":-15,"fromPort":"out","toPort":"in1"},
    {"from":-17,"to":-21,"fromPort":"out","toPort":"in1"},
    {"from":-16,"to":-21,"fromPort":"out","toPort":"in2"},
    {"from":-21,"to":-20,"fromPort":"out","toPort":"in1"},
    {"from":-21,"to":-19,"fromPort":"out","toPort":"in1"},
    {"from":-8,"to":-20,"fromPort":"out","toPort":"in2"},
    {"from":-8,"to":-19,"fromPort":"out","toPort":"in2"},
    {"from":-2,"to":-24,"fromPort":"out","toPort":""},
    {"from":-13,"to":-23,"fromPort":"out","toPort":""},
    {"from":-20,"to":-22,"fromPort":"out","toPort":""},
    {"from":-15,"to":-25,"fromPort":"out","toPort":""},
    {"from":-32,"to":-26,"fromPort":"","toPort":"in"},
    {"from":-32,"to":-27,"fromPort":"","toPort":"in"},
    {"from":-32,"to":-28,"fromPort":"","toPort":"in"},
    {"from":-33,"to":-29,"fromPort":"","toPort":"in"},
    {"from":-33,"to":-30,"fromPort":"","toPort":"in"},
    {"from":-33,"to":-31,"fromPort":"","toPort":"in"},
    {"from":-26,"to":-5,"fromPort":"out","toPort":"in"},
    {"from":-29,"to":-6,"fromPort":"out","toPort":"in"},
    {"from":-34,"to":-3,"fromPort":"","toPort":"in2"},
    {"from":-27,"to":-10,"fromPort":"out","toPort":"in"},
    {"from":-30,"to":-9,"fromPort":"out","toPort":"in"},
    {"from":-28,"to":-17,"fromPort":"out","toPort":"in"},
    {"from":-31,"to":-16,"fromPort":"out","toPort":"in"},
    {"from":-10,"to":-11,"fromPort":"out","toPort":"in1"},
    {"from":-17,"to":-18,"fromPort":"out","toPort":"in1"},
    {"from":-5,"to":-4,"fromPort":"out","toPort":"in1"},
    {"from":-34,"to":-2,"fromPort":"","toPort":"in1"}
    ]}

GoJS Features in this sample

ToolTips

A tooltip is an Adornment that is shown when the mouse hovers over an object that has its GraphObject.toolTip set. The tooltip part is bound to the same data as the part itself.

It is typical to implement a tooltip as a "ToolTip" Panel holding a TextBlock or a Panel of TextBlocks and other objects. Each "ToolTip" is just an "Auto" Panel Adornment that is shadowed, and where the border is a rectangular Shape with a light gray fill. However you can implement the tooltip as any arbitrarily complicated Adornment.

More information can be found in the GoJS Intro.

Related samples

Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

Grid Patterns

GoJS provides functionality to display a grid of lines drawn at regular intervals. Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.

Grids are implemented using a type of Panel, Panel.Grid. Grid Panels, like most other types of Panels, can be used within Nodes or any other kind of Part. However when they are used as the Diagram.grid, they are effectively infinite in extent.

More information can be found in the GoJS Intro.

Related samples