Legacy Circuit Mockups#

A skill for creating breadboard circuit mockups and visual diagrams for retro computing and electronics projects. This skill leverages HTML5 Canvas drawing mechanisms to render interactive circuit layouts featuring vintage components like the 6502 microprocessor, 555 timer ICs, EEPROMs, and 7400-series logic gates.

When to Use This Skill#

• User asks to "create a breadboard layout" or "mockup a circuit"
• User wants to visualize component placement on a breadboard
• User needs a visual reference for building a 6502 computer
• User asks to "draw a circuit" or "diagram electronics"
• User wants to create educational electronics visuals
• User mentions Ben Eater tutorials or retro computing projects
• User asks to mockup 555 timer circuits or LED projects
• User needs to visualize wire connections between components

Prerequisites#

• Understanding of component pinouts from bundled reference files
• Knowledge of breadboard layout conventions (rows, columns, power rails)

Supported Components#

Microprocessors & Memory#

ComponentPinsDescriptionW65C02S40-pin DIP8-bit microprocessor with 16-bit address bus28C25628-pin DIP32KB parallel EEPROMW65C2240-pin DIPVersatile Interface Adapter (VIA)6225628-pin DIP32KB static RAM

Logic & Timer ICs#

ComponentPinsDescriptionNE5558-pin DIPTimer IC for timing and oscillation740014-pin DIPQuad 2-input NAND gate740214-pin DIPQuad 2-input NOR gate740414-pin DIPHex inverter (NOT gate)740814-pin DIPQuad 2-input AND gate743214-pin DIPQuad 2-input OR gate

Passive & Active Components#

ComponentDescriptionLEDLight emitting diode (various colors)ResistorCurrent limiting (configurable values)CapacitorFiltering and timing (ceramic/electrolytic)CrystalClock oscillatorSwitchToggle switch (latching)ButtonMomentary push buttonPotentiometerVariable resistorPhotoresistorLight-dependent resistor

Grid System#

javascript

// Standard breadboard grid: 20px spacing
const gridSize = 20;
const cellX = Math.floor(x / gridSize) * gridSize;
const cellY = Math.floor(y / gridSize) * gridSize;

Component Rendering Pattern#

javascript

// All components follow this structure:
{
  type: 'component-type',
  x: gridX,
  y: gridY,
  width: componentWidth,
  height: componentHeight,
  rotation: 0,  // 0, 90, 180, 270
  properties: { /* component-specific data */ }
}

Wire Connections#

javascript

// Wire connection format:
{
  start: { x: startX, y: startY },
  end: { x: endX, y: endY },
  color: '#ff0000'  // Wire color coding
}

Step-by-Step Workflows#

Creating a Basic LED Circuit Mockup#

1. Define breadboard dimensions and grid
2. Place power rail connections (+5V and GND)
3. Add LED component with anode/cathode orientation
4. Place current-limiting resistor
5. Draw wire connections between components
6. Add labels and annotations

Creating a 555 Timer Circuit#

1. Place NE555 IC on breadboard (pins 1-4 left, 5-8 right)
2. Connect pin 1 (GND) to ground rail
3. Connect pin 8 (Vcc) to power rail
4. Add timing resistors and capacitors
5. Wire trigger and threshold connections
6. Connect output to LED or other load

Creating a 6502 Microprocessor Layout#

1. Place W65C02S centered on breadboard
2. Add 28C256 EEPROM for program storage
3. Place W65C22 VIA for I/O
4. Add 7400-series logic for address decoding
5. Wire address bus (A0-A15)
6. Wire data bus (D0-D7)
7. Connect control signals (R/W, PHI2, RESB)
8. Add reset button and clock crystal

Component Pinout Quick Reference#

555 Timer (8-pin DIP)#

PinNameFunction1GNDGround (0V)2TRIGTrigger (< 1/3 Vcc starts timing)3OUTOutput (source/sink 200mA)4RESETActive-low reset5CTRLControl voltage (bypass with 10nF)6THRThreshold (> 2/3 Vcc resets)7DISDischarge (open collector)8VccSupply (+4.5V to +16V)

W65C02S (40-pin DIP) - Key Pins#

PinNameFunction8VDDPower supply21VSSGround37PHI2System clock input40RESBActive-low reset34RWBRead/Write signal9-25A0-A15Address bus26-33D0-D7Data bus

28C256 EEPROM (28-pin DIP) - Key Pins#

PinNameFunction14GNDGround28VCCPower supply20CEChip enable (active-low)22OEOutput enable (active-low)27WEWrite enable (active-low)1-10, 21-26A0-A14Address inputs11-19I/O0-I/O7Data bus

Formulas Reference#

Resistor Calculations#

• Ohm's Law: V = I × R
• LED Current: R = (Vcc - Vled) / Iled
• Power: P = V × I = I² × R

555 Timer Formulas#

Astable Mode:

• Frequency: f = 1.44 / ((R1 + 2×R2) × C)
• High time: t₁ = 0.693 × (R1 + R2) × C
• Low time: t₂ = 0.693 × R2 × C
• Duty cycle: D = (R1 + R2) / (R1 + 2×R2) × 100%

Monostable Mode:

• Pulse width: T = 1.1 × R × C

Capacitor Calculations#

• Capacitive reactance: Xc = 1 / (2πfC)
• Energy stored: E = ½ × C × V²

Color Coding Conventions#

Wire Colors#

ColorPurposeRed+5V / PowerBlackGroundYellowClock / TimingBlueAddress busGreenData busOrangeControl signalsWhiteGeneral purpose

LED Colors#

ColorForward VoltageRed1.8V - 2.2VGreen2.0V - 2.2VYellow2.0V - 2.2VBlue3.0V - 3.5VWhite3.0V - 3.5V

Build Examples#

Build 1 — Single LED#

Components: Red LED, 220Ω resistor, jumper wires, power source

Steps:

1. Insert black jumper wire from power GND to row A5
2. Insert red jumper wire from power +5V to row J5
3. Place LED with cathode (short leg) in row aligned with GND
4. Place 220Ω resistor between power and LED anode

Build 2 — 555 Astable Blinker#

Components: NE555, LED, resistors (10kΩ, 100kΩ), capacitor (10µF)

Steps:

1. Place 555 IC straddling center channel
2. Connect pin 1 to GND, pin 8 to +5V
3. Connect pin 4 to pin 8 (disable reset)
4. Wire 10kΩ between pin 7 and +5V
5. Wire 100kΩ between pins 6 and 7
6. Wire 10µF between pin 6 and GND
7. Connect pin 3 (output) to LED circuit

Troubleshooting#

IssueSolutionLED doesn't lightCheck polarity (anode to +, cathode to -)Circuit doesn't powerVerify power rail connectionsIC not workingCheck VCC and GND pin connections555 not oscillatingVerify threshold/trigger capacitor wiringMicroprocessor stuckCheck RESB is HIGH after reset pulse

References#

Detailed component specifications are available in the bundled reference files:

• 555.md - Complete 555 timer IC specification
• 6502.md - MOS 6502 microprocessor details
• 6522.md - W65C22 VIA interface adapter
• 28256-eeprom.md - AT28C256 EEPROM specification
• 6C62256.md - 62256 SRAM details
• 7400-series.md - TTL logic gate pinouts
• assembly-compiler.md - Assembly compiler specification
• assembly-language.md - Assembly language specification
• basic-electronic-components.md - Resistors, capacitors, switches
• breadboard.md - Breadboard specifications
• common-breadboard-components.md - Comprehensive component reference
• connecting-electronic-components.md - Step-by-step build guides
• emulator-28256-eeprom.md - Emulating 28256-eeprom specification
• emulator-6502.md - Emulating 6502 specification
• emulator-6522.md - Emulating 6522 specification
• emulator-6C62256.md - Emulating 6C62256 specification
• emulator-lcd.md - Emulating a LCD specification
• lcd.md - LCD display interfacing
• minipro.md - EEPROM programmer usage
• t48eeprom-programmer.md - T48 programmer reference