Directly jump to the content and enable reader mode
Profile image
have read aloud

A browser based logic simulator

This is the home and blog place for the logic simulator that is used by the 8 bit computer here on Content Nation.

Since it has been rewritten in Type Script and a lot of tiny bugs have been fixed it will be given a proper home and release.

You can download it from our git repo at https://git.contentnation.net/LogicSimulator/logicsimulator .

The inner workings will get longer explanations but here is a extremely short overview:

Building

on linux, don't know other platforms, but should work similar.

  • Check out the git repo.
  • Change to the new directory logicsimulator
  • run npm install to install the dependencies
  • run npx grunt release to build the code
  • the htdocs directory now contains the simulation Javascripts and CSS files

To copy/paste it:

git clone git@git.contentnation.net:LogicSimulator/logicsimulator.git
cd logicsimulator
npm install
npx grunt release

Plugins

You can install plugins (more components) by checking them out via git into the plugins directory.

Running npx grunt release should build them as well.

Development

The base development is done via Typescript, the base components are in the ts directory. Components (things to simulate) are in the components directory.
Components come with up to 3 files: a .ts file for the code, an optional .svg file for the graphics and an optional .less file for extra CSS.

SVG and CSS can be shared by multiple components, the component must takes care of loading them.

Components are extensions of the BaseComponent class, the component must create interfacing pins and implement whatever logic they want.
The simplest components are static powers sources like power.ts.

Usage

Create a html file:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="simulator.min.js"></script>
<link rel="stylesheet" href="css/default.css" type="text/css" />
</head>
<body>
<div id="logic1" class="logicsimulator"></div>
<script type="text/javascript">
var s1 = new Simulator("logic1", 300, 420);
s1.setBasePath("");
s1.fromJsonFile("logic.json");
</script>
</body>

This includes the right simulator js file, creates a div with an id and the right class.
The Script then creates it simulator by calling new Simulator("id from html", width, height).
You can set an base path for components, here "". components/ is automatically added by the simulator.
And finally you load a json file with the simulator content. How this file works is described in a dedicated blog post.