feat(components): swap BMP280 + ATtiny85 to fritzing art
The hand-drawn SVGs in Bmp280Element.ts and Attiny85Element.ts were
functional but obviously amateur next to a real Fritzing-drawn part.
Both components now mount the equivalent Fritzing breadboard SVG as a
public static asset (`<image href>` in the shadow DOM SVG), with pin
coordinates remapped to the new artwork and pin-name labels overlaid
on top so the user can still read each connector at a glance.
frontend/public/component-svgs/bmp280.svg (new)
Verbatim copy of third-party/fritzing-parts/svg/core/breadboard/
bmp180_breadboard.svg. The Adafruit BMP180 breakout is the
mechanically identical Bosch predecessor — same I2C interface,
same 4-pin pinout. Pin labels lifted from the matching .fzp.
frontend/public/component-svgs/attiny85.svg (new)
Verbatim copy of the Fritzing ATtiny85 DIP-8 breadboard art.
Bmp280Element.ts
Width 80×100 px (Fritzing aspect 28.35:35.43 ≈ 0.8:1, exact uniform
scale of 2.822 px/mm). Pin coords for SDA / SCL / GND / VCC matched
to the connector centres in the source SVG. Pin labels overlaid on
top. Existing wired example (esp32-bmp280) re-routes automatically
because the wire system reads coords by pin name from pinInfo.
Attiny85Element.ts
Width 160×132 px (Fritzing aspect 28.801:23.768 ≈ 1.21:1, exact
uniform scale of 5.555 px/mm). The Fritzing layout puts pins on the
TOP and BOTTOM edges (4 each), not LEFT and RIGHT like the older
hand-drawn version. Pin coords land on clean numbers
(x ∈ {20, 60, 100, 140}, y ∈ {6, 126}). Built-in LED on PB1 stays
as an overlaid circle outside the chip body.
Wires in the existing attiny85-* examples re-route automatically by
pin name; external components positioned to the right of the chip
may need a manual nudge for clean routing — but they work.
frontend/src/components/simulator/BoardOnCanvas.tsx
attiny85: { w: 160, h: 100 } → { w: 160, h: 132 } to match the new
aspect ratio. Same width as before so the chip occupies the same
horizontal slot in existing example layouts.
scripts/component-overrides.json
BMP280 thumbnail updated to mirror the Fritzing colour scheme
(dark blue PCB, BMP180 silkscreen, four gold connector circles)
so picker and canvas feel consistent.
frontend/public/components-metadata.json
Regenerated.
docs/THIRD_PARTY.md
New "Fritzing parts library" section. Both new assets are listed
with their upstream paths plus the CC-BY-SA licence and link to
the parts repo. Future Fritzing copies must be added there too.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Montero Crespo
parent
be0cd514aa
commit
b42f815b49
|
|
@ -357,6 +357,25 @@ npx tsx ../scripts/generate-component-metadata.ts
|
|||
|
||||
Verify that the component has simulation logic registered in `PartSimulationRegistry` (files `BasicParts.ts` or `ComplexParts.ts`). Only the 16 registered components have interactive behavior.
|
||||
|
||||
## Fritzing parts library (CC-BY-SA)
|
||||
|
||||
Velxio ships a few Fritzing-drawn breadboard SVGs as static assets for
|
||||
parts that wokwi-elements does not include. The original SVGs live
|
||||
under `third-party/fritzing-parts/` (vendored upstream copy from
|
||||
https://github.com/fritzing/fritzing-parts) and are licensed
|
||||
**Creative Commons Attribution-ShareAlike** (CC-BY-SA), which requires
|
||||
attribution and that derivatives stay under the same licence.
|
||||
|
||||
| Velxio asset | Fritzing source | Notes |
|
||||
|---|---|---|
|
||||
| `frontend/public/component-svgs/bmp280.svg` | `svg/core/breadboard/bmp180_breadboard.svg` | Adafruit BMP180 breakout art reused for the BMP280 (visually identical Bosch predecessor). |
|
||||
| `frontend/public/component-svgs/attiny85.svg` | `svg/core/breadboard/ATtiny85_breadboard.svg` | DIP-8 ATtiny85, used by `Attiny85Element.ts`. |
|
||||
|
||||
Each Web Component that mounts one of these assets carries an inline
|
||||
attribution comment pointing back to its source. Any new asset copied
|
||||
out of `third-party/fritzing-parts/` MUST be added to this table and
|
||||
to the corresponding component's header comment.
|
||||
|
||||
## References
|
||||
|
||||
- [Wokwi Elements Documentation](https://elements.wokwi.com/)
|
||||
|
|
@ -364,3 +383,5 @@ Verify that the component has simulation logic registered in `PartSimulationRegi
|
|||
- [Wokwi Simulator](https://wokwi.com)
|
||||
- [Lit Documentation](https://lit.dev/) — Framework used by wokwi-elements
|
||||
- [Web Components Guide](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
|
||||
- [Fritzing parts repository](https://github.com/fritzing/fritzing-parts)
|
||||
- [CC-BY-SA 4.0 licence text](https://creativecommons.org/licenses/by-sa/4.0/)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="28.801px" height="23.768px" viewBox="0 0 28.801 23.768" enable-background="new 0 0 28.801 23.768" xml:space="preserve">
|
||||
<g>
|
||||
<rect id="connector0pin" x="2.521" y="20.643" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector1pin" x="9.721" y="20.643" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector2pin" x="16.92" y="20.643" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector3pin" x="24.121" y="20.643" fill="#8C8C8C" width="2.158" height="3.125"/>
|
||||
<rect id="connector4pin" x="24.121" y="0.008" fill="#8C8C8C" width="2.158" height="3.125"/>
|
||||
<rect id="connector5pin" x="16.92" y="0.008" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector6pin" x="9.721" y="0.008" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector7pin" x="2.521" y="0.008" fill="#8C8C8C" width="2.16" height="3.125"/>
|
||||
<rect id="connector0terminal" x="2.521" y="21.607" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<rect id="connector1terminal" x="9.721" y="21.607" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<rect id="connector2terminal" x="16.92" y="21.607" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<rect id="connector3terminal" x="24.121" y="21.607" fill="#8C8C8C" width="2.158" height="2.16"/>
|
||||
<rect id="connector4terminal" x="24.121" y="0.008" fill="#8C8C8C" width="2.158" height="2.16"/>
|
||||
<rect id="connector5terminal" x="16.92" y="0.008" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<rect id="connector6terminal" x="9.721" y="0.008" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<rect id="connector7terminal" x="2.521" y="0.008" fill="#8C8C8C" width="2.16" height="2.16"/>
|
||||
<g id="breadboard">
|
||||
<rect id="rect20" x="2.521" y="18.958" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect22" x="9.721" y="18.958" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect24" x="16.92" y="18.958" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect26" x="24.121" y="18.958" fill="#8C8C8C" width="2.158" height="4.81"/>
|
||||
<rect id="rect28" x="2.521" y="0.008" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect30" x="9.721" y="0.008" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect32" x="16.92" y="0.008" fill="#8C8C8C" width="2.16" height="4.81"/>
|
||||
<rect id="rect34" x="24.121" y="0.008" fill="#8C8C8C" width="2.158" height="4.81"/>
|
||||
<polygon id="polygon36" fill="#3D3D3D" points="0,2.168 28.801,2.168 28.26,8.287 0,8.287 "/>
|
||||
<polygon id="polygon38" points="0,15.487 28.26,15.487 28.801,21.607 0,21.607 "/>
|
||||
<polygon id="polygon40" fill="#8C8C8C" points="6.121,3.133 6.121,2.354 4.681,1.692 2.521,1.692 2.521,3.133 "/>
|
||||
<polygon id="polygon42" fill="#8C8C8C" points="13.32,3.133 13.32,2.354 11.88,1.692 9.721,1.692 8.28,2.354 8.28,3.133 "/>
|
||||
<polygon id="polygon44" fill="#8C8C8C" points="26.279,3.133 26.279,1.692 24.121,1.692 22.682,2.354 22.682,3.133 "/>
|
||||
<polygon id="polygon46" fill="#8C8C8C" points="20.521,3.133 20.521,2.354 19.08,1.692 16.92,1.692 15.48,2.354 15.48,3.133 "/>
|
||||
<polygon id="polygon48" fill="#8C8C8C" points="2.521,20.643 2.521,22.083 4.681,22.083 6.121,21.42 6.121,20.643 "/>
|
||||
<polygon id="polygon50" fill="#8C8C8C" points="22.682,20.643 22.682,21.42 24.121,22.083 26.279,22.083 26.279,20.643 "/>
|
||||
<polygon id="polygon52" fill="#8C8C8C" points="8.28,20.643 8.28,21.42 9.721,22.083 11.88,22.083 13.32,21.42 13.32,20.643 "/>
|
||||
<polygon id="polygon54" fill="#8C8C8C" points="15.48,20.643 15.48,21.42 16.92,22.083 19.08,22.083 20.521,21.42 20.521,20.643
|
||||
"/>
|
||||
<polygon id="polygon56" fill="#141414" points="28.801,2.168 28.26,3.938 27.255,3.938 27.255,19.829 28.26,19.836 28.801,21.607
|
||||
"/>
|
||||
<polygon id="polygon58" fill="#1F1F1F" points="0,2.168 0.541,3.938 0.541,8.287 3.601,8.287 3.601,15.487 0.541,15.487
|
||||
0.541,19.836 0,21.607 "/>
|
||||
<polygon id="polygon60" fill="#1C1C1C" points="3.601,8.287 0.541,8.259 0.404,9.785 0.404,11.88 3.601,11.88 "/>
|
||||
<polygon id="polygon62" fill="#383838" points="0.541,15.523 3.601,15.523 3.601,11.88 0.404,11.88 0.404,13.99 "/>
|
||||
<path id="path64" fill="#303030" d="M0.541,3.938v4.313c1.713,0.321,3.017,1.819,3.017,3.628c0,1.808-1.296,3.313-3.017,3.637
|
||||
v4.313H28.26V3.938H0.541z"/>
|
||||
<path id="path66" fill="#262626" d="M0.404,9.785v4.195C1.462,13.86,2.29,12.975,2.29,11.88C2.29,10.786,1.469,9.906,0.404,9.785z
|
||||
"/>
|
||||
<circle id="circle68" fill="#212121" cx="4.681" cy="16.906" r="1.483"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="breadboard">
|
||||
|
||||
<sodipodi:namedview id="namedview5969" pagecolor="#ffffff" showgrid="false" objecttolerance="10" bordercolor="#666666" borderopacity="1" guidetolerance="10" gridtolerance="10" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
|
||||
</sodipodi:namedview>
|
||||
<g id="icon" transform="matrix(0.8,0,0,0.8,0,2.8)">
|
||||
<rect id="rect2544" x="3.159" y="22.269" fill="#8C8C8C" width="2.699" height="3.972"/>
|
||||
<rect id="rect2546" x="12.151" y="22.269" fill="#8C8C8C" width="2.699" height="3.972"/>
|
||||
<rect id="rect2548" x="21.151" y="22.269" fill="#8C8C8C" width="2.699" height="3.972"/>
|
||||
<rect id="rect2550" x="30.15" y="22.269" fill="#8C8C8C" width="2.699" height="3.972"/>
|
||||
<polygon id="polygon2564" fill="#8C8C8C" points="7.649,0.404 7.649,-0.568 5.851,-1.394 3.152,-1.394 3.152,0.404 "/>
|
||||
<polygon id="polygon2572" fill="#8C8C8C" points="3.159,22.269 3.159,24.067 5.858,24.067 7.656,23.241 7.656,22.269 "/>
|
||||
<polygon id="polygon2574" fill="#8C8C8C" points="28.352,22.269 28.352,23.241 30.15,24.067 32.849,24.067 32.849,22.269 "/>
|
||||
<polygon id="polygon2576" fill="#8C8C8C" points="10.353,22.269 10.353,23.241 12.151,24.067 14.85,24.067 16.649,23.241
|
||||
16.649,22.269 "/>
|
||||
<polygon id="polygon2578" fill="#8C8C8C" points="19.353,22.269 19.353,23.241 21.151,24.067 23.85,24.067 25.648,23.241
|
||||
25.648,22.269 "/>
|
||||
<polygon id="polygon2572" fill="#8C8C8C" points="32.849,0.403 32.849,-1.395 30.15,-1.395 28.352,-0.568 28.352,0.403 "/>
|
||||
<polygon id="polygon2574" fill="#8C8C8C" points="7.649,0.404 7.649,-0.568 5.851,-1.394 3.152,-1.394 3.152,0.404 "/>
|
||||
<polygon id="polygon2576" fill="#8C8C8C" points="25.648,0.403 25.648,-0.568 23.849,-1.395 21.151,-1.395 19.352,-0.568
|
||||
19.352,0.403 "/>
|
||||
<polygon id="polygon2578" fill="#8C8C8C" points="16.649,0.403 16.649,-0.568 14.85,-1.395 12.151,-1.395 10.353,-0.568
|
||||
10.353,0.403 "/>
|
||||
<g id="g2602">
|
||||
<g id="text6122">
|
||||
<text id="tspan6124" transform="matrix(1.25 0 0 1.25 3.1592 7.5861)" fill="#F2F2F2" font-family="'OCRA'" font-size="4.2494">attiny85</text>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="rect2552" x="3.152" y="-3.498" fill="#8C8C8C" width="2.699" height="3.926"/>
|
||||
<rect id="rect2544" x="30.15" y="-3.5" fill="#8C8C8C" width="2.699" height="3.926"/>
|
||||
<rect id="rect2548" x="12.151" y="-3.5" fill="#8C8C8C" width="2.699" height="3.926"/>
|
||||
<rect id="rect2546" x="21.151" y="-3.5" fill="#8C8C8C" width="2.698" height="3.926"/>
|
||||
</g>
|
||||
<rect id="connector3pin" x="24.096" y="20.614" fill="none" width="2.168" height="3.179"/>
|
||||
<rect id="connector4pin" x="24.105" y="0.02" fill="none" width="2.156" height="3.178"/>
|
||||
<rect id="connector5pin" x="16.922" y="0" fill="none" width="2.158" height="3.178"/>
|
||||
<rect id="connector6pin" x="9.721" y="0" fill="none" width="2.159" height="3.178"/>
|
||||
<rect id="connector7pin" x="2.518" y="0" fill="none" width="2.159" height="3.178"/>
|
||||
<rect id="connector0pin" x="2.527" y="20.614" fill="none" width="2.159" height="3.179"/>
|
||||
<rect id="connector1pin" x="9.721" y="20.614" fill="none" width="2.159" height="3.179"/>
|
||||
<rect id="connector2pin" x="16.921" y="20.614" fill="none" width="2.159" height="3.179"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<!DOCTYPE svg>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="0.39375in" x="0px" version="1.1" y="0px" gorn="0" height="0.492083in" viewBox="0 0 28.35 35.43" xmlns:xml="http://www.w3.org/XML/1998/namespace" id="Layer_2" enable-background="new 0 0 28.35 35.43" xml:space="preserve">
|
||||
<g id="breadboard">
|
||||
<desc >
|
||||
<referenceFile >BMP180_BREADBOARD_v3.svg</referenceFile>
|
||||
</desc>
|
||||
<path fill="#172952" d="M28.35,35.43H0V0h28.35V35.43z M2.178,4.822c0,0.66,0.536,1.196,1.197,1.196s1.197-0.536,1.197-1.196c0-0.662-0.536-1.197-1.197-1.197S2.178,4.16,2.178,4.822z M9.377,4.822c0,0.66,0.536,1.196,1.197,1.196s1.196-0.536,1.196-1.196c0-0.662-0.535-1.197-1.196-1.197S9.377,4.16,9.377,4.822z M16.578,4.822c0,0.66,0.536,1.196,1.197,1.196s1.196-0.536,1.196-1.196c0-0.662-0.535-1.197-1.196-1.197S16.578,4.16,16.578,4.822z M23.778,4.822c0,0.66,0.535,1.196,1.196,1.196s1.197-0.536,1.197-1.196c0-0.662-0.536-1.197-1.197-1.197S23.778,4.16,23.778,4.822z M21.026,23.464c-2.298,0-4.161,1.863-4.161,4.161s1.863,4.161,4.161,4.161s4.161-1.863,4.161-4.161S23.324,23.464,21.026,23.464z"/>
|
||||
<g >
|
||||
<rect width="3.813" x="5.37" y="17.715" fill="#95825D" height="2.125"/>
|
||||
<rect width="0.859" x="8.324" y="17.714" fill="#999999" height="2.125"/>
|
||||
<rect width="0.859" x="5.37" y="17.714" fill="#999999" height="2.126"/>
|
||||
</g>
|
||||
<g >
|
||||
<rect width="2.125" x="9.313" y="10.688" fill="#95825D" height="3.813"/>
|
||||
<rect width="2.126" x="9.312" y="10.688" fill="#999999" height="0.858"/>
|
||||
<rect width="2.126" x="9.312" y="13.642" fill="#999999" height="0.858"/>
|
||||
</g>
|
||||
<g >
|
||||
<rect width="2.125" x="23.641" y="10.547" fill="#95825D" height="3.813"/>
|
||||
<rect width="2.125" x="23.641" y="10.547" fill="#999999" height="0.858"/>
|
||||
<rect width="2.126" x="23.64" y="13.501" fill="#999999" height="0.858"/>
|
||||
</g>
|
||||
<g >
|
||||
<rect width="3.6" x="15.713" y="9" fill="#303030" height="6.501"/>
|
||||
<polyline fill="#1F1F1F" points="15.713,9 15.563,8.625 19.584,8.625 19.313,9 " />
|
||||
<polygon fill="#1F1F1F" points="15.563,15.875 19.584,15.875 19.313,15.5 15.713,15.5 " />
|
||||
<polygon fill="#3D3D3D" points="19.584,15.875 19.313,15.5 19.313,9 19.584,8.625 19.584,15.781 " />
|
||||
<polygon points="15.563,15.875 15.713,15.5 15.713,8.984 15.563,8.625 15.563,15.781 " />
|
||||
<rect width="1.442" x="19.584" y="11.688" fill="#999999" height="1.25"/>
|
||||
<rect width="1.25" x="14.313" y="9.297" fill="#999999" height="1.125"/>
|
||||
<rect width="1.25" x="14.313" y="14.248" fill="#999999" height="1.088"/>
|
||||
</g>
|
||||
<g >
|
||||
<rect width="2.266" x="5.469" y="10.492" fill="#020202" height="3.912"/>
|
||||
<rect width="2.266" x="5.469" y="13.391" fill="#999999" height="1.013"/>
|
||||
<rect width="2.266" x="5.469" y="10.492" fill="#999999" height="0.625"/>
|
||||
</g>
|
||||
<g >
|
||||
<rect width="2.266" x="1.558" y="10.492" fill="#020202" height="3.912"/>
|
||||
<rect width="2.266" x="1.558" y="13.391" fill="#999999" height="1.013"/>
|
||||
<rect width="2.266" x="1.558" y="10.492" fill="#999999" height="0.625"/>
|
||||
</g>
|
||||
<path fill="#999999" d="M21.026,22c-3.142,0-5.688,2.546-5.688,5.688s2.546,5.688,5.688,5.688s5.688-2.546,5.688-5.688S24.168,22,21.026,22z M21.026,31.786c-2.298,0-4.161-1.863-4.161-4.161s1.863-4.161,4.161-4.161s4.161,1.863,4.161,4.161S23.324,31.786,21.026,31.786z"/>
|
||||
<g gorn="0.9" id="BMP180">
|
||||
<rect width="9.792" x="2.563" y="21.167" fill="#E0E0E0" height="10.619"/>
|
||||
<g >
|
||||
<path fill="#999999" d="M11.836,29.584c0,0.779-0.638,1.417-1.417,1.417h-5.94c-0.78,0-1.417-0.638-1.417-1.417v-6.19c0-0.779,0.638-1.417,1.417-1.417h5.94c0.78,0,1.417,0.638,1.417,1.417V29.584z"/>
|
||||
</g>
|
||||
<circle fill="#414141" cx="4.604" cy="24.708" r="0.625"/>
|
||||
</g>
|
||||
<g gorn="0.10" id="silkscreen">
|
||||
<path fill="#FFFFFF" d="M11.985,17.527l0.589,0l0.588,0l0.04,0.007c0.171,0.029,0.31,0.104,0.427,0.228c0.042,0.044,0.066,0.077,0.099,0.128c0.067,0.108,0.107,0.228,0.12,0.363c0.005,0.05,0.005,0.249,0,0.298c-0.019,0.191-0.093,0.358-0.217,0.489l-0.035,0.036l0.035,0.037c0.04,0.042,0.065,0.075,0.097,0.126c0.062,0.1,0.1,0.208,0.117,0.334c0.005,0.037,0.005,0.046,0.005,0.18c0,0.133,0,0.142-0.005,0.18c-0.021,0.15-0.073,0.28-0.16,0.396c-0.025,0.034-0.084,0.097-0.117,0.124c-0.1,0.084-0.217,0.141-0.34,0.164c-0.068,0.013-0.052,0.013-0.668,0.013h-0.575v-1.552V17.527z M13.141,17.93l-0.389,0l-0.389-0.001v0.475v0.474l0.389-0.001l0.389,0l0.026-0.006c0.147-0.033,0.258-0.144,0.294-0.295c0.011-0.044,0.012-0.074,0.011-0.19c0-0.095-0.001-0.106-0.006-0.131c-0.024-0.125-0.097-0.227-0.202-0.282c-0.033-0.017-0.061-0.027-0.098-0.036L13.141,17.93z M13.141,19.279h-0.389l-0.389-0.001v0.476v0.476l0.389-0.001l0.389-0.001l0.026-0.006c0.119-0.026,0.213-0.103,0.266-0.214c0.017-0.035,0.026-0.065,0.034-0.105c0.005-0.027,0.005-0.033,0.005-0.148s0-0.121-0.005-0.148c-0.024-0.127-0.096-0.228-0.202-0.284c-0.033-0.017-0.061-0.027-0.098-0.036L13.141,19.279z"/>
|
||||
<path fill="#FFFFFF" d="M14.377,17.527h0.236h0.236l0.025,0.038l0.221,0.334l0.205,0.31l0.009,0.013l0.229-0.348l0.229-0.347h0.238h0.237l-0.001,1.469c0,1.406-0.001,1.47-0.005,1.484c-0.017,0.059-0.052,0.104-0.101,0.129c-0.048,0.025-0.096,0.028-0.146,0.009c-0.025-0.01-0.043-0.021-0.064-0.043c-0.029-0.028-0.044-0.055-0.057-0.099c-0.003-0.013-0.004-0.1-0.005-1.203l-0.001-1.189l-0.183,0.276l-0.183,0.276v0.061c0,0.079-0.006,0.108-0.026,0.146c-0.012,0.021-0.041,0.053-0.062,0.067c-0.035,0.024-0.083,0.036-0.123,0.031c-0.024-0.003-0.056-0.015-0.074-0.026c-0.031-0.02-0.067-0.064-0.079-0.098c-0.012-0.034-0.013-0.04-0.014-0.112l-0.002-0.07l-0.181-0.274l-0.181-0.274l-0.001,1.189c-0.001,1.136-0.001,1.19-0.005,1.205c-0.017,0.059-0.052,0.104-0.101,0.129c-0.048,0.025-0.096,0.028-0.147,0.009c-0.027-0.01-0.043-0.021-0.068-0.048c-0.024-0.026-0.035-0.043-0.044-0.07c-0.014-0.039-0.013,0.068-0.013-1.514V17.527z"/>
|
||||
<path fill="#FFFFFF" d="M16.77,17.527l0.679,0c0.756,0,0.688-0.001,0.759,0.018c0.229,0.062,0.398,0.268,0.426,0.519c0.006,0.049,0.006,0.798,0,0.847c-0.03,0.279-0.233,0.497-0.496,0.533c-0.035,0.004-0.053,0.005-0.512,0.005h-0.477l-0.001,0.509c0,0.572,0.002,0.516-0.02,0.562c-0.019,0.041-0.047,0.07-0.085,0.091c-0.049,0.025-0.097,0.028-0.147,0.009c-0.027-0.01-0.044-0.021-0.068-0.048s-0.035-0.043-0.045-0.07c-0.013-0.039-0.013,0.068-0.013-1.514V17.527z M17.625,17.929l-0.477,0v0.559v0.559l0.477-0.001c0.535,0,0.484,0.002,0.524-0.02c0.039-0.02,0.07-0.053,0.09-0.094c0.02-0.043,0.018-0.005,0.018-0.444v-0.391l-0.006-0.02c-0.019-0.068-0.068-0.122-0.135-0.143C18.103,17.93,18.076,17.93,17.625,17.929z"/>
|
||||
<path fill="#FFFFFF" d="M19.809,17.527h0.476v1.351v1.351h0.183h0.184v-0.414c0-0.447,0-0.431,0.013-0.468c0.003-0.01,0.01-0.024,0.014-0.032c0.011-0.019,0.05-0.061,0.067-0.071c0.019-0.012,0.05-0.022,0.074-0.026c0.04-0.005,0.088,0.007,0.123,0.031c0.021,0.015,0.05,0.046,0.062,0.066c0.011,0.02,0.021,0.049,0.023,0.072c0.002,0.015,0.003,0.154,0.002,0.549c-0.001,0.597,0.001,0.537-0.02,0.583c-0.019,0.041-0.047,0.07-0.086,0.091c-0.012,0.006-0.028,0.013-0.036,0.016c-0.016,0.004-0.051,0.005-0.791,0.005h-0.774l-0.019-0.006c-0.085-0.026-0.141-0.103-0.141-0.194c0-0.091,0.055-0.166,0.139-0.193l0.018-0.006l0.294-0.001l0.293-0.001v-1.149v-1.15l-0.293,0l-0.294-0.001l-0.018-0.005c-0.056-0.019-0.1-0.059-0.122-0.111c-0.021-0.052-0.021-0.114,0-0.166c0.026-0.06,0.08-0.104,0.143-0.115C19.328,17.528,19.547,17.527,19.809,17.527z"/>
|
||||
<path fill="#FFFFFF" d="M22.494,17.528c0.448,0,0.405-0.001,0.448,0.021c0.038,0.02,0.066,0.05,0.085,0.091c0.021,0.046,0.02-0.021,0.02,0.646l0.001,0.592h0.01c0.016,0,0.057,0.007,0.078,0.013c0.138,0.037,0.244,0.154,0.276,0.299c0.01,0.048,0.01,0.048,0.009,0.582l-0.001,0.511l-0.005,0.024c-0.015,0.069-0.041,0.128-0.079,0.178c-0.063,0.082-0.151,0.132-0.252,0.145c-0.017,0.002-0.188,0.003-0.611,0.002l-0.588-0.001l-0.023-0.005c-0.092-0.022-0.164-0.068-0.221-0.141c-0.034-0.045-0.06-0.1-0.073-0.156c-0.013-0.05-0.013-0.036-0.013-0.573c0-0.538,0-0.523,0.013-0.574c0.04-0.167,0.176-0.289,0.338-0.302l0.021-0.001v-0.582c0-0.629-0.001-0.598,0.013-0.636c0.009-0.027,0.02-0.044,0.044-0.07c0.031-0.033,0.058-0.048,0.098-0.057C22.094,17.528,22.173,17.527,22.494,17.528z M23.043,19.278h-0.555h-0.555v0.476v0.475h0.555h0.555v-0.475V19.278z M22.669,17.929h-0.182h-0.183v0.474v0.474h0.183h0.182v-0.474V17.929z"/>
|
||||
<path fill="#FFFFFF" d="M24.879,17.527c0.625,0,0.602-0.001,0.649,0.012c0.153,0.042,0.265,0.178,0.283,0.347c0.002,0.018,0.003,0.348,0.002,1.21v1.186l-0.006,0.024c-0.015,0.07-0.041,0.129-0.079,0.178c-0.063,0.082-0.151,0.132-0.252,0.145c-0.017,0.002-0.188,0.003-0.611,0.002l-0.588-0.001l-0.023-0.005c-0.092-0.022-0.164-0.068-0.221-0.141c-0.034-0.045-0.06-0.1-0.073-0.156c-0.013-0.052-0.013,0.02-0.013-1.248s0-1.197,0.013-1.249c0.038-0.161,0.166-0.28,0.321-0.301C24.29,17.528,24.559,17.527,24.879,17.527z M25.436,17.929h-0.555h-0.555v1.15v1.149h0.555h0.555v-1.149V17.929z"/>
|
||||
</g>
|
||||
<g gorn="0.11" id="Connector_group">
|
||||
<path fill="#9A916C" gorn="0.11.0" id="connector10pin" d="M3.375,2.428c-1.322,0-2.393,1.071-2.393,2.393c0,1.322,1.071,2.394,2.393,2.394s2.393-1.071,2.393-2.394C5.768,3.5,4.697,2.428,3.375,2.428z M3.375,6.019c-0.661,0-1.197-0.536-1.197-1.197s0.536-1.197,1.197-1.197s1.197,0.536,1.197,1.197S4.036,6.019,3.375,6.019z"/>
|
||||
<rect width="0.009571999999999999" x="5.763214" y="4.816713" fill="none" gorn="0.11.1" height="0.009573999999999999" stroke="none" id="connector10terminal" stroke-width="0"/>
|
||||
<path fill="#9A916C" gorn="0.11.2" id="connector9pin" d="M10.574,2.428c-1.322,0-2.393,1.071-2.393,2.393c0,1.322,1.071,2.394,2.393,2.394s2.393-1.071,2.393-2.394C12.967,3.5,11.896,2.428,10.574,2.428z M10.574,6.019c-0.661,0-1.197-0.536-1.197-1.197s0.536-1.197,1.197-1.197s1.196,0.536,1.196,1.197S11.235,6.019,10.574,6.019z"/>
|
||||
<path fill="#9A916C" gorn="0.11.3" id="connector6pin" d="M17.773,2.428c-1.321,0-2.393,1.071-2.393,2.393c0,1.322,1.071,2.394,2.393,2.394c1.322,0,2.394-1.071,2.394-2.394C20.167,3.5,19.096,2.428,17.773,2.428z M17.775,6.019c-0.661,0-1.197-0.536-1.197-1.197s0.536-1.197,1.197-1.197s1.196,0.536,1.196,1.197S18.437,6.019,17.775,6.019z"/>
|
||||
<path fill="#9A916C" gorn="0.11.4" id="connector5pin" d="M24.975,2.428c-1.321,0-2.393,1.071-2.393,2.393c0,1.322,1.071,2.394,2.393,2.394c1.322,0,2.394-1.071,2.394-2.394C27.368,3.5,26.297,2.428,24.975,2.428z M24.975,6.019c-0.661,0-1.196-0.536-1.196-1.197s0.535-1.197,1.196-1.197s1.197,0.536,1.197,1.197S25.636,6.019,24.975,6.019z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -3980,7 +3980,7 @@
|
|||
"category": "passive"
|
||||
},
|
||||
{
|
||||
"thumbnail": "<svg width=\"64\" height=\"64\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"64\" height=\"64\" rx=\"4\" fill=\"#1a2332\"/><rect x=\"10\" y=\"8\" width=\"44\" height=\"48\" rx=\"3\" fill=\"#2d6a2d\" stroke=\"#1a4a1a\"/><rect x=\"22\" y=\"22\" width=\"20\" height=\"16\" rx=\"2\" fill=\"#1a1a1a\" stroke=\"#444\"/><text x=\"32\" y=\"33\" text-anchor=\"middle\" font-size=\"5\" fill=\"#aaa\" font-family=\"monospace\">BMP280</text><rect x=\"6\" y=\"14\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"22\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"30\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"38\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><text x=\"40\" y=\"50\" font-size=\"4\" fill=\"#aaffaa\" font-family=\"monospace\">GY-BMP280</text></svg>",
|
||||
"thumbnail": "<svg width=\"64\" height=\"64\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"64\" height=\"64\" rx=\"4\" fill=\"#0d1730\"/><rect x=\"10\" y=\"8\" width=\"44\" height=\"48\" rx=\"2\" fill=\"#172952\"/><circle cx=\"16\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"26\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"36\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"46\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><rect x=\"22\" y=\"24\" width=\"14\" height=\"10\" fill=\"#303030\"/><rect x=\"14\" y=\"38\" width=\"18\" height=\"14\" fill=\"#e0e0e0\"/><text x=\"23\" y=\"48\" text-anchor=\"middle\" font-size=\"5\" fill=\"#222\" font-family=\"monospace\" font-weight=\"bold\">BMP180</text><circle cx=\"44\" cy=\"45\" r=\"5\" fill=\"#999\"/></svg>",
|
||||
"tags": [
|
||||
"sensor",
|
||||
"i2c",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const BOARD_SIZE: Record<string, { w: number; h: number }> = {
|
|||
'arduino-nano-esp32': { w: 217, h: 90 },
|
||||
'xiao-esp32-c3': { w: 91, h: 117 },
|
||||
'aitewinrobot-esp32c3-supermini': { w: 90, h: 123 },
|
||||
attiny85: { w: 160, h: 100 },
|
||||
attiny85: { w: 160, h: 132 },
|
||||
};
|
||||
|
||||
interface BoardOnCanvasProps {
|
||||
|
|
|
|||
|
|
@ -1,50 +1,52 @@
|
|||
/**
|
||||
* ATtiny85 — Web Component (DIP-8 package, Digispark-style)
|
||||
* Attiny85Element.ts — DIP-8 ATtiny85 Web Component
|
||||
*
|
||||
* Exposes the standard `pinInfo` array used by the wire system to position
|
||||
* wire endpoints on real pins instead of the component corner.
|
||||
* Visual: Fritzing-drawn ATtiny85 DIP package loaded as a static asset
|
||||
* from /component-svgs/attiny85.svg. Original copied verbatim from
|
||||
* third-party/fritzing-parts/svg/core/breadboard/ATtiny85_breadboard.svg
|
||||
* (CC-BY-SA, see THIRDPARTY_LICENSES.md).
|
||||
*
|
||||
* Pin layout (DIP-8):
|
||||
* Left side (top to bottom): PB5 (RST), PB3, PB4, GND
|
||||
* Right side (top to bottom): VCC, PB2, PB1, PB0
|
||||
* Geometry note (different from the original hand-drawn version):
|
||||
* The Fritzing layout puts the chip HORIZONTAL with 4 pins on the TOP
|
||||
* edge and 4 pins on the BOTTOM edge — not vertical with pins on
|
||||
* left/right like the older art. Existing wired examples will rewire
|
||||
* automatically (the wire system reads coords by pin name from
|
||||
* pinInfo) but external components positioned to the right of the
|
||||
* chip may need to be moved manually for clean routing.
|
||||
*
|
||||
* The visual layout matches the older React component
|
||||
* (`Attiny85.tsx` → `Attiny85`), but here we own the DOM so wires can read
|
||||
* `element.pinInfo`. The `led1` attribute mirrors the PB1 (Digispark LED)
|
||||
* pin state.
|
||||
* viewBox 28.801 × 23.768 mm scaled uniformly at 5.555 px/mm → 160 × 132 px.
|
||||
* Pin terminal centres in the source SVG (mm), all 8 connectors:
|
||||
* row x y pin label
|
||||
* top 3.601 1.084 VCC (connector7)
|
||||
* top 10.801 1.084 PB2 (connector6)
|
||||
* top 18.000 1.084 PB1 (connector5)
|
||||
* top 25.201 1.084 PB0 (connector4)
|
||||
* bottom 3.601 22.687 PB5 (connector0, RST)
|
||||
* bottom 10.801 22.687 PB3 (connector1)
|
||||
* bottom 18.000 22.687 PB4 (connector2)
|
||||
* bottom 25.201 22.687 GND (connector3)
|
||||
*
|
||||
* Built-in LED on PB1 (Digispark convention) is overlaid as a circle in
|
||||
* the outer SVG — drives off the `led1` attribute / property like before.
|
||||
*/
|
||||
|
||||
// DIP-8 dimensions (must match BoardOnCanvas BOARD_SIZE = 160 × 100)
|
||||
const W = 160;
|
||||
const H = 100;
|
||||
const BX = 30; // chip body left
|
||||
const BY = 10; // chip body top
|
||||
const BW = 100; // chip body width
|
||||
const BH = 80; // chip body height
|
||||
const PIN_W = 28; // pin stub length
|
||||
const H = 132;
|
||||
const TOP_Y = 6; // CSS px — y of all four top-edge pin tips
|
||||
const BOT_Y = 126; // CSS px — y of all four bottom-edge pin tips
|
||||
const PIN_X = [20, 60, 100, 140] as const;
|
||||
|
||||
// Vertical pin centres
|
||||
const PIN_STARTS_Y = [BY + 10, BY + 30, BY + 50, BY + 70];
|
||||
|
||||
const PIN_LABELS_LEFT = ['PB5', 'PB3', 'PB4', 'GND'];
|
||||
const PIN_LABELS_RIGHT = ['VCC', 'PB2', 'PB1', 'PB0'];
|
||||
|
||||
/**
|
||||
* Pin tip coordinates (where wires must attach), in SVG pixels relative to
|
||||
* the element's top-left corner. The wire system reads these via the
|
||||
* `pinInfo` property on the rendered DOM element.
|
||||
*/
|
||||
const PIN_INFO: ReadonlyArray<{ name: string; x: number; y: number; description?: string }> = [
|
||||
// Left column — pin tip = BX - PIN_W
|
||||
{ name: 'PB5', x: BX - PIN_W, y: PIN_STARTS_Y[0], description: 'PB5 / RST' },
|
||||
{ name: 'PB3', x: BX - PIN_W, y: PIN_STARTS_Y[1] },
|
||||
{ name: 'PB4', x: BX - PIN_W, y: PIN_STARTS_Y[2] },
|
||||
{ name: 'GND', x: BX - PIN_W, y: PIN_STARTS_Y[3] },
|
||||
// Right column — pin tip = BX + BW + PIN_W
|
||||
{ name: 'VCC', x: BX + BW + PIN_W, y: PIN_STARTS_Y[0] },
|
||||
{ name: 'PB2', x: BX + BW + PIN_W, y: PIN_STARTS_Y[1] },
|
||||
{ name: 'PB1', x: BX + BW + PIN_W, y: PIN_STARTS_Y[2], description: 'PB1 / built-in LED' },
|
||||
{ name: 'PB0', x: BX + BW + PIN_W, y: PIN_STARTS_Y[3] },
|
||||
// Top row — left to right
|
||||
{ name: 'VCC', x: PIN_X[0], y: TOP_Y, description: 'VCC (Pin 8)' },
|
||||
{ name: 'PB2', x: PIN_X[1], y: TOP_Y, description: 'PB2 / SCK / SCL / ADC1 (Pin 7)' },
|
||||
{ name: 'PB1', x: PIN_X[2], y: TOP_Y, description: 'PB1 / MISO / built-in LED (Pin 6)' },
|
||||
{ name: 'PB0', x: PIN_X[3], y: TOP_Y, description: 'PB0 / MOSI / SDA / OC0A (Pin 5)' },
|
||||
// Bottom row — left to right
|
||||
{ name: 'PB5', x: PIN_X[0], y: BOT_Y, description: 'PB5 / RESET (Pin 1)' },
|
||||
{ name: 'PB3', x: PIN_X[1], y: BOT_Y, description: 'PB3 / XTAL1 / ADC3 (Pin 2)' },
|
||||
{ name: 'PB4', x: PIN_X[2], y: BOT_Y, description: 'PB4 / XTAL2 / ADC2 (Pin 3)' },
|
||||
{ name: 'GND', x: PIN_X[3], y: BOT_Y, description: 'GND (Pin 4)' },
|
||||
];
|
||||
|
||||
class Attiny85Element extends HTMLElement {
|
||||
|
|
@ -75,7 +77,6 @@ class Attiny85Element extends HTMLElement {
|
|||
return PIN_INFO;
|
||||
}
|
||||
|
||||
/** Property setter so React's `useEffect` path can drive the LED. */
|
||||
set led1(v: boolean) {
|
||||
this._led1 = !!v;
|
||||
this.updateLed();
|
||||
|
|
@ -101,69 +102,49 @@ class Attiny85Element extends HTMLElement {
|
|||
private render() {
|
||||
if (!this.shadowRoot) return;
|
||||
|
||||
// Build pin stubs + labels
|
||||
const leftStubs = PIN_STARTS_Y.map(
|
||||
(py) => `<line x1="${BX}" y1="${py}" x2="${BX - PIN_W}" y2="${py}"
|
||||
stroke="#aaa" stroke-width="3" stroke-linecap="round" />`,
|
||||
).join('');
|
||||
const rightStubs = PIN_STARTS_Y.map(
|
||||
(py) => `<line x1="${BX + BW}" y1="${py}" x2="${BX + BW + PIN_W}" y2="${py}"
|
||||
stroke="#aaa" stroke-width="3" stroke-linecap="round" />`,
|
||||
).join('');
|
||||
const leftLabels = PIN_LABELS_LEFT.map(
|
||||
(label, i) =>
|
||||
`<text x="${BX - PIN_W - 2}" y="${PIN_STARTS_Y[i] + 4}" font-size="7"
|
||||
font-family="monospace" text-anchor="end"
|
||||
fill="${label === 'GND' ? '#888' : '#aac'}">${label === 'PB5' ? 'PB5/RST' : label}</text>`,
|
||||
).join('');
|
||||
const rightLabels = PIN_LABELS_RIGHT.map(
|
||||
(label, i) =>
|
||||
`<text x="${BX + BW + PIN_W + 14}" y="${PIN_STARTS_Y[i] + 4}" font-size="7"
|
||||
font-family="monospace" text-anchor="start"
|
||||
fill="${label === 'VCC' ? '#888' : label === 'PB1' ? '#ffdd88' : '#aac'}">${label}</text>`,
|
||||
).join('');
|
||||
|
||||
// Built-in LED on PB1 (right side, 3rd from top → PIN_STARTS_Y[2])
|
||||
const ledFill = this._led1 ? '#ffee44' : '#333';
|
||||
const ledStroke = this._led1 ? '#ffcc00' : '#555';
|
||||
const ledFilter = this._led1 ? 'drop-shadow(0 0 4px #ffcc00)' : 'none';
|
||||
|
||||
// Place the LED indicator just ABOVE the PB1 top-pin (PIN_X[2], TOP_Y),
|
||||
// outside the chip body so it stays readable.
|
||||
const ledX = PIN_X[2];
|
||||
const ledY = TOP_Y - 12;
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: inline-block; line-height: 0; }
|
||||
svg { display: block; overflow: visible; }
|
||||
.pin-label {
|
||||
font: 600 7px monospace;
|
||||
fill: #cdf;
|
||||
text-anchor: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pin-label.power { fill: #aaa; }
|
||||
.pin-label.led { fill: #ffd066; }
|
||||
</style>
|
||||
<svg width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
|
||||
<!-- Pin stubs -->
|
||||
${leftStubs}
|
||||
${rightStubs}
|
||||
<!-- Fritzing ATtiny85 DIP-8 artwork (CC-BY-SA). Scaled to fill
|
||||
the 160×132 box; aspect ratio matches the source 1.211:1. -->
|
||||
<image href="/component-svgs/attiny85.svg" x="0" y="0" width="${W}" height="${H}" />
|
||||
|
||||
<!-- IC body -->
|
||||
<rect x="${BX}" y="${BY}" width="${BW}" height="${BH}" rx="4" ry="4"
|
||||
fill="#1a1a2e" stroke="#4a4a7a" stroke-width="1.5" />
|
||||
|
||||
<!-- Orientation notch -->
|
||||
<path d="M${BX + BW / 2 - 7} ${BY} A7 7 0 0 1 ${BX + BW / 2 + 7} ${BY}"
|
||||
fill="none" stroke="#4a4a7a" stroke-width="1.5" />
|
||||
|
||||
<!-- Pin 1 dot (bottom-left of body → PB5/RST corner) -->
|
||||
<circle cx="${BX + 8}" cy="${BY + BH - 8}" r="2.5" fill="#7a7aaa" />
|
||||
|
||||
<!-- Chip label -->
|
||||
<text x="${BX + BW / 2}" y="${BY + BH / 2 - 8}" font-size="10" font-weight="bold"
|
||||
font-family="monospace" fill="#c8c8f0" text-anchor="middle">ATtiny85</text>
|
||||
<text x="${BX + BW / 2}" y="${BY + BH / 2 + 8}" font-size="8"
|
||||
font-family="monospace" fill="#7a7aaa" text-anchor="middle">8-bit AVR</text>
|
||||
|
||||
<!-- Built-in LED on PB1 -->
|
||||
<!-- Built-in LED on PB1 (Digispark convention) -->
|
||||
<circle id="attiny-led1"
|
||||
cx="${BX + BW + PIN_W + 6}" cy="${PIN_STARTS_Y[2]}" r="5"
|
||||
cx="${ledX}" cy="${ledY}" r="5"
|
||||
fill="${ledFill}" stroke="${ledStroke}" stroke-width="1"
|
||||
style="filter: ${ledFilter};" />
|
||||
|
||||
<!-- Labels -->
|
||||
${leftLabels}
|
||||
${rightLabels}
|
||||
<!-- Pin labels overlaid above/below the connector pads. -->
|
||||
<text class="pin-label power" x="${PIN_X[0]}" y="${TOP_Y - 22}">VCC</text>
|
||||
<text class="pin-label" x="${PIN_X[1]}" y="${TOP_Y - 22}">PB2</text>
|
||||
<text class="pin-label led" x="${PIN_X[2]}" y="${TOP_Y - 22}">PB1</text>
|
||||
<text class="pin-label" x="${PIN_X[3]}" y="${TOP_Y - 22}">PB0</text>
|
||||
|
||||
<text class="pin-label" x="${PIN_X[0]}" y="${BOT_Y + 12}">PB5</text>
|
||||
<text class="pin-label" x="${PIN_X[1]}" y="${BOT_Y + 12}">PB3</text>
|
||||
<text class="pin-label" x="${PIN_X[2]}" y="${BOT_Y + 12}">PB4</text>
|
||||
<text class="pin-label power" x="${PIN_X[3]}" y="${BOT_Y + 12}">GND</text>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,64 @@
|
|||
/**
|
||||
* Bmp280Element.ts — Custom Web Component for the BMP280 barometric sensor.
|
||||
* Bmp280Element.ts — BMP280 barometric pressure + temperature sensor
|
||||
*
|
||||
* wokwi-elements does not include a BMP280 element, so we define one here.
|
||||
* Visual: a small I2C breakout board (82 × 61 px) styled after the MPU6050 module.
|
||||
* wokwi-elements does not include a BMP280, so we ship our own. The visual
|
||||
* is the Fritzing-drawn BMP180 breakout (mechanically identical Bosch
|
||||
* predecessor — same I2C interface, same 4-pin pinout) loaded as a static
|
||||
* asset from /component-svgs/bmp280.svg. Original SVG copied verbatim from
|
||||
* third-party/fritzing-parts/svg/core/breadboard/bmp180_breadboard.svg
|
||||
* (CC-BY-SA, see THIRDPARTY_LICENSES.md).
|
||||
*
|
||||
* Pins:
|
||||
* VCC (left, top) — 3.3 V power
|
||||
* GND (left, 2nd) — Ground
|
||||
* SDA (left, 3rd) — I2C data
|
||||
* SCL (left, bottom)— I2C clock
|
||||
* Geometry (matches the Fritzing source):
|
||||
* viewBox 28.35 × 35.43 mm, scaled uniformly at 2.822 px/mm → 80 × 100 px.
|
||||
* Connector centres in the source SVG (mm): all at y=4.821, with
|
||||
* SDA → x=3.375 GND → x=17.773
|
||||
* SCL → x=10.574 VCC → x=24.975
|
||||
* Maps to CSS px (x ≈ mm × 2.822):
|
||||
* SDA(9.5, 13.6) GND(50.2, 13.6)
|
||||
* SCL(29.8, 13.6) VCC(70.5, 13.6)
|
||||
*
|
||||
* Pin order/names taken from third-party/fritzing-parts/core/bmp180_breakout.fzp
|
||||
* (Adafruit BMP180 breakout, variant 3).
|
||||
*/
|
||||
|
||||
const W = 80; // CSS px
|
||||
const H = 100;
|
||||
const PIN_Y = 13.6; // CSS px — y of all four pin tips
|
||||
|
||||
const PIN_INFO = [
|
||||
{ name: 'SDA', x: 9.5, y: PIN_Y, number: 1, signals: [] as Array<unknown> },
|
||||
{ name: 'SCL', x: 29.8, y: PIN_Y, number: 2, signals: [] as Array<unknown> },
|
||||
{ name: 'GND', x: 50.2, y: PIN_Y, number: 3, signals: [{ type: 'power', signal: 'GND' }] },
|
||||
{ name: 'VCC', x: 70.5, y: PIN_Y, number: 4, signals: [{ type: 'power', signal: 'VCC' }] },
|
||||
];
|
||||
|
||||
class Bmp280Element extends HTMLElement {
|
||||
readonly pinInfo = [
|
||||
{ name: 'VCC', x: 0, y: 10, number: 1, signals: [{ type: 'power', signal: 'VCC' }] },
|
||||
{ name: 'GND', x: 0, y: 22, number: 2, signals: [{ type: 'power', signal: 'GND' }] },
|
||||
{ name: 'SDA', x: 0, y: 34, number: 3, signals: [] },
|
||||
{ name: 'SCL', x: 0, y: 46, number: 4, signals: [] },
|
||||
];
|
||||
readonly pinInfo = PIN_INFO;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' }).innerHTML = `
|
||||
<style>:host { display: inline-block; line-height: 0; }</style>
|
||||
<svg width="82" height="61" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- PCB body -->
|
||||
<rect x="6" y="2" width="74" height="57" rx="3" ry="3"
|
||||
fill="#2d6a2d" stroke="#1a4a1a" stroke-width="1"/>
|
||||
<style>
|
||||
:host { display: inline-block; line-height: 0; }
|
||||
svg { display: block; overflow: visible; }
|
||||
.pin-label {
|
||||
font: 600 6px monospace;
|
||||
fill: #cdf;
|
||||
text-anchor: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<svg width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
|
||||
<!-- Fritzing BMP180 breakout artwork (CC-BY-SA). The asset
|
||||
ships as a public static file so it stays editable separately. -->
|
||||
<image href="/component-svgs/bmp280.svg" x="0" y="0" width="${W}" height="${H}" />
|
||||
|
||||
<!-- Chip (BMP280 die) -->
|
||||
<rect x="30" y="16" width="24" height="20" rx="2" ry="2"
|
||||
fill="#1a1a1a" stroke="#444" stroke-width="0.5"/>
|
||||
<text x="42" y="29" font-family="monospace" font-size="5"
|
||||
fill="#aaa" text-anchor="middle">BMP280</text>
|
||||
|
||||
<!-- Pin header pads on left edge -->
|
||||
<rect x="1" y="6" width="9" height="5" rx="1" fill="#c8a000" stroke="#8a6000" stroke-width="0.5"/>
|
||||
<rect x="1" y="18" width="9" height="5" rx="1" fill="#c8a000" stroke="#8a6000" stroke-width="0.5"/>
|
||||
<rect x="1" y="30" width="9" height="5" rx="1" fill="#c8a000" stroke="#8a6000" stroke-width="0.5"/>
|
||||
<rect x="1" y="42" width="9" height="5" rx="1" fill="#c8a000" stroke="#8a6000" stroke-width="0.5"/>
|
||||
|
||||
<!-- Pin labels -->
|
||||
<text x="12" y="11" font-family="monospace" font-size="5" fill="#9cf" text-anchor="start">VCC</text>
|
||||
<text x="12" y="23" font-family="monospace" font-size="5" fill="#9cf" text-anchor="start">GND</text>
|
||||
<text x="12" y="35" font-family="monospace" font-size="5" fill="#9cf" text-anchor="start">SDA</text>
|
||||
<text x="12" y="47" font-family="monospace" font-size="5" fill="#9cf" text-anchor="start">SCL</text>
|
||||
|
||||
<!-- Decoupling caps (decorative) -->
|
||||
<rect x="60" y="8" width="6" height="4" rx="1" fill="#555"/>
|
||||
<rect x="68" y="8" width="6" height="4" rx="1" fill="#555"/>
|
||||
<rect x="60" y="48" width="6" height="4" rx="1" fill="#555"/>
|
||||
|
||||
<!-- Silk screen label -->
|
||||
<text x="56" y="42" font-family="monospace" font-size="5"
|
||||
fill="#aaffaa" text-anchor="middle">GY-BMP280</text>
|
||||
<!-- Pin labels overlaid above the connector circles. The Fritzing
|
||||
source has no silkscreen labels on the pins themselves. -->
|
||||
<text class="pin-label" x="9.5" y="6">SDA</text>
|
||||
<text class="pin-label" x="29.8" y="6">SCL</text>
|
||||
<text class="pin-label" x="50.2" y="6">GND</text>
|
||||
<text class="pin-label" x="70.5" y="6">VCC</text>
|
||||
</svg>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1957,7 +1957,7 @@
|
|||
"tagName": "velxio-bmp280",
|
||||
"name": "BMP280 (Pressure + Temp)",
|
||||
"category": "sensor",
|
||||
"thumbnail": "<svg width=\"64\" height=\"64\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"64\" height=\"64\" rx=\"4\" fill=\"#1a2332\"/><rect x=\"10\" y=\"8\" width=\"44\" height=\"48\" rx=\"3\" fill=\"#2d6a2d\" stroke=\"#1a4a1a\"/><rect x=\"22\" y=\"22\" width=\"20\" height=\"16\" rx=\"2\" fill=\"#1a1a1a\" stroke=\"#444\"/><text x=\"32\" y=\"33\" text-anchor=\"middle\" font-size=\"5\" fill=\"#aaa\" font-family=\"monospace\">BMP280</text><rect x=\"6\" y=\"14\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"22\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"30\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><rect x=\"6\" y=\"38\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#c8a000\"/><text x=\"40\" y=\"50\" font-size=\"4\" fill=\"#aaffaa\" font-family=\"monospace\">GY-BMP280</text></svg>",
|
||||
"thumbnail": "<svg width=\"64\" height=\"64\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"64\" height=\"64\" rx=\"4\" fill=\"#0d1730\"/><rect x=\"10\" y=\"8\" width=\"44\" height=\"48\" rx=\"2\" fill=\"#172952\"/><circle cx=\"16\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"26\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"36\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><circle cx=\"46\" cy=\"15\" r=\"3\" fill=\"#9a916c\"/><rect x=\"22\" y=\"24\" width=\"14\" height=\"10\" fill=\"#303030\"/><rect x=\"14\" y=\"38\" width=\"18\" height=\"14\" fill=\"#e0e0e0\"/><text x=\"23\" y=\"48\" text-anchor=\"middle\" font-size=\"5\" fill=\"#222\" font-family=\"monospace\" font-weight=\"bold\">BMP180</text><circle cx=\"44\" cy=\"45\" r=\"5\" fill=\"#999\"/></svg>",
|
||||
"properties": [],
|
||||
"defaultValues": {},
|
||||
"pinCount": 4,
|
||||
|
|
|
|||
Loading…
Reference in New Issue