oblivionlabs — Circuit Simulator

oblivionlabs

Checking your session…

oblivionlabs

Simulator▾

Simulation

Output Waveform

Transfer Characteristics

User

Project File

Project name

Simulation Settings

End time (ms) Step time (µs)

Simulation Server

Checking…

Edit Value

Voltage (V)

' + '

' + 'Amplitude (V, peak)' + 'Frequency (Hz)' + 'DC Offset (V)

' + '

' + 'Low level (V)' + 'High level (V)' + 'Frequency (Hz)

'; } else if (comp.type === "P") { const probeColor = comp.color || "#e53935"; const colorOptions = [ ["#e53935","Red"], ["#1e88e5","Blue"], ["#43a047","Green"], ["#f9a825","Yellow"], ["#8e24aa","Purple"], ["#00acc1","Cyan"], ["#fb8c00","Orange"], ["#ec407a","Pink"], ["#6d4c41","Brown"], ["#546e7a","Slate"] ]; fields.innerHTML = 'Probe name (used on canvas + graph legend)' + 'Probe colour' + 'Waveform line style'; } else return; document.getElementById("valuePanel").classList.add("show"); document.getElementById("valuePanel").dataset.compId = comp.id; if (comp.type === "V") toggleWaveformFields(); } function openTextEditor(text) { const panel = document.getElementById("valuePanel"); panel.dataset.mode = "text"; panel.dataset.textId = text ? text.id : ""; document.getElementById("valueTitle").textContent = text ? "Edit Text" : "Add Text"; document.getElementById("valueFields").innerHTML = 'Text'; panel.classList.add("show"); } function toggleWaveformFields() { const wf = document.getElementById("vf-waveform").value; document.getElementById("wf-dc").style.display = wf==="DC"?"block":"none"; document.getElementById("wf-sin").style.display = wf==="sin"?"block":"none"; document.getElementById("wf-square").style.display = wf==="square"?"block":"none"; } function closeValueEditor() { const panel = document.getElementById("valuePanel"); panel.classList.remove("show"); panel.dataset.mode = ""; } function saveValueEditor() { const panel = document.getElementById("valuePanel"); if (panel.dataset.mode === "text") { const val = document.getElementById("vf-text-content").value.trim(); const textId = panel.dataset.textId; if (textId) { const t = texts.find(x => x.id === textId); if (t) { if (val) t.content = val; else texts = texts.filter(x => x.id !== textId); } } else if (val && pendingTextPoint) { idCounters.T = (idCounters.T||0) + 1; texts.push({ id: "T"+idCounters.T, x: pendingTextPoint.x, y: pendingTextPoint.y, content: val }); } closeValueEditor(); renderStructure(); pushHistory(); return; } const compId = panel.dataset.compId; const comp = components.find(c => c.id === compId); if (!comp) { closeValueEditor(); return; } if (comp.type === "R" || comp.type === "C" || comp.type === "L") { const v = parseFloat(document.getElementById("vf-value").value); if (!isNaN(v)) comp.value = v; if (comp.type === "C") { const ic = parseFloat(document.getElementById("vf-ic").value); comp.initialCondition = isNaN(ic)?0:ic; } } else if (comp.type === "V") { comp.waveform = document.getElementById("vf-waveform").value; if (comp.waveform === "DC") comp.value = parseFloat(document.getElementById("vf-dc-value").value) || 0; else if (comp.waveform === "sin") { comp.amplitude = parseFloat(document.getElementById("vf-sin-amp").value) || 0; comp.frequency = parseFloat(document.getElementById("vf-sin-freq").value) || 1000; comp.offset = parseFloat(document.getElementById("vf-sin-offset").value) || 0; } else if (comp.waveform === "square") { comp.lowValue = parseFloat(document.getElementById("vf-sq-low").value) || 0; comp.highValue = parseFloat(document.getElementById("vf-sq-high").value) || 0; comp.frequency = parseFloat(document.getElementById("vf-sq-freq").value) || 1000; } } else if (comp.type === "P") { comp.customLabel = document.getElementById("vf-label").value.trim() || comp.prefix; comp.color = document.getElementById("vf-probe-color").value || "#e53935"; comp.lineStyle = document.getElementById("vf-probe-line-style").value || "solid"; } closeValueEditor(); positionComponentDom(comp); updateSelectionBar(); pushHistory(); } /* ---------- Undo / Redo ---------- */ let history = []; let historyIndex = -1; let restoringHistory = false; const HISTORY_LIMIT = 100; function cloneComp(c) { const copy = {}; for (const k in c) { if (k==="el"||k==="hitEl"||k==="pinEls"||k==="labelEl") continue; copy[k]=c[k]; } return copy; } function cloneText(t) { return { id: t.id, x: t.x, y: t.y, content: t.content }; } function snapshotState() { return JSON.stringify({ components: components.map(cloneComp), wires: wires.map(w => ({ points: w.points })), texts: texts.map(cloneText), idCounters: Object.assign({}, idCounters) }); } function pushHistory() { if (restoringHistory) return; const snap = snapshotState(); history = history.slice(0, historyIndex+1); history.push(snap); if (history.length > HISTORY_LIMIT) history.shift(); else historyIndex++; historyIndex = history.length - 1; updateUndoRedoButtons(); } function restoreState(json) { restoringHistory = true; const data = JSON.parse(json); components = data.components; wires = data.wires; texts = data.texts; idCounters = data.idCounters; selectedId = null; selectedWire = null; wireDraft = null; dragState = null; wireBendDrag = null; panState = null; renderStructure(); restoringHistory = false; } function undo() { if (historyIndex <= 0) return; historyIndex--; restoreState(history[historyIndex]); updateUndoRedoButtons(); } function redo() { if (historyIndex >= history.length - 1) return; historyIndex++; restoreState(history[historyIndex]); updateUndoRedoButtons(); } function updateUndoRedoButtons() { const undoBtn = document.getElementById("undoBtn"); const redoBtn = document.getElementById("redoBtn"); if (undoBtn) undoBtn.disabled = historyIndex <= 0; if (redoBtn) redoBtn.disabled = historyIndex >= history.length - 1; } class UnionFind { constructor() { this.parent = {}; } find(x) { if (!(x in this.parent)) this.parent[x]=x; if (this.parent[x]!==x) this.parent[x]=this.find(this.parent[x]); return this.parent[x]; } union(a,b) { const ra=this.find(a), rb=this.find(b); if (ra!==rb) this.parent[ra]=rb; } } function buildNetlist() { const uf = new UnionFind(); wires.forEach(w => { const resolved = w.points.map(resolveEndpoint); for (let i=0; i { const resolved = w.points.map(resolveEndpoint); resolved.forEach(pt => { wires.forEach((other, oi) => { if (wi === oi) return; const otherResolved = other.points.map(resolveEndpoint); for (let i=0; i c.type === "P").forEach(probe => { const pp = pinPoints(probe)[0]; wires.forEach(w => { const resolved = w.points.map(resolveEndpoint); for (let i=0; i c.type === "G").forEach(g => { groundRoot = uf.find(pointKey(pinPoints(g)[0])); }); const rootToNode = {}; let nextNode = 1; function nodeFor(pt) { const root = uf.find(pointKey(pt)); if (groundRoot !== null && root === groundRoot) return "0"; if (!(root in rootToNode)) rootToNode[root] = String(nextNode++); return rootToNode[root]; } const netComponents = []; const probes = []; const sources = []; let hasSource = false; for (const comp of components) { if (comp.type === "G") continue; const pins = pinPoints(comp); if (comp.type === "R") netComponents.push({ id: comp.prefix, type: "resistor", nodeA: nodeFor(pins[0]), nodeB: nodeFor(pins[1]), value: comp.value }); else if (comp.type === "C") netComponents.push({ id: comp.prefix, type: "capacitor", nodeA: nodeFor(pins[0]), nodeB: nodeFor(pins[1]), value: comp.value, initial_condition: comp.initialCondition||0 }); else if (comp.type === "L") netComponents.push({ id: comp.prefix, type: "inductor", nodeA: nodeFor(pins[0]), nodeB: nodeFor(pins[1]), value: comp.value }); else if (comp.type === "D") netComponents.push({ id: comp.prefix, type: "diode", nodeA: nodeFor(pins[0]), nodeB: nodeFor(pins[1]) }); else if (comp.type === "V") { hasSource = true; const nA = nodeFor(pins[0]), nB = nodeFor(pins[1]); const name = labelForComponent(comp).split(" ")[0]; sources.push({ node: nA, label: name }); if (comp.waveform === "sin") netComponents.push({ id: comp.prefix, type: "voltage_source_sin", nodeA: nA, nodeB: nB, amplitude: comp.amplitude, frequency: comp.frequency, offset: comp.offset }); else if (comp.waveform === "square") netComponents.push({ id: comp.prefix, type: "voltage_source_square", nodeA: nA, nodeB: nB, low_value: comp.lowValue, high_value: comp.highValue, frequency: comp.frequency }); else netComponents.push({ id: comp.prefix, type: "voltage_source", nodeA: nA, nodeB: nB, value: comp.value }); } else if (comp.type === "Q") { netComponents.push({ id: comp.prefix, type: "bjt_npn", nodeA: nodeFor(pins[1]), nodeB: nodeFor(pins[0]), nodeC: nodeFor(pins[2]) }); } else if (comp.type === "P") { probes.push({ id: comp.prefix, label: comp.customLabel || comp.prefix, color: comp.color || "#e53935", lineStyle: comp.lineStyle || "solid", nodeA: nodeFor(pins[0]), nodeB: "0" }); } } return { components: netComponents, probes, sources, hasGround: groundRoot!==null, hasSource, analysis: { type: "transient", step_time: cfg.stepTimeUs*1e-6, end_time: cfg.endTimeMs*1e-3 } }; } let lastResultData = null, lastTraces = null; let simulationRunning = false; async function runSimulation() { if (simulationRunning) return; const netlist = buildNetlist(); if (!netlist.hasGround) { alert("Add a Ground component and wire it in."); return; } if (!netlist.hasSource) { alert("Add a Voltage Source."); return; } if (netlist.components.length === 0) { alert("Place some components first."); return; } document.getElementById("wfError").style.display = "none"; document.getElementById("wfStatus").textContent = "Simulating... (cold start can take ~1 min)"; simulationRunning = true; const simButtons = [document.getElementById("wfTopSimulateBtn"), document.getElementById("wfSimulateBtn")].filter(Boolean); simButtons.forEach(btn => btn.disabled = true); try { const res = await fetch(cfg.backend + "/simulate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ components: netlist.components, analysis: netlist.analysis }) }); if (!res.ok) throw new Error("Simulation server returned HTTP " + res.status); const data = await res.json(); document.getElementById("wfStatus").textContent = ""; if (data.error) { showWfError(data.error); return; } const traces = []; netlist.sources.forEach(s => { if (data[s.node]) traces.push({ key: "src_"+s.node, label: s.label, values: data[s.node] }); }); netlist.probes.forEach(p => { const a = data[p.nodeA] || data.time.map(() => 0); const b = data[p.nodeB] || data.time.map(() => 0); traces.push({ key: "probe_"+p.id, label: p.label, color: p.color, lineStyle: p.lineStyle || "solid", values: a.map((v,i) => v - b[i]) }); }); lastResultData = data; lastTraces = { time: data.time, traces }; drawResultChart(lastTraces); } catch (err) { document.getElementById("wfStatus").textContent = ""; showWfError("Request failed: " + err.message); } finally { simulationRunning = false; simButtons.forEach(btn => btn.disabled = false); } } function showWfError(msg) { const el = document.getElementById("wfError"); el.style.display = "block"; el.textContent = msg; } let resultChart = null; let activeTraceKey = null; const whiteBgPlugin = { id: "whiteBg", beforeDraw(chart) { const ctx = chart.ctx; ctx.save(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "#ffffff"; ctx.fillRect(0,0,chart.width,chart.height); ctx.restore(); }}; const zeroAxisPlugin = { id: "zeroAxis", afterDraw(chart) { const ctx = chart.ctx, area = chart.chartArea, scales = chart.scales; const xZero = scales.x.getPixelForValue(0), yZero = scales.y.getPixelForValue(0); ctx.save(); ctx.strokeStyle = "#222"; ctx.lineWidth = 1.4; if (yZero >= area.top && yZero <= area.bottom) { ctx.beginPath(); ctx.moveTo(area.left,yZero); ctx.lineTo(area.right,yZero); ctx.stroke(); } if (xZero >= area.left && xZero <= area.right) { ctx.beginPath(); ctx.moveTo(xZero,area.top); ctx.lineTo(xZero,area.bottom); ctx.stroke(); } ctx.restore(); }}; function makeTouchCrosshairPlugin(pluginId, getLabel) { const state = { active: false, index: -1, datasetIndex: 0, chart: null }; function clientToCanvas(chart, clientX, clientY) { const rect = chart.canvas.getBoundingClientRect(); return { x: (clientX - rect.left) * (chart.width / rect.width), y: (clientY - rect.top) * (chart.height / rect.height) }; } function nearestPoint(chart, canvasX, canvasY) { let best = null; let bestScore = Infinity; chart.data.datasets.forEach((ds, di) => { if (!ds || ds.hidden || !Array.isArray(ds.data)) return; ds.data.forEach((p, i) => { if (!p || typeof p !== "object") return; const xv = Number(p.x), yv = Number(p.y); if (!Number.isFinite(xv) || !Number.isFinite(yv)) return; const px = chart.scales.x.getPixelForValue(xv); const py = chart.scales.y.getPixelForValue(yv); // X dominates dragging direction; Y chooses the closest trace when // several graphs/traces share the same X position. const dx = Math.abs(px - canvasX); const dy = Math.abs(py - canvasY); const score = dx * 4 + dy; if (score < bestScore) { bestScore = score; best = { datasetIndex: di, index: i }; } }); }); return best; } function update(chart, clientX, clientY) { const pos = clientToCanvas(chart, clientX, clientY); const area = chart.chartArea; pos.x = Math.max(area.left, Math.min(pos.x, area.right)); pos.y = Math.max(area.top, Math.min(pos.y, area.bottom)); const hit = nearestPoint(chart, pos.x, pos.y); if (!hit) return; state.active = true; state.chart = chart; state.datasetIndex = hit.datasetIndex; state.index = hit.index; chart.draw(); } function bind(chart) { if (chart.$touchCrosshairBound) return; chart.$touchCrosshairBound = true; const canvas = chart.canvas; canvas.style.touchAction = "none"; const coords = (e) => { const t = e.touches?.[0] || e.changedTouches?.[0] || e; return { x: t.clientX, y: t.clientY }; }; const startDrag = (e) => { if (e.cancelable) e.preventDefault(); const p = coords(e); state.active = true; state.chart = chart; try { if (e.pointerId != null) canvas.setPointerCapture(e.pointerId); } catch (_) {} update(chart, p.x, p.y); }; const drag = (e) => { if (!state.active || state.chart !== chart) return; if (e.cancelable) e.preventDefault(); const p = coords(e); update(chart, p.x, p.y); }; if (window.PointerEvent) { canvas.addEventListener("pointerdown", startDrag, { passive:false }); canvas.addEventListener("pointermove", drag, { passive:false }); } else { canvas.addEventListener("touchstart", startDrag, { passive:false }); canvas.addEventListener("touchmove", drag, { passive:false }); canvas.addEventListener("mousedown", startDrag); window.addEventListener("mousemove", drag); } } return { id: pluginId, afterInit(chart) { bind(chart); }, afterDraw(chart) { if (!state.active || state.chart !== chart || state.index < 0) return; const ds = chart.data.datasets[state.datasetIndex]; const p = ds?.data?.[state.index]; if (!p) return; const x = chart.scales.x.getPixelForValue(Number(p.x)); const y = chart.scales.y.getPixelForValue(Number(p.y)); const area = chart.chartArea; if (!Number.isFinite(x) || !Number.isFinite(y)) return; // Marker/crosshair always inherits the ACTIVE graph/trace colour. const accent = ds.borderColor || ds.backgroundColor || "#a76527"; const ctx = chart.ctx; ctx.save(); ctx.strokeStyle = accent; ctx.globalAlpha = 0.72; ctx.lineWidth = 1.15; ctx.setLineDash([4,4]); ctx.beginPath(); ctx.moveTo(x, area.top); ctx.lineTo(x, area.bottom); ctx.moveTo(area.left, y); ctx.lineTo(area.right, y); ctx.stroke(); ctx.setLineDash([]); ctx.globalAlpha = 1; // Exactly one visible marker. ctx.fillStyle = "#fff"; ctx.strokeStyle = accent; ctx.lineWidth = 2.7; ctx.beginPath(); ctx.arc(x, y, 5.5, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); const lines = getLabel(chart, state.datasetIndex, state.index, p) || []; if (lines.length) { ctx.font = "600 11px Arial, sans-serif"; const px = 9, py = 7, lh = 16; let w = 0; lines.forEach(s => w = Math.max(w, ctx.measureText(s).width)); w += px * 2; const h = lines.length * lh + py * 2; let bx = x + 13; if (bx + w > area.right - 4) bx = x - w - 13; bx = Math.max(area.left + 4, Math.min(bx, area.right - w - 4)); let by = y - h - 13; if (by < area.top + 4) by = y + 13; by = Math.max(area.top + 4, Math.min(by, area.bottom - h - 4)); ctx.fillStyle = "rgba(25,25,25,.90)"; ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(bx, by, w, h, 7); else ctx.rect(bx, by, w, h); ctx.fill(); // Small trace-colour indicator inside tooltip. ctx.fillStyle = accent; ctx.fillRect(bx + px, by + py + 2, 7, 7); ctx.fillStyle = "#fff"; ctx.textAlign = "left"; ctx.textBaseline = "top"; lines.forEach((s,i) => ctx.fillText(s, bx + px + (i === 0 ? 12 : 0), by + py + i*lh)); } ctx.restore(); } }; } const waveformTouchCrosshairPlugin = makeTouchCrosshairPlugin( "waveformTouchCrosshair", (chart, datasetIndex, index, point) => { const ds = chart.data.datasets[datasetIndex]; return [ String(ds.label || `Trace ${datasetIndex + 1}`), `Time: ${Number(point.x).toFixed(3)} ms`, `Voltage: ${Number(point.y).toFixed(3)} V` ]; } ); function drawResultChart(result) { const timeMs = result.time.map(t => t*1000); const colors = ["#c1752e","#9c6a35","#8a5a2b","#d98c4a","#b5651d","#e2a06b"]; let dataMin = 0, dataMax = 0; result.traces.forEach(tr => { for (let i = 0; i < tr.values.length; i++) { const v = tr.values[i]; if (!Number.isFinite(v)) continue; if (v < dataMin) dataMin = v; if (v > dataMax) dataMax = v; } }); const range = (dataMax - dataMin) || 1; let vMax = dataMax + range*0.2, vMin = dataMin - range*0.2; if (vMin > 0) vMin = -range*0.2; if (vMax < 0) vMax = range*0.2; if (!activeTraceKey || !result.traces.find(t => t.key === activeTraceKey)) { activeTraceKey = result.traces.length ? result.traces[0].key : null; } const datasets = result.traces.map((tr, i) => { const style = tr.lineStyle || (tr.key && tr.key.startsWith("probe_") ? "solid" : (i===0 ? "solid" : "dashed")); const isThick = style.startsWith("thick"); let dash = []; if (style === "dashed" || style === "thick-dashed") dash = [8,5]; else if (style === "dotted" || style === "thick-dotted") dash = [2,5]; const baseWidth = isThick ? 4 : 1.8; return { label: tr.label, data: Array.from({length: Math.min(timeMs.length, tr.values.length)}, (_, idx) => ({x:timeMs[idx], y:tr.values[idx]})), borderColor: tr.color || colors[i % colors.length], borderDash: dash, borderCapStyle: (style === "dotted" || style === "thick-dotted") ? "round" : "butt", borderWidth: tr.key === activeTraceKey ? Math.max(baseWidth, 3) : baseWidth, pointRadius: 0, pointHoverRadius: 6, pointHitRadius: 20, pointHoverBorderWidth: 2.5, pointHoverBorderColor: tr.color || colors[i % colors.length], pointHoverBackgroundColor: "#ffffff", tension: 0.05 }; }); if (resultChart) resultChart.destroy(); resultChart = new Chart(document.getElementById("resultChart"), { type: "line", data: { datasets }, plugins: [whiteBgPlugin, zeroAxisPlugin], options: { responsive: true, maintainAspectRatio: false, aspectRatio: 1, animation: false, scales: { x: { type: "linear", min: 0, title: { display: true, text: "Time (ms)", color: "#000" }, ticks: { color: "#333" }, grid: { color: "#ddd" } }, y: { min: vMin, max: vMax, title: { display: true, text: "Voltage (V)", color: "#000" }, ticks: { color: "#333" }, grid: { color: "#ddd" } } }, interaction: { mode: "nearest", intersect: false, axis: "xy" }, hover: { mode: "nearest", intersect: false }, plugins: { legend: { display: false }, tooltip: { enabled: true, mode: "nearest", intersect: false, displayColors: true } } } }); const select = document.getElementById("wfTraceSelect"); select.innerHTML = ""; result.traces.forEach(tr => { const opt = document.createElement("option"); opt.value = tr.key; opt.textContent = tr.label; if (tr.key === activeTraceKey) opt.selected = true; select.appendChild(opt); }); function setActiveWaveformTrace(key) { activeTraceKey = key; select.value = key; // Update line emphasis without destroying/recreating the chart. resultChart.data.datasets.forEach((ds, i) => { const tr = result.traces[i]; const style = tr.style || "solid"; const isThick = style.indexOf("thick") === 0; const baseWidth = isThick ? 4 : 1.8; ds.borderWidth = tr.key === activeTraceKey ? Math.max(baseWidth, 3) : baseWidth; }); resultChart.update("none"); legend.querySelectorAll(".legend-chip").forEach((el, i) => { el.classList.toggle("active", result.traces[i] && result.traces[i].key === activeTraceKey); }); const activeTr = result.traces.find(t => t.key === activeTraceKey); if (activeTr) showTraceStats(activeTr); } select.onchange = () => setActiveWaveformTrace(select.value); const swatchClasses = ["solid","dashed","dotted"]; const legend = document.getElementById("wfLegend"); legend.innerHTML = ""; result.traces.forEach((tr, i) => { const chip = document.createElement("div"); chip.className = "legend-chip" + (tr.key === activeTraceKey ? " active" : ""); chip.innerHTML = ''+tr.label+''; const swatch = chip.querySelector(".legend-swatch"); const traceColor = tr.color || colors[i % colors.length]; swatch.style.borderColor = traceColor; if (swatch.classList.contains("solid")) swatch.style.background = traceColor; else if (swatch.classList.contains("dashed")) swatch.style.background = "repeating-linear-gradient(45deg,"+traceColor+" 0 2px,transparent 2px 4px)"; else swatch.style.backgroundImage = "radial-gradient("+traceColor+" 35%,transparent 36%)"; chip.onclick = () => setActiveWaveformTrace(tr.key); legend.appendChild(chip); }); const activeTr = result.traces.find(t => t.key === activeTraceKey); if (activeTr) showTraceStats(activeTr); } function showTraceStats(tr) { let min = Infinity, max = -Infinity; for (let i = 0; i < tr.values.length; i++) { const v = tr.values[i]; if (!Number.isFinite(v)) continue; if (v < min) min = v; if (v > max) max = v; } if (!Number.isFinite(min) || !Number.isFinite(max)) { min = 0; max = 0; } const vpp = max - min; document.getElementById("wfMax").textContent = max.toFixed(3) + " V"; document.getElementById("wfMin").textContent = min.toFixed(3) + " V"; document.getElementById("wfVpp").textContent = vpp.toFixed(3) + " V"; document.getElementById("wfHigh").textContent = max.toFixed(3) + " V"; document.getElementById("wfLow").textContent = min.toFixed(3) + " V"; } function exportCurrent() { if (currentPage === 1) downloadPNG(); else downloadDiagramPNG(); } function downloadPNG() { if (!resultChart) { alert("Run a simulation first."); return; } const a = document.createElement("a"); a.href = resultChart.toBase64Image("image/png", 1); a.download = "waveform.png"; a.click(); } function downloadCSV() { if (!lastTraces) { alert("Run a simulation first."); return; } let csv = "time_s," + lastTraces.traces.map(t => t.label).join(",") + "\n"; lastTraces.time.forEach((t, i) => { csv += t + "," + lastTraces.traces.map(tr => tr.values[i]).join(",") + "\n"; }); const blob = new Blob([csv], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "simulation_data.csv"; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); } function downloadDiagramPNG() { if (components.length === 0 && texts.length === 0) { alert("Place some components first."); return; } let minX=1e9,minY=1e9,maxX=-1e9,maxY=-1e9; components.forEach(c => { pinPoints(c).forEach(p => { minX=Math.min(minX,p.x); minY=Math.min(minY,p.y); maxX=Math.max(maxX,p.x); maxY=Math.max(maxY,p.y); }); }); wires.forEach(w => { w.points.map(resolveEndpoint).forEach(p => { minX=Math.min(minX,p.x); minY=Math.min(minY,p.y); maxX=Math.max(maxX,p.x); maxY=Math.max(maxY,p.y); }); }); texts.forEach(t => { minX=Math.min(minX,t.x); minY=Math.min(minY,t.y-14); maxX=Math.max(maxX,t.x+80); maxY=Math.max(maxY,t.y+6); }); const pad = 60; minX-=pad; minY-=pad; maxX+=pad; maxY+=pad; const w = maxX-minX, h = maxY-minY; const clone = document.createElementNS("http://www.w3.org/2000/svg","svg"); clone.setAttribute("xmlns","http://www.w3.org/2000/svg"); clone.setAttribute("width", w); clone.setAttribute("height", h); clone.setAttribute("viewBox", minX+" "+minY+" "+w+" "+h); const bgRectC = document.createElementNS("http://www.w3.org/2000/svg","rect"); bgRectC.setAttribute("x",minX); bgRectC.setAttribute("y",minY); bgRectC.setAttribute("width",w); bgRectC.setAttribute("height",h); bgRectC.setAttribute("fill","#ffffff"); clone.appendChild(bgRectC); const styleEl = document.createElementNS("http://www.w3.org/2000/svg","style"); styleEl.textContent = ".comp-body,.gnd-symbol{stroke:#000;stroke-width:2.2;fill:none;} .probe-body{stroke:#b45309;stroke-width:2.2;fill:none;stroke-dasharray:3 2;} .wire-line{stroke:#c1752e;stroke-width:2.5;fill:none;} .comp-label{fill:#111;font-size:11px;font-family:monospace;} .pin{fill:#fff;stroke:#c1752e;stroke-width:2;}"; clone.appendChild(styleEl); wires.forEach(w => { const pl = document.createElementNS("http://www.w3.org/2000/svg","polyline"); pl.setAttribute("points", wirePolylinePoints(w)); pl.setAttribute("class","wire-line"); clone.appendChild(pl); }); components.forEach(comp => { const g = comp.el.cloneNode(true); g.removeAttribute("class"); // The live transistor uses CSS var(--text) for its nested SVG stroke. // CSS custom properties are not available in the standalone SVG used for // PNG export, so resolve only the transistor's export colours explicitly. if (comp.type === "Q") { const transistorGroup = g.querySelector("g"); if (transistorGroup) transistorGroup.setAttribute("stroke", "#000000"); const transistorArrow = g.querySelector(".transistor-arrow"); if (transistorArrow) transistorArrow.setAttribute("fill", "#000000"); } clone.appendChild(g); const label = comp.labelEl.cloneNode(true); clone.appendChild(label); pinPoints(comp).forEach(p => { const dot = document.createElementNS("http://www.w3.org/2000/svg","circle"); dot.setAttribute("cx",p.x); dot.setAttribute("cy",p.y); dot.setAttribute("r",5); dot.setAttribute("class","pin"); clone.appendChild(dot); }); }); texts.forEach(t => { const el = document.createElementNS("http://www.w3.org/2000/svg","text"); el.setAttribute("x", t.x); el.setAttribute("y", t.y); el.setAttribute("style", "font-size:14px;fill:#111;font-family:'Segoe UI',system-ui,sans-serif;"); el.textContent = t.content; clone.appendChild(el); }); const xml = new XMLSerializer().serializeToString(clone); const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(svgBlob); const img = new Image(); img.onload = () => { const scaleFactor = 2; const canvasEl = document.createElement("canvas"); canvasEl.width = w*scaleFactor; canvasEl.height = h*scaleFactor; const ctx = canvasEl.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0,0,canvasEl.width,canvasEl.height); ctx.drawImage(img, 0, 0, canvasEl.width, canvasEl.height); URL.revokeObjectURL(url); const a = document.createElement("a"); a.href = canvasEl.toDataURL("image/png"); a.download = safeProjectName() + "_diagram.png"; a.click(); }; img.src = url; } async function updateBackendStatus() { const box = document.getElementById("backendStatus"); const text = document.getElementById("backendStatusText"); if (!box || !text) return; box.className = "backend-status checking"; text.textContent = "Checking…"; try { const response = await fetch(cfg.backend + "/health", { cache: "no-store" }); if (!response.ok) throw new Error("Health check failed"); box.className = "backend-status connected"; text.textContent = "Connected"; } catch (e) { box.className = "backend-status unavailable"; text.textContent = "Unavailable"; } } function openSettings() { document.getElementById("cfgEndTime").value = cfg.endTimeMs; document.getElementById("cfgStepTime").value = cfg.stepTimeUs; document.getElementById("settingsPanel").classList.add("show"); updateBackendStatus(); } function closeSettings() { document.getElementById("settingsPanel").classList.remove("show"); } function saveSettings() { cfg.endTimeMs = parseFloat(document.getElementById("cfgEndTime").value) || 1; cfg.stepTimeUs = parseFloat(document.getElementById("cfgStepTime").value) || 1; closeSettings(); } function clearAll() { if (!confirm("Clear the whole canvas?")) return; components = []; wires = []; texts = []; selectedId = null; selectedWire = null; wireDraft = null; renderStructure(); pushHistory(); } try { applyTheme(localStorage.getItem("oblivionlabs-theme") || "light"); } catch (e) { applyTheme("light"); } fetch(cfg.backend + "/health").catch(() => {}); setTool("select"); goToPage(0); renderStructure(); pushHistory();