Skip to content

Add support showSolderMask option for CircuitPreview and capacitive touch sensor #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Add support showSolderMask option for CircuitPreview and capacitive touch sensor #312

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
714e0a1
Add doc for capacitive touch sensor with soldermask
nailoo Nov 5, 2025
46c3a41
format
nailoo Nov 5, 2025
e6f6e16
Merge branch 'main' into capaci
nailoo Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bun.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@docusaurus/module-type-aliases": "3.8.1",
"@docusaurus/tsconfig": "3.8.1",
"@docusaurus/types": "3.8.1",
"@tscircuit/create-snippet-url": "^0.0.10",
"@tscircuit/create-snippet-url": "^0.0.13",
"@tscircuit/footprinter": "^0.0.135",
"@tscircuit/math-utils": "^0.0.18",
"@twind/core": "^1.1.3",
Expand Down Expand Up @@ -619,7 +619,7 @@

"@trysound/sax": ["@trysound/sax@0.2.0", "", {}, "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="],

"@tscircuit/create-snippet-url": ["@tscircuit/create-snippet-url@0.0.10", "", { "dependencies": { "fflate": "^0.8.2" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-5sFzUsrRIPisnRWjGFvVORGRJTrxLB4FXp1ZFSrr/5RXz/OJTL900YA34IRYulVypR5rU7krEnTs9ed5gpIBWA=="],
"@tscircuit/create-snippet-url": ["@tscircuit/create-snippet-url@0.0.13", "", { "dependencies": { "fflate": "^0.8.2" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-F1BUIzGFR4h3pPKa3UqshYEXeMuv7uCbBG4JSz3FJByGTRwcbcgHAq9GPQSEibBujVWIbY/5gf1kcVO5GyJvmA=="],

"@tscircuit/footprinter": ["@tscircuit/footprinter@0.0.135", "", { "dependencies": { "@tscircuit/mm": "^0.0.8", "zod": "^3.23.8" }, "peerDependencies": { "circuit-json": "*" } }, "sha512-+8MasMGTNQL/NINnlWk2v6zw/NDerfdIBG3uqhrTr0r7VOHh4lK1ymTkQR7IeoypkxTIHYGB9wHbOt39XAF3mg=="],

Expand Down
62 changes: 62 additions & 0 deletions docs/footprints/smtpad.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,66 @@ Here’s an example of using a **polygon smtpad**
</board>
)
`}
/>

## Example: Capacitive Touch Sensor


<CircuitPreview
defaultView="pcb"
browser3dView={false}
showSolderMask={true}
code={`
export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<smtpad
shape="polygon"
layer="top"
portHints={["pin1"]}
coveredWithSolderMask={true}
points={[
{ x: -4.5, y: 2 },
{ x: -2.2, y: 2 },
{ x: -0.4, y: 0 },
{ x: -2.2, y: -2 },
{ x: -4.5, y: -2 },
]}
/>
<smtpad
shape="polygon"
layer="top"
portHints={["pin2"]}
coveredWithSolderMask={true}
points={[
{ x: -1.8, y: 2 },
{ x: 1.8, y: 2 },
{ x: 3.6, y: 0 },
{ x: 1.8, y: -2 },
{ x: -1.8, y: -2 },
{ x: 0, y: 0 },
]}
/>
<smtpad
shape="polygon"
layer="top"
portHints={["pin3"]}
coveredWithSolderMask={true}
points={[
{ x: 2.2, y: 2 },
{ x: 6, y: 2 },
{ x: 6, y: -2 },
{ x: 2.2, y: -2 },
{ x: 4, y: 0 },
]}
/>
</footprint>
}
/>
</board>
)
`}
/>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@docusaurus/module-type-aliases": "3.8.1",
"@docusaurus/tsconfig": "3.8.1",
"@docusaurus/types": "3.8.1",
"@tscircuit/create-snippet-url": "^0.0.10",
"@tscircuit/create-snippet-url": "^0.0.13",
"@tscircuit/footprinter": "^0.0.135",
"@tscircuit/math-utils": "^0.0.18",
"@twind/core": "^1.1.3",
Expand Down
10 changes: 9 additions & 1 deletion src/components/CircuitPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default function CircuitPreview({
projectBaseUrl = "https://docs.tscircuit.com/",
leftView,
rightView,
showSolderMask,
}: {
code?: string
showTabs?: boolean
Expand All @@ -106,6 +107,7 @@ export default function CircuitPreview({
leftView?: "code" | "pcb" | "schematic" | "3d" | "runframe" | "pinout"
rightView?: "code" | "pcb" | "schematic" | "3d" | "runframe" | "pinout"
projectBaseUrl?: string
showSolderMask?: boolean
}) {
const { isDarkTheme } = useColorMode()
const windowSize = useWindowSize()
Expand Down Expand Up @@ -141,7 +143,13 @@ export default function CircuitPreview({
const fsMapOrCode = hasMultipleFiles
? fsMap || code
: code || Object.values(fsMap ?? {})[0]
const pcbUrl = useMemo(() => createSvgUrl(fsMapOrCode, "pcb"), [fsMapOrCode])
const pcbUrl = useMemo(() => {
if (showSolderMask) {
return createSvgUrl(fsMapOrCode, "pcb", { showSolderMask: true })
}
return createSvgUrl(fsMapOrCode, "pcb")
Copy link
Contributor

@seveibar seveibar Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can simplify this by allowing showSolderMask to be undefined

}, [fsMapOrCode, showSolderMask])

const schUrl = useMemo(
() => createSvgUrl(fsMapOrCode, "schematic"),
[fsMapOrCode],
Expand Down