Digital Circuit Visualiser

Final Year Project
View the WebApp »

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Installation
• Usage
• Tests
• Contact

About The Project

This project is a circuit visualiser that uses a structural based approach (similar to monoidal categories) to represent circuit. The advantages of this are that structure in the algebraic form is preserved into the visualisation. New optimisation techniques are possible with monoidal categories.

This project includes a custom programming language similar to the algebraic representation of monoidal categories and then visualises them.

Built With

• TypeScript
• React
• Webpack
• SASS

Getting Started

Ensure you have the necessary dependencies:

• Nodejs: Follow the instructions on the NodeJS website
• Yarn package manager (npm install -g yarn). Yarn Website

To get started, clone the repository and then install dependencies.

$ git clone git@github.com:alexander-lloyd/digital-circuit-visualiser.git

Installation

Install dependencies.

$ yarn install

Usage

$ yarn start

To run with the Webpack development server run yarn start and view in the browser at http://localhost:8000. Running in this environment provides hot reloading support; edit and save the file, and the browser will automatically refresh.

To use a port other than 8000 set the PORT environment variable (PORT=8080 yarn start).

Building

To build and bundle the application run:

$ yarn build

After you see the Webpack compilation succeed (the yarn build step), open up build/index.html in your browser.

Tests

Run all of the unit tests with:

$ yarn test

Build for Production

$ yarn clean
$ yarn build:production

This step will replace the development artifact build/index.js for an optimised version as well as copy src/index.html into build/. You can then deploy the contents of the build directory.

Contact

• Project Link: https://github.com/alexander-lloyd/digital-circuit-visualiser
• LinkedIn: