Skip to content

Commit 16b1512

Browse files
kalwaltkalwalt
authored
Merge pull request #33 from webarkit/feat/modernization-js-api
Modernize the FeatureSET-Display JavaScript API
2 parents 53ebe2b + 30cffa9 commit 16b1512

20 files changed

Lines changed: 373 additions & 59949 deletions

‎build/arfset.debug.js‎

Lines changed: 0 additions & 59116 deletions
This file was deleted.

‎build/arfset.min.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎dist/ARFset.d.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* Type declarations for @webarkit/featureset-display.
3+
*
4+
* Hand-written; source is plain JavaScript. Keep this file in sync
5+
* with the ARFset class in src/ARFset.js when the public surface
6+
* changes.
7+
*/
8+
9+
export interface ARFsetOptions {
10+
/** Initial wasm canvas width. Default: 893. */
11+
width?: number;
12+
/** Initial wasm canvas height. Default: 1117. */
13+
height?: number;
14+
}
15+
16+
/**
17+
* Renders the contents of an NFT marker (.iset / .fset / .fset3) to a
18+
* canvas: the imageSet preview plus circles marking the feature points
19+
* used for detection (green) and tracking (red).
20+
*/
21+
export class ARFset {
22+
constructor(options?: ARFsetOptions);
23+
24+
id: number;
25+
nftMarkerCount: number;
26+
numIset: number;
27+
imageSetWidth: number;
28+
imageSetHeight: number;
29+
dpi: number;
30+
numFpoints: number | null;
31+
width: number;
32+
height: number;
33+
version: string;
34+
35+
canvas: HTMLCanvasElement | null;
36+
canvasParent: HTMLElement | null;
37+
ctx: CanvasRenderingContext2D | null;
38+
39+
/** Load the wasm runtime and prepare the canvas. */
40+
initialize(): Promise<this>;
41+
42+
/** Attach the rendered canvas to an existing DOM element by id. */
43+
attachCanvas(id: string): void;
44+
45+
/** Subscribe to 'nftMarker' and render the marker to the canvas. */
46+
display(): void;
47+
48+
/** Load an NFT marker from a URL prefix (no extension). */
49+
loadNFTMarker(urlOrData: string): Promise<void>;
50+
51+
/** Load an NFT marker from an array of [iset, fset3, fset] data URLs. */
52+
loadNFTMarkerBlob(urlOrData: string[]): Promise<void>;
53+
}
54+
55+
declare const _default: { ARFset: typeof ARFset };
56+
export default _default;

‎dist/ARFset.js‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ARFset.js.LICENSE.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

‎dist/ARFset.umd.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ARFset.umd.js.LICENSE.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

‎example/demo.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ <h1>FeatureSET-Display</h1>
1818
<button class="bt" id="uploadBt" title="select all 3 files: .iset .fset and .fset3" onclick="document.getElementById('markerLoader').click();">Upload NFT marker</button>
1919
</div>
2020

21-
<script type="text/javascript" src="../dist/ARFset.js"></script>
22-
23-
<script>
21+
<script type="module">
22+
import ARFsetModule from '../dist/ARFset.js';
23+
window.ARFset = ARFsetModule;
2424
var ar = new ARFset.ARFset();
2525
var markerLoader = document.getElementById('markerLoader');
2626
markerLoader.addEventListener('change', handleImage, false);
2727

2828
function handleImage(e) {
29-
nameWithExt = e.target.files[0].name;
29+
let nameWithExt = e.target.files[0].name;
3030
if (e.target.files.length == 3) {
3131
console.log("NFT marker uploaded: " + nameWithExt);
3232

33-
name = nameWithExt.substr(0, nameWithExt.lastIndexOf('.'));
33+
const name = nameWithExt.substr(0, nameWithExt.lastIndexOf('.'));
3434

3535
let ext = nameWithExt.substr(nameWithExt.lastIndexOf('.'));
3636

‎example/example.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎example/example_es6.html‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<!-- copyright @kalwalt @webarkit see LICENSE.txt -->
4+
45
<head>
56
<meta charset="utf-8">
67
<title>A simple example for displaying a Feature Set file</title>
@@ -13,22 +14,24 @@ <h1>FeatureSET-Display</h1>
1314
<p>Feature points: light green circles</p>
1415
<p>FeatureSet3 points: tiny red circles</p>
1516
</div>
16-
<script type="text/javascript" src="../dist/ARFset.js"></script>
17-
18-
<script>
19-
var ar = new ARFset.ARFset();
20-
console.log(ar);
21-
ar.initialize()
22-
.then((e) => {
23-
console.log(e);
24-
ar.loadNFTMarker('data/pinball', (nft) => {
25-
console.log(nft);
26-
});
27-
document.addEventListener('nftMarker', (ev) => {
28-
29-
})
30-
ar.display();
31-
})
17+
18+
<script type="module">
19+
import ARFsetModule from '../dist/ARFset.js';
20+
window.ARFset = ARFsetModule;
21+
var ar = new ARFset.ARFset();
22+
console.log(ar);
23+
ar.initialize()
24+
.then((e) => {
25+
console.log(e);
26+
ar.loadNFTMarker('data/pinball', (nft) => {
27+
console.log(nft);
28+
});
29+
document.addEventListener('nftMarker', (ev) => {
30+
31+
})
32+
ar.display();
33+
})
3234
</script>
3335
</body>
36+
3437
</html>

0 commit comments

Comments
 (0)