arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
b0151d21 1 parent 7739d80d

Three.js components now using javascript modules

Inline Side-by-side
Showing 20 changed files with 895 additions and 846 deletions
1 module.exports = function (grunt) { 1 module.exports = function (grunt) {
2 "use strict"; 2 "use strict";
3 +
4 + let shim = function(obj) { return `\nexport default ${obj};\n`; };
3 5
4 // Project configuration. 6 // Project configuration.
5 grunt.initConfig({ 7 grunt.initConfig({
...@@ -80,6 +82,37 @@ module.exports = function (grunt) { ...@@ -80,6 +82,37 @@ module.exports = function (grunt) {
80 } 82 }
81 83
82 }, 84 },
85 + file_append: {
86 + default_options: {
87 + files: [
88 + {
89 + append: shim('AR'),
90 + prepend: `import CV from '../cv/index.js';\n`,
91 + input: './deps/aruco/index.js'
92 + },
93 + {
94 + append: shim('CV'),
95 + input: './deps/cv/index.js'
96 + }
97 + ]
98 + }
99 + },
100 + 'string-replace': {
101 + dist: {
102 + files: {
103 + 'deps/objloader/objloader.js': 'deps/objloader/index.js',
104 + 'deps/mtlloader/mtlloader.js': 'deps/mtlloader/index.js',
105 + 'deps/ddsloader/ddsloader.js': 'deps/ddsloader/index.js'
106 + },
107 + options: {
108 + replacements:[{
109 + pattern: '../../../build/three.module.js',
110 + replacement: '../three.js/index.js'
111 + }]
112 + }
113 +
114 + }
115 + },
83 concat: { 116 concat: {
84 dist: { 117 dist: {
85 src: [ 118 src: [
...@@ -122,9 +155,13 @@ module.exports = function (grunt) { ...@@ -122,9 +155,13 @@ module.exports = function (grunt) {
122 grunt.loadNpmTasks('grunt-jslint'); 155 grunt.loadNpmTasks('grunt-jslint');
123 grunt.loadNpmTasks('grunt-terser'); 156 grunt.loadNpmTasks('grunt-terser');
124 grunt.loadNpmTasks('grunt-bower-task'); 157 grunt.loadNpmTasks('grunt-bower-task');
158 + grunt.loadNpmTasks('grunt-file-append');
159 + grunt.loadNpmTasks('grunt-string-replace');
125 160
126 // Default task(s). 161 // Default task(s).
127 grunt.registerTask('default', ['concat','copy','terser']); 162 grunt.registerTask('default', ['concat','copy','terser']);
128 grunt.registerTask('lint', ['jslint']); 163 grunt.registerTask('lint', ['jslint']);
129 grunt.registerTask('doc', ['jsdoc']); 164 grunt.registerTask('doc', ['jsdoc']);
165 + grunt.registerTask('install-deps', ['bower', 'file_append', 'string-replace']);
166 +
130 }; 167 };
......
1 { 1 {
2 "name": "ARCS", 2 "name": "ARCS",
3 - "version": "0.1.0", 3 + "version": "0.2.0",
4 "description": "Augmented Reality Component System in web browser and node environment", 4 "description": "Augmented Reality Component System in web browser and node environment",
5 "main": "build/arcs.js", 5 "main": "build/arcs.js",
6 "keywords": [ 6 "keywords": [
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
11 "license": "GPL", 11 "license": "GPL",
12 "dependencies": { 12 "dependencies": {
13 "tracking.js": "*", 13 "tracking.js": "*",
14 - "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r68/build/three.min.js", 14 + "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r116/build/three.module.js",
15 - "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJLoader.js", 15 + "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/OBJLoader.js",
16 - "mtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/MTLLoader.js", 16 + "mtlloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/MTLLoader.js",
17 - "objmtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJMTLLoader.js", 17 + "ddsloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/DDSLoader.js",
18 "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js", 18 "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
19 "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js", 19 "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
20 "codemirror" : "*", 20 "codemirror" : "*",
......
1 -var ARCS=ARCS||{};ARCS.isInNode=function(){return"function"==typeof require&&require.resolve},ARCS.Component={SourceIsNotComponent:{message:"Source is not a component"},UndefinedSignal:{message:"Signal is not defined"},UndefinedSlot:{message:"Slot is not defined"},create:function(n,t,e){return void 0===n.prototype?(console.error("Cannot create such a component"),0):(n.prototype.slots=[],n.prototype.signals={},n.slotList=function(){return n.prototype.slots},n.prototype.slotList=function(){return n.prototype.slots},n.prototype.signalList=function(){var t,e=[];for(t in n.prototype.signals)e.push(t);return e},n.signalList=function(){return n.prototype.signalList()},n.prototype.emit=function(n){var t,e,o,i=Array.prototype.slice.call(arguments,1);for(t in this.signals[n])e=this.signals[n][t].func,o=this.signals[n][t].obj,e.apply(o,i)},n.slot=function(t,e){var o;if(t instanceof Array)for(o=0;o<t.length;o++)n.prototype.slots.push(t[o]);else n.prototype.slots.push(t),void 0!==e&&(n.prototype[t]=e)},n.signal=function(t){var e;if(t instanceof Array)for(e=0;e<t.length;e++)n.prototype.signals[t[e]]=1;else n.prototype.signals[t]=1},void 0!==t&&n.slot(t),void 0!==e&&n.signal(e),n)},check:function(n){return void 0!==n.prototype&&(void 0!==n.prototype.signals&&void 0!==n.prototype.slots)},connect:function(n,t,e,o){var i,r;if(void 0===n.signals)throw ARCS.Component.SourceIsNotComponent;if(void 0===n.signals[t])throw ARCS.Component.UndefinedSignal;if(void 0===e[o])throw ARCS.Component.UndefinedSlot;if(!n.hasOwnProperty("signals"))for(r in i=n.signals,n.signals={},i)n.signals[r]=[];n.signals[t].push({obj:e,func:e[o]})},disconnect:function(n,t,e,o){var i;for(i=0;i<n.signals[t].length;i++)n.signals[t][i].obj===e&&n.signals[t][i].func===e[o]&&(n.signals[t].splice(i,1),i--)},invoke:function(n,t,e){if(void 0===n[t])throw ARCS.Component.UndefinedSlot;n[t].apply(n,e)},config:function(n,t){"function"==typeof n.config&&n.config(t)}},ARCS.Context=function(n){var t={},e={},o={},i=[],r=this;if(o.StateMachine=ARCS.Statemachine,void 0!==n){var s;for(s in i=n.libraries,n.components)n.components.hasOwnProperty(s)&&(t[s]=n.components[s]);if(void 0!==n.constants)for(s in n.constants)n.constants.hasOwnProperty(s)&&(e[s]=n.constants[s])}var c=async function(n){return ARCS.isInNode()?new Promise((function(t,e){var o=require(n);void 0!==o?t(o):e("[ARCS] File not found")})):(await fetch(n)).json()},a=function(){var n,r=[];for(n in t)if(t.hasOwnProperty(n)){if(void 0===o[t[n].type])return console.error("[ARCS] Factory "+t[n].type+" not found."),void console.error("[ARCS] Context dump follows: ",i,t,e);var s=o[t[n].type];try{if(void 0!==t[n].value||void 0!==t[n].url||void 0!==t[n].ref){if(void 0!==t[n].value&&(t[n].instance=new s(t[n].value)),void 0!==t[n].url){console.log("loading data file",t[n].url),r.push(c(t[n].url).then(function(n,e){return function(o){return console.log("instanciating from data file"),t[n].instance=new e(o),Promise.resolve()}}(n,s)))}void 0!==t[n].ref&&void 0!==e[t[n].ref]&&(t[n].instance=new s(e[t[n].ref]))}else t[n].instance=new s}catch(t){console.error("[ARCS] Component of type ",n," not instanciated.",t)}}return Promise.all(r)};this.loadLibrary=function(n,t){var e=n,o=n;return ARCS.Context.currentContext=r,"string"!=typeof n&&(o=n.name,e=n.url),i.indexOf(o)<0&&i.push(o),import(e).then((function(n){for(s in n.default)n.default.hasOwnProperty(s)&&ARCS.Context.currentContext.setFactory(s,n.default[s]);void 0!==t&&t()})).catch((function(n){console.error("[ARCS] Trouble loading '",e,"' with reason -",n)}))},this.getComponentList=function(){var n,e=Object.keys(t);for(n=0;n<e.length;n++)t.hasOwnProperty(e[n])||e.splice(n--,1);return e},this.getConstant=function(n){return e[n]},this.getComponentType=function(n){if(void 0!==t[n])return t[n].type},this.getComponentValue=function(n){if(void 0!==t[n])return t[n].value},this.getComponent=function(n){if(void 0!==t[n])return t[n].instance},this.getComponentName=function(n){var e,o;for(o=t.getComponentList(),e=0;e<o.length;e++)if(t[o[e]].instance===n)return o[e]},this.setFactory=function(n,t){o[n]=t},this.toJSON=function(){var n,e={};for(n in t)t.hasOwnProperty(n)&&(e[n]={type:t[n].type,value:t[n].value});return e},this.setComponentValue=function(n,e){t[n].value=e},this.addComponent=function(n,e,i){var r;t[n]={},t[n].type=e,t[n].value=i;var s=o[e];void 0!==s&&(r=new s(i)),t[n].instance=r},this.removeComponent=function(n){delete t[n]},this.getFactory=function(n){return o[n]},this.getFactoryList=function(){return Object.keys(o)},this.instanciate=function(){return function(){var n;ARCS.Context.currentContext=r;var t=[];for(n=0;n<i.length;n++)t.push(r.loadLibrary(i[n]));return Promise.all(t)}().then(a).catch((function(n){console.error("[ARCS] Trouble instanciating context",n)}))};var u=function(n,t){var e,o=Object.create(t);for(e in n)n.hasOwnProperty(e)&&(o[e]=n[e]);return o};this.chain=function(n,i,r){return[u(n,t),u(i,e),u(r,o)]},this.setParent=function(n){if(void 0!==n){var i=n.chain(t,e,o);t=i[0],e=i[1],o=i[2]}}},ARCS.Context.currentContext=null,ARCS.Invocation=function(n,t,e){this.getDestination=function(){return n},this.getSlot=function(){return t},this.getValue=function(){return e},this.invoke=function(){var o=n[t];void 0!==o?o.apply(n,e):console.error("Undefined slot %s of component %s",t,n)}},ARCS.Invocation.cast=function(n,t){if(void 0!==n.value){var e=t.getComponent(n.destination);return void 0===e&&console.error("[ARCS] Destination ",n.destination," is undefined"),new ARCS.Invocation(e,n.slot,n.value)}if(void 0!==n.ref)return new ARCS.Invocation(t.getComponent(n.destination),n.slot,t.getConstant(n.ref))},ARCS.Invocation.PRE_CONNECTION=0,ARCS.Invocation.POST_CONNECTION=1,ARCS.Invocation.CLEAN_UP=2,ARCS.Connection=function(n,t,e,o){this.connect=function(){try{ARCS.Component.connect(n,t,e,o)}catch(i){console.log(i,n,t,e,o)}},this.disconnect=function(){ARCS.Component.disconnect(n,t,e,o)},this.getSource=function(){return n},this.getDestination=function(){return e},this.getSlot=function(){return o},this.getSignal=function(){return t}},ARCS.Connection.cast=function(n,t){return new ARCS.Connection(t.getComponent(n.source),n.signal,t.getComponent(n.destination),n.slot)},ARCS.Sheet=function(n){var t,e,o,i,r,s=new ARCS.Context,c=[],a=[],u=[],f=[],l=0,p=0,h=0,C=0;t=function(){var n;for(n=0;n<c.length;n++)c[n].invoke()},e=function(){var n;for(n=0;n<a.length;n++)a[n].invoke()},o=function(){var n;for(n=0;n<u.length;n++)u[n].invoke()},i=function(){var n;for(n=0;n<f.length;n++)f[n].connect()},r=function(){var n;for(n=0;n<f.length;n++)f[n].disconnect()},this.setContext=function(n){s=n},this.activate=function(){s.instanciate().then((function(){t(),i(),e()}))},this.deactivate=function(){r(),o()},this.addPreConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=l++,c.push(t),t.id},this.addPostConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=p++,a.push(t),t.id},this.addCleanup=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=h++,u.push(t),t.id},this.addConnection=function(n){var t=ARCS.Connection.cast(n,s);return t.id=C++,f.push(t),t.id};var d=function(n,t){for(var e=t.length;e--&&t[e].id!==n;);e>=0?t.splice(e,1):console.warn("Could not remove data with id",n)};this.removePreConnection=function(n){d(n,c)},this.removePostConnection=function(n){d(n,a)},this.removeCleanup=function(n){d(n,u)};var v=function(n,t,e){for(var o=e.length;o--&&e[o].id!==n;);o>=0&&(e[o].value=t)};this.changePreConnection=function(n,t){v(n,t,c)},this.changePostConnection=function(n,t){v(n,t,a)},this.changeCleanup=function(n,t){v(n,t,u)},this.removeConnection=function(n){d(n,f)};var g=function(n,t,e){for(var o,i=e.length,r=e.length;i--&&e[i].id!==n;);for(;r--&&e[r].id!==t;);i>=0&&r>=0&&(o=e[i],e[i]=e[r],e[r]=o,e[i].id=n,e[r].id=t)};this.swapConnections=function(n,t){g(n,t,f)},this.swapCleanups=function(n,t){g(n,t,u)},this.swapPreConnections=function(n,t){g(n,t,c)},this.swapPostConnections=function(n,t){g(n,t,a)};this.import=function(t){t.hasOwnProperty("context")&&(s=new ARCS.Context(t.context)).setParent(n),s.instanciate().then((function(){!function(n){var t=0,e=ARCS.Invocation.cast,o=ARCS.Connection.cast;for(t=0;t<n.preconnections.length;t++)c.push(e(n.preconnections[t],s));for(t=0;t<n.postconnections.length;t++)a.push(e(n.postconnections[t],s));for(t=0;t<n.cleanups.length;t++)u.push(e(n.cleanups[t],s));for(t=0;t<n.connections.length;t++)f.push(o(n.connections[t],s))}(t)}))};var S=function(n){return{destination:s.getComponentName(n.getDestination()),slot:n.getSlot(),value:n.getValue()}};this.toJSON=function(){var n,t,e=[],o=[],i=[],r=[];for(n=0;n<f.length;n++)i.push((t=f[n],{source:s.getComponentName(t.getSource()),signal:t.getSignal(),destination:s.getComponentName(t.getDestination()),slot:t.getSlot()}));for(n=0;n<c.length;n++)e.push(S(c[n]));for(n=0;n<a.length;n++)o.push(S(a[n]));for(n=0;n<u.length;n++)r.push(S(u[n]));return{preconnections:e,postconnections:o,connections:i,cleanups:r}},s.setParent(n)},ARCS.EventLogicParser=function(){function n(n,t,e,o,i,r){this.message=n,this.expected=t,this.found=e,this.offset=o,this.line=i,this.column=r,this.name="SyntaxError"}return function(n,t){function e(){this.constructor=n}e.prototype=t.prototype,n.prototype=new e}(n,Error),{SyntaxError:n,parse:function(t){var e,o=arguments.length>1?arguments[1]:{},i={},r={start:U},s=U,c=i,a=function(n,t){return[n].concat(t)},u=function(n){return{and:n}},f=function(n){return{or:n}},l=function(n){return n},p="(",h={type:"literal",value:"(",description:'"("'},C=")",d={type:"literal",value:")",description:'")"'},v=function(n){return[n]},g={type:"other",description:"id"},S=function(n){return n.trim()},A=/^[_a-zA-Z]/,m={type:"class",value:"[_a-zA-Z]",description:"[_a-zA-Z]"},y=/^[_a-zA-Z0-9]/,R={type:"class",value:"[_a-zA-Z0-9]",description:"[_a-zA-Z0-9]"},w="&",x={type:"literal",value:"&",description:'"&"'},P="|",O={type:"literal",value:"|",description:'"|"'},T=/^[ \r\n\t]/,N={type:"class",value:"[ \\r\\n\\t]",description:"[ \\r\\n\\t]"},b=0,k=0,F={line:1,column:1,seenCR:!1},I=0,E=[],L=0;if("startRule"in o){if(!(o.startRule in r))throw new Error("Can't start parsing from rule \""+o.startRule+'".');s=r[o.startRule]}function j(n){return k!==n&&(k>n&&(k=0,F={line:1,column:1,seenCR:!1}),function(n,e,o){var i,r;for(i=e;i<o;i++)"\n"===(r=t.charAt(i))?(n.seenCR||n.line++,n.column=1,n.seenCR=!1):"\r"===r||"\u2028"===r||"\u2029"===r?(n.line++,n.column=1,n.seenCR=!0):(n.column++,n.seenCR=!1)}(F,k,n),k=n),F}function _(n){b<I||(b>I&&(I=b,E=[]),E.push(n))}function q(e,o,i){var r=j(i),s=i<t.length?t.charAt(i):null;return null!==o&&function(n){var t=1;for(n.sort((function(n,t){return n.description<t.description?-1:n.description>t.description?1:0}));t<n.length;)n[t-1]===n[t]?n.splice(t,1):t++}(o),new n(null!==e?e:function(n,t){var e,o=new Array(n.length);for(e=0;e<n.length;e++)o[e]=n[e].description;return"Expected "+(n.length>1?o.slice(0,-1).join(", ")+" or "+o[n.length-1]:o[0])+" but "+(t?'"'+function(n){function t(n){return n.charCodeAt(0).toString(16).toUpperCase()}return n.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\x08/g,"\\b").replace(/\t/g,"\\t").replace(/\n/g,"\\n").replace(/\f/g,"\\f").replace(/\r/g,"\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g,(function(n){return"\\x0"+t(n)})).replace(/[\x10-\x1F\x80-\xFF]/g,(function(n){return"\\x"+t(n)})).replace(/[\u0180-\u0FFF]/g,(function(n){return"\\u0"+t(n)})).replace(/[\u1080-\uFFFF]/g,(function(n){return"\\u"+t(n)}))}(t)+'"':"end of input")+" found."}(o,s),o,s,i,r.line,r.column)}function U(){return D()}function D(){var n,t,e,o;if(n=b,(t=Z())!==i){if(e=[],(o=z())!==i)for(;o!==i;)e.push(o),o=z();else e=c;e!==i?(n,n=t=a(t,e)):(b=n,n=c)}else b=n,n=c;return n===i&&(n=Z()),n}function z(){var n,e;return n=b,function(){var n,e,o,r;n=b,(e=V())!==i?(38===t.charCodeAt(b)?(o=w,b++):(o=i,0===L&&_(x)),o!==i&&(r=V())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c);return n}()!==i&&(e=Z())!==i?(n,n=u(e)):(b=n,n=c),n===i&&(n=b,function(){var n,e,o,r;n=b,(e=V())!==i?(124===t.charCodeAt(b)?(o=P,b++):(o=i,0===L&&_(O)),o!==i&&(r=V())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c);return n}()!==i&&(e=Z())!==i?(n,n=f(e)):(b=n,n=c)),n}function Z(){var n,e,o,r;return n=b,(e=function(){var n,e,o;L++,n=b,e=b,(o=function(){var n,e,o,r,s;if(n=b,(e=V())!==i)if(A.test(t.charAt(b))?(o=t.charAt(b),b++):(o=i,0===L&&_(m)),o!==i){for(r=[],y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));s!==i;)r.push(s),y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));r!==i&&(s=V())!==i?n=e=[e,o,r,s]:(b=n,n=c)}else b=n,n=c;else b=n,n=c;return n}())!==i&&(o=t.substring(e,b));(e=o)!==i&&(n,e=S(e));L--,(n=e)===i&&(e=i,0===L&&_(g));return n}())!==i&&(n,e=l(e)),(n=e)===i&&(n=b,40===t.charCodeAt(b)?(e=p,b++):(e=i,0===L&&_(h)),e!==i&&(o=D())!==i?(41===t.charCodeAt(b)?(r=C,b++):(r=i,0===L&&_(d)),r!==i?(n,n=e=v(o)):(b=n,n=c)):(b=n,n=c)),n}function V(){var n,e;for(n=[],T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));e!==i;)n.push(e),T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));return n}if((e=s())!==i&&b===t.length)return e;throw e!==i&&b<t.length&&_({type:"end",description:"end of input"}),q(null,E,I)}}}(),ARCS.TokenEvent=function(){var n,t;this.promise=new Promise((function(e,o){n=e,t=o})),this.accept=function(){n()},this.abort=function(){t()}},ARCS.TransitionNetwork=function(){this.promise={},this.and=function(n){return this.promise=Promise.all([this.promise,n.promise]),this},this.or=function(n){return this.promise=Promise.race([this.promise,n.promise]),this}},ARCS.TransitionNetwork.build=function(n,t){var e,o,r;if("string"==typeof n){var s;t.hasOwnProperty(n)?s=t[n]:t[n]=s=new ARCS.TokenEvent;var c=new ARCS.TransitionNetwork;return c.promise=s.promise,c}for(e=ARCS.TransitionNetwork.build(n[0],t),i=1;i<n.length;i++)n[i].hasOwnProperty("and")?(r=ARCS.TransitionNetwork.build(n[i].and,t),o=e.and(r)):n[i].hasOwnProperty("or")?(r=ARCS.TransitionNetwork.build(n[i].or,t),o=e.or(r)):console.warn("[ARCS] Illegal tree"),e=o;return e},ARCS.Statemachine=new ARCS.Component.create((function(n){var t="",e="",o={},i="",r=this,s={},c={},a=function(n){var t;r.slots.indexOf(n)<0&&(r.slots.push(n),r[n]=(t=n,function(){r.setToken(t)}))},u=function(n){var t;if(o.hasOwnProperty(n))for(t in c={},o[n])o[n].hasOwnProperty(t)&&ARCS.TransitionNetwork.build(s[t],c).promise.then((function(){var e;for(e in c)c.hasOwnProperty(e)&&c[e].abort();u(o[n][t])}));i=n,r.emit("requestSheet",i),i===e&&r.emit("requestTermination")};this.setInitialState=function(n){i=t=n},this.setFinalState=function(n){e=n},this.addTransition=function(n,t,e){var i,r=/([A-Za-z_]\w*)/g;try{var c;if("string"==typeof(c=ARCS.EventLogicParser.parse(t)))a(c);else for(;null!==(i=r.exec(t));)a(i[0]);s[t]=c,void 0===o[n]&&(o[n]={}),o[n][t]=e}catch(n){}},this.setToken=function(n){c.hasOwnProperty(n)&&c[n].accept()},this.setTransitions=function(n){var t,e;for(t in n)if(n.hasOwnProperty(t))for(e in n[t])n[t].hasOwnProperty(e)&&this.addTransition(t,e,n[t][e])},this.start=function(){console.log("statemachine",this,t,n),u(t)},void 0!==n&&(t=n.initial,e=n.final,this.setTransitions(n.transitions),i="")}),["setToken"],["requestSheet","requestTermination"]),ARCS.Application=function(){var n,t=new ARCS.Context,e={},o={},i=[],r=this,s="";this.export=function(){return{context:t,controller:t.getComponentName(o),sheets:e}},this.getContext=function(){return t},this.getSheetList=function(){return Object.keys(e)},this.getSheet=function(n){return e[n]},this.addSheet=function(n,o){e[n]=o,o.setContext(t)},this.removeSheet=function(n){delete e[n]},n=function(){var n,i,s;for(i=t.getComponent(o),o=i,s=Object.keys(e),n=0;n<s.length;n++)(i=new ARCS.Sheet(t)).import(e[s[n]],t),e[s[n]]=i;ARCS.Component.connect(o,"requestSheet",r,"setSheet"),ARCS.Component.connect(o,"requestTermination",r,"finish"),o.start()},this.setController=function(n){o=t.getComponent(n)},this.setSheet=function(n){e.hasOwnProperty(n)?(s&&e[s].deactivate(),e[s=n].activate()):console.warn("[ARCS] Tried to activate hollow sheet named: "+n)},this.finish=function(){s&&e[s].deactivate()},this.import=function(n){t=new ARCS.Context(n.context),e=n.sheets,void 0===(o=n.controller)&&console.error("[ARCS] Undefined controller. Cannot start application.")},this.setFactory=function(n,t){factories[n]=t},this.setDependency=function(n){i[n]={}},this.start=function(){console.log("[ARCS] Starting application..."),t.instanciate().then(n)}},ARCS.Application.setDependency=function(n,t){n.setDependency(t)},ARCS.Component.create(ARCS.Application),ARCS.Application.slot("setSheet"),ARCS.Application.slot("finish");export{ARCS as default};
...\ No newline at end of file ...\ No newline at end of file
1 +var ARCS=ARCS||{};ARCS.isInNode=function(){return"function"==typeof require&&require.resolve},ARCS.Component={SourceIsNotComponent:{message:"Source is not a component"},UndefinedSignal:{message:"Signal is not defined"},UndefinedSlot:{message:"Slot is not defined"},create:function(n,t,e){return void 0===n.prototype?(console.error("Cannot create such a component"),0):(n.prototype.slots=[],n.prototype.signals={},n.slotList=function(){return n.prototype.slots},n.prototype.slotList=function(){return n.prototype.slots},n.prototype.signalList=function(){var t,e=[];for(t in n.prototype.signals)e.push(t);return e},n.signalList=function(){return n.prototype.signalList()},n.prototype.emit=function(n){var t,e,o,i=Array.prototype.slice.call(arguments,1);for(t in this.signals[n])e=this.signals[n][t].func,o=this.signals[n][t].obj,e.apply(o,i)},n.slot=function(t,e){var o;if(t instanceof Array)for(o=0;o<t.length;o++)n.prototype.slots.push(t[o]);else n.prototype.slots.push(t),void 0!==e&&(n.prototype[t]=e)},n.signal=function(t){var e;if(t instanceof Array)for(e=0;e<t.length;e++)n.prototype.signals[t[e]]=1;else n.prototype.signals[t]=1},void 0!==t&&n.slot(t),void 0!==e&&n.signal(e),n)},check:function(n){return void 0!==n.prototype&&(void 0!==n.prototype.signals&&void 0!==n.prototype.slots)},connect:function(n,t,e,o){var i,r;if(void 0===n.signals)throw ARCS.Component.SourceIsNotComponent;if(void 0===n.signals[t])throw ARCS.Component.UndefinedSignal;if(void 0===e[o])throw ARCS.Component.UndefinedSlot;if(!n.hasOwnProperty("signals"))for(r in i=n.signals,n.signals={},i)n.signals[r]=[];n.signals[t].push({obj:e,func:e[o]})},disconnect:function(n,t,e,o){var i;for(i=0;i<n.signals[t].length;i++)n.signals[t][i].obj===e&&n.signals[t][i].func===e[o]&&(n.signals[t].splice(i,1),i--)},invoke:function(n,t,e){if(void 0===n[t])throw ARCS.Component.UndefinedSlot;n[t].apply(n,e)},config:function(n,t){"function"==typeof n.config&&n.config(t)}},ARCS.Context=function(n){var t={},e={},o={},i=[],r=this;if(o.StateMachine=ARCS.Statemachine,void 0!==n){var s;for(s in i=n.libraries,n.components)n.components.hasOwnProperty(s)&&(t[s]=n.components[s]);if(void 0!==n.constants)for(s in n.constants)n.constants.hasOwnProperty(s)&&(e[s]=n.constants[s])}var c=async function(n){return ARCS.isInNode()?new Promise((function(t,e){var o=require(n);void 0!==o?t(o):e("[ARCS] File not found")})):(await fetch(n)).json()},a=function(){var n,r=[];for(n in t)if(t.hasOwnProperty(n)){if(void 0===o[t[n].type])return console.error("[ARCS] Factory "+t[n].type+" not found."),void console.error("[ARCS] Context dump follows: ",i,t,e);var s=o[t[n].type];try{if(void 0!==t[n].value||void 0!==t[n].url||void 0!==t[n].ref){if(void 0!==t[n].value&&(t[n].instance=new s(t[n].value)),void 0!==t[n].url){console.log("loading data file",t[n].url),r.push(c(t[n].url).then(function(n,e){return function(o){return console.log("instanciating from data file"),t[n].instance=new e(o),Promise.resolve()}}(n,s)))}void 0!==t[n].ref&&void 0!==e[t[n].ref]&&(t[n].instance=new s(e[t[n].ref]))}else t[n].instance=new s}catch(t){console.error("[ARCS] Component of type ",n," not instanciated.",t)}}return Promise.all(r)};this.loadLibrary=function(n,t){var e=n,o=n;return ARCS.Context.currentContext=r,"string"!=typeof n&&(o=n.name,e=n.url),i.indexOf(o)<0&&i.push(o),import(e).then((function(n){for(s in n.default)n.default.hasOwnProperty(s)&&ARCS.Context.currentContext.setFactory(s,n.default[s]);void 0!==t&&t()})).catch((function(n){console.error("[ARCS] Trouble loading '",e,"' with reason -",n)}))},this.getComponentList=function(){var n,e=Object.keys(t);for(n=0;n<e.length;n++)t.hasOwnProperty(e[n])||e.splice(n--,1);return e},this.getConstant=function(n){return e[n]},this.getComponentType=function(n){if(void 0!==t[n])return t[n].type},this.getComponentValue=function(n){if(void 0!==t[n])return t[n].value},this.getComponent=function(n){if(void 0!==t[n])return t[n].instance},this.getComponentName=function(n){var e,o;for(o=t.getComponentList(),e=0;e<o.length;e++)if(t[o[e]].instance===n)return o[e]},this.setFactory=function(n,t){o[n]=t},this.toJSON=function(){var n,e={};for(n in t)t.hasOwnProperty(n)&&(e[n]={type:t[n].type,value:t[n].value});return e},this.setComponentValue=function(n,e){t[n].value=e},this.addComponent=function(n,e,i){var r;t[n]={},t[n].type=e,t[n].value=i;var s=o[e];void 0!==s&&(r=new s(i)),t[n].instance=r},this.removeComponent=function(n){delete t[n]},this.getFactory=function(n){return o[n]},this.getFactoryList=function(){return Object.keys(o)},this.instanciate=function(){
2 +//! TODO
3 +return function(){var n;ARCS.Context.currentContext=r;var t=[];for(n=0;n<i.length;n++)t.push(r.loadLibrary(i[n]));return Promise.all(t)}().then(a).catch((function(n){console.error("[ARCS] Trouble instanciating context",n)}))};var u=function(n,t){var e,o=Object.create(t);for(e in n)n.hasOwnProperty(e)&&(o[e]=n[e]);return o};this.chain=function(n,i,r){return[u(n,t),u(i,e),u(r,o)]},this.setParent=function(n){if(void 0!==n){var i=n.chain(t,e,o);t=i[0],e=i[1],o=i[2]}}},ARCS.Context.currentContext=null,ARCS.Invocation=function(n,t,e){this.getDestination=function(){return n},this.getSlot=function(){return t},this.getValue=function(){return e},this.invoke=function(){var o=n[t];void 0!==o?o.apply(n,e):console.error("Undefined slot %s of component %s",t,n)}},ARCS.Invocation.cast=function(n,t){if(void 0!==n.value){var e=t.getComponent(n.destination);return void 0===e&&console.error("[ARCS] Destination ",n.destination," is undefined"),new ARCS.Invocation(e,n.slot,n.value)}if(void 0!==n.ref)return new ARCS.Invocation(t.getComponent(n.destination),n.slot,t.getConstant(n.ref))},ARCS.Invocation.PRE_CONNECTION=0,ARCS.Invocation.POST_CONNECTION=1,ARCS.Invocation.CLEAN_UP=2,ARCS.Connection=function(n,t,e,o){this.connect=function(){try{ARCS.Component.connect(n,t,e,o)}catch(i){console.log(i,n,t,e,o)}},this.disconnect=function(){ARCS.Component.disconnect(n,t,e,o)},this.getSource=function(){return n},this.getDestination=function(){return e},this.getSlot=function(){return o},this.getSignal=function(){return t}},ARCS.Connection.cast=function(n,t){return new ARCS.Connection(t.getComponent(n.source),n.signal,t.getComponent(n.destination),n.slot)},ARCS.Sheet=function(n){var t,e,o,i,r,s=new ARCS.Context,c=[],a=[],u=[],f=[],l=0,p=0,h=0,C=0;t=function(){var n;for(n=0;n<c.length;n++)c[n].invoke()},e=function(){var n;for(n=0;n<a.length;n++)a[n].invoke()},o=function(){var n;for(n=0;n<u.length;n++)u[n].invoke()},i=function(){var n;for(n=0;n<f.length;n++)f[n].connect()},r=function(){var n;for(n=0;n<f.length;n++)f[n].disconnect()},this.setContext=function(n){s=n},this.activate=function(){s.instanciate().then((function(){t(),i(),e()}))},this.deactivate=function(){r(),o()},this.addPreConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=l++,c.push(t),t.id},this.addPostConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=p++,a.push(t),t.id},this.addCleanup=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=h++,u.push(t),t.id},this.addConnection=function(n){var t=ARCS.Connection.cast(n,s);return t.id=C++,f.push(t),t.id};var d=function(n,t){for(var e=t.length;e--&&t[e].id!==n;);e>=0?t.splice(e,1):console.warn("Could not remove data with id",n)};this.removePreConnection=function(n){d(n,c)},this.removePostConnection=function(n){d(n,a)},this.removeCleanup=function(n){d(n,u)};var v=function(n,t,e){for(var o=e.length;o--&&e[o].id!==n;);o>=0&&(e[o].value=t)};this.changePreConnection=function(n,t){v(n,t,c)},this.changePostConnection=function(n,t){v(n,t,a)},this.changeCleanup=function(n,t){v(n,t,u)},this.removeConnection=function(n){d(n,f)};var g=function(n,t,e){for(var o,i=e.length,r=e.length;i--&&e[i].id!==n;);for(;r--&&e[r].id!==t;);i>=0&&r>=0&&(o=e[i],e[i]=e[r],e[r]=o,e[i].id=n,e[r].id=t)};this.swapConnections=function(n,t){g(n,t,f)},this.swapCleanups=function(n,t){g(n,t,u)},this.swapPreConnections=function(n,t){g(n,t,c)},this.swapPostConnections=function(n,t){g(n,t,a)};this.import=function(t){t.hasOwnProperty("context")&&(s=new ARCS.Context(t.context)).setParent(n),s.instanciate().then((function(){!function(n){var t=0,e=ARCS.Invocation.cast,o=ARCS.Connection.cast;for(t=0;t<n.preconnections.length;t++)c.push(e(n.preconnections[t],s));for(t=0;t<n.postconnections.length;t++)a.push(e(n.postconnections[t],s));for(t=0;t<n.cleanups.length;t++)u.push(e(n.cleanups[t],s));for(t=0;t<n.connections.length;t++)f.push(o(n.connections[t],s))}(t)}))};var S=function(n){return{destination:s.getComponentName(n.getDestination()),slot:n.getSlot(),value:n.getValue()}};this.toJSON=function(){var n,t,e=[],o=[],i=[],r=[];for(n=0;n<f.length;n++)i.push((t=f[n],{source:s.getComponentName(t.getSource()),signal:t.getSignal(),destination:s.getComponentName(t.getDestination()),slot:t.getSlot()}));for(n=0;n<c.length;n++)e.push(S(c[n]));for(n=0;n<a.length;n++)o.push(S(a[n]));for(n=0;n<u.length;n++)r.push(S(u[n]));return{preconnections:e,postconnections:o,connections:i,cleanups:r}},s.setParent(n)},ARCS.EventLogicParser=function(){function n(n,t,e,o,i,r){this.message=n,this.expected=t,this.found=e,this.offset=o,this.line=i,this.column=r,this.name="SyntaxError"}return function(n,t){function e(){this.constructor=n}e.prototype=t.prototype,n.prototype=new e}(n,Error),{SyntaxError:n,parse:function(t){var e,o=arguments.length>1?arguments[1]:{},i={},r={start:U},s=U,c=i,a=function(n,t){return[n].concat(t)},u=function(n){return{and:n}},f=function(n){return{or:n}},l=function(n){return n},p="(",h={type:"literal",value:"(",description:'"("'},C=")",d={type:"literal",value:")",description:'")"'},v=function(n){return[n]},g={type:"other",description:"id"},S=function(n){return n.trim()},A=/^[_a-zA-Z]/,m={type:"class",value:"[_a-zA-Z]",description:"[_a-zA-Z]"},y=/^[_a-zA-Z0-9]/,R={type:"class",value:"[_a-zA-Z0-9]",description:"[_a-zA-Z0-9]"},w="&",x={type:"literal",value:"&",description:'"&"'},P="|",O={type:"literal",value:"|",description:'"|"'},T=/^[ \r\n\t]/,N={type:"class",value:"[ \\r\\n\\t]",description:"[ \\r\\n\\t]"},b=0,k=0,F={line:1,column:1,seenCR:!1},I=0,E=[],L=0;if("startRule"in o){if(!(o.startRule in r))throw new Error("Can't start parsing from rule \""+o.startRule+'".');s=r[o.startRule]}function j(n){return k!==n&&(k>n&&(k=0,F={line:1,column:1,seenCR:!1}),function(n,e,o){var i,r;for(i=e;i<o;i++)"\n"===(r=t.charAt(i))?(n.seenCR||n.line++,n.column=1,n.seenCR=!1):"\r"===r||"\u2028"===r||"\u2029"===r?(n.line++,n.column=1,n.seenCR=!0):(n.column++,n.seenCR=!1)}(F,k,n),k=n),F}function _(n){b<I||(b>I&&(I=b,E=[]),E.push(n))}function q(e,o,i){var r=j(i),s=i<t.length?t.charAt(i):null;return null!==o&&function(n){var t=1;for(n.sort((function(n,t){return n.description<t.description?-1:n.description>t.description?1:0}));t<n.length;)n[t-1]===n[t]?n.splice(t,1):t++}(o),new n(null!==e?e:function(n,t){var e,o=new Array(n.length);for(e=0;e<n.length;e++)o[e]=n[e].description;return"Expected "+(n.length>1?o.slice(0,-1).join(", ")+" or "+o[n.length-1]:o[0])+" but "+(t?'"'+function(n){function t(n){return n.charCodeAt(0).toString(16).toUpperCase()}return n.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\x08/g,"\\b").replace(/\t/g,"\\t").replace(/\n/g,"\\n").replace(/\f/g,"\\f").replace(/\r/g,"\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g,(function(n){return"\\x0"+t(n)})).replace(/[\x10-\x1F\x80-\xFF]/g,(function(n){return"\\x"+t(n)})).replace(/[\u0180-\u0FFF]/g,(function(n){return"\\u0"+t(n)})).replace(/[\u1080-\uFFFF]/g,(function(n){return"\\u"+t(n)}))}(t)+'"':"end of input")+" found."}(o,s),o,s,i,r.line,r.column)}function U(){return D()}function D(){var n,t,e,o;if(n=b,(t=Z())!==i){if(e=[],(o=z())!==i)for(;o!==i;)e.push(o),o=z();else e=c;e!==i?(n,n=t=a(t,e)):(b=n,n=c)}else b=n,n=c;return n===i&&(n=Z()),n}function z(){var n,t;return n=b,B()!==i&&(t=Z())!==i?(n,n=u(t)):(b=n,n=c),n===i&&(n=b,M()!==i&&(t=Z())!==i?(n,n=f(t)):(b=n,n=c)),n}function Z(){var n,e,o,r;return n=b,(e=V())!==i&&(n,e=l(e)),(n=e)===i&&(n=b,40===t.charCodeAt(b)?(e=p,b++):(e=i,0===L&&_(h)),e!==i&&(o=D())!==i?(41===t.charCodeAt(b)?(r=C,b++):(r=i,0===L&&_(d)),r!==i?(n,n=e=v(o)):(b=n,n=c)):(b=n,n=c)),n}function V(){var n,e,o;return L++,n=b,e=b,(o=J())!==i&&(o=t.substring(e,b)),(e=o)!==i&&(n,e=S(e)),L--,(n=e)===i&&(e=i,0===L&&_(g)),n}function J(){var n,e,o,r,s;if(n=b,(e=G())!==i)if(A.test(t.charAt(b))?(o=t.charAt(b),b++):(o=i,0===L&&_(m)),o!==i){for(r=[],y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));s!==i;)r.push(s),y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));r!==i&&(s=G())!==i?n=e=[e,o,r,s]:(b=n,n=c)}else b=n,n=c;else b=n,n=c;return n}function B(){var n,e,o,r;return n=b,(e=G())!==i?(38===t.charCodeAt(b)?(o=w,b++):(o=i,0===L&&_(x)),o!==i&&(r=G())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c),n}function M(){var n,e,o,r;return n=b,(e=G())!==i?(124===t.charCodeAt(b)?(o=P,b++):(o=i,0===L&&_(O)),o!==i&&(r=G())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c),n}function G(){var n,e;for(n=[],T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));e!==i;)n.push(e),T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));return n}if((e=s())!==i&&b===t.length)return e;throw e!==i&&b<t.length&&_({type:"end",description:"end of input"}),q(null,E,I)}}}(),ARCS.TokenEvent=function(){var n,t;this.promise=new Promise((function(e,o){n=e,t=o})),this.accept=function(){n()},this.abort=function(){t()}},ARCS.TransitionNetwork=function(){this.promise={},this.and=function(n){return this.promise=Promise.all([this.promise,n.promise]),this},this.or=function(n){return this.promise=Promise.race([this.promise,n.promise]),this}},ARCS.TransitionNetwork.build=function(n,t){var e,o,r;if("string"==typeof n){var s;t.hasOwnProperty(n)?s=t[n]:t[n]=s=new ARCS.TokenEvent;var c=new ARCS.TransitionNetwork;return c.promise=s.promise,c}for(e=ARCS.TransitionNetwork.build(n[0],t),i=1;i<n.length;i++)n[i].hasOwnProperty("and")?(r=ARCS.TransitionNetwork.build(n[i].and,t),o=e.and(r)):n[i].hasOwnProperty("or")?(r=ARCS.TransitionNetwork.build(n[i].or,t),o=e.or(r)):console.warn("[ARCS] Illegal tree"),e=o;return e},ARCS.Statemachine=new ARCS.Component.create((function(n){var t="",e="",o={},i="",r=this,s={},c={},a=function(n){var t;r.slots.indexOf(n)<0&&(r.slots.push(n),r[n]=(t=n,function(){r.setToken(t)}))},u=function(n){var t;if(o.hasOwnProperty(n))for(t in c={},o[n])o[n].hasOwnProperty(t)&&ARCS.TransitionNetwork.build(s[t],c).promise.then((function(){var e;for(e in c)c.hasOwnProperty(e)&&c[e].abort();u(o[n][t])}));i=n,r.emit("requestSheet",i),i===e&&r.emit("requestTermination")};this.setInitialState=function(n){i=t=n},this.setFinalState=function(n){e=n},this.addTransition=function(n,t,e){var i,r=/([A-Za-z_]\w*)/g;try{var c;if("string"==typeof(c=ARCS.EventLogicParser.parse(t)))a(c);else for(;null!==(i=r.exec(t));)a(i[0]);s[t]=c,void 0===o[n]&&(o[n]={}),o[n][t]=e}catch(n){}},this.setToken=function(n){c.hasOwnProperty(n)&&c[n].accept()},this.setTransitions=function(n){var t,e;for(t in n)if(n.hasOwnProperty(t))for(e in n[t])n[t].hasOwnProperty(e)&&this.addTransition(t,e,n[t][e])},this.start=function(){console.log("statemachine",this,t,n),u(t)},void 0!==n&&(t=n.initial,e=n.final,this.setTransitions(n.transitions),i="")}),["setToken"],["requestSheet","requestTermination"]),ARCS.Application=function(){var n,t=new ARCS.Context,e={},o={},i=[],r=this,s="";this.export=function(){return{context:t,controller:t.getComponentName(o),sheets:e}},this.getContext=function(){return t},this.getSheetList=function(){return Object.keys(e)},this.getSheet=function(n){return e[n]},this.addSheet=function(n,o){e[n]=o,o.setContext(t)},this.removeSheet=function(n){delete e[n]},n=function(){var n,i,s;for(i=t.getComponent(o),o=i,s=Object.keys(e),n=0;n<s.length;n++)(i=new ARCS.Sheet(t)).import(e[s[n]],t),e[s[n]]=i;ARCS.Component.connect(o,"requestSheet",r,"setSheet"),ARCS.Component.connect(o,"requestTermination",r,"finish"),o.start()},this.setController=function(n){o=t.getComponent(n)},this.setSheet=function(n){e.hasOwnProperty(n)?(s&&e[s].deactivate(),e[s=n].activate()):console.warn("[ARCS] Tried to activate hollow sheet named: "+n)},this.finish=function(){s&&e[s].deactivate()},this.import=function(n){t=new ARCS.Context(n.context),e=n.sheets,void 0===(o=n.controller)&&console.error("[ARCS] Undefined controller. Cannot start application.")},this.setFactory=function(n,t){factories[n]=t},this.setDependency=function(n){i[n]={}},this.start=function(){console.log("[ARCS] Starting application..."),t.instanciate().then(n)}},ARCS.Application.setDependency=function(n,t){n.setDependency(t)},ARCS.Component.create(ARCS.Application),ARCS.Application.slot("setSheet"),ARCS.Application.slot("finish");export{ARCS as default};
...\ No newline at end of file ...\ No newline at end of file
......
1 -arcs_module( 1 +
2 - function (ARCS) { 2 +import ARCS from '../build/arcs.js';
3 - var Animator; 3 +
4 +var Animator;
4 5
5 - /** 6 +/**
6 - * @class Animator 7 + * @class Animator
7 - * @classdesc A component that request new frames for animation. 8 + * @classdesc A component that request new frames for animation.
8 - * This component is useful when you want to create animations in the 9 + * This component is useful when you want to create animations in the
9 - * context of a web browser. 10 + * context of a web browser.
10 - */ 11 + */
11 - Animator = ARCS.Component.create( 12 +Animator = ARCS.Component.create(
12 - function() { 13 + function() {
13 - var paused = false; 14 + var paused = false;
14 - var self=this; 15 + var self=this;
15 - 16 +
16 - var tick = function () { 17 + var tick = function () {
17 - if (paused === false) { 18 + if (paused === false) {
18 - requestAnimationFrame(tick); 19 + requestAnimationFrame(tick);
19 - self.emit("onAnimationFrame"); 20 + self.emit("onAnimationFrame");
20 - } 21 + }
21 - } 22 + }
22 - 23 +
23 - /** 24 + /**
24 - * Starts requesting frames for animation. As soon as it is started, 25 + * Starts requesting frames for animation. As soon as it is started,
25 - * the signal <b>onAnimationFrame</b> is periodically triggered. 26 + * the signal <b>onAnimationFrame</b> is periodically triggered.
26 - * @slot 27 + * @slot
27 - * @emits onAnimationFrame 28 + * @emits onAnimationFrame
28 - * @function Animator#start 29 + * @function Animator#start
29 - */ 30 + */
30 - this.start = function () { 31 + this.start = function () {
31 - paused = false; 32 + paused = false;
32 - tick(); 33 + tick();
33 - }; 34 + };
34 - 35 +
35 - /** 36 + /**
36 - * Stops requesting frames for animation. 37 + * Stops requesting frames for animation.
37 - * @slot 38 + * @slot
38 - * @function Animator#stop 39 + * @function Animator#stop
39 - */ 40 + */
40 - this.stop = function () { 41 + this.stop = function () {
41 - paused = true; 42 + paused = true;
42 - }; 43 + };
43 - 44 +
44 - /** 45 + /**
45 - * Signals that an animation frame is ready. 46 + * Signals that an animation frame is ready.
46 - * @signal 47 + * @signal
47 - * @function Animator#onAnimationFrame 48 + * @function Animator#onAnimationFrame
48 - */ 49 + */
49 - }, 50 + },
50 - ['start','stop'], 51 + ['start','stop'],
51 - 'onAnimationFrame' 52 + 'onAnimationFrame'
52 - ); 53 +);
53 54
54 - return {Animator: Animator};
55 - }
56 -);
...\ No newline at end of file ...\ No newline at end of file
55 +export default {Animator: Animator};
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function (ARCS, CV, AR) { 2 +import CV from '../deps/cv/index.js';
3 - var ARUCODetector; 3 +import AR from '../deps/aruco/index.js';
4 +
5 +var ARUCODetector;
4 6
5 - /** 7 +/**
6 - * @class ARUCODetector 8 + * @class ARUCODetector
7 - * @classdesc Component that detects ARUCO markers in images 9 + * @classdesc Component that detects ARUCO markers in images
8 - * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library. 10 + * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
9 - */ 11 + */
10 - ARUCODetector = ARCS.Component.create( 12 +ARUCODetector = ARCS.Component.create(
11 - function() { 13 + function() {
12 - var detector ; 14 + var detector ;
13 15
14 - /*1 Instanciate here the detector */ 16 + /*1 Instanciate here the detector */
15 - detector = new AR.Detector(); 17 + detector = new AR.Detector();
16 18
17 - /** 19 + /**
18 - * Detects ARUCO markers in the given image. 20 + * Detects ARUCO markers in the given image.
19 - * If markers are detected, this slot triggers the signal <b>onMarkers</b>. 21 + * If markers are detected, this slot triggers the signal <b>onMarkers</b>.
20 - * @param image {obj} the image in which markers should be detected 22 + * @param image {obj} the image in which markers should be detected
21 - * @emits onMarkers 23 + * @emits onMarkers
22 - * @function ARUCODetector#detect 24 + * @function ARUCODetector#detect
23 - * @slot 25 + * @slot
24 - */ 26 + */
25 - this.detect = function (image) { 27 + this.detect = function (image) {
26 - /*1 recover markers from image 28 + /*1 recover markers from image
27 - * then send they will be sent through onMarkers event 29 + * then send they will be sent through onMarkers event
28 - */ 30 + */
29 - var markers = detector.detect(image); 31 + var markers = detector.detect(image);
30 - this.emit("onMarkers",markers); 32 + this.emit("onMarkers",markers);
31 - }; 33 + };
32 - 34 +
33 - /** 35 + /**
34 - * Signal that is emitted when markers are detected in an image. 36 + * Signal that is emitted when markers are detected in an image.
35 - * @function ARUCODetector#onMarkers 37 + * @function ARUCODetector#onMarkers
36 - * @param markers {Marker[]} Array of detected markers. 38 + * @param markers {Marker[]} Array of detected markers.
37 - * @signal 39 + * @signal
38 - */ 40 + */
39 - 41 +
40 - /** 42 + /**
41 - * @typedef {Object} Marker 43 + * @typedef {Object} Marker
42 - * @property {number} id - marker id 44 + * @property {number} id - marker id
43 - * @property {Object} pose - computed pose for the marker 45 + * @property {Object} pose - computed pose for the marker
44 - * @property {number[]} pose.rotation - rotation matrix (3x3) 46 + * @property {number[]} pose.rotation - rotation matrix (3x3)
45 - * @property {number[]} pose.position - translation (3 components) 47 + * @property {number[]} pose.position - translation (3 components)
46 - */ 48 + */
47 -
48 - },
49 - 'detect',
50 - ['onMarkers']
51 - );
52 49
53 - return {ARUCODetector: ARUCODetector};
54 }, 50 },
55 - [
56 - {name:"deps/cv/index", exports:"CV"},
57 - {name:"deps/aruco/index",exports:"AR"}
58 - ]
59 -);
...\ No newline at end of file ...\ No newline at end of file
51 + 'detect',
52 + ['onMarkers']
53 +);
54 +
55 +export default {ARUCODetector: ARUCODetector};
......
1 -arcs_module(
2 - function(ARCS, three) {
3 - var ARViewer;
4 1
5 - /** 2 +import ARCS from '../build/arcs.js';
6 - * @class ARViewer 3 +import * as THREE from '../deps/three.js/index.js';
7 - * @classdesc Simple compositing viewer for augmented reality 4 +import FrustumCamera from '../deps/three.js/frustumcamera.js';
8 - */ 5 +
9 - ARViewer = ARCS.Component.create( 6 +var ARViewer;
10 - /** @lends ARViewer.prototype */ 7 +
11 - function () { 8 +/**
12 - var container, sourceAspectRatio, sourceHeight; 9 + * @class ARViewer
10 + * @classdesc Simple compositing viewer for augmented reality
11 + */
12 +ARViewer = ARCS.Component.create(
13 + /** @lends ARViewer.prototype */
14 + function () {
15 + var container, sourceAspectRatio, sourceHeight;
16 +
17 + var renderer, scene2d, scene3d, camera2d, camera3d, videoSource, videoTexture;
18 +
19 + var aspectRatioKept = true;
20 +
21 + var sceneId;
22 +
23 +
24 + // scenegraph initializations
25 + scene2d = new THREE.Scene();
26 + camera2d = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5);
27 + scene2d.add(camera2d);
28 +
29 + scene3d = new THREE.Scene();
30 +
31 + /**
32 + * Initializes the widgets (HTML elements) needed as a basis
33 + * for the viewer.
34 + * @param cName {string} id of the container that will enclose the scene renderer
35 + * @param vName {string} id of the element at the source of the video stream
36 + * @slot
37 + * @function ARViewer#setWidgets
38 + */
39 + this.setWidgets = function(cName,vName) {
40 + container = document.getElementById(cName);
41 + videoSource = document.getElementById(vName);
42 + var containerStyle = window.getComputedStyle(container);
43 + var videoStyle = window.getComputedStyle(videoSource);
44 + sourceAspectRatio = parseInt(videoStyle.width) / parseInt(videoStyle.height);
45 + sourceHeight = parseInt(videoStyle.height);
13 46
14 - var renderer, scene2d, scene3d, camera2d, camera3d, videoSource, videoTexture; 47 + container.width = parseInt(containerStyle.width);
15 - 48 + container.height = parseInt(containerStyle.height);
16 - var aspectRatioKept = true;
17 -
18 - var sceneId;
19 -
20 -
21 - // scenegraph initializations
22 - scene2d = new THREE.Scene();
23 - camera2d = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5);
24 - scene2d.add(camera2d);
25 -
26 - scene3d = new THREE.Scene();
27 49
28 - /** 50 + renderer = new THREE.WebGLRenderer();
29 - * Initializes the widgets (HTML elements) needed as a basis 51 + renderer.setClearColor(0x000000, 1);
30 - * for the viewer. 52 + renderer.setSize(container.width, container.height);
31 - * @param cName {string} id of the container that will enclose the scene renderer 53 + container.appendChild(renderer.domElement);
32 - * @param vName {string} id of the element at the source of the video stream
33 - * @slot
34 - * @function ARViewer#setWidgets
35 - */
36 - this.setWidgets = function(cName,vName) {
37 - container = document.getElementById(cName);
38 - videoSource = document.getElementById(vName);
39 - var containerStyle = window.getComputedStyle(container);
40 - var videoStyle = window.getComputedStyle(videoSource);
41 - sourceAspectRatio = parseInt(videoStyle.width) / parseInt(videoStyle.height);
42 - sourceHeight = parseInt(videoStyle.height);
43 -
44 - container.width = parseInt(containerStyle.width);
45 - container.height = parseInt(containerStyle.height);
46 54
47 - renderer = new THREE.WebGLRenderer(); 55 + var theta = 45; //2*Math.atan2(container.height/2,focalLength)*180/3.14159265;
48 - renderer.setClearColor(0x000000, 1); 56 + camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10000);
49 - renderer.setSize(container.width, container.height); 57 + scene3d.add(camera3d);
50 - container.appendChild(renderer.domElement); 58 +
51 - 59 + var _light = new THREE.DirectionalLight(0xffffff);
52 - var theta = 45; //2*Math.atan2(container.height/2,focalLength)*180/3.14159265; 60 + _light.position.set(0,5,5);
53 - camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10000); 61 +
54 - scene3d.add(camera3d); 62 + scene3d.add(_light);
55 -
56 - var _light = new THREE.DirectionalLight(0xffffff);
57 - _light.position.set(0,5,5);
58 -
59 - scene3d.add(_light);
60 -
61 - if ( THREE.VideoTexture !== undefined) {
62 - console.log("Using video texture since it is available");
63 - videoTexture = new THREE.VideoTexture(videoSource);
64 - } else {
65 - console.log("Falling back on simple texture");
66 - videoTexture = new THREE.Texture(videoSource);
67 - }
68 - var geometry = new THREE.PlaneGeometry(1.0, 1.0);
69 - var material = new THREE.MeshBasicMaterial( {map: videoTexture, depthTest: false, depthWrite: false} );
70 - var mesh = new THREE.Mesh(geometry, material);
71 - var textureObject = new THREE.Object3D();
72 - textureObject.position.z = -1;
73 - textureObject.add(mesh);
74 - scene2d.add(textureObject);
75 -
76 - updateAspectRatio();
77 - };
78 -
79 - /**
80 - * Set the focal length of the virtual camera for very simple
81 - * camera models.
82 - * @param focal {numeric} focal length (in pixels) of the camera.
83 - * @slot
84 - * @function ARViewer#setFocal
85 - */
86 - this.setFocal = function (focal) {
87 - var theta = 2*Math.atan(0.5*sourceHeight/focal)*180/Math.PI;
88 - camera3d.fov = theta;
89 - console.log(theta);
90 - //camera3d.updateProjectionMatrix();
91 - updateAspectRatio();
92 - };
93 63
94 - 64 + if ( THREE.VideoTexture !== undefined) {
95 - /** 65 + console.log("Using video texture since it is available");
96 - * Set intrinsic camera parameters for the virtual camera 66 + videoTexture = new THREE.VideoTexture(videoSource);
97 - * @param intrinsics {array} linearized array of camera parameters 67 + } else {
98 - * @slot 68 + console.log("Falling back on simple texture");
99 - * @function ARViewer#setIntrinsics 69 + videoTexture = new THREE.Texture(videoSource);
100 - */ 70 + }
101 - this.setIntrinsics = function (parameters) { 71 + var geometry = new THREE.PlaneGeometry(1.0, 1.0);
102 - /*3 set here the intrinsic parameters of camera3d 72 + var material = new THREE.MeshBasicMaterial( {map: videoTexture, depthTest: false, depthWrite: false} );
103 - * camera3d should be of type THREE.FrustumCamera 73 + var mesh = new THREE.Mesh(geometry, material);
104 - * you should frustum accordingly to intrinsic parameters 74 + var textureObject = new THREE.Object3D();
105 - */ 75 + textureObject.position.z = -1;
106 - 76 + textureObject.add(mesh);
107 - // camera3d = new THREE.FrustumCamera( ... ) ; 77 + scene2d.add(textureObject);
108 - 78 +
109 - 79 + updateAspectRatio();
110 - }; 80 + };
111 -
112 -
113 - /**
114 - * Set extrinsic camera parameters for the virtual camera
115 - * @param markers {array} an array of markers
116 - * @slot
117 - * @function ARViewer#setExtrinsics
118 - */
119 - this.setExtrinsics = function (markers) {
120 - /*2 set here the extrinsic parameters of camera3d
121 - * Each marker has 3 major properties :
122 - * - id is the marker id;
123 - * - pose.rotation gives its orientation using a rotation matrix
124 - * and is a 3x3 array
125 - * - pose.position gives its position with respect to the camera
126 - * and is a vector with 3 components.
127 - */
128 - var i ;
129 - for ( i = 0; i < markers.length; i++) {
130 - if ( markers[i].id === sceneId ) {
131 - // put here the code to set orientation and position of object camera3d
132 - // see also documentation of Object3D (API Three.js)
133 - // since a camera is an Object3D
134 - console.log("viewing");
135 81
136 - var rotation = markers[i].pose.rotation; 82 + /**
137 - var translation = markers[i].pose.position; 83 + * Set the focal length of the virtual camera for very simple
138 - var matrix = new THREE.Matrix4( 84 + * camera models.
139 - rotation[0][0], rotation[0][1], rotation[0][2], translation[0], 85 + * @param focal {numeric} focal length (in pixels) of the camera.
140 - rotation[1][0], rotation[1][1], rotation[1][2], translation[1], 86 + * @slot
141 - rotation[2][0], rotation[2][1], rotation[2][2], translation[2], 87 + * @function ARViewer#setFocal
142 - 0 , 0, 0, 1); 88 + */
89 + this.setFocal = function (focal) {
90 + var theta = 2*Math.atan(0.5*sourceHeight/focal)*180/Math.PI;
91 + camera3d.fov = theta;
92 + console.log(theta);
93 + //camera3d.updateProjectionMatrix();
94 + updateAspectRatio();
95 + };
96 +
97 +
98 + /**
99 + * Set intrinsic camera parameters for the virtual camera
100 + * @param intrinsics {array} linearized array of camera parameters
101 + * @slot
102 + * @function ARViewer#setIntrinsics
103 + */
104 + this.setIntrinsics = function (parameters) {
105 + /*3 set here the intrinsic parameters of camera3d
106 + * camera3d should be of type THREE.FrustumCamera
107 + * you should frustum accordingly to intrinsic parameters
108 + */
109 +
110 + // camera3d = new THREE.FrustumCamera( ... ) ;
111 +
112 +
113 + };
114 +
143 115
144 - /*var r = new THREE.Euler(); 116 + /**
145 - r.setFromRotationMatrix(matrix); 117 + * Set extrinsic camera parameters for the virtual camera
146 - camera3d.rotation.x = r.x; 118 + * @param markers {array} an array of markers
147 - camera3d.rotation.y = r.y; 119 + * @slot
148 - camera3d.rotation.z = r.z;*/ 120 + * @function ARViewer#setExtrinsics
149 - 121 + */
150 - camera3d.position.x = translation[0]; 122 + this.setExtrinsics = function (markers) {
151 - camera3d.position.y = translation[1]; 123 + /*2 set here the extrinsic parameters of camera3d
152 - camera3d.position.z = translation[2]; 124 + * Each marker has 3 major properties :
153 - 125 + * - id is the marker id;
154 - /*objRoot.scale.x = 1; 126 + * - pose.rotation gives its orientation using a rotation matrix
155 - objRoot.scale.y = 1; 127 + * and is a 3x3 array
156 - objRoot.scale.z = 1;*/ 128 + * - pose.position gives its position with respect to the camera
157 - 129 + * and is a vector with 3 components.
158 - 130 + */
159 - } 131 + var i ;
160 - } 132 + for ( i = 0; i < markers.length; i++) {
133 + if ( markers[i].id === sceneId ) {
134 + // put here the code to set orientation and position of object camera3d
135 + // see also documentation of Object3D (API Three.js)
136 + // since a camera is an Object3D
137 + console.log("viewing");
138 +
139 + var rotation = markers[i].pose.rotation;
140 + var translation = markers[i].pose.position;
141 + var matrix = new THREE.Matrix4(
142 + rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
143 + rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
144 + rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
145 + 0 , 0, 0, 1);
146 +
147 + /*var r = new THREE.Euler();
148 + r.setFromRotationMatrix(matrix);
149 + camera3d.rotation.x = r.x;
150 + camera3d.rotation.y = r.y;
151 + camera3d.rotation.z = r.z;*/
161 152
153 + camera3d.position.x = translation[0];
154 + camera3d.position.y = translation[1];
155 + camera3d.position.z = translation[2];
156 +
157 + /*objRoot.scale.x = 1;
158 + objRoot.scale.y = 1;
159 + objRoot.scale.z = 1;*/
162 160
163 - };
164 -
165 - /**
166 - * Set the scene id in case we should set extrinsic parameters.
167 - * @param id {number} the id of the scene
168 - * @function ARViewer#setSceneId
169 - * @slot
170 - */
171 - this.setSceneId = function (id) {
172 - sceneId = id;
173 - };
174 -
175 - /**
176 - * Sets the size of the viewport in pixels to render the scene
177 - * @param width {number} width of the viewport
178 - * @param height {number} height of the viewport
179 - * @slot
180 - * @function ARViewer#setSize
181 - */
182 - this.setSize = function(width, height) {
183 - var W = width|0;
184 - var H = height|0;
185 161
186 - container.width = width; 162 + }
187 - container.height = height; 163 + }
188 - renderer.setSize(W,H); 164 +
165 +
166 + };
167 +
168 + /**
169 + * Set the scene id in case we should set extrinsic parameters.
170 + * @param id {number} the id of the scene
171 + * @function ARViewer#setSceneId
172 + * @slot
173 + */
174 + this.setSceneId = function (id) {
175 + sceneId = id;
176 + };
177 +
178 + /**
179 + * Sets the size of the viewport in pixels to render the scene
180 + * @param width {number} width of the viewport
181 + * @param height {number} height of the viewport
182 + * @slot
183 + * @function ARViewer#setSize
184 + */
185 + this.setSize = function(width, height) {
186 + var W = width|0;
187 + var H = height|0;
188 +
189 + container.width = width;
190 + container.height = height;
191 + renderer.setSize(W,H);
189 192
190 - updateAspectRatio(); 193 + updateAspectRatio();
191 - }; 194 + };
195 +
196 + /**
197 + * Tells to keep the aspect ratio of the camera.
198 + * It avoids deformations of the augmented scene.
199 + * @param b {boolean} set it to <tt>true</tt> to keep aspect ratio, <tt>false</tt> otherwise
200 + * @slot
201 + * @function ARViewer#keepAspectRatio
202 + */
203 + this.keepAspectRatio = function (b) {
204 + aspectRatioKept = b;
205 + };
206 +
207 + var updateAspectRatio = function () {
208 + var cAspectRatio = container.width / container.height;
209 + var actualWidth, actualHeight;
210 + var xoff, yoff;
192 211
193 - /** 212 + if (aspectRatioKept == true) {
194 - * Tells to keep the aspect ratio of the camera. 213 + // cameras have the source aspect ratio
195 - * It avoids deformations of the augmented scene. 214 + camera2d.aspect = sourceAspectRatio;
196 - * @param b {boolean} set it to <tt>true</tt> to keep aspect ratio, <tt>false</tt> otherwise 215 + camera2d.updateProjectionMatrix();
197 - * @slot 216 + camera3d.aspect = sourceAspectRatio;
198 - * @function ARViewer#keepAspectRatio 217 + camera3d.updateProjectionMatrix();
199 - */ 218 + // then, we should adjust viewport accordingly.
200 - this.keepAspectRatio = function (b) { 219 + if (cAspectRatio > sourceAspectRatio) {
201 - aspectRatioKept = b; 220 + actualHeight = container.height;
202 - }; 221 + actualWidth = actualHeight * sourceAspectRatio;
222 + } else {
223 + actualWidth = container.width;
224 + actualHeight = actualWidth / sourceAspectRatio;
225 + }
203 226
204 - var updateAspectRatio = function () { 227 + xoff = (container.width - actualWidth) / 2 ;
205 - var cAspectRatio = container.width / container.height; 228 + yoff = (container.height - actualHeight) / 2;
206 - var actualWidth, actualHeight; 229 + renderer.setViewport(xoff, yoff, actualWidth, actualHeight);
207 - var xoff, yoff; 230 + } else {
208 - 231 + // for 3D camera, we will have to recompute the actual
209 - if (aspectRatioKept == true) { 232 + // aspect ratio.
210 - // cameras have the source aspect ratio
211 - camera2d.aspect = sourceAspectRatio;
212 - camera2d.updateProjectionMatrix();
213 - camera3d.aspect = sourceAspectRatio;
214 - camera3d.updateProjectionMatrix();
215 - // then, we should adjust viewport accordingly.
216 - if (cAspectRatio > sourceAspectRatio) {
217 - actualHeight = container.height;
218 - actualWidth = actualHeight * sourceAspectRatio;
219 - } else {
220 - actualWidth = container.width;
221 - actualHeight = actualWidth / sourceAspectRatio;
222 - }
223 -
224 - xoff = (container.width - actualWidth) / 2 ;
225 - yoff = (container.height - actualHeight) / 2;
226 - renderer.setViewport(xoff, yoff, actualWidth, actualHeight);
227 - } else {
228 - // for 3D camera, we will have to recompute the actual
229 - // aspect ratio.
230 -
231 - // but first reset viewport, just in case
232 - renderer.setViewport(0, 0, container.width, container.height);
233 - camera2d.aspect = cAspectRatio ;
234 - camera2d.updateProjectionMatrix();
235 - camera3d.aspect = sourceAspectRatio;
236 - camera3d.updateProjectionMatrix();
237 - console.log(camera3d.projectionMatrix);
238 - }
239 -
240 - };
241 233
242 - /** 234 + // but first reset viewport, just in case
243 - * Adds new objects to the current 3D scene 235 + renderer.setViewport(0, 0, container.width, container.height);
244 - * @param scene {object} 3D object as defined by Three.js to add to the scene. 236 + camera2d.aspect = cAspectRatio ;
245 - * @slot 237 + camera2d.updateProjectionMatrix();
246 - * @function ARViewer#addScene 238 + camera3d.aspect = sourceAspectRatio;
247 - */ 239 + camera3d.updateProjectionMatrix();
248 - this.addScene = function (scene) { 240 + console.log(camera3d.projectionMatrix);
249 - scene3d.add(scene); 241 + }
250 - };
251 242
252 - /** 243 + };
253 - * Removes an object from the current 3D scene 244 +
254 - * @param scene {object} 3D object as defined by Three.js to remove from the scene. 245 + /**
255 - * @slot 246 + * Adds new objects to the current 3D scene
256 - * @function ARViewer#removeScene 247 + * @param scene {object} 3D object as defined by Three.js to add to the scene.
257 - */ 248 + * @slot
258 - this.removeScene = function (scene) { 249 + * @function ARViewer#addScene
259 - scene3d.remove(scene); 250 + */
260 - }; 251 + this.addScene = function (scene) {
261 - 252 + scene3d.add(scene);
262 - /** 253 + };
263 - * Triggers the rendering of the composite scene 254 +
264 - * @function ARViewer#render 255 + /**
265 - * @slot 256 + * Removes an object from the current 3D scene
266 - */ 257 + * @param scene {object} 3D object as defined by Three.js to remove from the scene.
267 - this.render = function () { 258 + * @slot
268 - videoTexture.needsUpdate = true; 259 + * @function ARViewer#removeScene
269 - renderer.autoClear = false; 260 + */
270 - renderer.clear(); 261 + this.removeScene = function (scene) {
271 - renderer.render(scene2d, camera2d); 262 + scene3d.remove(scene);
272 - renderer.render(scene3d, camera3d); 263 + };
273 - }; 264 +
274 - 265 + /**
275 - /** 266 + * Triggers the rendering of the composite scene
276 - * Computes the ideal camera position to see the whole 3D scene. 267 + * @function ARViewer#render
277 - * Mainly useful for debugging 268 + * @slot
278 - * @function ARViewer#viewAll 269 + */
279 - * @slot 270 + this.render = function () {
280 - */ 271 + videoTexture.needsUpdate = true;
281 - this.viewAll = function () { 272 + renderer.autoClear = false;
282 - var box = new THREE.Box3(); 273 + renderer.clear();
283 - box.setFromObject(scene3d); 274 + renderer.render(scene2d, camera2d);
284 - var center = box.center(); 275 + renderer.render(scene3d, camera3d);
285 - var radius = box.getBoundingSphere().radius; 276 + };
286 - 277 +
287 - camera3d.position.x = center.x ; 278 + /**
288 - camera3d.position.y = center.y ; 279 + * Computes the ideal camera position to see the whole 3D scene.
289 - var c = Math.cos(camera3d.fov/2); 280 + * Mainly useful for debugging
290 - var s = Math.sin(camera3d.fov/2); 281 + * @function ARViewer#viewAll
291 - 282 + * @slot
292 - camera3d.position.z = center.z + 1.2 * radius*s*( 1 + s / c ) ; 283 + */
293 - }; 284 + this.viewAll = function () {
294 - 285 + var box = new THREE.Box3();
295 - /** 286 + box.setFromObject(scene3d);
296 - * Resets the position of the camera to the origin of the scene coordinate system 287 + var center = box.center();
297 - * @slot 288 + var sphere = new THREE.Sphere();
298 - * @function ARViewer#resetCamera 289 + box.getBoundingSphere(sphere);
299 - */ 290 + var radius = sphere.radius;
300 - this.resetCamera = function () {
301 - camera3d.position.x = camera3d.position.y = camera3d.position.z = 0;
302 - camera3d.up = THREE.Object3D.DefaultUp.clone();
303 - }
304 291
305 - }, 292 + camera3d.position.x = center.x ;
306 - /** @lends ARViewer.slots */ 293 + camera3d.position.y = center.y ;
307 - [ 294 + var c = Math.cos(camera3d.fov/2);
308 - 'setWidgets','setFocal','viewAll','setSize','addScene', 295 + var s = Math.sin(camera3d.fov/2);
309 - 'resetCamera','removeScene','render','keepAspectRatio', 296 +
310 - 'setExtrinsics', 'setIntrinsics' 297 + camera3d.position.z = center.z + 1.2 * radius*s*( 1 + s / c ) ;
311 - 298 + };
312 - ], 299 +
313 - [] 300 + /**
314 - ); 301 + * Resets the position of the camera to the origin of the scene coordinate system
315 - return {ARViewer: ARViewer}; 302 + * @slot
303 + * @function ARViewer#resetCamera
304 + */
305 + this.resetCamera = function () {
306 + camera3d.position.x = camera3d.position.y = camera3d.position.z = 0;
307 + camera3d.up = THREE.Object3D.DefaultUp.clone();
308 + }
309 +
316 }, 310 },
317 - [ 'deps/three.js/index','deps/three.js/frustumcamera'] 311 + /** @lends ARViewer.slots */
312 + [
313 + 'setWidgets','setFocal','viewAll','setSize','addScene',
314 + 'resetCamera','removeScene','render','keepAspectRatio',
315 + 'setExtrinsics', 'setIntrinsics'
316 +
317 + ],
318 + []
318 ); 319 );
320 +
321 +export default {ARViewer: ARViewer};
322 +
......
1 +import ARCS from '../build/arcs.js';
2 +import POS from '../deps/pose/square_pose.js';
1 3
4 +var MarkerLocator;
2 5
3 -arcs_module( 6 +
4 - function (ARCS, POS) { 7 +MarkerLocator = ARCS.Component.create(
5 - var MarkerLocator; 8 + function () {
9 + var square_pose = new POS.SquareFiducial();
10 +
11 + this.setFocalLength = function (focalLength) {
12 + square_pose.setFocalLength(focalLength);
13 + };
14 +
15 + this.setModelSize = function (modelSize) {
16 + square_pose.setModelSize(modelSize);
17 + };
18 +
19 + this.setIntrinsics = function (intrinsics) {
20 + square_pose.setMatrix(intrinsics);
21 + };
6 22
23 + this.setImageSource = function (id) {
24 + var imageSource = document.getElementById(id);
25 + if (id === undefined) {
26 + return;
27 + }
28 +
29 + var imageSourceStyle = window.getComputedStyle(imageSource);
30 + square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
31 +
32 + };
7 33
8 - MarkerLocator = ARCS.Component.create( 34 + this.locateMarkers = function (markers) {
9 - function () { 35 + var k, pose;
10 - var square_pose = new POS.SquareFiducial(); 36 + for (k=0; k < markers.length; k++) {
11 - 37 + corners = markers[k].corners;
12 - this.setFocalLength = function (focalLength) { 38 + markers[k].pose = square_pose.pose(corners);
13 - square_pose.setFocalLength(focalLength); 39 + }
14 - }; 40 +
15 - 41 + this.emit("onLocatedMarkers",markers);
16 - this.setModelSize = function (modelSize) { 42 + };
17 - square_pose.setModelSize(modelSize); 43 + },
18 - }; 44 + ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
19 - 45 + ['onLocatedMarkers']
20 - this.setIntrinsics = function (intrinsics) { 46 +);
21 - square_pose.setMatrix(intrinsics);
22 - };
23 -
24 - this.setImageSource = function (id) {
25 - var imageSource = document.getElementById(id);
26 - if (id === undefined) {
27 - return;
28 - }
29 -
30 - var imageSourceStyle = window.getComputedStyle(imageSource);
31 - square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
32 -
33 - };
34 -
35 - this.locateMarkers = function (markers) {
36 - var k, pose;
37 - for (k=0; k < markers.length; k++) {
38 - corners = markers[k].corners;
39 - markers[k].pose = square_pose.pose(corners);
40 - }
41 -
42 - this.emit("onLocatedMarkers",markers);
43 - };
44 - },
45 - ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
46 - ['onLocatedMarkers']
47 - );
48 47
49 48
50 - return { MarkerLocator: MarkerLocator };
51 - },
52 - [ {name: "deps/pose/square_pose", exports: "POS"} ]
53 -);
...\ No newline at end of file ...\ No newline at end of file
49 +export default { MarkerLocator: MarkerLocator };
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function(ARCS,_three) { 2 +import * as THREE from '../deps/three.js/index.js';
3 - var ObjectTransform ;
4 3
5 - /** 4 +var ObjectTransform ;
6 - * @class ObjectTransform
7 - * @classdesc Apply transformations to objects
8 - */
9 - ObjectTransform = ARCS.Component.create(
10 - function() {
11 - var objRoot;
12 - var refMat;
13 - var id = -1;
14 5
15 - /** 6 +/**
16 - * Sets the object of interest on which we would like to apply transforms. 7 + * @class ObjectTransform
17 - * @param obj {object} a Three.js Object3D 8 + * @classdesc Apply transformations to objects
18 - * @function ObjectTransform#setObject 9 + */
19 - */ 10 +ObjectTransform = ARCS.Component.create(
20 - this.setObject = function (obj) { 11 + function() {
21 - objRoot = new THREE.Object3D(); 12 + var objRoot;
22 - obj.parent.add(objRoot); 13 + var refMat;
23 - obj.parent.remove(obj); 14 + var id = -1;
24 - objRoot.add(obj);
25 -
26 - var box = new THREE.Box3;
27 - box.setFromObject(obj);
28 - var s = box.size();
29 - var scale = MAX3(s.x, s.y, s.z);
30 - console.log(scale);
31 - obj.add(new THREE.AxisHelper(scale / 2));
32 - };
33 -
34 - var MAX3 = function (a,b,c) {
35 - if ( a >= b ) {
36 - if ( a >= c) {
37 - return a;
38 - } else {
39 - return c;
40 - }
41 - } else {
42 - if (b >= c) {
43 - return b;
44 - } else {
45 - return c;
46 - }
47 - }
48 - };
49 15
50 - 16 + /**
51 - 17 + * Sets the object of interest on which we would like to apply transforms.
52 - // right now, we make something compatible with aruco markers 18 + * @param obj {object} a Three.js Object3D
53 - // it may evolve in the future 19 + * @function ObjectTransform#setObject
54 - 20 + */
55 - /** 21 + this.setObject = function (obj) {
56 - * Takes an array of markers and then applies transformations 22 + objRoot = new THREE.Object3D();
57 - * to the referenced object. 23 + obj.parent.add(objRoot);
58 - * @function ObjectTransform#setTransform 24 + obj.parent.remove(obj);
59 - * @param arr {Marker[]} an array of detected markers. 25 + objRoot.add(obj);
60 - */ 26 +
61 - this.setTransform = function ( arr ) { 27 + var box = new THREE.Box3;
62 - /*2 set here the transformation we should apply on objRoot 28 + box.setFromObject(obj);
63 - * Each marker has 3 major properties : 29 + var s = box.size();
64 - * - id is the marker id; 30 + var scale = MAX3(s.x, s.y, s.z);
65 - * - pose.rotation gives its orientation using a rotation matrix 31 + console.log(scale);
66 - * and is a 3x3 array 32 + obj.add(new THREE.AxisHelper(scale / 2));
67 - * - pose.position gives its position with respect to the camera 33 + };
68 - * and is a vector with 3 components.
69 - */
70 - if (objRoot === undefined) { return ; }
71 - var i ;
72 - for ( i = 0; i < arr.length; i++) {
73 - if ( arr[i].id === id ) {
74 - // insert your code here.
75 -
76 - //<--
77 - var rotation = arr[i].pose.rotation;
78 - var translation = arr[i].pose.position;
79 - /*var matrix = new THREE.Matrix4(
80 - rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
81 - rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
82 - rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
83 - 0 , 0, 0, 1);
84 34
85 - var r = new THREE.Euler(); 35 + var MAX3 = function (a,b,c) {
86 - r.setFromRotationMatrix(matrix); 36 + if ( a >= b ) {
87 - objRoot.rotation.x = r.x; 37 + if ( a >= c) {
88 - objRoot.rotation.y = r.y; 38 + return a;
89 - objRoot.rotation.z = r.z; 39 + } else {
90 - 40 + return c;
91 - objRoot.position.x = translation[0]; 41 + }
92 - objRoot.position.y = translation[1]; 42 + } else {
93 - objRoot.position.z = translation[2]; 43 + if (b >= c) {
94 - 44 + return b;
95 - objRoot.scale.x = 1; 45 + } else {
96 - objRoot.scale.y = 1; 46 + return c;
97 - objRoot.scale.z = 1;*/
98 -
99 - objRoot.rotation.x = -Math.asin(-rotation[1][2]);
100 - objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
101 - objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
102 -
103 - objRoot.position.x = translation[0];
104 - objRoot.position.y = translation[1];
105 - objRoot.position.z = -translation[2];
106 - //-->
107 -
108 - }
109 } 47 }
110 - }; 48 + }
111 - 49 + };
112 - this.setId = function (i) {
113 - id = i;
114 - };
115 - },
116 - ['setObject', 'setTransform', 'setId'],
117 - []
118 - );
119 50
51 +
52 +
53 + // right now, we make something compatible with aruco markers
54 + // it may evolve in the future
55 +
56 + /**
57 + * Takes an array of markers and then applies transformations
58 + * to the referenced object.
59 + * @function ObjectTransform#setTransform
60 + * @param arr {Marker[]} an array of detected markers.
61 + */
62 + this.setTransform = function ( arr ) {
63 + /*2 set here the transformation we should apply on objRoot
64 + * Each marker has 3 major properties :
65 + * - id is the marker id;
66 + * - pose.rotation gives its orientation using a rotation matrix
67 + * and is a 3x3 array
68 + * - pose.position gives its position with respect to the camera
69 + * and is a vector with 3 components.
70 + */
71 + if (objRoot === undefined) { return ; }
72 + var i ;
73 + for ( i = 0; i < arr.length; i++) {
74 + if ( arr[i].id === id ) {
75 + // insert your code here.
76 +
77 + //<--
78 + var rotation = arr[i].pose.rotation;
79 + var translation = arr[i].pose.position;
80 + /*var matrix = new THREE.Matrix4(
81 + rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
82 + rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
83 + rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
84 + 0 , 0, 0, 1);
120 85
86 + var r = new THREE.Euler();
87 + r.setFromRotationMatrix(matrix);
88 + objRoot.rotation.x = r.x;
89 + objRoot.rotation.y = r.y;
90 + objRoot.rotation.z = r.z;
91 +
92 + objRoot.position.x = translation[0];
93 + objRoot.position.y = translation[1];
94 + objRoot.position.z = translation[2];
95 +
96 + objRoot.scale.x = 1;
97 + objRoot.scale.y = 1;
98 + objRoot.scale.z = 1;*/
99 +
100 + objRoot.rotation.x = -Math.asin(-rotation[1][2]);
101 + objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
102 + objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
121 103
122 - return { ObjectTransform : ObjectTransform }; 104 + objRoot.position.x = translation[0];
105 + objRoot.position.y = translation[1];
106 + objRoot.position.z = -translation[2];
107 + //-->
108 +
109 + }
110 + }
111 + };
112 +
113 + this.setId = function (i) {
114 + id = i;
115 + };
123 }, 116 },
124 - [ "deps/three.js/index" ]
125 -);
...\ No newline at end of file ...\ No newline at end of file
117 + ['setObject', 'setTransform', 'setId'],
118 + []
119 +);
120 +
121 +export default { ObjectTransform : ObjectTransform };
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function(ARCS, three, _objloader, _mtlloader, _objmtlloader) { 2 +import * as THREE from '../deps/three.js/index.js';
3 - var OBJLoader; 3 +import { OBJLoader } from '../deps/objloader/objloader.js';
4 +import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
5 +//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
4 6
7 +
8 +var internalOBJLoader;
9 +
10 +
11 +internalOBJLoader = ARCS.Component.create(
12 + function() {
13 + var self = this;
14 + var innerObject;
5 15
6 - OBJLoader = ARCS.Component.create( 16 + var onLoadWrapper = function(obj) {
7 - function() { 17 + innerObject = obj;
8 - var self = this; 18 + console.log("[OBJLoader] object has %d components", obj.children.length);
9 - var innerObject; 19 + //console.log(obj);
10 - 20 + self.emit("onLoad", obj);
11 - var onLoadWrapper = function(obj) { 21 + };
12 - innerObject = obj;
13 - console.log("[OBJLoader] object has %d components", obj.children.length);
14 - //console.log(obj);
15 - self.emit("onLoad", obj);
16 - };
17 22
18 - var onLoadJSON = function(geom, mat) { 23 + var onLoadJSON = function(geom, mat) {
19 - innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat)); 24 + innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
20 - 25 +
21 - self.emit("onLoad", innerObject); 26 + self.emit("onLoad", innerObject);
22 - }; 27 + };
23 - 28 +
24 - var progress = function ( xhr ) { 29 + var progress = function ( xhr ) {
25 - console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); 30 + console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
26 - }; 31 + };
27 - 32 +
28 - var error = function ( xhr ) { 33 + var error = function ( xhr ) {
29 - console.log( 'An error happened' ); 34 + console.log( 'An error happened' );
30 - }; 35 + };
31 - 36 +
32 - this.load = function(objURL, mtlURL) { 37 + this.load = function(objURL, mtlURL) {
33 - var loader; 38 + var loader;
34 - // we may use a string tokenizer to determine file types 39 + // we may use a string tokenizer to determine file types
35 - // then all would be in the same loading slot. 40 + // then all would be in the same loading slot.
36 - 41 +
37 - 42 + //console.log("loading objects", objURL, mtlURL);
38 - console.log("loading objects", objURL, mtlURL); 43 + var manager = new THREE.LoadingManager();
39 - if (mtlURL === undefined) { 44 + //manager.addHandler( /\.dds$/i, new DDSLoader() );
40 - //console.log("using loader"); 45 +
41 - loader = new THREE.OBJLoader(); 46 + if (mtlURL === undefined) {
42 - loader.load(objURL, onLoadWrapper, progress, error); 47 + //console.log("using loader");
48 + loader = new OBJLoader(manager);
49 + loader.load(objURL, onLoadWrapper, progress, error);
50 + } else {
51 + //console.log("using mtl loader");
52 + loader = new MTLLoader(manager);
53 + loader.load(mtlURL, function(materials) {
54 + materials.preload();
55 + console.log(materials);
56 + new OBJLoader(manager)
57 + .setMaterials(materials)
58 + .load(objURL, onLoadWrapper, progress, error);
59 + }, progress, error);
60 + }
61 + };
62 +
63 + this.loadJSON = function(jsonURL) {
64 + var loader;
65 + //console.log("loading objects", jsonURL);
66 + loader = new THREE.ObjectLoader();
67 + loader.load(jsonURL, onLoadJSON); //, progress, error);
68 +
69 +
70 + };
71 +
72 + var MAX3 = function (a,b,c) {
73 + if ( a >= b ) {
74 + if ( a >= c) {
75 + return a;
43 } else { 76 } else {
44 - //console.log("using mtl loader"); 77 + return c;
45 - loader = new THREE.OBJMTLLoader();
46 - loader.load(objURL, mtlURL, onLoadWrapper, progress, error);
47 } 78 }
48 - }; 79 + } else {
49 - 80 + if (b >= c) {
50 - this.loadJSON = function(jsonURL) { 81 + return b;
51 - var loader;
52 - //console.log("loading objects", jsonURL);
53 - loader = new THREE.JSONLoader();
54 - loader.load(jsonURL, onLoadJSON); //, progress, error);
55 -
56 -
57 - };
58 -
59 - var MAX3 = function (a,b,c) {
60 - if ( a >= b ) {
61 - if ( a >= c) {
62 - return a;
63 - } else {
64 - return c;
65 - }
66 } else { 82 } else {
67 - if (b >= c) { 83 + return c;
68 - return b;
69 - } else {
70 - return c;
71 - }
72 } 84 }
73 - }; 85 + }
74 - 86 + };
75 - this.unitize = function() { 87 +
76 - if (innerObject === undefined) { return ; } 88 + this.unitize = function() {
77 - var box = new THREE.Box3(); 89 + if (innerObject === undefined) { return ; }
78 - box.setFromObject(innerObject); 90 + var box = new THREE.Box3();
79 - var s = box.size(); 91 + box.setFromObject(innerObject);
80 - var c = box.center(); 92 + var s = box.size();
81 - var scale = 1 / MAX3(s.x, s.y, s.z); 93 + var c = box.center();
82 - innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale; 94 + var scale = 1 / MAX3(s.x, s.y, s.z);
83 - }; 95 + innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale;
84 - 96 + };
85 - this.resize = function(s) { 97 +
86 - this.unitize(); 98 + this.resize = function(s) {
87 - if (innerObject === undefined) { return ; } 99 + this.unitize();
88 - innerObject.scale.x *= s; 100 + if (innerObject === undefined) { return ; }
89 - innerObject.scale.y *= s; 101 + innerObject.scale.x *= s;
90 - innerObject.scale.z *= s; 102 + innerObject.scale.y *= s;
91 - }; 103 + innerObject.scale.z *= s;
92 - 104 + };
93 - },
94 - ["load","unitize", "resize"],
95 - ["onLoad"]
96 - );
97 105
98 - return { OBJLoader: OBJLoader};
99 }, 106 },
100 - [ 'deps/three.js/index', 'deps/objloader/index', 'deps/mtlloader/index','deps/objmtlloader/index' ]
101 -);
...\ No newline at end of file ...\ No newline at end of file
107 + ["load","unitize", "resize"],
108 + ["onLoad"]
109 +);
110 +
111 +export default { OBJLoader: internalOBJLoader};
......
1 -arcs_module(function(ARCS) { 1 +import ARCS from '../build/arcs.js';
2 - var TokenSender;
3 2
4 - TokenSender = ARCS.Component.create( 3 +var TokenSender;
5 - function( arr ) {
6 - var i;
7 - var self = this;
8 - for (i=0; i< arr.length; i++) {
9 - if (typeof arr[i] === "string") {
10 - this.slots.push(arr[i]);
11 - //TokenSender.prototype.slots.push(arr[i]);
12 - this[arr[i]] = function( s ) {
13 - return function() {
14 - console.log("[TokenSender] emitting %s", s);
15 - this.emit("sendToken",s);
16 - };
17 - } (arr[i]);
18 - }
19 - }
20 - },
21 - [],
22 - ['sendToken']
23 - );
24 4
25 - return { TokenSender : TokenSender };
26 -});
...\ No newline at end of file ...\ No newline at end of file
5 +TokenSender = ARCS.Component.create(
6 + function( arr ) {
7 + var i;
8 + var self = this;
9 + for (i=0; i< arr.length; i++) {
10 + if (typeof arr[i] === "string") {
11 + this.slots.push(arr[i]);
12 + //TokenSender.prototype.slots.push(arr[i]);
13 + this[arr[i]] = function( s ) {
14 + return function() {
15 + console.log("[TokenSender] emitting %s", s);
16 + this.emit("sendToken",s);
17 + };
18 + } (arr[i]);
19 + }
20 + }
21 + },
22 + [],
23 + ['sendToken']
24 +);
25 +
26 +export default { TokenSender : TokenSender };
......
1 -arcs_module(function(ARCS) { 1 +import ARCS from '../build/arcs.js';
2 - var LiveSource, VideoSource; 2 +
3 - LiveSource = ARCS.Component.create( 3 +var LiveSource, VideoSource;
4 - function () { 4 +LiveSource = ARCS.Component.create(
5 - var context, canvas, video, imageData; 5 + function () {
6 - var defaultWidth = 320; 6 + var context, canvas, video, imageData;
7 - var defaultHeight = 240; 7 + var defaultWidth = 320;
8 - var self = this; 8 + var defaultHeight = 240;
9 - 9 + var self = this;
10 - var handleMediaStream = function(stream) { 10 +
11 - if (window.webkitURL) { 11 + var handleMediaStream = function(stream) {
12 - video.src = window.webkitURL.createObjectURL(stream); 12 + console.log(video,stream);
13 - } else if (video.mozSrcObject !== undefined) { 13 + if (window.webkitURL) {
14 - video.mozSrcObject = stream; 14 + video.src = window.webkitURL.createObjectURL(stream);
15 - } else { 15 + } else if (video.mozSrcObject !== undefined) {
16 - video.src = stream; 16 + video.mozSrcObject = stream;
17 - } 17 + } else if (video.srcObject !== undefined) {
18 - video.videoWidth=defaultWidth; 18 + video.srcObject = stream;
19 - video.videoHeight=defaultHeight; 19 + } else {
20 - self.emit("onReady"); 20 + video.src = stream;
21 - }; 21 + }
22 - 22 + /*video.videoWidth=defaultWidth;
23 - var errorMediaStream = function(error) { 23 + video.videoHeight=defaultHeight;*/
24 - console.error("Cannot initialize video component:", error.code); 24 + self.emit("onReady");
25 - }; 25 + };
26 - 26 +
27 - var setUserMedia = function() { 27 + var errorMediaStream = function(error) {
28 - console.log("video test"); 28 + console.error("Cannot initialize video component:", error.code);
29 - if (navigator.mediaDevices !== undefined) { 29 + };
30 - navigator.mediaDevices.getUserMedia({video:true}) 30 +
31 - .then(handleMediaStream) 31 + var setUserMedia = function() {
32 - .catch(errorMediaStream); 32 + if (navigator.mediaDevices !== undefined) {
33 - } else { 33 + navigator.mediaDevices.getUserMedia({video: {facingMode: "environment", width: defaultWidth, height: defaultHeight}})
34 - var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 34 + .then(handleMediaStream)
35 - if (getUserMedia !== undefined) { 35 + .catch(errorMediaStream);
36 - getUserMedia({video:true}, handleMediaStream, 36 + } else {
37 - errorMediaStream 37 + var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
38 - ); 38 + if (getUserMedia !== undefined) {
39 - } 39 + getUserMedia({video:true}).then(handleMediaStream);
40 - }
41 - };
42 -
43 - this.grabFrame = function () {
44 - if ( context === undefined || canvas === undefined || video === undefined)
45 - return;
46 - if (video.readyState === video.HAVE_ENOUGH_DATA) {
47 - context.drawImage(video, 0, 0, canvas.width, canvas.height);
48 - imageData = context.getImageData(0, 0, canvas.width, canvas.height);
49 - this.emit("onImage",imageData);
50 } 40 }
51 - }; 41 + }
42 + };
43 +
44 + this.grabFrame = function () {
45 + if ( context === undefined || canvas === undefined || video === undefined)
46 + return;
47 + if (video.readyState === video.HAVE_ENOUGH_DATA) {
48 + context.drawImage(video, 0, 0, canvas.width, canvas.height);
49 + imageData = context.getImageData(0, 0, canvas.width, canvas.height);
50 + this.emit("onImage",imageData);
51 + }
52 + };
53 +
54 + this.setSize = function(x,y) {
52 55
53 - this.setSize = function(x,y) { 56 + };
54 - 57 +
55 - }; 58 + this.setWidgets = function (videoId, canvasId) {
59 + video = document.getElementById(videoId);
60 + canvas = document.getElementById(canvasId);
56 61
57 - this.setWidgets = function (videoId, canvasId) { 62 + if (video === undefined || canvas === undefined) {
58 - video = document.getElementById(videoId); 63 + console.log("video elements not defined");
59 - canvas = document.getElementById(canvasId); 64 + return;
60 - 65 + }
61 - if (video === undefined || canvas === undefined) { 66 + context = canvas.getContext("2d");
62 - console.log("video elements not defined"); 67 + var canvasStyle= window.getComputedStyle(canvas);
63 - return; 68 + canvas.width=parseInt(canvasStyle.width);
64 - } 69 + canvas.height=parseInt(canvasStyle.height);
65 - context = canvas.getContext("2d"); 70 + setUserMedia();
66 - var canvasStyle= window.getComputedStyle(canvas); 71 + };
67 - canvas.width=parseInt(canvasStyle.width); 72 + },
68 - canvas.height=parseInt(canvasStyle.height); 73 + ['grabFrame','setWidgets'],
69 - setUserMedia(); 74 + ['onReady','onImage']
70 - }; 75 +);
71 - }, 76 +
72 - ['grabFrame','setWidgets'], 77 +
73 - ['onReady','onImage'] 78 +VideoSource = ARCS.Component.create(
74 - ); 79 + function() {
75 - 80 + var context, canvas, video, imageData;
76 - 81 + var defaultWidth=320;
77 - VideoSource = ARCS.Component.create( 82 + var defaultHeight=240;
78 - function() { 83 + var self=this;
79 - var context, canvas, video, imageData; 84 +
80 - var defaultWidth=320; 85 + this.setWidgets = function (videoId, canvasId) {
81 - var defaultHeight=240; 86 + video = document.getElementById(videoId);
82 - var self=this; 87 + canvas = document.getElementById(canvasId);
83 88
84 - this.setWidgets = function (videoId, canvasId) { 89 + if (video === undefined || canvas === undefined) {
85 - video = document.getElementById(videoId); 90 + return;
86 - canvas = document.getElementById(canvasId); 91 + }
87 - 92 + context = canvas.getContext("2d");
88 - if (video === undefined || canvas === undefined) { 93 + var canvasStyle= window.getComputedStyle(canvas);
89 - return; 94 + canvas.width=parseInt(canvasStyle.width);
90 - } 95 + canvas.height=parseInt(canvasStyle.height);
91 - context = canvas.getContext("2d");
92 - var canvasStyle= window.getComputedStyle(canvas);
93 - canvas.width=parseInt(canvasStyle.width);
94 - canvas.height=parseInt(canvasStyle.height);
95 96
96 - if (video.paused || video.ended) { 97 + if (video.paused || video.ended) {
97 - video.addEventListener('play', function() { 98 + video.addEventListener('play', function() {
98 - self.emit("onReady");
99 - });
100 - } else {
101 self.emit("onReady"); 99 self.emit("onReady");
102 - } 100 + });
103 - 101 + } else {
104 - 102 + self.emit("onReady");
105 - }; 103 + }
106 104
107 - this.grabFrame = function () {
108 - if ( context === undefined || canvas === undefined || video === undefined)
109 - return;
110 - if (video.paused || video.ended) {
111 - return;
112 - }
113 -
114 - context.drawImage(video, 0, 0, canvas.width, canvas.height);
115 - imageData = context.getImageData(0, 0, canvas.width, canvas.height);
116 - this.emit("onImage",imageData);
117 - };
118 105
106 + };
107 +
108 + this.grabFrame = function () {
109 + if ( context === undefined || canvas === undefined || video === undefined)
110 + return;
111 + if (video.paused || video.ended) {
112 + return;
113 + }
114 +
115 + context.drawImage(video, 0, 0, canvas.width, canvas.height);
116 + imageData = context.getImageData(0, 0, canvas.width, canvas.height);
117 + this.emit("onImage",imageData);
118 + };
119 119
120 - },
121 - ['grabFrame', 'setWidgets'],
122 - ['onReady', 'onImage']
123 - );
124 120
121 + },
122 + ['grabFrame', 'setWidgets'],
123 + ['onReady', 'onImage']
124 +);
125 125
126 - return {LiveSource: LiveSource, VideoSource: VideoSource};
127 -});
...\ No newline at end of file ...\ No newline at end of file
126 +
127 +
128 +export default {LiveSource: LiveSource, VideoSource: VideoSource};
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function (ARCS) {
3 - var WindowEvent;
4 2
5 - WindowEvent = ARCS.Component.create( 3 +let WindowEvent;
6 - function () { 4 +
7 - var self= this; 5 +WindowEvent = ARCS.Component.create(
8 - 6 + function () {
9 - window.onresize = function() { 7 + let self= this;
10 - self.emit("onResize",window.innerWidth, window.innerHeight); 8 +
11 - }; 9 + window.onresize = function() {
12 - }, 10 + self.emit("onResize",window.innerWidth, window.innerHeight);
13 - [], 11 + };
14 - ["onResize"] 12 + },
15 - ); 13 + [],
14 + ["onResize"]
15 +);
16 16
17 - return { WindowEvent: WindowEvent};
18 - }
19 -);
...\ No newline at end of file ...\ No newline at end of file
17 +
18 +export default { WindowEvent: WindowEvent};
......
...@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){ ...@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
493 493
494 return new Vec3( m[index][0], m[index][1], m[index][2] ); 494 return new Vec3( m[index][0], m[index][1], m[index][2] );
495 }; 495 };
496 +
497 +export default POS;
......
...@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat ...@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
529 this.alternativeRotation = rotation2; 529 this.alternativeRotation = rotation2;
530 this.alternativeTranslation = translation2; 530 this.alternativeTranslation = translation2;
531 }; 531 };
532 +
533 +export default POS;
......
...@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) { ...@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) {
129 POS.SimplePose = function(pos, rot) { 129 POS.SimplePose = function(pos, rot) {
130 this.position = pos; 130 this.position = pos;
131 this.rotation = rot; 131 this.rotation = rot;
132 -};
...\ No newline at end of file ...\ No newline at end of file
132 +};
133 +
134 +export default POS;
......
...@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){ ...@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){
281 SVD.sign = function(a, b){ 281 SVD.sign = function(a, b){
282 return b >= 0.0? Math.abs(a): -Math.abs(a); 282 return b >= 0.0? Math.abs(a): -Math.abs(a);
283 }; 283 };
284 +
285 +export default SVD;
......
1 -arcs_module(function(ARCS) { 1 +import * as THREE from './index.js';
2 -THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) { 2 +
3 +let FrustumCamera = function ( left, right, bottom, top, near, far ) {
3 4
4 THREE.Camera.call( this ); 5 THREE.Camera.call( this );
5 6
...@@ -17,22 +18,22 @@ THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) { ...@@ -17,22 +18,22 @@ THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) {
17 18
18 }; 19 };
19 20
20 -THREE.FrustumCamera.prototype = Object.create( THREE.Camera.prototype ); 21 +FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
21 -THREE.FrustumCamera.prototype.constructor = THREE.FrustumCamera; 22 +FrustumCamera.prototype.constructor = FrustumCamera;
22 23
23 24
24 25
25 26
26 -THREE.FrustumCamera.prototype.updateProjectionMatrix = function () { 27 +FrustumCamera.prototype.updateProjectionMatrix = function () {
27 28
28 this.projectionMatrix.makeFrustum( 29 this.projectionMatrix.makeFrustum(
29 this.left, this.right, this.bottom, this.top, this.near, this.far 30 this.left, this.right, this.bottom, this.top, this.near, this.far
30 ); 31 );
31 }; 32 };
32 33
33 -THREE.FrustumCamera.prototype.clone = function () { 34 +FrustumCamera.prototype.clone = function () {
34 35
35 - var camera = new THREE.FrustumCamera(); 36 + var camera = new FrustumCamera();
36 37
37 THREE.Camera.prototype.clone.call( this, camera ); 38 THREE.Camera.prototype.clone.call( this, camera );
38 39
...@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () { ...@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () {
51 52
52 }; 53 };
53 54
54 -return {}; 55 +export default FrustumCamera;
55 -}, ['deps/three.js/index']
56 -);
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 "Reality" 11 "Reality"
12 ], 12 ],
13 "author": "Jean-Yves Didier", 13 "author": "Jean-Yves Didier",
14 - "license": "GPL", 14 + "license": "GPL-3.0-or-later",
15 "devDependencies": { 15 "devDependencies": {
16 "bower": ">=1.3.9", 16 "bower": ">=1.3.9",
17 "grunt": ">=0.4.5", 17 "grunt": ">=0.4.5",
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
20 "grunt-jsdoc": ">=0.5.6", 20 "grunt-jsdoc": ">=0.5.6",
21 "grunt-bower-task": ">=0.4.0", 21 "grunt-bower-task": ">=0.4.0",
22 "grunt-contrib-concat": ">=0.5.0", 22 "grunt-contrib-concat": ">=0.5.0",
23 - "grunt-contrib-copy": ">=1.0.0" 23 + "grunt-contrib-copy": ">=1.0.0",
24 + "grunt-file-append": ">=0.0.7",
25 + "grunt-string-replace": ">=1.3.1"
24 } 26 }
25 } 27 }
......
1 { 1 {
2 "context": { 2 "context": {
3 "libraries": [ 3 "libraries": [
4 - "components/arviewer","components/animator", 4 + "../components/arviewer.js","../components/animator.js",
5 - "components/objloader","components/video", 5 + "../components/objloader.js","../components/video.js",
6 - "components/arucodetector", "components/markerlocator", 6 + "../components/arucodetector.js", "../components/markerlocator.js",
7 - "components/windowevent", "components/tokensender", "components/objecttransform" 7 + "../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
8 ], 8 ],
9 "components": { 9 "components": {
10 "viewer": { "type": "ARViewer"}, 10 "viewer": { "type": "ARViewer"},
......
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
2 <head> 2 <head>
3 <title>ARCS: marker experiment</title> 3 <title>ARCS: marker experiment</title>
4 <link type="text/css" rel="stylesheet" href="arcs.css"> 4 <link type="text/css" rel="stylesheet" href="arcs.css">
5 - <script data-main="../../build/arcs_browser" 5 + <script src="../../build/arcs_browser.js"
6 data-base-url="../.." 6 data-base-url="../.."
7 data-arcsapp="arcsapp.json" 7 data-arcsapp="arcsapp.json"
8 - src="../../deps/requirejs/require.js"> 8 + type="module">
9 </script> 9 </script>
10 <meta charset="UTF-8"> 10 <meta charset="UTF-8">
11 </head> 11 </head>
12 <body> 12 <body>
13 - <video id="video" width=320 height=240 autoplay="true" style="display: none;"></video> 13 + <video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
14 <canvas id="canvas"></canvas> 14 <canvas id="canvas"></canvas>
15 <div id="container" ></div> 15 <div id="container" ></div>
16 <div id="contents"> 16 <div id="contents">
......