warehack.ing/spicebook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add schematic pipeline step and fix vertical label spacing

Browse Source 
Add ofst=0.15 to vertical resistor label calls preventing overlap with
color-coded zigzag bands. Add Schematic step 03 to homepage pipeline
with inline SVG voltage divider on Mims graph paper. Pipeline now
4-step with responsive 1col/2x2/4col layout.
This commit is contained in:
Ryan Malloy 2026-02-20 20:34:41 -07:00
parent 65e7dbe68d
commit fe6d20afbd
2 changed files with 87 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
backend/src/spicebook/engine/schematic.py
View File

@ -1021,19 +1021,19 @@ def _render_grid(parsed: ParsedNetlist) -> str:
# node[0] higher → go down so start=node[0], end=node[1]
placed_elem = d.add(
elem.at((x, y0)).down().length(length)
.label(_component_label(comp), loc="right")
.label(_component_label(comp), loc="right", ofst=0.15)
)
else:
# node[0] lower → go up so start=node[0], end=node[1]
placed_elem = d.add(
elem.at((x, y0)).up().length(length)
.label(_component_label(comp), loc="right")
.label(_component_label(comp), loc="right", ofst=0.15)
)
else:
# Fallback: single-node or unusual component
placed_elem = d.add(
elem.at((x, _GRID_MID_Y)).down().length(_GRID_MIN_COMP_LEN)
.label(_component_label(comp), loc="right")
.label(_component_label(comp), loc="right", ofst=0.15)
)
positions = _get_terminal_positions(placed_elem, comp)
@ -1152,7 +1152,7 @@ def _draw_vert_chain(
if i == 0 and start is not None:
elem = elem.at(start)
elem = getattr(elem, direction)()
elem = elem.label(_component_label(comp), loc=label_loc)
elem = elem.label(_component_label(comp), loc=label_loc, ofst=0.15)
d.add(elem)
if end_type == "ground":
@ -1180,7 +1180,7 @@ def _draw_horiz_then_down(d, parsed, start, path, going_right):
# Turn downward at the bend — label faces outward
d.push()
down_label = "right" if going_right else "left"
d.add(elem.down().label(_component_label(comp), loc=down_label))
d.add(elem.down().label(_component_label(comp), loc=down_label, ofst=0.15))
if path.end_type == "ground":
d.add(elm.Ground())
elif path.end_type == "supply":

95
frontend/src/components/PipelineStrip.astro
View File

@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
---
<section class="max-w-6xl mx-auto px-6 py-16">
<div class="grid gap-6 md:grid-cols-[1fr_auto_1fr_auto_1fr] items-start">
<div class="grid gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-start">
<!-- Step 1: Write -->
<div class="pipeline-step">
@ -22,9 +22,9 @@ import { Icon } from 'astro-icon/components';
</div>
<!-- Arrow 1→2 -->
<div class="pipeline-arrow">
<Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden md:block" />
<Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 md:hidden" />
<div class="pipeline-arrow flex md:hidden lg:flex">
<Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
<Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
</div>
<!-- Step 2: Simulate -->
@ -54,14 +54,80 @@ import { Icon } from 'astro-icon/components';
</div>
<!-- Arrow 2→3 -->
<div class="pipeline-arrow">
<Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden md:block" />
<Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 md:hidden" />
<div class="pipeline-arrow flex md:hidden lg:flex">
<Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
<Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
</div>
<!-- Step 3: Visualize -->
<!-- Step 3: Schematic -->
<div class="pipeline-step">
<span class="pipeline-number">03</span>
<h3 class="pipeline-title">Schematic</h3>
<div class="pipeline-preview pipeline-schematic">
<svg viewBox="0 0 300 140" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" preserveAspectRatio="xMidYMid meet">
<defs>
<pattern id="sch-minor" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 V 10 H 0" fill="none" stroke="#d4e4d4" stroke-width="0.3"/>
</pattern>
<pattern id="sch-major" width="50" height="50" patternUnits="userSpaceOnUse">
<path d="M 50 0 V 50 H 0" fill="none" stroke="#b0ccb0" stroke-width="0.6"/>
</pattern>
</defs>
<!-- Mims graph paper background -->
<rect width="300" height="140" fill="#f8faf6"/>
<rect width="300" height="140" fill="url(#sch-minor)"/>
<rect width="300" height="140" fill="url(#sch-major)"/>
<!-- Wires -->
<line x1="15" y1="35" x2="50" y2="35" stroke="#333" stroke-width="1.2"/>
<line x1="130" y1="35" x2="170" y2="35" stroke="#333" stroke-width="1.2"/>
<line x1="170" y1="35" x2="245" y2="35" stroke="#333" stroke-width="1.2"/>
<line x1="170" y1="35" x2="170" y2="50" stroke="#333" stroke-width="1.2"/>
<line x1="170" y1="110" x2="170" y2="125" stroke="#333" stroke-width="1.2"/>
<!-- Junction dot -->
<circle cx="170" cy="35" r="2" fill="#333"/>
<!-- Ground symbol -->
<line x1="163" y1="125" x2="177" y2="125" stroke="#333" stroke-width="1.2"/>
<line x1="165" y1="129" x2="175" y2="129" stroke="#333" stroke-width="1"/>
<line x1="167" y1="133" x2="173" y2="133" stroke="#333" stroke-width="0.8"/>
<!-- R1 horizontal zigzag (10k: Brown-Black-Orange-Gold) -->
<polyline points="50,35 60,26 70,44" fill="none" stroke="#8B4513" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="70,44 80,26 90,44" fill="none" stroke="#2d2d2d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="90,44 100,26 110,44" fill="none" stroke="#FF6B00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="110,44 120,26 130,35" fill="none" stroke="#DAA520" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- R2 vertical zigzag (4.7k: Yellow-Violet-Red-Gold) -->
<polyline points="170,50 161,57.5 179,65" fill="none" stroke="#CCAA00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="179,65 161,72.5 179,80" fill="none" stroke="#7B2FBE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="179,80 161,87.5 179,95" fill="none" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="179,95 161,102.5 170,110" fill="none" stroke="#DAA520" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Labels -->
<text x="90" y="18" text-anchor="middle" font-family="ui-monospace, monospace" font-size="8" fill="#555">R1 10k</text>
<text x="195" y="83" font-family="ui-monospace, monospace" font-size="8" fill="#555">R2</text>
<text x="195" y="93" font-family="ui-monospace, monospace" font-size="7" fill="#777">4.7k</text>
<text x="10" y="30" font-family="ui-monospace, monospace" font-size="7" fill="#777">Vin</text>
<text x="248" y="30" font-family="ui-monospace, monospace" font-size="7" fill="#777">Vout</text>
</svg>
</div>
<p class="pipeline-desc">
Auto-generated circuit diagrams with color-coded resistors
</p>
</div>
<!-- Arrow 3→4 -->
<div class="pipeline-arrow flex md:hidden lg:flex">
<Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
<Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
</div>
<!-- Step 4: Visualize -->
<div class="pipeline-step">
<span class="pipeline-number">04</span>
<h3 class="pipeline-title">Visualize</h3>
<div class="pipeline-preview pipeline-waveform">
<svg viewBox="0 0 300 140" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" preserveAspectRatio="none">
@ -141,6 +207,11 @@ import { Icon } from 'astro-icon/components';
aspect-ratio: 300 / 140;
}
.pipeline-schematic {
padding: 0;
aspect-ratio: 300 / 140;
}
.pipeline-desc {
font-size: 0.875rem;
color: #94a3b8;
@ -148,16 +219,14 @@ import { Icon } from 'astro-icon/components';
}
.pipeline-arrow {
display: flex;
align-items: center;
justify-content: center;
padding-top: 5rem;
padding-top: 0;
}
@media (max-width: 767px) {
@media (min-width: 1024px) {
.pipeline-arrow {
padding-top: 0;
padding-bottom: 0;
padding-top: 5rem;
}
}
</style>