arcs / arcs.js-components

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
77e9db5a 1 parent 6be5e111

updated components according to last state of components in app-startline

Inline Side-by-side
Showing 11 changed files with 392 additions and 41 deletions
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
var Animator;
......
import ARCS from '../engine/arcs.js';
let DownloadData = ARCS.Component.create(
function(config) {
config = config || name;
let filename = config.filename || 'log.json';
let mimeType = config.mimeType || 'application/json';
let raw = config.raw || false;
this.download = function(data) {
let blob = new Blob(
[raw?data:JSON.stringify(data)], {type: mimeType}
);
const a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = filename;
a.click();
};
},
["download"],
[]
);
export default { DownloadData: DownloadData};
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
let Logger;
var Logger;
const indexedDB = window.indexedDB;
var indexedDB = window.indexedDB;
// two modes: websockets or indexeddb
// the idea is to add a timestamp as well as a timestamp for the start of
......@@ -21,6 +21,9 @@ const indexedDB = window.indexedDB;
// the goal of this function is to transform the object into a structured
// data compliant with the logger
var toStructuredData = function( obj) {
if (obj === undefined)
return;
var i, p, res;
if (obj instanceof Function) {
return undefined;
......@@ -72,7 +75,8 @@ Logger = ARCS.Component.create(
var ws;
var dbversion;
var request;
var openDatabase;
let openDatabase;
let extractDatabase;
if (typeof obj !== "object") {
console.error("[Logger] Wrong object structure at initialisation");
......@@ -93,8 +97,8 @@ Logger = ARCS.Component.create(
return;
}
var openDatabase = function ( version ) {
var request = indexedDB.open(dbconfig.name, version);
openDatabase = function ( version ) {
let request = indexedDB.open(dbconfig.name, version);
request.onerror = function(event) {
console.error("[Logger] Could not open database " + dbconfig.name);
};
......@@ -108,7 +112,7 @@ Logger = ARCS.Component.create(
openDatabase(dbversion+1);
} else {
if (dbconfig.clear) {
var request2 = db.transaction([dbconfig.table],"readwrite").objectStore(dbconfig.table).clear();
let request2 = db.transaction([dbconfig.table],"readwrite").objectStore(dbconfig.table).clear();
request2.onsuccess = function(event) {
self.emit("onDatabaseReady");
};
......@@ -122,16 +126,25 @@ Logger = ARCS.Component.create(
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore(dbconfig.table, { autoIncrement : true});
const objectStore = db.createObjectStore(dbconfig.table, { autoIncrement : true});
objectStore.createIndex("timestamp", "timestamp", {unique : false});
objectStore.createIndex("event", "event", { unique: false});
};
};
// the line below should be called later
//openDatabase();
extractDatabase = function() {
let request = db.transaction([dbconfig.table], "readonly")
.objectStore(dbconfig.table).getAll();
request.onsuccess = function(event) {
self.emit("sendLogs",request.result);
};
request.onerror = function(event) {
console.error("[logger] Could not extract logs");
};
};
}
if (obj.slots != undefined) {
var arr = obj.slots;
for (i=0; i< arr.length; i++) {
......@@ -174,11 +187,22 @@ Logger = ARCS.Component.create(
}
}
// few things should be located inside an init slot
// this is mainly the preparation of the websocket client
// and the preparation of the database.
// the idea is to start a little bit later events that could be sent
this.initialise = function() {
this.extract = function() {
if (extractDatabase !== undefined) {
extractDatabase();
}
};
/**
* Initializes logging facility. This is mainly database and/or websocket
* client setup.
* @slot
* @function Logger#init
* @emits onDatabaseReady
* @emits onSocketReady
*/
this.init = function() {
if (openDatabase !== undefined) {
openDatabase();
}
......@@ -202,8 +226,20 @@ Logger = ARCS.Component.create(
};
},
["initialise"],
[ "onDatabaseReady","onSocketReady"]
["init","extract"],
[ "onDatabaseReady","onSocketReady","sendLogs"]
);
/**
* emitted when a indexed database is ready for logging
* @function Logger#onDatabaseReady
* @signal
*/
/**
* emitted when websocket client is ready to emit data
* @function Logger#onSocketReady
* @signal
*/
export default { Logger: Logger };
......
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
import POS from '../deps/pose/square_pose.js';
var MarkerLocator;
......@@ -6,7 +6,10 @@ var MarkerLocator;
MarkerLocator = ARCS.Component.create(
function () {
var square_pose = new POS.SquareFiducial();
let square_pose = new POS.SquareFiducial();
let width = 320;
let height = 240;
this.setFocalLength = function (focalLength) {
square_pose.setFocalLength(focalLength);
......@@ -19,29 +22,45 @@ MarkerLocator = ARCS.Component.create(
this.setIntrinsics = function (intrinsics) {
square_pose.setMatrix(intrinsics);
};
this.setCameraMatrix = function(cameraMatrix) {
let p = cameraMatrix;
square_pose.setMatrix([
width / 2 * p[0], 0, (1-p[8])*width/2,
0, height / 2 * p[5],(1-p[9])*height/2,
0, 0, 1
]);
};
this.setImageSize = function(w, h) {
width = w;
height = h;
};
this.setImageSource = function (id) {
var imageSource = document.getElementById(id);
let imageSource = document.getElementById(id);
if (id === undefined) {
return;
}
var imageSourceStyle = window.getComputedStyle(imageSource);
square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
let imageSourceStyle = window.getComputedStyle(imageSource);
width = parseInt(imageSourceStyle.width);
height = parseInt( imageSourceStyle.height);
square_pose.setImageSize(width,height);
};
this.locateMarkers = function (markers) {
var k, pose;
let k, pose;
for (k=0; k < markers.length; k++) {
corners = markers[k].corners;
let corners = markers[k].corners;
markers[k].pose = square_pose.pose(corners);
}
this.emit("onLocatedMarkers",markers);
};
},
['locateMarkers','setFocalLength','setModelSize','setImageSource'],
['locateMarkers','setFocalLength','setModelSize','setImageSource','setImageSize'],
['onLocatedMarkers']
);
......
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
import * as THREE from '../deps/three.js/index.js';
import { OBJLoader } from '../deps/objloader/objloader.js';
import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
import { OBJLoader } from '../deps/objloader/index.js';
import { MTLLoader } from '../deps/mtlloader/index.js';
//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
......@@ -20,8 +20,8 @@ internalOBJLoader = ARCS.Component.create(
self.emit("onLoad", obj);
};
var onLoadJSON = function(geom, mat) {
innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
var onLoadJSON = function(innerObject/*geom, mat*/) {
//innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
self.emit("onLoad", innerObject);
};
......
import ARCS from '../engine/arcs.js';
import * as THREE from '../deps/three.js/index.js';
let PoseOffset;
PoseOffset = ARCS.Component.create(
function(config) {
let self = this;
config = config || {};
let pos, rot;
if (!config.position ) {
pos = new THREE.Vector3(0,0,0);
} else {
pos = new THREE.Vector3(
config.position.x,
config.position.y,
config.position.z
);
}
//let pos = config.position || new THREE.Vector3(0, 0, 0);
rot = config.rotation || new THREE.Quaternion(0, 0, 0, 1);
let tAnchor = new THREE.Matrix4();
tAnchor.makeRotationFromQuaternion(rot);
tAnchor.setPosition(pos);
tAnchor.invert();
this.setMatrix = function(m) {
let mat = new THREE.Matrix4();
//console.log(m);
if (Array.isArray(m)) {
mat.fromArray(m);
//mat.transpose();
mat.invert();
} else {
mat.copy(m);
}
mat.multiply(tAnchor);
console.log("poseoffset.sendMatrix", mat);
self.emit('sendMatrix', mat);
};
},
['setMatrix'],
['sendMatrix']
);
export default { PoseOffset: PoseOffset};
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
let QRCodeDetector;
QRCodeDetector = ARCS.Component.create(
......@@ -20,7 +20,12 @@ QRCodeDetector = ARCS.Component.create(
let makeFromBarcodeReader = function(code) {
return {
id: code.rawValue,
corners: code.cornerPoints
corners: [
code.cornerPoints[3],
code.cornerPoints[2],
code.cornerPoints[1],
code.cornerPoints[0]
]
};
};
......@@ -32,8 +37,7 @@ QRCodeDetector = ARCS.Component.create(
let codes = await detector.detect(imageData);
for(const code of codes) {
if (code.format === 'qr_code') {
console.log(makeFromBarcodeReader(code));
this.emit('onQRCode', makeFromBarcodeReader(code));
this.emit('onQRCode', [ makeFromBarcodeReader(code)]);
}
}
};
......@@ -54,7 +58,7 @@ QRCodeDetector = ARCS.Component.create(
}
if (dataCache !== null) {
console.log("qrdata", makeFromJSQR(dataCache));
this.emit('onQRCode', makeFromJSQR(dataCache));
this.emit('onQRCode', [makeFromJSQR(dataCache)]);
}
};
}
......
import ARCS from '../engine/arcs.js';
import * as THREE from '../deps/three.js/index.js';
let Reticle;
const createGeometry = function(config) {
let reticle, geometry;
config = config ?? {};
let shape = config.shape ?? 'ring';
let size = config.size ?? 0.1;
let color = config.color ?? 'white';
let helper = config.helper ?? false;
let position = config.position ?? null;
switch(shape) {
case 'ring':
geometry = new THREE.RingGeometry(0.375*size,0.5*size, 32).rotateX(-Math.PI/2);
break;
case 'circle':
geometry = new THREE.CircleGeometry(0.5*size, 32).rotateX(-Math.PI/2);
break;
case 'square':
geometry = new THREE.PlaneGeometry(size, size);//.rotateX(-Math.PI/2);
break;
case 'contour':
const square = new THREE.PlaneGeometry(size, size).rotateX(-Math.PI/2);
geometry = new THREE.EdgesGeometry(square);
break;
case 'sphere':
geometry = new THREE.SphereGeometry(0.5*size,32,32);
break;
case 'cube':
geometry = new THREE.BoxGeometry(size, size, size).translateY(0.5*size);
break;
};
if (!geometry) {
reticle = new THREE.Object3D();
} else {
reticle = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial(
{color: color, side: THREE.DoubleSide, opacity:0.5, transparent: true}
));
}
if (helper) {
reticle.add(new THREE.AxesHelper(size));
}
if (position) {
reticle.position.x = position[0];
reticle.position.y = position[1];
reticle.position.z = position[2];
//reticle.rotation.x = Math.PI / 2;
}
return reticle;
};
Reticle = ARCS.Component.create(function(config) {
let reticle;
let self = this;
let hitTestSource = null;
let hitTestSourceRequested = false;
reticle = createGeometry(config);
reticle.visible = false;
reticle.matrixAutoUpdate = false;
this.hide = function() { reticle.visible = false;};
this.show = function() { reticle.visible = true; };
this.select = function() {
console.log("reticle select");
if (reticle.visible) {
self.emit('sendMatrix', reticle.matrix);
}
};
let rectifyMatrix = function(mat) {
console.log("position", mat[12], mat[13], mat[14]);
const lY = new THREE.Vector3(mat[4],mat[5],mat[6]);
const gY = new THREE.Vector3(0,1,0);
const lZ = gY;
const scal = lY.dot(gY);
if (scal < 0.01 && scal > -0.01) {
let lX = new THREE.Vector3();
lX.crossVectors(lY, lZ);
/*const newMat =*/ return [
lX.x, lX.y, lX.z, 0,
lY.x, lY.y, lY.z, 0,
lZ.x, lZ.y, lZ.z, 0,
mat[12], mat[13], mat[14], 1
];
//return newMat;
} else {
return mat;
}
};
this.update = function(time, camera, frame) {
if (!frame) return;
let manager = frame.manager;
let session = frame.session;
// in the case hit test has not been called
if (!frame.session.requestHitTestSource) return;
if (hitTestSourceRequested === false) {
frame.session.requestReferenceSpace("viewer").then( refSpace => {
frame.session.requestHitTestSource({ space: refSpace }).then(
src => hitTestSource = src
)
});
frame.session.addEventListener('end', () => {
hitTestSourceRequested = false;
hitTestSource = null;
});
hitTestSourceRequested = true;
}
if (hitTestSource) {
const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length) {
const hit = hitTestResults[0];
reticle.visible = true;
// Orientation obtained from the matrix is completely off.
// One can experiment to face the gimbal lock problem.
// This is due to the fact the idea is to get a ray,
// especially when in front of a wall
// In consequence, pose is rectified in such a case.
reticle.matrix.fromArray(
rectifyMatrix(
hit.getPose(manager.getReferenceSpace()).transform.matrix
)
);
} else {
reticle.visible = false;
}
}
};
this.init = function() {
self.emit('sendScene', reticle);
};
},
['init', 'update', 'select', 'hide', 'show'],
['sendScene', 'sendMatrix']
);
let StaticReticle = ARCS.Component.create(
function(config) {
let reticle;
let self = this;
reticle = createGeometry(config);
reticle.visible = true;
reticle.matrixAutoUpdate = true;
this.hide = function() { reticle.visible = false;};
this.show = function() { reticle.visible = true; };
this.select = function() {
if (reticle.visible) {
self.emit('sendMatrix', reticle.matrix);
}
};
this.update = function(time, camera, frame) {
console.log("static reticle", reticle.position);
};
this.init = function() {
self.emit('sendScene', reticle);
};
},
['init', 'update', 'select', 'hide', 'show'],
['sendScene', 'sendMatrix']
);
export default {Reticle: Reticle, StaticReticle: StaticReticle};
import ARCS from '../engine/arcs.js';
let Storage ;
Storage = ARCS.Component.create(
function(arr) {
let self = this;
let storage = {};
let capitalize = function(str) {
return str.substring(0,1).toUpperCase() + str.substring(1).toLowerCase();
};
if (!Array.isArray(arr)) {
console.error("[ARCS] Storage needs to be initialized with an array");
}
arr.forEach(
(elt) => {
let key = elt.toLowerCase();
let keyName = capitalize(elt);
storage[key] = null;
self.slot("set"+keyName, function() {
return (val) => { storage[key] = val; }
}());
self.slot("get"+keyName, function() {
return () => { self.emit("on"+keyName, storage[key]) };
}());
self.signal("on"+keyName);
}
);
}, [], []
);
export default {Storage : Storage};
import ARCS from '../build/arcs.js';
import ARCS from '../engine/arcs.js';
/* LiveSource browser compatibility :
* - Chrome: 53+
......
{
"name": "arcsjs-components",
"version": "0.9.1",
"version": "0.9.7",
"description": "Components for Augmented Reality Component System in web browser and node environment",
"homepage": "http://arcs.ibisc.fr",
"repository": {
......@@ -25,7 +25,7 @@
"author": "Jean-Yves Didier",
"license": "GPL-3.0-or-later",
"dependencies": {
"arcsjs": "^0.9.2",
"arcsjs": "^0.9.7",
"js-aruco": ">=0.1",
"jsqr": "^1.4.0",
"three": ">=0.131",
......