Logicboard

Logic circuit editor and simulator made in pure JavaScript (no dependencies) as part of my university thesis in 2022.

[Run it live here]

Tip: Try opening pre-made example circuits from here: https://github.com/Tomlacko/Logicboard/tree/main/examples

Image preview:

About this application:

This is a logic circuit editor and simulator implemented in HTML5 and JavaScript (ECMAScript 2017), and rendered using a 2D canvas.

The aim of this application is to provide a simple yet effective way of designing, simulating, demonstrating and experimenting with logic circuits in a very approachable way.

In this app, a logic circuit is represented as a simple directed graph, where each node (vertex) is one logic element, and every edge represents a connection going from a source element to a target element. Self-loops and parallel (duplicate) connections aren't allowed.
Input elements (namely switches and buttons) can only act as source elements, meaning connections can only lead out of them, not into them, while output elements (namely the light bulb and display tile) are the opposite - they only work as targets, meaning that connections can only lead into them, not out of them.
There is, however, no limit to how many connections can lead into/out of an element.
You can identify the direction of every connection based on its color gradient and width; connections start out wide and strongly colored at the source, and gradually fade and thin out towards the target.

Elements rendered as red are currently activated (powered), while gray ones are unpowered.
During simulation, every activated element will send out power over all outgoing connections to all of its target elements. Every element reacts differently upon receiving/losing power; the behavior depends on the type of the logic element. For example, an AND gate will only activate if it's receiving power from all of its inputs, while an OR gate will activate if it receives power from any of its inputs.

Elements can be placed, moved, edited, connected, deleted, replaced and selected only while the simulation isn't running, which is referred to as "edit mode". During edit mode, elements can't be triggered and they don't send out power. Meanwhile in simulation mode, the exact opposite is true. In there, elements send power over outgoing connections and input elements can be clicked on, but no modification to the structure of the circuit can be made. Stopping the simulation and going back to edit mode will reset the circuit back to its initial state again.

Interface & functionality:

• Top bar:

  • Simulation controls (top left corner):

    • Start/Stop - Switches between simulation mode and edit mode. Stopping the simulation will reset it.
    • Pause/Continue - Pauses/resumes the simulation without resetting it.
    • Step - Allows for manually stepping the simulation step by step.
    • Step counter - While simulating, displays the current step number/count.

  • Tools (top middle):

    • Add Element - Allows elements to be placed when clicking on the canvas, depending on which element on the sidebar is selected.
    • Connect Elements - Allows elements to be connected with a power line. Clicking on the first (source) element starts the connection, then clicking on the second (target/destination) element creates/places the connection between these two elements going in the given direction.
      Clicking on an empty spot cancels the connection creation.
      Clicking on an existing connection will pick it back up and allows it to be rewired elsewhere. Holding the left CTRL key allows for multiple connections to be clicked and rewired simultaneously.
      Additionally, holding the left CTRL key keeps the connection creation active even after placing one, allowing for multiple target elements to be more easily connected to the source ones.
      When a selection of multiple elements is clicked, connections are started from all the selected elements at once. The same applies for when the secondary click lands on an selected element; this will wire all held connections to every selected element.
    • Edit - Clicking on an element with this tool will edit it. The exact way an element can be edited depends on each element, however, most elements support their initial power state being edited, which defines what state will the element be in at the beginning of a simulation.
      Clicking on a connection will also allow you to connect it elsewhere (same rules as for the Connect Elements tool apply here too).
      When clicking on a selection of multiple elements, all the elements of the same type will be edited at once.
    • Delete - Clicking on an element or selection of elements will delete it.
      Clicking on a connection will also delete that connection.
    • Replace - Clicking on an element will replace it based on the element selected in the sidebar, creating a new element in the old element's place with the same connections if possible. If multiple elements are selected, all will be replaced.
      If a connection is clicked instead, the new element will be placed on the connection, rewiring the connection through itself (acting as a middleman).
      Lastly, if an element (or a selection of elements) is clicked while the element of the same type is selected, the element(s) will get replaced by a connection instead, connecting all of its inputs with all of its outputs, before deleting itself. If no such connection is possible, nothing will happen.
    • Select Elements - With this tool selected, you can create a selection of multiple elements by clicking and dragging a selection area over the elements, or by clicking on each element individually.
      Clicking on an empty spot will cancel the current selection and switch back to the previously used tool. The same will happen while starting a new selection, unless the left CTRL key is being held, in which case any new selection will get added to the existing one, and the tool will never be switched. Additionally, clicking an element with the left CTRL key held will toggle it between selected and unselected.

  • Actions & other buttons (top right corner):

    • Undo/Redo - Reverts/redoes changes that have been made, one by one.
    • New Project - Deletes everything from the canvas and resets everything to initial values. Revertable via undo.
    • Save To File - Opens a save file dialog, allowing the project to be saved to a file locally and reopened later. The file format is JSON.
    • Load From File - Opens a open file dialog, which allows any previously saved file to be opened and loaded again.
    • Show Info - Opens this overlay with info and explanations.

• Left sidebar:

  • Element selector:

    • Input button - Buttons serve as inputs to the running circuit. Clicking a button during simulation will keep it powered on for as long as the mouse is being held down.
      Connections cannot lead into this element, they can only lead out.
      Editing this element will toggle if it should start already powered or not.
    • Input switch - Switches serve as inputs to the running circuit. Clicking a switch during simulation will toggle it between being powered and unpowered.
      Otherwise they work the same as buttons.
    • Output light bulb - Light bulbs serve as visual outputs of the circuit. The light bulb will be turned on as long as it receives power from any of its incoming connections.
      Connections cannot be created from this element, they can only lead into it.
      Editing this element will toggle if it should start already powered or not.
    • Output display tile - Display tiles serve as visual outputs of the circuit, especially for creating multi-element displays by placing them next to each other.
      They work the same way as light bulb elements.
    • OR Gate - Powered when receiving power from 1 or more incoming connections, otherwise unpowered.
      Editing this element will toggle if it should start already powered or not.
    • NOT Gate - Powered, unless receiving power from 1 or more incoming connections, otherwise powered.
      Editing this element will toggle if it should start already unpowered or not.
    • AND Gate - Powered when receiving power from all incoming connections at once, otherwise unpowered.
      Editing this element will toggle if it should start already powered or not.
    • NAND Gate - Powered, unless receiving power from all incoming connections at once.
      Editing this element will toggle if it should start already unpowered or not.
    • XOR Gate - Powered if receiving power from an odd number of incoming connections, otherwise unpowered.
      Editing this element will toggle if it should start already powered or not.
    • XNOR Gate - Powered, unless receiving power from an odd number of incoming connections. In other words, powered when receiving power from an even number of incoming connections.
      Editing this element will toggle if it should start already unpowered or not.
    • Monostable circuit - Monostable circuits stay in an unpowered state until a change in incoming power is detected, upon which they produce a single pulse of power and return back to the unpowered state, producing no more output until triggered again.
      The exact behavior depends on the type of the element, which can be cycled through by editing it.
      Rising-edge is the default setting (visualized with an extra line at the bottom), in which a pulse is created whenever the element receives any power for the first time. Power must stop being received until another pulse can be created.
      Falling-edge is the second setting (visualized