From 8736ac21fb825ce06d17b567caf9f5dea523345a Mon Sep 17 00:00:00 2001 From: pxtung299-bot Date: Fri, 15 May 2026 15:06:21 +0700 Subject: [PATCH 1/3] Update building-a-simple-usb-flashlight.mdx --- .../building-a-simple-usb-flashlight.mdx | 270 +++++++++++++++--- 1 file changed, 232 insertions(+), 38 deletions(-) diff --git a/docs/tutorials/building-a-simple-usb-flashlight.mdx b/docs/tutorials/building-a-simple-usb-flashlight.mdx index bdf3473..097b929 100644 --- a/docs/tutorials/building-a-simple-usb-flashlight.mdx +++ b/docs/tutorials/building-a-simple-usb-flashlight.mdx @@ -1,42 +1,236 @@ --- title: Building a Simple USB Flashlight -description: Learn how to build a simple USB-powered flashlight circuit using tscircuit with a push button, LED, and USB-C connector. ---- - -## Overview - -This tutorial will walk you through building a simple USB flashlight using -tscircuit. - -import TscircuitIframe from "@site/src/components/TscircuitIframe" - - { - return ( - - ` | +| Current-limiting resistor | 68 Ω, 0402 | `` | +| White LED | Generic 0402 white | `` | + +--- + +## How the Circuit Works + +USB supplies 5 V on pin 1 (VBUS) and ground on pin 4 (GND). + +A white LED typically has a forward voltage (V_f) of about 3.0 V–3.4 V and wants roughly +20 mA of current. We choose R so that: + +``` +R = (V_supply − V_f) / I_led +R = (5 V − 3.2 V) / 0.020 A +R ≈ 90 Ω → use standard value 68 Ω (gives ~26 mA, fine for a bright flash) +``` + +The circuit is simply: **VBUS → R1 → LED anode → LED cathode → GND**. + +--- + +## Step 1 — Create a New Project + +If you haven't installed tscircuit yet, follow the [Quickstart CLI guide](../intro/quickstart-cli) +or use the [online editor](https://tscircuit.com) to follow along in your browser. + +```bash +tsci init usb-flashlight +cd usb-flashlight +tsci dev +``` + +Open `lib/MyCircuit.tsx` in your editor. You will see a blank board template. + +--- + +## Step 2 — Add the USB Connector + +A USB-A male connector exposes four pins. We only need **pin 1 (VBUS, +5 V)** and +**pin 4 (GND)**. In tscircuit we declare it with `` and assign net labels +to the pins we care about: + +```tsx +import { connector, resistor, led, board, trace } from "@tscircuit/core" + +export default () => ( + + + +) +``` + +> **Tip:** `footprint="usb_a_male_th"` selects a through-hole USB-A male footprint from the +> built-in footprint library. You can browse available footprints at +> [tscircuit.com/footprints](https://tscircuit.com). + +After saving, you should see the connector appear on the PCB preview in your browser. + +--- + +## Step 3 — Add the Current-Limiting Resistor + +Place a 68 Ω 0402 resistor to the right of the connector. Its left pin (`pin1`) will connect +to VBUS, and its right pin (`pin2`) will go to the LED: + +```tsx + +``` + +--- + +## Step 4 — Add the LED + +Place a 0402 white LED to the right of the resistor. The **anode** (`pin1`) connects to R1, +and the **cathode** (`pin2`) connects to GND: + +```tsx + +``` + +--- + +## Step 5 — Connect the Components with Traces + +Now wire everything together. tscircuit traces are declared by listing the net path using +dot notation `ComponentName.pinLabel`: + +```tsx + {/* VBUS from USB connector pin 1 to resistor pin 1 */} + + + {/* R1 pin 2 to LED anode */} + + + {/* LED cathode back to GND on USB connector pin 4 */} + +``` + +--- + +## Full Circuit Code + +Putting it all together: + +```tsx +import { connector, resistor, led, board, trace } from "@tscircuit/core" + +export default () => ( + + {/* USB-A Male Connector */} + + + {/* 68 Ω current-limiting resistor */} + - .pos", pin2: "net.VBUS" }} - pcbX={0} - pcbY={-1} - /> - - - - - - - ) -} -`} /> + + {/* White LED */} + + + {/* Traces */} + + + + +) +``` + +--- + +## Step 6 — Preview and Verify + +The `tsci dev` server shows three tabs: **Schematic**, **PCB**, and **3D**. + +Check the following: + +- **Schematic**: The net from J1 pin 1 flows through R1 and then through LED1 to GND. No + unconnected pins ("ratsnest" lines) should remain. +- **PCB**: All three components fit within the 20 × 15 mm board outline. All traces are routed + (no airwires). +- **3D**: The USB connector overhangs the board edge slightly — this is normal for a plug-style + connector. +If you see any ratsnest (unrouted) lines, double-check the `from` / `to` pin names in your +`` elements. + +--- + +## Step 7 — Export and Order + +When you are happy with the design, export Gerber files for fabrication: + +```bash +tsci export --format gerber +``` + +The files land in `./output/gerbers/`. Zip the folder and upload it to your preferred PCB +manufacturer (JLCPCB, PCBWay, OSH Park, etc.). A standard 5-board run of this simple design +typically costs under $5 including shipping. + +--- + +## What's Next? + +- Add a push-button switch between VBUS and R1 to turn the light on and off + (`` element). +- Swap the single LED for three LEDs in parallel (each with its own 100 Ω resistor) for a + brighter beam. +- Try the [Building a 3×5 LED Matrix](./building-led-matrix) tutorial to scale up to a full + dot-matrix display. From ecdf80fc64266fef2cc24846f3243d17f81ecdf4 Mon Sep 17 00:00:00 2001 From: pxtung299-bot Date: Mon, 18 May 2026 08:01:05 +0200 Subject: [PATCH 2/3] Update courtyardoutline.mdx --- docs/elements/courtyardoutline.mdx | 299 ++++++++++++++++++++++------- 1 file changed, 226 insertions(+), 73 deletions(-) diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx index 5fa2511..04a0b19 100644 --- a/docs/elements/courtyardoutline.mdx +++ b/docs/elements/courtyardoutline.mdx @@ -2,76 +2,229 @@ title: description: Draw custom polygon courtyard boundaries for irregular package geometry. --- - -import CircuitPreview from "@site/src/components/CircuitPreview" - -## Overview - -Use `` when your footprint needs a non-rectangular, non-circular courtyard shape. - -## Basic Outline Example - - ( - - - - - - - - - } - /> - -) -`} -/> - -## Filled Outline Example - - ( - - - - - - } - /> - -) -`} -/> + +# `` + +The `` element lets you define a custom polygon boundary for a component's +courtyard — the keep-out zone that prevents other components from being placed too close. +Use it inside a `` whenever the standard rectangular or circular courtyard shapes +don't match your package geometry. + +--- + +## Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `points` | `Array<{ x: number; y: number }>` | required | Polygon vertices in millimetres, relative to the component origin | +| `anchorAlignment` | `"center" \| "top_left" \| "top_right" \| "bottom_left" \| "bottom_right"` | `"center"` | Which point of the bounding box is treated as the origin anchor | +| `layer` | `string` | `"F.Courtyard"` | PCB layer for the courtyard outline | + +--- + +## How `anchorAlignment` Works + +By default the courtyard polygon is positioned so that its **bounding-box centre** sits at the +component's `pcbX` / `pcbY` coordinates. Changing `anchorAlignment` shifts which corner (or the +centre) of the bounding box aligns with that position. + +Think of it like CSS `transform-origin`: the polygon itself doesn't change shape — only the +reference point used to place it does. + +--- + +## Examples + +### Default — `center` alignment + +The most common case. The centroid of the bounding box lands exactly at the component origin. + +```tsx + + + +``` + +``` + ┌──────────┐ + │ │ + ───┼──origin──┼─── + │ │ + └──────────┘ +``` + +--- + +### `top_left` alignment + +The **top-left corner** of the bounding box lands at the component origin. Useful when your +component's pin 1 is at the top-left and you want to align the courtyard to it precisely. + +```tsx + + + +``` + +``` + origin (0,0) = top-left corner + ┌──────────┐ + │ │ + │ │ + └──────────┘ +``` + +--- + +### `top_right` alignment + +The **top-right corner** lands at the component origin. Handy for edge-mounted connectors +where the right edge must align with a board boundary. + +```tsx + + + +``` + +``` + origin = top-right corner + ┌──────────┐ + │ │ + │ │ + └──────────┘ +``` + +--- + +### `bottom_left` alignment + +The **bottom-left corner** lands at the component origin. Useful for components that grow +upward from a reference baseline (e.g. tall through-hole parts referenced from the bottom pad). + +```tsx + + + +``` + +``` + ┌──────────┐ + │ │ + │ │ + └──────────┘ + origin (0,0) = bottom-left corner +``` + +--- + +### `bottom_right` alignment + +The **bottom-right corner** lands at the component origin. Mirrors `bottom_left`, useful for +right-aligned connectors or pads referenced from the bottom-right. + +```tsx + + + +``` + +``` + ┌──────────┐ + │ │ + │ │ + └──────────┘ + origin = bottom-right corner +``` + +--- + +### Irregular (non-rectangular) polygon + +`` accepts any convex or concave polygon. This is its main advantage over +``. Here is an L-shaped courtyard for a component with an asymmetric body: + +```tsx + + + +``` + +``` + ┌───┐ + │ │ + │ └──────┐ + │ │ + └──────────┘ + (centre anchored at origin) +``` + +--- + +## Tips + +- All `points` coordinates are **relative to the component's placed position** on the PCB, not + absolute board coordinates. +- The polygon does not need to be closed — tscircuit automatically connects the last point back + to the first. +- Combine `` with `` or `` inside the + same `` to build compound keep-out zones for complex packages. +- If you just need a simple rectangle, prefer `` — it is less verbose and + supports the same `anchorAlignment` prop. +--- + +## Related Elements + +- [``](./courtyardrect) — rectangular courtyard, same alignment options +- [``](./courtyardcircle) — circular courtyard +- [``](./footprint) — the parent element that contains courtyard elements From 0dc49229a85b3d018434a1b2ad4d9f09b50fbbed Mon Sep 17 00:00:00 2001 From: pxtung299-bot Date: Mon, 18 May 2026 08:11:55 +0200 Subject: [PATCH 3/3] Update courtyardoutline.mdx