alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Build Visual Drag-and-Drop Logic Circuit Simulator #14

New Issue
Closed
opened 2026-03-01 15:34:52 +00:00 by alexander.lyall · 0 comments
alexander.lyall commented 2026-03-01 15:34:52 +00:00
Owner
Copy Link

Context

Currently, logic gates are spread across multiple separate legacy HTML pages. We need to consolidate these and build a highly interactive, visual circuit builder (similar to Logic.ly) to allow users to intuitively understand data flow and logic gates.

Objective

Create a single logic-gates.astro page featuring a drag-and-drop workspace. Users must be able to pull visual representations of gates, inputs, and outputs onto a canvas, wire them together dynamically, and view live state changes and truth tables.

Acceptance Criteria

  • Drag-and-Drop Canvas: Implement an interactive workspace area where components can be freely dragged, dropped, and repositioned.
  • Visual Component Library: The toolbox/sidebar must contain visually accurate representations of inputs (toggle switches), outputs (lightbulbs), and all standard logic gates (AND, OR, NOT, NAND, NOR, XOR, XNOR) using standard ANSI shapes.
  • Dynamic Wiring: Users must be able to click and drag to create visual "wires" connecting the output nodes of one component to the input nodes of another.
  • Live State Evaluation: The circuit must evaluate logic in real-time. Wires should visually indicate if they are carrying a 1 (ON/High) or 0 (OFF/Low) signal, and output bulbs should glow accordingly.
  • Dynamic Truth Tables: Implement a panel inside the Toolbox that automatically computes and displays a full truth table for the currently drawn circuit.
  • UI Integration: Wrap the entire experience in the new dark-theme global layout (BaseLayout.astro) ensuring the UI matches the rest of the simulators.
### Context Currently, logic gates are spread across multiple separate legacy HTML pages. We need to consolidate these and build a highly interactive, visual circuit builder (similar to Logic.ly) to allow users to intuitively understand data flow and logic gates. ### Objective Create a single `logic-gates.astro` page featuring a drag-and-drop workspace. Users must be able to pull visual representations of gates, inputs, and outputs onto a canvas, wire them together dynamically, and view live state changes and truth tables. ### Acceptance Criteria - [ ] **Drag-and-Drop Canvas:** Implement an interactive workspace area where components can be freely dragged, dropped, and repositioned. - [ ] **Visual Component Library:** The toolbox/sidebar must contain visually accurate representations of inputs (toggle switches), outputs (lightbulbs), and all standard logic gates (AND, OR, NOT, NAND, NOR, XOR, XNOR) using standard ANSI shapes. - [ ] **Dynamic Wiring:** Users must be able to click and drag to create visual "wires" connecting the output nodes of one component to the input nodes of another. - [ ] **Live State Evaluation:** The circuit must evaluate logic in real-time. Wires should visually indicate if they are carrying a `1` (ON/High) or `0` (OFF/Low) signal, and output bulbs should glow accordingly. - [ ] **Dynamic Truth Tables:** Implement a panel inside the Toolbox that automatically computes and displays a full truth table for the currently drawn circuit. - [ ] **UI Integration:** Wrap the entire experience in the new dark-theme global layout (`BaseLayout.astro`) ensuring the UI matches the rest of the simulators.
alexander.lyall added this to the Version 2.0 milestone 2026-03-01 15:34:52 +00:00
alexander.lyall added the Kind/Feature
Priority
High
2
Kind/Enhancement labels 2026-03-01 15:34:52 +00:00
alexander.lyall self-assigned this 2026-03-01 15:34:52 +00:00
alexander.lyall added this to the Version 2.0 project 2026-03-01 15:34:52 +00:00
alexander.lyall started working 2026-03-01 15:38:22 +00:00
alexander.lyall moved this to To Do in Version 2.0 on 2026-03-01 15:38:37 +00:00
alexander.lyall moved this to In Progress in Version 2.0 on 2026-03-01 15:38:39 +00:00
alexander.lyall changed title from Build Consolidated Logic Gates & Circuit Simulator to Build Visual Drag-and-Drop Logic Circuit Simulator 2026-03-01 15:43:36 +00:00
alexander.lyall moved this to Done in Version 2.0 on 2026-03-01 16:32:38 +00:00
alexander.lyall worked for 1 hour 1 minute 2026-03-01 16:39:43 +00:00
Sign in to join this conversation.
Version-2-Rebase
Branches Tags
Labels
Clear labels
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Low
4
The priority is low
Priority
Medium
3
The priority is medium
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
No Label Kind/Enhancement Kind/Feature
Priority
High
2
Milestone
No items
No Milestone Version 2.0
Projects
Clear projects
No project Version 2.0
Assignees
Clear assignees
renovate-bot alexander.lyall
No Assignees alexander.lyall
1 Participants
Notifications
Total Time Spent: 1 hour 1 minute
alexander.lyall
1 hour 1 minute
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: alexander.lyall/computing-box#14
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?