diff --git a/docs/elements/board.mdx b/docs/elements/board.mdx index 82303a2..f2cc404 100644 --- a/docs/elements/board.mdx +++ b/docs/elements/board.mdx @@ -1,32 +1,42 @@ ---- -title: -sidebar_position: 1 -description: >- - Root element that contains all chips and traces to create a printed circuit board. ---- - -The `` element is a root element that contains all the chips and traces -to create a PCB. - -You can think of a `` like a `` element in HTML. Everything -goes in a board! - - -import CircuitPreview from '@site/src/components/CircuitPreview' - - ( - - - - ) - -`} /> - - -## Board Properties - +--- +title: +sidebar_position: 1 +description: >- + Root element that contains all chips and traces to create a printed circuit board. +--- + +The `` element is a root element that contains all the chips and traces +to create a PCB. + +You can think of a `` like a `` element in HTML. Everything +goes in a board! + + +import CircuitPreview from '@site/src/components/CircuitPreview' + + ( + + + + ) + +`} /> + + +## Board Properties + +| Prop | Type | Description | +| --- | --- | --- | +| `width`, `height` | `string \| number` | Define the board's bounding box dimensions in millimeters. | +| `borderRadius` | `string \| number` | Round the corners of rectangular outlines by the specified radius. | +| `layers` | `number` | Increase the number of copper layers beyond the default two-layer stackup. | +| `autorouter` | `'auto' \| 'sequential-trace' \| 'auto-local' \| 'auto-cloud' \| 'laser_prefab' \| AutorouterConfig` | Select a built-in autorouter preset or provide a configuration object. | +| `schematicDisabled` | `boolean` | Skip schematic generation for boards that only need the PCB view. | +| `outline` | `Array<{ x: number, y: number }>` | Supply a custom polygon to replace the default rectangular outline. | +| `outlineOffsetX`, `outlineOffsetY` | `string \| number` | Offset a custom outline relative to the bounding box origin. | + ### Customizing the Size of the Board Generally you'll use the `width` and `height` properties to define the size of @@ -77,176 +87,198 @@ components across that stackup: `} /> ### Setting the `autorouter` - -Boards or [subcircuits](./subcircuit.mdx) can specify what autorouter should be -used to route any traces within them. - -Usually you'll want to use an autorouter preset: - -- `autorouter="auto"` - Uses the [platform configuration](../guides/running-tscircuit/platform-configuration.md). For tscircuit.com this defaults to `sequential-trace`. -- `autorouter="sequential-trace"` - Iterate over each trace and use tscircuit's fast built-in autorouter. This method is fast and deterministic but often fails with over 50 traces. -- `autorouter="auto-local"` - Use the platform configuration, but only route locally (do not make API calls) + +Boards or [subcircuits](./subcircuit.mdx) can specify what autorouter should be +used to route any traces within them. + +Usually you'll want to use an autorouter preset: + +- `autorouter="auto"` - Uses the [platform configuration](../guides/running-tscircuit/platform-configuration.md). For tscircuit.com this defaults to `sequential-trace`. +- `autorouter="sequential-trace"` - Iterate over each trace and use tscircuit's fast built-in autorouter. This method is fast and deterministic but often fails with over 50 traces. +- `autorouter="auto-local"` - Use the platform configuration, but only route locally (do not make API calls) - `autorouter="auto-cloud"` - Use the platform configuration for - `autorouter="laser_prefab"` - Reserve prefabricated vias that can be reassigned during routing. Ideal for rapid-turn PCBs produced with laser ablation and mechanical drilling templates. See the [Biscuit Board Laser Ablation guide](../guides/tscircuit-essentials/biscuit-board-laser-ablation.mdx) for a complete walkthrough. - -For complex boards with over 50 traces, you should use `autorouter="auto-cloud"` -to take advantage of tscircuit's cloud autorouters, which internally use the popular -[freerouting](https://github.com/freerouting/freerouting) library. - -You can also specify a custom autorouter object to use your own autorouter. - - ( - - - - - - ) -`} /> - -Learn more about [the Autorouting API here](../web-apis/autorouting-api.mdx) - - -### Custom Board Outlines - -You can specify a custom outline for your board by passing an `outline` prop. -The PCB you get will have this outline cut out, this is great when you want a -board that's not a rectangle! - - ( - -) - -`} /> - -### Offseting the board origin - -`width` and `height` set the board's bounding box (and thus the `pcbX`/`pcbY` -coordinate system) even when you're using a custom outline. Add -`outlineOffsetX` and `outlineOffsetY`—measured in millimeters, whether passed as -numbers or strings like `"5mm"`—to slide that outline relative to the bounding -box so `(0, 0)` lands where you expect. Positive offsets push the outline toward -increasing `pcbX`/`pcbY` coordinates. - -In this example the outline is shifted half the board's width and height so the -origin stays at the lower-left corner while the shape itself is centered: - - ( - - - - -) - -`} -/> - - -### Board Anchor Properties - -You can control the board's position and alignment using anchor properties: - -- `boardAnchorPosition`: Moves the board's anchor point to the specified coordinates -- `boardAnchorAlignment`: Sets which part of the board the anchor point refers to - - ( - - - - - - - - - ) -`}/> - -#### Try Different Alignments - -```jsx -// This moves the board's center to position (1,2) - - - -``` - -#### How Anchoring Works -- The `boardAnchorAlignment` determines which point on the board is considered the anchor point -- The `boardAnchorPosition` moves that anchor point to the specified (x,y) coordinates - -**Example Alignments**: -- `"center"` - Board is centered on the anchor point -- `"top_left"` - Top-left corner is at the anchor point -- `"top_right"` - Top-right corner is at the anchor point -- `"bottom_left"` - Bottom-left corner is at the anchor point -- `"bottom_right"` - Bottom-right corner is at the anchor point -- `"center_left"` - Middle of the left edge is at the anchor point -- `"center_right"` - Middle of the right edge is at the anchor point -- `"top_center"` - Top center point is at the anchor point -- `"bottom_center"` - Bottom center point is at the anchor point - -## Flexible PCBs - -:::info -Interested in flexible PCBs? Upvote [this issue on Github](https://github.com/tscircuit/tscircuit/issues/510)! -::: \ No newline at end of file + +For complex boards with over 50 traces, you should use `autorouter="auto-cloud"` +to take advantage of tscircuit's cloud autorouters, which internally use the popular +[freerouting](https://github.com/freerouting/freerouting) library. + +You can also specify a custom autorouter object to use your own autorouter. + + ( + + + + + + ) +`} /> + +Learn more about [the Autorouting API here](../web-apis/autorouting-api.mdx) + +:::tip Disable schematic output for mechanical fixtures +Set `schematicDisabled` when the schematic view would add clutter to the editor +or slow down complex mechanical assemblies. The prop is a simple boolean, so you +can add it without a value just like any other JSX attribute. + + ( + + + + ) +`}/> + +With `schematicDisabled` set, the schematic tab shows a placeholder instead of +attempting to lay out symbols or connections. +::: + +### Custom Board Outlines + +You can specify a custom outline for your board by passing an `outline` prop. +The PCB you get will have this outline cut out, this is great when you want a +board that's not a rectangle! + + ( + +) + +`} /> + +### Offseting the board origin + +`width` and `height` set the board's bounding box (and thus the `pcbX`/`pcbY` +coordinate system) even when you're using a custom outline. Add +`outlineOffsetX` and `outlineOffsetY`—measured in millimeters, whether passed as +numbers or strings like `"5mm"`—to slide that outline relative to the bounding +box so `(0, 0)` lands where you expect. Positive offsets push the outline toward +increasing `pcbX`/`pcbY` coordinates. + +In this example the outline is shifted half the board's width and height so the +origin stays at the lower-left corner while the shape itself is centered: + + ( + + + + +) + +`} +/> + + +### Board Anchor Properties + +You can control the board's position and alignment using anchor properties: + +- `boardAnchorPosition`: Moves the board's anchor point to the specified coordinates +- `boardAnchorAlignment`: Sets which part of the board the anchor point refers to + + ( + + + + + + + + + ) +`}/> + +#### Try Different Alignments + +```jsx +// This moves the board's center to position (1,2) + + + +``` + +#### How Anchoring Works +- The `boardAnchorAlignment` determines which point on the board is considered the anchor point +- The `boardAnchorPosition` moves that anchor point to the specified (x,y) coordinates + +**Example Alignments**: +- `"center"` - Board is centered on the anchor point +- `"top_left"` - Top-left corner is at the anchor point +- `"top_right"` - Top-right corner is at the anchor point +- `"bottom_left"` - Bottom-left corner is at the anchor point +- `"bottom_right"` - Bottom-right corner is at the anchor point +- `"center_left"` - Middle of the left edge is at the anchor point +- `"center_right"` - Middle of the right edge is at the anchor point +- `"top_center"` - Top center point is at the anchor point +- `"bottom_center"` - Bottom center point is at the anchor point + +## Flexible PCBs + +:::info +Interested in flexible PCBs? Upvote [this issue on Github](https://github.com/tscircuit/tscircuit/issues/510)! +:::