SimClick

About

SimClick is a digital logic circuit simulator that can interface with real electronic components through the use of the IO ports of development boards (e.g. Arduino/ESP-style microcontrollers) over a local network connection.

It is a desktop application built with Wails v2 (Go backend) and a Svelte 5 + TypeScript + PixiJS frontend, so the circuit canvas is rendered on a WebGL canvas rather than the DOM.

Features

• Drag-and-drop canvas to place components: sources, clock sources, AND/OR/NOT/NAND/NOR/XOR logic gates, output readers, and wires ("nodes").
• Wires are drawn point-to-point and automatically connect to a component terminal when an endpoint is dropped on top of it; wires can also be linked to each other to form branching nets.
• Multi-selection, drag, and deletion of components/wires, with connections cleaned up automatically when a component or node is removed.
• Live simulation: gate outputs and wire/net state propagate through the circuit as sources and clocks change, with a periodic UI refresh (see CanvasManager state polling and the Go-side App propagation loop).
• Save/open circuits as .sck JSON files (name, positions, components, connections, and linked nodes), including clock source configuration. Unsaved changes are flagged in the circuit title bar.
• External hardware integration: the Go backend runs a WebSocket server (port 5000) that dev boards can connect to. Sources and output readers on the canvas can be associated with a connected device's GPIO pin, so the simulated circuit can read/drive real hardware.
• In-app link to an external tutorial page (https://simclick.lucasff.dev/tutorial).

Architecture

• circuit/ — the simulation engine (Go): components (Source, LogicGate, Node, OutputReader), in-memory component registry (componentsmemory.go), and the Circuit type that wires components together and propagates signal state through nodes/links.
• server/ — a WebSocket server (gorilla/websocket) and in-memory connection store used to talk to external devices (metadata registration, pin reads/writes).
• app.go / main.go / association.go / filereader.go — the Wails application layer: binds Go methods to the frontend, owns the Circuit instance, polls associated external sources/outputs and clock sources on a ticker, and handles save/open file dialogs and the .sck file format.
• inccounter/ — small helper used to generate unique component/node IDs.
• frontend/src/lib/canvas/ — the PixiJS canvas: CanvasManager (scene graph, load/save, selection, drag), ConnectionManager (node ↔ terminal and node ↔ node links), and per-component element classes under elements/ and ui/.
• frontend/src/pages/ — Home.svelte (new/open circuit) and Circuit.svelte (editor shell: title, save button, tutorial link, canvas, modals).

Live Development

To run in live development mode, run wails dev in the project directory. This will run a Vite development server that will provide very fast hot reload of your frontend changes. If you want to develop in a browser and have access to your Go methods, there is also a dev server that runs on http://localhost:34115. Connect to this in your browser, and you can call your Go code from devtools.

Building

To build a redistributable, production mode package, use wails build.

Testing

• Go: go test ./... runs unit and integration tests for the circuit and server packages.
• Frontend: from frontend/, run npm test (Vitest) or npm run test-coverage for coverage; npm run check runs svelte-check and tsc for type checking.

To implement

Sources

• make source draggable

Nodes

• node with multiple branches
• removing node removes its connections
• removing node clears its resources

Connections

• make connection by putting component terminal over node
• adjust or remove connection when moving component
• remove connection when removing component
• direct connection between components (implicit node)