Skip to content

Commit

Permalink
es5 for every nft examples
Browse files Browse the repository at this point in the history
  • Loading branch information
nicolocarpignoli committed Jan 10, 2020
1 parent 4a2fd7b commit 2103d75
Show file tree
Hide file tree
Showing 10 changed files with 564 additions and 561 deletions.
12 changes: 6 additions & 6 deletions examples/nft_improved_worker/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,19 @@
<script src="main.js"></script>

<script>
let statsMain = new Stats();
var statsMain = new Stats();
statsMain.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
statsMain.domElement.style.position = 'relative';
statsMain.domElement.style.left = '0px';
statsMain.domElement.style.top = '0px';
document.getElementById("stats1").appendChild(statsMain.dom);

let container = document.getElementById('container');
let video = document.getElementById('video');
let canvas_draw = document.getElementById('canvas_draw');
var container = document.getElementById('container');
var video = document.getElementById('video');
var canvas_draw = document.getElementById('canvas_draw');

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
let hint = {};
var hint = {};
if (isMobile()) {
hint = {
facingMode: {"ideal": "environment"},
Expand All @@ -48,7 +48,7 @@
navigator.mediaDevices.getUserMedia({video: hint}).then(function (stream) {
video.srcObject = stream;
video.play();
video.addEventListener("loadedmetadata", () => {
video.addEventListener("loadedmetadata", function() {
start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, () => statsMain.update());
});
});
Expand Down
78 changes: 39 additions & 39 deletions examples/nft_improved_worker/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ function isMobile() {
return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
}

let ar = null;
let markerResult = null;
var ar = null;
var markerResult = null;

let markers = {
var markers = {
"pinball": {
width: 1637,
height: 2048,
Expand All @@ -66,18 +66,18 @@ let markers = {
};

function start(container, marker, video, input_width, input_height, canvas_draw, render_update) {
let vw, vh;
let sw, sh;
let pscale, sscale;
let w, h;
let pw, ph;
let ox, oy;

let canvas_process = document.createElement('canvas');
let context_draw = canvas_draw.getContext('2d');
let context_process = canvas_process.getContext('2d');

let load = () => {
var vw, vh;
var sw, sh;
var pscale, sscale;
var w, h;
var pw, ph;
var ox, oy;

var canvas_process = document.createElement('canvas');
var context_draw = canvas_draw.getContext('2d');
var context_process = canvas_process.getContext('2d');

var load = function() {
vw = input_width;
vh = input_height;

Expand Down Expand Up @@ -105,10 +105,10 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
canvas_process.width = pw;
canvas_process.height = ph;

let param = new ARCameraParam('../Data/camera_para-iPhone 5 rear 640x480 1.0m.dat');
var param = new ARCameraParam('../Data/camera_para-iPhone 5 rear 640x480 1.0m.dat');
param.onload = function () {
ar = new ARController(pw, ph, param);
let cameraMatrix = ar.getCameraMatrix();
var cameraMatrix = ar.getCameraMatrix();

ar.addEventListener('getNFTMarker', function (ev) {
markerResult = {type: "found", matrixGL_RH: JSON.stringify(ev.data.matrixGL_RH), proj: JSON.stringify(cameraMatrix)};
Expand All @@ -123,15 +123,15 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
};
};

let lasttime = Date.now();
let time = 0;
var lasttime = Date.now();
var time = 0;

let x = 0;
let draw = () => {
var x = 0;
var draw = function() {
context_draw.clearRect(0, 0, vw, vh);
render_update();
let now = Date.now();
let dt = now - lasttime;
var now = Date.now();
var dt = now - lasttime;
time += dt;
lasttime = now;

Expand All @@ -142,10 +142,10 @@ function start(container, marker, video, input_width, input_height, canvas_draw,


if (!markerResult) return;
let proj = JSON.parse(markerResult.proj);
let world = JSON.parse(markerResult.matrixGL_RH);
var proj = JSON.parse(markerResult.proj);
var world = JSON.parse(markerResult.matrixGL_RH);

let mat = multiplyMatrices(proj, world);
var mat = multiplyMatrices(proj, world);

function glpointToCanvas(xyz) {
return {
Expand All @@ -154,22 +154,22 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
}
}
function drawpoint(x, y, z) {
let r = transformPoint(mat, {x: x, y: y, z: z});
let c = glpointToCanvas(r);
var r = transformPoint(mat, {x: x, y: y, z: z});
var c = glpointToCanvas(r);
return c;
}

let width = marker.width;
let height = marker.height;
let dpi = marker.dpi;
var width = marker.width;
var height = marker.height;
var dpi = marker.dpi;

let w = width / dpi * 2.54 * 10;
let h = height / dpi * 2.54 * 10;
var w = width / dpi * 2.54 * 10;
var h = height / dpi * 2.54 * 10;

let p1 = drawpoint(0, 0, 0);
let p2 = drawpoint(w, 0, 0);
let p3 = drawpoint(w, h, 0);
let p4 = drawpoint(0, h, 0);
var p1 = drawpoint(0, 0, 0);
var p2 = drawpoint(w, 0, 0);
var p3 = drawpoint(w, h, 0);
var p4 = drawpoint(0, h, 0);
context_draw.beginPath();
context_draw.moveTo(p1.x, p1.y);
context_draw.lineTo(p2.x, p2.y);
Expand All @@ -186,11 +186,11 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
context_process.drawImage(video, 0, 0, vw, vh, ox, oy, w, h);
markerResult = null;
if (ar) {
let imageData = context_process.getImageData(0, 0, pw, ph);
var imageData = context_process.getImageData(0, 0, pw, ph);
ar.process(imageData);
}
}
let tick = () => {
var tick = function() {
process();
draw();
requestAnimationFrame(tick);
Expand Down
Loading

0 comments on commit 2103d75

Please sign in to comment.