So here's a link to the quickly and horribly named "Logicr", pronounced "lä-jik-ər".
It's essentially a tiny javascript library/set of classes that simulate digital logic. I'm not going to start drawing out diagrams of class hierarchies because that would take too long to do. Instead, i'll quickly explain a bit of it, and then explain what the interface is showing.
At the bottom level, there are objects that are "pins". This is a thing that can be set with a low, high, or floating data level. I made the level actually a value from 1-100, below 25 is "low", above 75 is "high" and in the middle is "floating". When you read them, you get back a true/false value, and you can write the 0..100 level, or true/false. I made it this way so that i can eventually simulate pullups/pulldowns in the circuits.
Those pins are included in "nodes", which have a collection of inputs and outputs. One example of a node is a logic gate. A typical gate has two inputs, A, B, and one output, Y. When the nodes get their update() call, they do whatever math is necessary to read in from their inputs and set their outputs. Currently the system supports the basic 1-2 input logic gates: Not, And, Nand, Or, Nor, Xor, as well as one-pin output "sources" that generate High, Low, and Float output.
Another node is a "clock". This one toggles its output once a second (1000ms) between high and low levels.
Another type of thing in the system is a "wire". Wires are just lists of connections "from" and "to" pins on nodes in the system.
In the above example, there's a clock node (XTAL1), whose output Y goes to the first LED, named "clk". There's a second wire from XTAL1's output that goes to the input of a Not gate (Inverter), in-turn, whose output goes to the second LED, "!clk".
You may notice that they don't change instantaneously. That's because the system is set up to update all of the nodes first, then update all of the wires. This prevented having to actually generate a real directed graph, and deal with loops and recursion and loops and recursion and stuff. It probably simulates propagation delay on real parts, but i'm sure it has its own unique quirks.
So every 50ms, it goes through and tells all of the nodes to do their math, then immediately goes through the list of wires, reading from their FROM and writing to their TO.
So for the clock circuit:
- Nodes:
- Clock XTAL1 running at 1000ms
- LED D1, blue, labelled "clk"
- LED D2, blue, labelled "!clk"
- Not gate IC1
- Wires
- XTAL1.Y to D1.A -- connects the clock to the first LED
- XTAL1.Y to IC1.A -- connects the clock to the not gate
- IC1.Y to D2.A -- connects the not gate to the second LED
That's the basics of it.
But there's more.
I added a few input devices and output devices. First is the switch. The switch is essentially a html checkbox at its core. When the switch node gets called to update, it reads the value directly out of the checkbox widget in the browser, and sets its output pin to the appropriate value. Similarly, the LEDs are just a "div" that's made round and the right color (dim/bright red, etc) via CSS. When the LED nodes are updated, they read the value from their input pin, then apply the appropriate "on" or "off" class to their html div. The browser and CSS take care of the rest.
There's a couple other things happening in the circuit there too...
The amber switches are the A and B inputs to an XOR gate. The A and B switches also go to the amber LEDs with the same labels, so that you can see what's going on there. The output from the XOR gate goes to the green LED labelled Y.
The four red switches labelled 0x01, 0x02, 0x04, and 0x08 are run into a sort-of ROM, implemented as just a simple 16 value lookup table. The ROM has 4 inputs and 8 outputs. The 8 outputs are wired to the red seven-segment display node's "a"-"g" inputs, which light up the segments of the display on the web interface. As you toggle the switches, the appropriate number is displayed. The ROM data is basically a lookup table of which segments to drive for each value 0x0..0x9,0xA-0xF. The equivalent of the 74LS47 ic chip. I was originally going to build this circuit using logic gates, but it got really complex... I may still do it eventually, once i have a better editor.
Mess with it...
In the interface, if you scroll down, you'll see an editor section at the bottom. Press the "Load Default" button to fill the text box with the circuit description that's running, and you can see all of the logic nodes and wire connections. Press the "Run Circuit" button to read in the JSON content from that window and rebuild the internal logic to use it. The content there has to be valid JSON, otherwise it won't work. The "Run" button will have a green border when it's valid, red when it's not.
Future
So yeah. This was meant to be a quick test to see how well it could quickly be done, and expanded upon for a possible future project that I've been thinking about for a while. There are still more component classes I want to add, such as "packages" which can group together circuits... for example, creating flip-flops using gate logic, or building that 7-segment decoder, or more complex things...
I also would like to make an in-browser editor of the circuits. I've been looking at jsPlumb as well as a few other solutions for doing "create movable boxes with connection magnets that are connected with wires" type of things. I may just spin up something of my own, as having draggable boxes is fairly easy to do using CSS/JS and then connections are just SVG lines between them, etc... Although i'm sure the nuances of the interface make it more complex than it seems...
Oh. and this is running in my tiny page thingy, llmin... It's basically a wrapper for a page that sets up jQuery, bootstrap, and some other stuff, so that I don't have to create that boilerplate every time I want to make a page to test stuff. ;)
