https://github.com/veggiedefender/apriltag-js
apriltag-js is a small TypeScript port of apriltag-generation with no dependencies.
https://github.com/veggiedefender/apriltag-js
apriltags fiducial-markers
Last synced: about 1 month ago
JSON representation
apriltag-js is a small TypeScript port of apriltag-generation with no dependencies.
- Host: GitHub
- URL: https://github.com/veggiedefender/apriltag-js
- Owner: veggiedefender
- License: mit
- Created: 2024-07-20T20:10:11.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T05:29:43.000Z (11 months ago)
- Last Synced: 2025-05-07T16:16:54.969Z (about 1 month ago)
- Topics: apriltags, fiducial-markers
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/apriltag
- Size: 1.23 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# apriltag-js
apriltag-js is a TypeScript port of [apriltag-generation](https://github.com/AprilRobotics/apriltag-generation) with no dependencies. See also the [main AprilTag repo](https://github.com/AprilRobotics/apriltag) and [paper](https://april.eecs.umich.edu/papers/details.php?name=krogius2019iros).
It lets you generate tags on the client instead of using pre-generated bitmaps. It also introduces a new JSON format for defining tag families.
All official tag families are supported, and you can easily use your own:
* `16h5`
* `25h9`
* `36h9`
* `36h10`
* `36h11`
* `Circle21h7`
* `Circle49h12`
* `Custom48h12`
* `Standard41h12`
* `Standard52h13`
## Installation
```sh
npm install apriltag
```
```html
```
You can also just copy and paste the code into your project!
## Usage
If you use npm:
```ts
import { AprilTagFamily } from 'apriltag'
import tagConfig36h11 from 'apriltag/families/36h11.json'
const family = new AprilTagFamily(tagConfig36h11);
console.log(family.render(1));
```
Or if you're using a plain `` tag:
```html
<script src="https://cdn.jsdelivr.net/npm/apriltag@latest/dist/browser.js">
async function main() {
const rsp = await fetch('https://cdn.jsdelivr.net/npm/apriltag@latest/families/36h11.json')
const tagConfig36h11 = await rsp.json()
const family = new AprilTagFamily(tagConfig36h11)
console.log(family.render(1))
}
main()
```
You'll get back a 2D array of characters representing pixels. `w` means white, `b` means black, and `x` means transparent. More details on the format are in the next section.
```ts
[
['w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w'],
['w', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'w'],
['w', 'b', 'w', 'w', 'b', 'w', 'w', 'b', 'b', 'w'],
['w', 'b', 'b', 'w', 'b', 'w', 'w', 'w', 'b', 'w'],
['w', 'b', 'w', 'w', 'w', 'w', 'b', 'b', 'b', 'w'],
['w', 'b', 'b', 'w', 'w', 'b', 'b', 'b', 'b', 'w'],
['w', 'b', 'w', 'b', 'w', 'w', 'b', 'w', 'b', 'w'],
['w', 'b', 'b', 'b', 'w', 'b', 'b', 'w', 'b', 'w'],
['w', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'w'],
['w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w']
]
```
What you do with it is up to you! You could render them as ASCII art, create HTML elements or SVG, generate images, or draw them on a canvas. Take a look at the unit tests for this library if you're not sure how to begin.
You can check the size and number of IDs a tag family supports by accessing `family.size` and `family.codes.length` respectively.
## Tag family format
Look in the `families/` folder for examples. Tag families must adhere to the following type:
```ts
type AprilTagConfig = {
size: number;
layout: string;
codes: number[];
};
```
### size
`size` is the length of one side of a tag in pixels. Squaring it gives you the area. It's the measurement of the entire tag, not just the data region (e.g. `36h11` has size `10`).
### layout
`layout` is a string consisting of `size × size` characters, which can be `w` for white, `b` for black, `x` for transparent, or `d` for data. See Fig. 3 of the paper:
### codes
`codes` is a list of numbers representing the bits encoded in each tag. One code is one tag, and a tag's ID is its index in the `codes` array.
These are the AprilTag 3 "upgraded" codes, so the codes for tags from earlier generations are written differently than how they appear in the reference implementation, but they mean the same thing.