{"id":14483730,"url":"https://github.com/bhollis/aruco-marker","last_synced_at":"2025-10-28T11:31:23.893Z","repository":{"id":14170014,"uuid":"16876069","full_name":"bhollis/aruco-marker","owner":"bhollis","description":"JavaScript library and custom HTML element for generating Aruco marker images","archived":false,"fork":false,"pushed_at":"2024-08-12T16:53:28.000Z","size":48,"stargazers_count":50,"open_issues_count":0,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-06T00:17:07.590Z","etag":null,"topics":["aruco","aruco-marker","aruco-markers","augmented-reality","computer-vision","robotics","web-components"],"latest_commit_sha":null,"homepage":"http://bhollis.github.io/aruco-marker/demos/element.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhollis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"MIT-LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-02-16T01:36:19.000Z","updated_at":"2024-08-12T16:53:32.000Z","dependencies_parsed_at":"2024-06-19T20:03:35.558Z","dependency_job_id":"1297db3e-feda-427c-b5f7-0fa928fc9319","html_url":"https://github.com/bhollis/aruco-marker","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.1428571428571429,"last_synced_commit":"ada8d00cf4f69b1953def1faf3491376b02dab2b"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Faruco-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Faruco-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Faruco-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Faruco-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhollis","download_url":"https://codeload.github.com/bhollis/aruco-marker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238642387,"owners_count":19506202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aruco","aruco-marker","aruco-markers","augmented-reality","computer-vision","robotics","web-components"],"created_at":"2024-09-03T00:02:03.463Z","updated_at":"2025-10-28T11:31:18.465Z","avatar_url":"https://github.com/bhollis.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Generate SVG Aruco Marker Images with JavaScript\n\n`aruco-marker` is a JavaScript library that can generate marker images (fiducials) for the [Aruco](https://github.com/paroj/aruco) augmented reality marker library. Aruco codes can be recognized by the original Aruco C++ library, or in the browser by [js-aruco](https://github.com/jcmellado/js-aruco). `aruco-marker` generates images as SVG, making them easy to scale to any size or print out. There is also a custom HTML element allowing you to easily embed codes anywhere on a page.\n\n[![NPM version](https://badge.fury.io/js/aruco-marker.svg)](https://www.npmjs.com/package/aruco-marker)\n\n# Demos\n\nThere are two demos that show off marker generation either directly or via the custom HTML element:\n\n- [Random Aruco markers via custom element](http://bhollis.github.io/aruco-marker/demos/element.html) ([View Source](https://github.com/bhollis/aruco-marker/blob/master/demos/element.html))\n- [Random Aruco markers via string](http://bhollis.github.io/aruco-marker/demos/index.html) ([View Source](https://github.com/bhollis/aruco-marker/blob/master/demos/index.html))\n\n# Usage\n\n`aruco-marker` is available for use in the browser, or in NodeJS. It is installable as `aruco-marker` from NPM.\n\n```javascript\nimport { arucoToSVGString } from 'aruco-marker';\n\nconst svgImage = arucoToSVGString(155, '500px'); // the size is optional\ndocument.getElementById('marker').innerHTML = svgImage;\n```\n\nSee [`demos/index.html`](https://github.com/bhollis/aruco-marker/blob/master/demos/index.html) for a complete example.\n\n# Custom Element\n\n`aruco-marker` is available for use in the browser, or in NodeJS. It is installable as `aruco-marker` from NPM.\n\n```html\n\u003cscript src=\"https://unpkg.com/aruco-marker/element\"\u003e\u003c/script\u003e\n\n\u003caruco-marker markerid=\"155\" size=\"500px\"\u003e\u003c/aruco-marker\u003e\n```\n\n# SVG to Canvas\n\nWhile SVG images are very flexible and are perfect for most applications, you can use [drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) to draw an SVG image to an HTML Canvas in order to obtain an image data URL if you need a raster image.\n\n# Developing\n\nFirst, install NodeJS however you like for your system (on macOS, I use `brew install node`).\n\nThen check out and build the project:\n\n```bash\ngit clone https://github.com/bhollis/aruco-marker\ncd aruco-marker\nnpm ci\nnpm run demo\n```\n\n## License\n\nCopyright (c) 2014 Benjamin Hollis. MIT Licensed, see [MIT-LICENSE.txt](https://github.com/bhollis/aruco-marker/blob/master/MIT-LICENSE.txt) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhollis%2Faruco-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhollis%2Faruco-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhollis%2Faruco-marker/lists"}