Building a DIY Keypad Circuit With Diodes and AI Tools

Understanding the Keypad Idea In the heart of every simple keypad or keyboard is a simple idea: the matrix. Instead of wiring each key directly to the microcontroller. Which requires a lot of pins. Keys are arranged in a grid of columns and rows. When a key is pressed, it connects a row with a column. By scanning rows and columns, the microcontroller can detect which key is being pressed. For example, a 4×4 matrix allows 16 keys to be controlled with only 8 pins. This is the principle behind calculators, numpads, and even full keyboards. The Problem With 4×4 and Diodes' Role Key matrices have a well-known challenge: ghosting. Ghosting usually happens when pressing multiple keys at the same time, creating "phantom" key presses. This occurs because current flows in unintended paths across the matrix. And the solution is easy using "diodes." A 1N4148 diode is placed in series with each switch. 1N4148 diode The function of the diode is to allow current to pass in only one direction. With diodes, each key press is isolated, and ghosting is eliminated. So the typical wiring for each key looks like this: Row → Diode (1N4148) → Switch → Column Looking something like this: Building a Webpage to Showcase the Keypad To better explain the role of diodes and how keypads work, I created with the help of AI a code to showcase how the keypad works. Here's the code: 4×4 Keypad Matrix with Diodes — Interactive Wiring & Print :root{--bg:#0f1724;--card:#0b1220;--accent:#38bdf8;--muted:#9aa6b2} html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial} body{background:linear-gradient(180deg,#031025 0%, #071528 60%);color:#e6eef6;display:flex;gap:20px;align-items:flex-start;padding:24px} .wrap{max-width:1100px;margin:0 auto;width:100%} .top{display:flex;justify-content:space-between;align-items:center;gap:12px} h1{font-size:20px;margin:0} p.lead{margin:6px 0 0;color:var(--muted);font-size:13px} .layout{display:grid;grid-template-columns:420px 1fr;gap:18px;margin-top:18px} .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.02));padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.6)} .kbd {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .key{background:linear-gradient(180deg,#0f1728,#081122);border-radius:8px;padding:14px;text-align:center;cursor:pointer;border:1px solid rgba(255,255,255,0.03);user-select:none} .key:active{transform:translateY(1px)} .key.on{box-shadow:0 6px 18px rgba(56,189,248,0.12), inset 0 -2px 6px rgba(0,0,0,0.6);border-color:rgba(56,189,248,0.22)} .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .legend .item{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px} .wire{width:28px;height:6px;border-radius:4px;background:linear-gradient(90deg,#3dd5ff,#0072ff);box-shadow:0 2px 6px rgba(0,115,255,0.22)} .diode{font-weight:700;color:#ffd89b;padding:6px 8px;border-radius:6px;background:linear-gradient(180deg,#261f00,#1a1400);} svg{width:100%;height:auto} .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} button.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer} button.btn.primary{border-color:rgba(56,189,248,0.22);color:var(--accent)} .panel{padding:12px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)} .pins{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .pin{padding:6px 8px;border-radius:6px;background:rgba(255,255,255,0.02);font-size:13px} .status{margin-top:12px;color:var(--muted);font-size:13px} .wiring{font-family:monospace;background:#011225;padding:12px;border-radius:6px;margin-top:12px;color:#bfe9ff} .download{margin-top:8px} @media(max-width:900px){.layout{grid-template-columns:1fr;}} 4×4 Keypad Matrix — Diagram & Wiring (with diodes) Click keys to toggle. The diagram shows where to place diodes and how to wire rows & columns for a microcontroller scan.

Printable, single-file HTML

Keypad (4 rows × 4 columns) Column wires Diode direction (arrow points from col→row) D Diode at each switch

Clear all Random press Simulate scan Export PNG

Pressed: none

Wiring & Explanation This layout shows a typical 4×4 keypad matrix. Each button connects one column line to one row line when pressed. To avoid "ghosting" when multiple keys are pressed, place a diode on each key so current can flow only in the scanning direction (from driven column into row input). In the sample diagram the diodes are oriented from column → switch → row.

COL0 → MCU pin: C0 (drive) COL1 → MCU pin: C1 COL2 → MCU pin: C2 COL3 → MCU pin: C3 ROW0 → MCU pin: R0 (read) ROW1 → MCU pin: R1 ROW2 → MCU pin: R2 ROW3 → MCU pin: R3

/* Wiring will show here after simulation */ Notes: Use small signal diodes (1N4148 or similar) or Schottky (SS14) for lower drop. Diode orientation: from column (driven) to row (read). So the diode anode connects to column, cathode to switch/row side. Give rows pull-ups or configure MCU input with pull-up; drive columns low one-by-one to scan.

Schematic (visual) Columns (drive) C0 C1 C2 C3

Rows (read) R0 R1 R2 R3

// Build 4x4 keypad UI and SVG schematic wiring const kbd = document.getElementById('kbd'); const status = document.getElementById('status'); const wiring = document.getElementById('wiring'); const gridSvg = document.getElementById('grid'); const totalR = 4, totalC = 4; const keys = [];

function makeKeyLabel(r,c){ const labelMap = [ ['1','2','3','A'],['4','5','6','B'],['7','8','9','C'],['*','0','#','D'] ]; return labelMap[r][c] || (r+","+c); }

for(let r=0;r { btn.classList.toggle('on'); updateStatus(); updateSchematic(); }); kbd.appendChild(btn); keys.push(btn); } }

function pressedList(){ return keys.filter(k=>k.classList.contains('on')).map(k=>`(${k.dataset.r},${k.dataset.c})`); }

function updateStatus(){ const list = pressedList(); status.textContent = list.length ? ('Pressed: '+list.join(' ')) : 'Pressed: none'; }

// Build SVG grid with diodes and switches function updateSchematic(){ gridSvg.innerHTML=''; const cell = 80; for(let r=0;r<totalR;r++){ for(let c=0;c<totalC;c++){ const x = c*cell; const y = r*cell; // group const g = document.createElementNS('http://www.w3.org/2000/svg','g'); g.setAttribute('transform',`translate(${x},${y})`);

// diode symbol (anode left, cathode triangle pointing right -> bar) const diode = document.createElementNS('http://www.w3.org/2000/svg','g'); diode.innerHTML = ` `;

g.appendChild(diode);

// switch circle const circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); circle.setAttribute('cx',20); circle.setAttribute('cy',28); circle.setAttribute('r',14); circle.setAttribute('fill','#042331'); circle.setAttribute('stroke','rgba(255,255,255,0.04)'); circle.setAttribute('data-r',r); circle.setAttribute('data-c',c);

// label const text = document.createElementNS('http://www.w3.org/2000/svg','text'); text.setAttribute('x',20);text.setAttribute('y',32);text.setAttribute('font-size',12);text.setAttribute('text-anchor','middle');text.setAttribute('fill','#bde9ff'); text.textContent = makeKeyLabel(r,c);

g.appendChild(circle); g.appendChild(text);

// connection lines: from left (col) to diode anode, from diode cathode to switch, from switch to right (row) const lineA = document.createElementNS('http://www.w3.org/2000/svg','line'); lineA.setAttribute('x1',-50);lineA.setAttribute('y1',28);lineA.setAttribute('x2',-42);lineA.setAttribute('y2',28);lineA.setAttribute('stroke','#3dd5ff');lineA.setAttribute('stroke-width','4');lineA.setAttribute('stroke-linecap','round'); g.appendChild(lineA);

const lineB = document.createElementNS('http://www.w3.org/2000/svg','line'); lineB.setAttribute('x1',22);lineB.setAttribute('y1',28);lineB.setAttribute('x2',70);lineB.setAttribute('y2',28);lineB.setAttribute('stroke','#00e676');lineB.setAttribute('stroke-width','4');lineB.setAttribute('stroke-linecap','round'); g.appendChild(lineB);

// highlight if pressed const idx = r*totalC + c; const pressed = keys[idx].classList.contains('on'); if(pressed){ circle.setAttribute('fill','#082a2d'); circle.setAttribute('stroke','#38bdf8'); }

gridSvg.appendChild(g); } }

// Update wiring text: show which R lines read active when scanning each column. // Simple simulated scan: for each column, assume MCU drives that column low and reads rows that are connected via pressed keys (through diode). We'll report rows detected per column. const detected = []; for(let c=0;c<totalC;c++){ const rowsHit = new Set(); for(let r=0;r<totalR;r++){ const idx = r*totalC + c; if(keys[idx].classList.contains('on')) rowsHit.add(r); } detected.push({col:c,rows:Array.from(rowsHit).sort()}); }

let text = 'Scan result (for each column driven):\n'; detected.forEach(d=>{ text += `COL${d.col}: ` + (d.rows.length ? d.rows.map(x=>'R'+x).join(', ') : 'none') + '\n'; }); wiring.textContent = text;

}

document.getElementById('simulate').addEventListener('click', ()=>{ updateSchematic(); alert('Simulation complete. See the wiring box that lists which row lines would be seen when driving each column.'); });

// Export as PNG (basic) by drawing the SVG to canvas document.getElementById('export').addEventListener('click', ()=>{ const svg = document.querySelector('svg'); const xml = new XMLSerializer().serializeToString(svg); const svg64 = btoa(unescape(encodeURIComponent(xml))); const b64start = 'data:image/svg+xml;base64,'+svg64; const img = new Image(); img.onload = ()=>{ const c = document.createElement('canvas'); c.width = img.width; c.height = img.height; const ctx = c.getContext('2d'); ctx.fillStyle='#021022'; ctx.fillRect(0,0,c.width,c.height); ctx.drawImage(img,0,0); const png = c.toDataURL('image/png'); const a = document.createElement('a'); a.href=png; a.download='keypad-schematic.png'; a.click(); } img.src = b64start; });

// init updateStatus(); updateSchematic();

4×4 Keypad Matrix with Diodes — Interactive Wiring & Print :root{--bg:#0f1724;--card:#0b1220;--accent:#38bdf8;--muted:#9aa6b2} html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial} body{background:linear-gradient(180deg,#031025 0%, #071528 60%);color:#e6eef6;display:flex;gap:20px;align-items:flex-start;padding:24px} .wrap{max-width:1100px;margin:0 auto;width:100%} .top{display:flex;justify-content:space-between;align-items:center;gap:12px} h1{font-size:20px;margin:0} p.lead{margin:6px 0 0;color:var(--muted);font-size:13px} .layout{display:grid;grid-template-columns:420px 1fr;gap:18px;margin-top:18px} .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.02));padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.6)} .kbd {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .key{background:linear-gradient(180deg,#0f1728,#081122);border-radius:8px;padding:14px;text-align:center;cursor:pointer;border:1px solid rgba(255,255,255,0.03);user-select:none} .key:active{transform:translateY(1px)} .key.on{box-shadow:0 6px 18px rgba(56,189,248,0.12), inset 0 -2px 6px rgba(0,0,0,0.6);border-color:rgba(56,189,248,0.22)} .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .legend .item{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px} .wire{width:28px;height:6px;border-radius:4px;background:linear-gradient(90deg,#3dd5ff,#0072ff);box-shadow:0 2px 6px rgba(0,115,255,0.22)} .diode{font-weight:700;color:#ffd89b;padding:6px 8px;border-radius:6px;background:linear-gradient(180deg,#261f00,#1a1400);} svg{width:100%;height:auto} .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} button.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer} button.btn.primary{border-color:rgba(56,189,248,0.22);color:var(--accent)} .panel{padding:12px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)} .pins{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .pin{padding:6px 8px;border-radius:6px;background:rgba(255,255,255,0.02);font-size:13px} .status{margin-top:12px;color:var(--muted);font-size:13px} .wiring{font-family:monospace;background:#011225;padding:12px;border-radius:6px;margin-top:12px;color:#bfe9ff} .download{margin-top:8px} @media(max-width:900px){.layout{grid-template-columns:1fr;}} 4×4 Keypad Matrix — Diagram & Wiring (with diodes) Click keys to toggle. The diagram shows where to place diodes and how to wire rows & columns for a microcontroller scan.

Printable, single-file HTML

Keypad (4 rows × 4 columns) Column wires Diode direction (arrow points from col→row) D Diode at each switch

Clear all Random press Simulate scan Export PNG

Pressed: none

Wiring & Explanation This layout shows a typical 4×4 keypad matrix. Each button connects one column line to one row line when pressed. To avoid "ghosting" when multiple keys are pressed, place a diode on each key so current can flow only in the scanning direction (from driven column into row input). In the sample diagram the diodes are oriented from column → switch → row.

COL0 → MCU pin: C0 (drive) COL1 → MCU pin: C1 COL2 → MCU pin: C2 COL3 → MCU pin: C3 ROW0 → MCU pin: R0 (read) ROW1 → MCU pin: R1 ROW2 → MCU pin: R2 ROW3 → MCU pin: R3

/* Wiring will show here after simulation */ Notes: Use small signal diodes (1N4148 or similar) or Schottky (SS14) for lower drop. Diode orientation: from column (driven) to row (read). So the diode anode connects to column, cathode to switch/row side. Give rows pull-ups or configure MCU input with pull-up; drive columns low one-by-one to scan.

Schematic (visual) Columns (drive) C0 C1 C2 C3

Rows (read) R0 R1 R2 R3

// Build 4x4 keypad UI and SVG schematic wiring const kbd = document.getElementById('kbd'); const status = document.getElementById('status'); const wiring = document.getElementById('wiring'); const gridSvg = document.getElementById('grid'); const totalR = 4, totalC = 4; const keys = [];

function makeKeyLabel(r,c){ const labelMap = [ ['1','2','3','A'],['4','5','6','B'],['7','8','9','C'],['*','0','#','D'] ]; return labelMap[r][c] || (r+","+c); }

for(let r=0;r { btn.classList.toggle('on'); updateStatus(); updateSchematic(); }); kbd.appendChild(btn); keys.push(btn); } }

function pressedList(){ return keys.filter(k=>k.classList.contains('on')).map(k=>`(${k.dataset.r},${k.dataset.c})`); }

function updateStatus(){ const list = pressedList(); status.textContent = list.length ? ('Pressed: '+list.join(' ')) : 'Pressed: none'; }

// Build SVG grid with diodes and switches function updateSchematic(){ gridSvg.innerHTML=''; const cell = 80; for(let r=0;r<totalR;r++){ for(let c=0;c<totalC;c++){ const x = c*cell; const y = r*cell; // group const g = document.createElementNS('http://www.w3.org/2000/svg','g'); g.setAttribute('transform',`translate(${x},${y})`);

// diode symbol (anode left, cathode triangle pointing right -> bar) const diode = document.createElementNS('http://www.w3.org/2000/svg','g'); diode.innerHTML = ` `;

g.appendChild(diode);

// switch circle const circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); circle.setAttribute('cx',20); circle.setAttribute('cy',28); circle.setAttribute('r',14); circle.setAttribute('fill','#042331'); circle.setAttribute('stroke','rgba(255,255,255,0.04)'); circle.setAttribute('data-r',r); circle.setAttribute('data-c',c);

// label const text = document.createElementNS('http://www.w3.org/2000/svg','text'); text.setAttribute('x',20);text.setAttribute('y',32);text.setAttribute('font-size',12);text.setAttribute('text-anchor','middle');text.setAttribute('fill','#bde9ff'); text.textContent = makeKeyLabel(r,c);

g.appendChild(circle); g.appendChild(text);

// connection lines: from left (col) to diode anode, from diode cathode to switch, from switch to right (row) const lineA = document.createElementNS('http://www.w3.org/2000/svg','line'); lineA.setAttribute('x1',-50);lineA.setAttribute('y1',28);lineA.setAttribute('x2',-42);lineA.setAttribute('y2',28);lineA.setAttribute('stroke','#3dd5ff');lineA.setAttribute('stroke-width','4');lineA.setAttribute('stroke-linecap','round'); g.appendChild(lineA);

const lineB = document.createElementNS('http://www.w3.org/2000/svg','line'); lineB.setAttribute('x1',22);lineB.setAttribute('y1',28);lineB.setAttribute('x2',70);lineB.setAttribute('y2',28);lineB.setAttribute('stroke','#00e676');lineB.setAttribute('stroke-width','4');lineB.setAttribute('stroke-linecap','round'); g.appendChild(lineB);

// highlight if pressed const idx = r*totalC + c; const pressed = keys[idx].classList.contains('on'); if(pressed){ circle.setAttribute('fill','#082a2d'); circle.setAttribute('stroke','#38bdf8'); }

gridSvg.appendChild(g); } }

// Update wiring text: show which R lines read active when scanning each column. // Simple simulated scan: for each column, assume MCU drives that column low and reads rows that are connected via pressed keys (through diode). We'll report rows detected per column. const detected = []; for(let c=0;c<totalC;c++){ const rowsHit = new Set(); for(let r=0;r<totalR;r++){ const idx = r*totalC + c; if(keys[idx].classList.contains('on')) rowsHit.add(r); } detected.push({col:c,rows:Array.from(rowsHit).sort()}); }

let text = 'Scan result (for each column driven):\n'; detected.forEach(d=>{ text += `COL${d.col}: ` + (d.rows.length ? d.rows.map(x=>'R'+x).join(', ') : 'none') + '\n'; }); wiring.textContent = text;

}

document.getElementById('simulate').addEventListener('click', ()=>{ updateSchematic(); alert('Simulation complete. See the wiring box that lists which row lines would be seen when driving each column.'); });

// Export as PNG (basic) by drawing the SVG to canvas document.getElementById('export').addEventListener('click', ()=>{ const svg = document.querySelector('svg'); const xml = new XMLSerializer().serializeToString(svg); const svg64 = btoa(unescape(encodeURIComponent(xml))); const b64start = 'data:image/svg+xml;base64,'+svg64; const img = new Image(); img.onload = ()=>{ const c = document.createElement('canvas'); c.width = img.width; c.height = img.height; const ctx = c.getContext('2d'); ctx.fillStyle='#021022'; ctx.fillRect(0,0,c.width,c.height); ctx.drawImage(img,0,0); const png = c.toDataURL('image/png'); const a = document.createElement('a'); a.href=png; a.download='keypad-schematic.png'; a.click(); } img.src = b64start; });

// init updateStatus(); updateSchematic();

Just copy it in a code editor, save it as index.html and view it. And if you don't want to test it yourself, here's a demo. demo Using AI as a Circuit Builder Instead of manually drawing every switch and diode, I experimented with using AI to build a webpage that you can build with diodes and switches. Here's the code also if you want to test it yourself: Circuit Builder body { margin: 0; display: flex; flex-direction: column; height: 100vh; background: #0f1724; color: #fff; font-family: sans-serif; } #canvas { flex: 1; background: #011225; border: 2px solid #38bdf8; } #toolbar { display: flex; justify-content: space-around; background: #111; padding: 10px; } button { flex: 1; margin: 0 5px; padding: 12px; font-size: 16px; border: none; border-radius: 8px; background: #38bdf8; color: #000; font-weight: bold; } button:active { background: #0ea5e9; } SW Diode Wire Rotate

const svg = document.getElementById('canvas'); let selected = null; let dragging = false; let offset = {x:0,y:0};

function makeDraggable(el) { el.addEventListener('mousedown', startDrag); el.addEventListener('touchstart', startDrag); }

function startDrag(e) { selected = e.currentTarget; dragging = true; let pt = getPoint(e); const transform = selected.transform.baseVal.consolidate(); const matrix = transform ? transform.matrix : svg.createSVGMatrix(); offset.x = pt.x - matrix.e; offset.y = pt.y - matrix.f; e.preventDefault(); }

function endDrag() { dragging = false; }

// Create components function addSwitch() { let g = createGroup(); let c = document.createElementNS("http://www.w3.org/2000/svg","circle"); c.setAttribute("r","25"); c.setAttribute("fill","#042331"); c.setAttribute("stroke","#38bdf8"); c.setAttribute("stroke-width","3"); let t = document.createElementNS("http://www.w3.org/2000/svg","text"); t.setAttribute("x","0"); t.setAttribute("y","5"); t.setAttribute("text-anchor","middle"); t.setAttribute("fill","#fff"); t.textContent = "SW"; g.appendChild(c); g.appendChild(t); svg.appendChild(g); }

function addDiode() { let g = createGroup(); let poly = document.createElementNS("http://www.w3.org/2000/svg","polygon"); poly.setAttribute("points","-20,-15 0,0 -20,15"); poly.setAttribute("fill","#ffd89b"); let rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); rect.setAttribute("x","0"); rect.setAttribute("y","-12"); rect.setAttribute("width","10"); rect.setAttribute("height","24"); rect.setAttribute("fill","#ffd89b"); g.appendChild(poly); g.appendChild(rect); svg.appendChild(g); }

function addWire() { let g = createGroup(); let line = document.createElementNS("http://www.w3.org/2000/svg","line"); line.setAttribute("x1","0"); line.setAttribute("y1","0"); line.setAttribute("x2","80"); line.setAttribute("y2","0"); line.setAttribute("stroke","#3dd5ff"); line.setAttribute("stroke-width","5"); g.appendChild(line); svg.appendChild(g); }

function createGroup() { let g = document.createElementNS("http://www.w3.org/2000/svg","g"); g.setAttribute("class","draggable"); g.setAttribute("transform","translate(100,100)"); g.dataset.rot = 0; makeDraggable(g); return g; }

// Drag listeners svg.addEventListener('mousemove', drag); svg.addEventListener('touchmove', drag); svg.addEventListener('mouseup', endDrag); svg.addEventListener('touchend', endDrag); Circuit Builder body { margin: 0; display: flex; flex-direction: column; height: 100vh; background: #0f1724; color: #fff; font-family: sans-serif; } #canvas { flex: 1; background: #011225; border: 2px solid #38bdf8; } #toolbar { display: flex; justify-content: space-around; background: #111; padding: 10px; } button { flex: 1; margin: 0 5px; padding: 12px; font-size: 16px; border: none; border-radius: 8px; background: #38bdf8; color: #000; font-weight: bold; } button:active { background: #0ea5e9; } SW Diode Wire Rotate

const svg = document.getElementById('canvas'); let selected = null; let dragging = false; let offset = {x:0,y:0};

function makeDraggable(el) { el.addEventListener('mousedown', startDrag); el.addEventListener('touchstart', startDrag); }

function startDrag(e) { selected = e.currentTarget; dragging = true; let pt = getPoint(e); const transform = selected.transform.baseVal.consolidate(); const matrix = transform ? transform.matrix : svg.createSVGMatrix(); offset.x = pt.x - matrix.e; offset.y = pt.y - matrix.f; e.preventDefault(); }

function endDrag() { dragging = false; }

// Create components function addSwitch() { let g = createGroup(); let c = document.createElementNS("http://www.w3.org/2000/svg","circle"); c.setAttribute("r","25"); c.setAttribute("fill","#042331"); c.setAttribute("stroke","#38bdf8"); c.setAttribute("stroke-width","3"); let t = document.createElementNS("http://www.w3.org/2000/svg","text"); t.setAttribute("x","0"); t.setAttribute("y","5"); t.setAttribute("text-anchor","middle"); t.setAttribute("fill","#fff"); t.textContent = "SW"; g.appendChild(c); g.appendChild(t); svg.appendChild(g); }

function addDiode() { let g = createGroup(); let poly = document.createElementNS("http://www.w3.org/2000/svg","polygon"); poly.setAttribute("points","-20,-15 0,0 -20,15"); poly.setAttribute("fill","#ffd89b"); let rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); rect.setAttribute("x","0"); rect.setAttribute("y","-12"); rect.setAttribute("width","10"); rect.setAttribute("height","24"); rect.setAttribute("fill","#ffd89b"); g.appendChild(poly); g.appendChild(rect); svg.appendChild(g); }

function addWire() { let g = createGroup(); let line = document.createElementNS("http://www.w3.org/2000/svg","line"); line.setAttribute("x1","0"); line.setAttribute("y1","0"); line.setAttribute("x2","80"); line.setAttribute("y2","0"); line.setAttribute("stroke","#3dd5ff"); line.setAttribute("stroke-width","5"); g.appendChild(line); svg.appendChild(g); }

function createGroup() { let g = document.createElementNS("http://www.w3.org/2000/svg","g"); g.setAttribute("class","draggable"); g.setAttribute("transform","translate(100,100)"); g.dataset.rot = 0; makeDraggable(g); return g; }

// Drag listeners svg.addEventListener('mousemove', drag); svg.addEventListener('touchmove', drag); svg.addEventListener('mouseup', endDrag); svg.addEventListener('touchend', endDrag); Final Thoughts This project shows how traditional electronics (key matrices + diodes) and modern AI tools can blend together. The AI helps design and explain, while the diodes solve the practical problem of ghosting.