Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unecessary DOM elements in the lib #132

Merged
merged 7 commits into from
Mar 11, 2022
Merged

Remove unecessary DOM elements in the lib #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
134a33b
removing DOM ref from artoolkitNFT.api.js
kalwalt Mar 9, 2022
fba23a2
Merge branch 'dev' into remove-DOM-elements
kalwalt Mar 10, 2022
46eb074
rebuild libs after merge
kalwalt Mar 10, 2022
a7dacfa
fix for CI issue
kalwalt Mar 10, 2022
7ddb58c
cleaning the code and rebuilding libs
kalwalt Mar 10, 2022
7a807af
removing DOM snippets/references
kalwalt Mar 10, 2022
f88ef4b
build dist lib
kalwalt Mar 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,095 changes: 2,547 additions & 2,548 deletions build/artoolkitNFT.debug.js
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions build/artoolkitNFT.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/artoolkitNFT_ES6_wasm.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/artoolkitNFT_wasm.js
View file
Open in desktop

Large diffs are not rendered by default.

4,269 changes: 2 additions & 4,267 deletions dist/ARToolkitNFT.js
View file
Open in desktop

Large diffs are not rendered by default.

83 changes: 4 additions & 79 deletions js/artoolkitNFT.api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
var scope;
if (typeof window !== 'undefined') {
scope = window;
} else if (typeof global !== 'undefined') {
scope = global;
} else {
scope = self;
}
Expand Down Expand Up @@ -35,18 +37,8 @@
this.id = undefined;
var w = width, h = height;

this.orientation = 'landscape';

this.listeners = {};

if (typeof width !== 'number') {
var image = width;
cameraPara = height;
w = image.videoWidth || image.width;
h = image.videoHeight || image.height;
this.image = image;
}

this.width = w;
this.height = h;

Expand All @@ -56,13 +48,6 @@
this.transform_mat = new Float32Array(16);
this.transformGL_RH = new Float64Array(16);

if (typeof document !== 'undefined') {
this.canvas = document.createElement('canvas');
this.canvas.width = w;
this.canvas.height = h;
this.ctx = this.canvas.getContext('2d');
}

this.videoWidth = w;
this.videoHeight = h;
this.videoSize = this.videoWidth * this.videoHeight;
Expand Down Expand Up @@ -214,10 +199,6 @@
});
}
}

/* if (this._bwpointer) {
this.debugDraw();
}*/
};
/**
Detects the NFT markers in the process() function,
Expand Down Expand Up @@ -309,14 +290,6 @@
The debug canvas is added to document.body.
*/
ARControllerNFT.prototype.debugSetup = function () {
/*document.body.appendChild(this.canvas);

var lumaCanvas = document.createElement('canvas');
lumaCanvas.width = this.canvas.width;
lumaCanvas.height = this.canvas.height;
this._lumaCtx = lumaCanvas.getContext('2d');
document.body.appendChild(lumaCanvas);*/

this.setDebugMode(true);
this._bwpointer = this.getProcessingImage();
};
Expand Down Expand Up @@ -699,41 +672,6 @@
return artoolkitNFT.getImageProcMode(this.id);
};


/**
Draw the black and white image and debug markers to the ARControllerNFT canvas.

See setDebugMode.
@return 0 (void)
*/
/* ARControllerNFT.prototype.debugDraw = function () {
var debugBuffer = new Uint8ClampedArray(Module.HEAPU8.buffer, this._bwpointer, this.framesize);
var id = new ImageData(new Uint8ClampedArray(this.canvas.width * this.canvas.height * 4), this.canvas.width, this.canvas.height);
for (var i = 0, j = 0; i < debugBuffer.length; i++ , j += 4) {
var v = debugBuffer[i];
id.data[j + 0] = v;
id.data[j + 1] = v;
id.data[j + 2] = v;
id.data[j + 3] = 255;
}
this.ctx.putImageData(id, 0, 0)

//Debug Luma
var lumaBuffer = new Uint8ClampedArray(this.framesize);
lumaBuffer.set(this.videoLuma);
var lumaImageData = new ImageData(lumaBuffer, this.videoWidth, this.videoHeight);
this._lumaCtx.putImageData(lumaImageData, 0, 0);

var marker_num = this.getMarkerNum();
for (var i = 0; i < marker_num; i++) {
this._debugMarker(this.getMarker(i));
}
if (this.transform_mat && this.transformGL_RH) {
console.log("GL 4x4 Matrix: " + this.transform_mat);
console.log("GL_RH 4x4 Mat: " + this.transformGL_RH);
}
};*/

// private methods

/**
Expand Down Expand Up @@ -784,26 +722,13 @@
*/
ARControllerNFT.prototype._copyImageToHeap = function (image) {
if (!image) {
image = this.image;
console.error("Error: no provided imageData to ARControllerNFT");
return;
}
if (image.data) {

var imageData = image;

} else {
this.ctx.save();

if (this.orientation === 'portrait') {
this.ctx.translate(this.canvas.width, 0);
this.ctx.rotate(Math.PI / 2);
this.ctx.drawImage(image, 0, 0, this.canvas.height, this.canvas.width); // draw video
} else {
this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
}

this.ctx.restore();

var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
}
var data = imageData.data; // this is of type Uint8ClampedArray: The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0-255 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)

Expand Down
112 changes: 10 additions & 102 deletions src/ARControllerNFT.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,6 @@
*/
import ARToolkitNFT from "./ARToolkitNFT";

interface Options {
canvas: null;
orientation: string;
}

interface ImageObj extends HTMLCanvasElement {
videoWidth: number;
width: number;
Expand Down Expand Up @@ -118,12 +113,9 @@ interface delegateMethods {

export default class ARControllerNFT {
// private declarations
private options = {} as Options;
private id: number;
private width: number;
private height: number;
private image: any;
private orientation: string;
private cameraParam: string;
private cameraId: number;
private cameraLoaded: boolean;
Expand All @@ -142,8 +134,6 @@ export default class ARControllerNFT {
private videoLuma: Uint8Array;
private camera_mat: Float64Array;
private videoLumaPointer: number;
private canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D;
private nftMarkerFound: boolean; // = false
private nftMarkerFoundTime: number;
private nftMarkerCount: number; // = 0
Expand All @@ -154,29 +144,19 @@ export default class ARControllerNFT {
/**
* The ARControllerNFT constructor. It has 4 params (see above).
* These properties are initialized:
* options, id, width, height, image, orientation, cameraParam, cameraId,
* id, width, height, cameraParam, cameraId,
* cameraLoaded, artoolkitNFT, listeners, nftMarkers, transform_mat,
* transformGL_RH, marker_transform_mat, videoWidth, videoHeight, videoSize,
* framepointer, framesize, dataHeap, videoLuma, camera_mat, videoLumaPointer
* @param {number} width
* @param {number} height
* @param {string} cameraParam
* @param {object} options
*/
constructor(
width: number,
height: number,
cameraParam: string,
options?: object
cameraParam: string
) {
// read settings
this.options = {
...{
canvas: null,
orientation: "landscape",
},
...options,
};

// no point in initializing a member as "undefined"
// replaced it with -1
Expand All @@ -185,12 +165,6 @@ export default class ARControllerNFT {
this.width = width;
this.height = height;

// holds an image in case the instance was initialized with an image
this.image;

// default camera orientation
this.orientation = this.options.orientation;

// this is a replacement for ARCameraParam
this.cameraParam = cameraParam;
this.cameraId = -1;
Expand Down Expand Up @@ -219,21 +193,6 @@ export default class ARControllerNFT {
this.camera_mat = null;
this.videoLumaPointer = null;

if (this.options.canvas) {
// in case you use Node.js, create a canvas with node-canvas
this.canvas = this.options.canvas;
} else if (typeof document !== "undefined") {
// try creating a canvas from document
this.canvas = document.createElement("canvas") as HTMLCanvasElement;
}
if (this.canvas) {
this.canvas.width = width;
this.canvas.height = height;
this.ctx = this.canvas.getContext("2d");
} else {
console.warn("No canvas available");
}

// this is to workaround the introduction of "self" variable
this.nftMarkerFound = false;
this.nftMarkerFoundTime = 0;
Expand All @@ -246,41 +205,36 @@ export default class ARControllerNFT {
static async initWithDimensions(
width: number,
height: number,
cameraParam: string,
options?: object
cameraParam: string
) {
// directly init with given width / height
const arControllerNFT = new ARControllerNFT(
width,
height,
cameraParam,
options
cameraParam
);
return await arControllerNFT._initialize();
}

static async initWithImage(
image: ImageObj,
cameraParam: string,
options?: object
cameraParam: string
) {
const width = image.videoWidth || image.width;
const height = image.videoHeight || image.height;
const arControllerNFT = new ARControllerNFT(
width,
height,
cameraParam,
options
);
arControllerNFT.image = image;
return await arControllerNFT._initialize();
}

/**
* This is one of the most important method inside ARControllerNFT. It detect the marker
* and dispatch internally with the getNFTMarker event listener the NFTMarkerInfo
* struct object of the tracked NFT Markers.
* @param {image} image or image data
* @param {image} image data
* @return {void}
*/
process(image: ImageObj) {
Expand Down Expand Up @@ -350,10 +304,6 @@ export default class ARControllerNFT {
}
}
}

/*if (this._bwpointer) {
this.debugDraw()
}*/
}

/**
Expand Down Expand Up @@ -404,7 +354,7 @@ export default class ARControllerNFT {
* structures with information on each detected marker, followed by a step in which
* detected markers are possibly examined for some measure of goodness of match (e.g. by
* examining the match confidence value) and pose extraction.
* @param {image} Image to be processed to detect markers.
* @param {image} Image data to be processed to detect markers.
* @return {number} 0 if the function proceeded without error, or a value less than 0 in case of error.
* A result of 0 does not however, imply any markers were detected.
*/
Expand Down Expand Up @@ -486,18 +436,9 @@ export default class ARControllerNFT {
//----------------------------------------------------------------------------

/**
* Sets up a debug canvas for the AR detection.
* Draws a red marker on top of each detected square in the image.
* The debug canvas is added to document.body.
* Sets up for debugging AR detection.
*/
debugSetup() {
if (typeof document === "undefined") {
console.log("debugSetup() currently only supports Browser environments");
return;
}

document.body.appendChild(this.canvas);

this.setDebugMode(true);
this._bwpointer = this.getProcessingImage();
}
Expand Down Expand Up @@ -916,7 +857,8 @@ export default class ARControllerNFT {
private _copyImageToHeap(sourceImage: ImageObj) {
if (!sourceImage) {
// default to preloaded image
sourceImage = this.image;
console.error("Error: no provided imageData to ARControllerNFT");
return;
}

// this is of type Uint8ClampedArray:
Expand All @@ -928,40 +870,6 @@ export default class ARControllerNFT {
if (sourceImage.data) {
// directly use source image
data = sourceImage.data;
} else {
this.ctx.save();

if (this.orientation === "portrait") {
this.ctx.translate(this.canvas.width, 0);
this.ctx.rotate(Math.PI / 2);
//@ts-ignore
this.ctx.drawImage(
sourceImage,
0,
0,
this.canvas.height,
this.canvas.width
); // draw video
} else {
//@ts-ignore
this.ctx.drawImage(
sourceImage,
0,
0,
this.canvas.width,
this.canvas.height
); // draw video
}

this.ctx.restore();

let imageData = this.ctx.getImageData(
0,
0,
this.canvas.width,
this.canvas.height
);
data = imageData.data;
}

// Here we have access to the unmodified video image. We now need to add the videoLuma chanel to be able to serve the underlying ARTK API
Expand Down
Loading