breadkit-render 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. checksums.yaml +7 -0
  2. data/CHANGELOG.md +7 -0
  3. data/LICENSE.txt +21 -0
  4. data/README.md +58 -0
  5. data/SECURITY.md +5 -0
  6. data/docs/images/sensor-demo.png +0 -0
  7. data/docs/images/sensor-demo.svg +45 -0
  8. data/exe/bkrender +5 -0
  9. data/lib/breadkit/render/cli.rb +90 -0
  10. data/lib/breadkit/render/rasterizer.rb +127 -0
  11. data/lib/breadkit/render/svg_renderer.rb +1160 -0
  12. data/lib/breadkit/render/version.rb +7 -0
  13. data/lib/breadkit/render.rb +15 -0
  14. data/package-lock.json +1172 -0
  15. data/package.json +12 -0
  16. data/sig/breadkit/render.rbs +38 -0
  17. data/site/favicon.svg +7 -0
  18. data/site/images/sensor-demo.png +0 -0
  19. data/site/images/sensor-demo.svg +45 -0
  20. data/site/index.html +94 -0
  21. data/site/styles.css +14 -0
  22. metadata +81 -0
data/site/index.html ADDED
@@ -0,0 +1,94 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="theme-color" content="#101719">
7
+ <meta name="description" content="Generate layered SVG, PNG, and JPEG breadboard diagrams from Breadkit circuit files.">
8
+ <title>breadkit-render | Turn wiring into a clear diagram</title>
9
+ <link rel="canonical" href="https://breadkit.github.io/breadkit-render/">
10
+ <link rel="icon" href="./favicon.svg" type="image/svg+xml">
11
+ <link rel="stylesheet" href="./assets/site.css">
12
+ </head>
13
+ <body class="min-h-dvh bg-ink font-sans text-paper antialiased">
14
+ <a class="sr-only rounded-sm bg-copper px-4 py-3 font-semibold text-ink focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:outline-2 focus:outline-offset-4 focus:outline-paper" href="#main">Skip to content</a>
15
+ <header class="border-b border-line">
16
+ <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-5 py-5 sm:px-8 lg:px-10">
17
+ <a class="flex items-center gap-3 rounded-sm text-xl font-semibold focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="./" aria-label="breadkit-render home"><img class="size-8" src="./favicon.svg" alt="" width="32" height="32"><span>breadkit-render</span></a>
18
+ <nav aria-label="Main navigation" class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-muted">
19
+ <a class="rounded-sm hover:text-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit/">Breadkit</a>
20
+ <a class="rounded-sm hover:text-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit/guide/">Guide</a>
21
+ <a class="rounded-sm hover:text-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit/guide/dsl/">Reference</a>
22
+ <a class="rounded-sm hover:text-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit-lint/">Lint</a>
23
+ <a class="rounded-sm hover:text-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://github.com/breadkit/breadkit-render">GitHub</a>
24
+ </nav>
25
+ </div>
26
+ </header>
27
+
28
+ <main id="main">
29
+ <section class="mx-auto grid max-w-7xl items-center gap-12 px-5 py-16 sm:px-8 lg:grid-cols-2 lg:gap-16 lg:px-10 lg:py-20">
30
+ <div class="max-w-xl">
31
+ <p class="mb-5 text-sm font-medium text-copper">The Breadkit diagram generator</p>
32
+ <h1 class="text-balance text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl">Turn wiring into a clear diagram.</h1>
33
+ <p class="mt-6 max-w-lg text-pretty text-lg leading-8 text-muted">Generate a breadboard diagram from components and wires written in Ruby. Switch layers in SVG, or save the result as PNG or JPEG.</p>
34
+ <div class="mt-8 flex flex-wrap gap-x-6 gap-y-4">
35
+ <a class="rounded-sm bg-copper px-5 py-3 font-semibold text-ink hover:bg-paper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="./images/sensor-demo.svg">Open example SVG</a>
36
+ <a class="rounded-sm py-3 font-medium text-paper underline decoration-line underline-offset-4 hover:decoration-copper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://github.com/breadkit/breadkit/blob/main/examples/05_sensor_demo.bk.rb">View circuit source</a>
37
+ </div>
38
+ <div class="mt-10 rounded-lg border border-line bg-board p-5">
39
+ <p class="mb-3 text-sm text-muted">Install and render</p>
40
+ <pre class="overflow-x-auto font-mono text-sm leading-7"><code>gem install breadkit-render
41
+ bkrender circuit.bk.rb -o circuit.svg
42
+ bkrender circuit.bk.rb -o circuit.png --scale 2</code></pre>
43
+ </div>
44
+ </div>
45
+ <figure class="m-0 overflow-hidden rounded-xl border border-line bg-board">
46
+ <div class="flex items-center justify-center p-4 sm:p-6"><img class="h-auto max-h-160 w-auto max-w-full" src="./images/sensor-demo.png" alt="Generated diagram with an RP2040, OLED, SHT31 modules, switches, and IR sensor modules" width="848" height="1031"></div>
47
+ <figcaption class="border-t border-line px-5 py-4 text-pretty text-sm leading-6 text-muted">Sensor demo. The SVG separates power, I2C, switches, and IR wiring into layers.</figcaption>
48
+ </figure>
49
+ </section>
50
+
51
+ <section id="formats" class="border-t border-line bg-board/60">
52
+ <div class="mx-auto max-w-7xl px-5 py-16 sm:px-8 lg:px-10">
53
+ <h2 class="text-balance text-3xl font-semibold">One circuit, several formats</h2>
54
+ <div class="mt-8 grid border-y border-line md:grid-cols-3">
55
+ <div class="py-6 md:pr-8"><h3 class="text-balance text-xl font-semibold">SVG</h3><p class="mt-3 text-pretty leading-7 text-muted">Stays sharp when enlarged. Circuits with <code class="font-mono text-paper">layer:</code> can switch between views.</p></div>
56
+ <div class="border-t border-line py-6 md:border-l md:border-t-0 md:px-8"><h3 class="text-balance text-xl font-semibold">PNG</h3><p class="mt-3 text-pretty leading-7 text-muted">Useful for READMEs and sharing. Set the resolution with <code class="font-mono text-paper">--scale</code>.</p></div>
57
+ <div class="border-t border-line py-6 md:border-l md:border-t-0 md:pl-8"><h3 class="text-balance text-xl font-semibold">JPEG</h3><p class="mt-3 text-pretty leading-7 text-muted">Save a raster image with a chosen background color and quality.</p></div>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <section id="options" class="mx-auto grid max-w-7xl gap-10 px-5 py-16 sm:px-8 lg:grid-cols-2 lg:px-10">
63
+ <div>
64
+ <h2 class="text-balance text-3xl font-semibold">Choose how to show the circuit</h2>
65
+ <p class="mt-4 max-w-xl text-pretty leading-7 text-muted">Set orientation, theme, power rail pattern, and net labels from the CLI. Component and pin positions come from the circuit file.</p>
66
+ <div class="mt-6 overflow-x-auto rounded-lg border border-line bg-board p-5">
67
+ <pre class="font-mono text-sm leading-7"><code>bkrender circuit.bk.rb -o circuit.svg \
68
+ --orientation portrait \
69
+ --theme dark \
70
+ --rail-pattern '+--+'</code></pre>
71
+ </div>
72
+ <p class="mt-4 text-pretty text-sm leading-6 text-muted">Rail patterns: <code class="font-mono text-paper">+--+</code>, <code class="font-mono text-paper">+-+-</code>, <code class="font-mono text-paper">-+-+</code>, or <code class="font-mono text-paper">-++-</code>.</p>
73
+ </div>
74
+ <div class="rounded-lg border border-line bg-board p-6">
75
+ <h3 class="text-balance text-xl font-semibold">Review findings on the diagram</h3>
76
+ <p class="mt-4 text-pretty leading-7 text-muted">Overlay bklint JSON output to see flagged holes and wires on the diagram.</p>
77
+ <pre class="mt-5 overflow-x-auto font-mono text-sm leading-7"><code>bklint circuit.bk.rb --format json --out lint.json
78
+ bkrender circuit.bk.rb --annotations lint.json \
79
+ -o review.svg</code></pre>
80
+ <a class="mt-6 inline-block rounded-sm text-paper underline decoration-copper underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit-lint/">Explore breadkit-lint</a>
81
+ </div>
82
+ </section>
83
+
84
+ <section class="border-t border-line">
85
+ <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-5 py-10 sm:px-8 lg:px-10">
86
+ <p class="max-w-2xl text-pretty text-sm leading-6 text-muted">The 5 V emitter layer is an alternative connection. Remove the emitter's 3.3 V wire before using it. Keep the receiver at 3.3 V.</p>
87
+ <a class="rounded-sm text-paper underline decoration-line underline-offset-4 hover:decoration-copper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://breadkit.github.io/breadkit/guide/">Learn to write a circuit</a>
88
+ </div>
89
+ </section>
90
+ </main>
91
+
92
+ <footer class="border-t border-line"><div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-5 py-7 text-sm text-muted sm:px-8 lg:px-10"><p>breadkit-render is published independently from breadkit.</p><a class="rounded-sm text-paper underline decoration-line underline-offset-4 hover:decoration-copper focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-copper" href="https://github.com/breadkit/breadkit-render">GitHub repository</a></div></footer>
93
+ </body>
94
+ </html>
data/site/styles.css ADDED
@@ -0,0 +1,14 @@
1
+ @import "tailwindcss";
2
+
3
+ @source "./**/*.html";
4
+
5
+ @theme {
6
+ --color-ink: #101719;
7
+ --color-board: #1b2423;
8
+ --color-line: #3d4b47;
9
+ --color-paper: #e8eeeb;
10
+ --color-muted: #a1b0aa;
11
+ --color-copper: #d99755;
12
+ --font-sans: "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;
13
+ --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
14
+ }
metadata ADDED
@@ -0,0 +1,81 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: breadkit-render
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Yudai Takada
8
+ bindir: exe
9
+ cert_chain: []
10
+ date: 1980-01-02 00:00:00.000000000 Z
11
+ dependencies:
12
+ - !ruby/object:Gem::Dependency
13
+ name: breadkit
14
+ requirement: !ruby/object:Gem::Requirement
15
+ requirements:
16
+ - - "~>"
17
+ - !ruby/object:Gem::Version
18
+ version: 0.1.0
19
+ type: :runtime
20
+ prerelease: false
21
+ version_requirements: !ruby/object:Gem::Requirement
22
+ requirements:
23
+ - - "~>"
24
+ - !ruby/object:Gem::Version
25
+ version: 0.1.0
26
+ description: bkrender converts breadboard wiring described with the Breadkit DSL into
27
+ deterministic diagrams.
28
+ email:
29
+ - t.yudai92@gmail.com
30
+ executables:
31
+ - bkrender
32
+ extensions: []
33
+ extra_rdoc_files: []
34
+ files:
35
+ - CHANGELOG.md
36
+ - LICENSE.txt
37
+ - README.md
38
+ - SECURITY.md
39
+ - docs/images/sensor-demo.png
40
+ - docs/images/sensor-demo.svg
41
+ - exe/bkrender
42
+ - lib/breadkit/render.rb
43
+ - lib/breadkit/render/cli.rb
44
+ - lib/breadkit/render/rasterizer.rb
45
+ - lib/breadkit/render/svg_renderer.rb
46
+ - lib/breadkit/render/version.rb
47
+ - package-lock.json
48
+ - package.json
49
+ - sig/breadkit/render.rbs
50
+ - site/favicon.svg
51
+ - site/images/sensor-demo.png
52
+ - site/images/sensor-demo.svg
53
+ - site/index.html
54
+ - site/styles.css
55
+ homepage: https://github.com/breadkit/breadkit-render
56
+ licenses:
57
+ - MIT
58
+ metadata:
59
+ homepage_uri: https://github.com/breadkit/breadkit-render
60
+ source_code_uri: https://github.com/breadkit/breadkit-render/tree/main
61
+ bug_tracker_uri: https://github.com/breadkit/breadkit-render/issues
62
+ documentation_uri: https://github.com/breadkit/breadkit-render/tree/main
63
+ rubygems_mfa_required: 'true'
64
+ rdoc_options: []
65
+ require_paths:
66
+ - lib
67
+ required_ruby_version: !ruby/object:Gem::Requirement
68
+ requirements:
69
+ - - ">="
70
+ - !ruby/object:Gem::Version
71
+ version: '3.3'
72
+ required_rubygems_version: !ruby/object:Gem::Requirement
73
+ requirements:
74
+ - - ">="
75
+ - !ruby/object:Gem::Version
76
+ version: '0'
77
+ requirements: []
78
+ rubygems_version: 4.0.16
79
+ specification_version: 4
80
+ summary: Render Breadkit circuits as SVG, PNG, and JPEG diagrams.
81
+ test_files: []