diff --git a/_data/navigation.yml b/_data/navigation.yml index 6db98eb..fdc6409 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -1,4 +1,6 @@ main: + - title: "Getting Started" + url: "/getting-started/" - title: "About" url: "/about" - title: "Spec" diff --git a/assets/css/main.scss b/assets/css/main.scss index 5c64151..24b54ad 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -110,3 +110,146 @@ textarea { outline: none; transition: border-color 0.2s; } + +.feature__wrapper { + text-align: center; +} + +/* Getting Started */ + +.getting-started__lede { + max-width: 52rem; + margin: 0 0 2rem; + color: $light-gray; + font-size: 1.2em; + line-height: 1.6; +} + +.role-grid, +.benefit-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + margin: 1.5rem 0 3rem; +} + +.role-card { + display: flex; + min-height: 11rem; + flex-direction: column; + justify-content: flex-end; + padding: 1.3rem; + color: inherit; + background: linear-gradient(145deg, #1e232e, #151922); + border: 1px solid #303847; + border-radius: 1rem; + text-decoration: none; + text-align: center; + transition: + border-color 0.2s ease, + transform 0.2s ease; + + &:hover { + color: inherit; + border-color: $primary-color; + transform: translateY(-2px); + } + + strong { + margin-bottom: 0.35rem; + color: #fff; + font-size: 1.15em; + } + + span:last-child { + color: $light-gray; + font-size: 0.88em; + line-height: 1.45; + } +} + +.role-card--primary { + background: linear-gradient( + 145deg, + rgba($primary-color, 0.27), + rgba($primary-color, 0.08) + ); + border-color: rgba($primary-color, 0.7); +} + +.role-card__eyebrow { + margin-bottom: 0.75rem; + color: rgb(198, 157, 235) !important; + font-size: 0.7em !important; + font-weight: bold; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.role-card__icon { + width: 3.5rem; + height: 3.5rem; + margin: auto; + scale: 1; + transition: scale 0.2s; +} + +.role-card:hover .role-card__icon { + /* Overwrite box-shadow for hovering on images in links */ + box-shadow: none !important; + scale: 1.1; +} + +.benefit-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-bottom: 2rem; +} + +.benefit-card { + padding: 1.25rem; + background: #181d27; + border: 1px solid #29313e; + border-radius: 0.75rem; + + h4 { + margin: 0 0 0.5rem; + border-bottom: 0; + } + + p { + margin: 0; + color: $light-gray; + } +} + +.start-path { + @include notice($primary-color); + font-size: revert !important; + border-left: 3px solid $primary-color; + + a { + color: $link-color; + + &:hover { + color: $link-color-hover; + } + } +} + +.getting-started__actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin: 1.5rem 0; +} + +@media (max-width: 700px) { + .role-grid, + .benefit-grid { + grid-template-columns: 1fr; + } + + .role-card { + min-height: 9rem; + } +} diff --git a/assets/images/getting-started-developer.svg b/assets/images/getting-started-developer.svg new file mode 100644 index 0000000..1c30aaf --- /dev/null +++ b/assets/images/getting-started-developer.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/getting-started-manufacturer.svg b/assets/images/getting-started-manufacturer.svg new file mode 100644 index 0000000..d306ee5 --- /dev/null +++ b/assets/images/getting-started-manufacturer.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/getting-started-user.svg b/assets/images/getting-started-user.svg new file mode 100644 index 0000000..65bbf62 --- /dev/null +++ b/assets/images/getting-started-user.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/getting-started.md b/getting-started.md new file mode 100644 index 0000000..f9cd554 --- /dev/null +++ b/getting-started.md @@ -0,0 +1,174 @@ +--- +title: Getting Started +layout: single +permalink: /getting-started/ +description: Learn what OpenTag3D can do and how users, developers, and filament manufacturers can get started. +--- + +

+ Self-aware filament. Let every spool tell your printer and + slicer what it is and how it should be used. Automatic setup. Fewer mistakes. +

+ + + +## For people who print + +### Why does filament need an RFID tag? + +An RFID tag gives every spool a digital identity. It carries the filament's +material, color, recommended settings, and other useful details. Compatible +printers and slicers can read that information automatically, so you spend less +time adjusting profiles, catch incompatible settings before a print starts, +and keep your filament organized. + +
+ +
+ +#### Save Time + +Your spool can provide its configuration and profiles for you. Change materials +or colors without manually changing your print settings. + +
+ +
+ +#### Make Less Mistakes + +Your printer can warn you when your settings fall outside the filament's +specifications, helping catch errors that could cause a print to fail before it +starts. + +
+ +
+ +#### Be More Organized + +Every tag identifies its spool, including details such as color, material, and +serial number. Use that information for inventory and organization that ties +directly into your printers. + +
+ +
+ +### What can it enable? + +OpenTag3D is a standard, not a single app or product. It gives projects a common +set of data they can use to build features such as: + +- **Automatic slicer profiles:** Load settings from the filament instead of + finding and entering them by hand. +- **Inventory management:** Identify each spool uniquely and keep its material, + color, and other details together. +- **Automatic dryer settings:** Select an appropriate temperature and duration + for the material, reducing the risk of a drying mistake. +- **Filament-remaining estimates:** Use the tag as a rotation marker and combine + it with the stored core diameter, or weigh the spool and subtract the stored + empty-spool weight. + +> [!NOTE] +> These are capabilities the standard makes possible. Availability depends on +> the printer, slicer, accessory, or community project you use. + +### I’m sold. How do I start? + +#### 1. Use filament and projects that already support OpenTag3D + +This is the easiest route: buy a tagged spool, then use it with a compatible +printer, accessory, slicer, or community project. See the current +[supporters and implementation status](/about#supporters). + +#### 2. Write your own tags + +Buy compatible NFC tags, enter the spool information in +[Make a Tag](/make), and write the result using one of the methods below. The +specification is designed around **NTAG215** tags; **NTAG216** tags are also +supported. + +Some filament companies provide a lookup that fills in product data for you: + +- [Polar Filament](https://pfil.us/rfid) + +If the manufacturer does not offer a lookup, you can enter the information +yourself. + +##### With a phone (recommended) + +- **Android:** Open [Make a Tag](/make) in a [Web NFC-compatible browser](https://caniuse.com/webnfc). You can + create, read, and write a tag directly from the page. +- **iPhone:** A native app is required. OpenTag3D-compatible iPhone apps are in + development, but none are available yet. + +###### OpenTag3D phone apps + +| Platform | Available apps | +| -------- | ------------------------------------------------------------ | +| Android | None yet. Use the [Web NFC tag tool](/make) in the meantime. | +| iPhone | None yet. | + +Building an app? Let us know so it can be added here. + +##### With a computer (advanced) + +- **NFC Tools Desktop:** Use a USB NFC reader such as the ACR122U (typically + around $30) to read and write tags. Follow Polar Filament’s + [OpenTag3D NFC Tools guide](https://pfil.us/opentag3d.php). +- **Proxmark3:** Use this popular RFID development toolkit with the Proxmark3 + export provided by [Make a Tag](/make). + +##### With a Flipper Zero + +The hardware is capable of reading and writing compatible tags, but the full +OpenTag3D workflow is not finished yet. This is not currently a recommended +getting-started path. + +## For developers + +OpenTag3D is openly documented and its source is available on GitHub. Start with +the specification, then use the existing source and community projects as +implementation references. + +
+ Read the specification + View the source on GitHub +
+ +The [reader implementation guidelines](/spec#reader-implementation-guidelines) +cover the details most hardware and firmware integrations need first. + +## For manufacturers + +OpenTag3D is free to adopt. There are **no licensing fees, required vendors, or +certification requirements**. You can source tags and readers entirely on your +own, manufacture your own solution, and implement as much of the open standard +as your product needs. + +There is no central service that your product must depend on. The essential +filament data lives on the tag and works offline; optional web lookups can be +hosted by the manufacturer or another provider. OpenTag3D is both open source +and decentralized. + +Please feel free to [contact the project maintainers](/about#contact) to discuss implementation. We can walk through the getting-started documentation, answer integration questions, and help you avoid common hardware and data-format pitfalls. diff --git a/index.md b/index.md index 6e4e213..3a6c60b 100644 --- a/index.md +++ b/index.md @@ -9,13 +9,15 @@ header: overlay_filter: "0.6" overlay_image: /assets/images/background.jpg actions: + - label: "Get Started" + url: "/getting-started/" - label: "View Spec" url: "/spec" announcement: "[OpenTag3D v2.0](./articles/v2-already) is out now!" caption: "Placeholder Background by [**morgaannn23**](https://wallpapercave.com/w/wp6945227)" excerpt: "An open source standard for 3D printer filament RFID tags. Designed from the ground up for compatibility between printers, filament manufacturers, and accessories, implementation is simple and low-cost." intro: - - excerpt: "Proprietary locks you in. Open sets you free. — [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/)" + - excerpt: "Proprietary locks you in. Open sets you free. [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/)" feature_row: - title: "Low-Cost, Off-the-Shelf Hardware" excerpt: "OpenTag3D uses standard NFC tags (NTAG215/216). These tags are readable and writable by smartphones, compatible with most off-the-shelf RFID/NFC readers (including low-cost PN532 modules), and require no proprietary hardware. This allows everyone, from corporations to hobbyists, to implement the standard into their applications, printers or accessories."