This website is an interactive visualizer for the LC-3 datapath allowing students to trace through the execution of LC-3 instructions.
The AND and RTI instructions are currently not implemented.
Every component making up the LC3 is an SVG (Scalable Vector Graphic) that was converted through Figma: https://www.figma.com/design/n7pDo1cotmBlgZB02SF8K8/2110-Vis-Tool?node-id=0-1&t=2E0biyAyEhnxR92p-1.
The components (arrows, text, shapes, etc.) were given a unique id within HTML and grouped accordingly in 'LC3.vue'. A CSS state called "wire" was created (originally intended for the wires hence the name) that would allow the component to flash a color. The pulse animation can be also be found in the same file above the SVG.
In the 'sequences.json' file, each instruction has a sequence that maps to an array of arrays (seperated by clock cycle) that hold the sequence of components that become highlighted when run.
Refactoring using Vue.js and Tailwind was done by Henry Bui: Vue components can be found in 'components.d.ts'
Currently, the visualization tool is hosted online using GitHub Pages. Run it here!
Locally, run the following commands with Node.js installed:
npm install --dev
npm run dev- Huy Nguyen - hnguyen499@gatech.edu
- Henry Bui - hbui43@gatech.edu
This project is licensed under the MIT License - see the LICENSE.md file for details