arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
6d2dd53c 1 parent 20794bb6

cleanup for a better npm publication

Expand all
Inline Side-by-side
Showing 158 changed files with 0 additions and 4956 deletions
newmtl Material
Ns 92.1568627451
Kd 0.756191134453 0.756191134453 0.756191134453
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl (null)
Ns 92.1568627451
Kd 0.800000011921 0.800000011921 0.800000011921
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1L
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2L
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3L
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4L
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handL
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1R
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2R
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3R
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4R
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pelvis
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handR
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl coat
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shirt
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl tie
Ns 92.1568627451
Kd 0.5 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl buttons
Ns 92.1568627451
Kd 0.40000000596 0.40000000596 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hat
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl band
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.300000011921
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl face
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hair
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisR
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilR
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisL
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilL
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
video {
width: 320px;
height: 240px;
}
#canvas {
width: 320px;
height: 240px;
display: none;
}
.hide {
display: none;
}
#scorezone {
position: absolute;
z-index: 10;
left: 40px;
top: 40px;
padding: 10px;
background: navy;
/*height: 2em;*/
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
#console {
position: absolute;
bottom: 10px;
margin: 10px;
padding: 0px;
font-weight: bold;
width: auto;
border: solid 1px black;
background: navy;
opacity: 0.6;
color: white;
}
#contents {
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
#notification {
position: absolute;
left: 50%;
margin-left: -35%;
top: 50%;
margin-top: -1.5em;
text-align: center;
width: 70%;
bottom: 50%;
display: none;
font-size: 180%;
font-weight: bold;
background: navy;
height: 3em;
opacity: 0.6;
color: white;
display: none;
}
#output {
color: white;
height: 4em;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
scroll-top: false;
overflow: auto;
width: 90%;
}
.central {
position: absolute;
text-align: center;
margin: 10px;
left: auto;
right: auto;
top: auto;
bottom: 50%;
}
.marker {
display: inline-block;
width: 6em;
padding-right: 1em;
text-align: right;
}
#container {
left:0px;
top:0px;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context": {
"libraries": [
"../components/arviewer.js","../components/animator.js",
"../components/objloader.js","../components/video.js",
"../components/arucodetector.js", "../components/markerlocator.js",
"../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
],
"components": {
"viewer": { "type": "ARViewer"},
"animator": { "type": "Animator"},
"detector": { "type": "ARUCODetector" },
"locator": { "type":"MarkerLocator"},
"windowresize": { "type": "WindowEvent"},
"objectTransform": { "type": "ObjectTransform"},
"ts" : { "type": "TokenSender", "value": ["next"] },
"sm": {
"type": "StateMachine",
"value": {
"initial": "init", "final": "end",
"transitions": {
"init": { "next": "start"},
"start": { "next": "end" }
}
}
},
"objectLoader": {"type": "OBJLoader"},
"video": {"type": "LiveSource"}
}
},
"controller" : "sm",
"sheets": {
"init" : {
"preconnections": [
{ "destination": "video", "slot": "setWidgets", "value": ["video", "canvas"] },
{ "destination": "viewer", "slot": "keepAspectRatio", "value": [true] },
{ "destination": "viewer", "slot": "setWidgets", "value": ["container", "video"]},
{ "destination": "viewer", "slot": "setFocal", "value": [ 600 ]},
{ "destination": "objectTransform", "slot": "setId", "value": [ 17 ] },
{ "destination": "viewer", "slot": "setSceneId", "value": [17] },
{ "destination":"locator", "slot":"setImageSource", "value":["canvas"]},
{ "destination": "locator", "slot":"setModelSize", "value":[0.07]},
{ "destination": "locator", "slot": "setIntrinsics", "value": [ [ 600 , 0 , 160, 0, 600, 120, 0 ,0, 1 ] ]}
],
"postconnections": [
{ "destination": "objectLoader", "slot": "load", "value": ["al3.obj","al2.mtl"] }
],
"connections": [
{ "source": "objectLoader", "signal": "onLoad", "destination": "viewer", "slot": "addScene" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "objectTransform", "slot" : "setObject" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "ts", "slot" : "next" },
{ "source": "ts", "signal": "sendToken", "destination": "sm", "slot" : "setToken" }
],
"cleanups": [
{ "destination": "objectLoader", "slot": "resize", "value": [0.05]}
]
},
"start": {
"preconnections": [
],
"postconnections": [
{ "destination": "viewer", "slot": "viewAll", "value": []},
{ "destination": "animator", "slot": "start", "value":[]}
],
"connections": [
{ "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
{ "source": "detector", "signal": "onMarkers", "destination": "locator", "slot": "locateMarkers"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "viewer", "slot": "render"},
{ "source": "video", "signal": "onReady", "destination": "viewer", "slot": "resetCamera"},
{ "source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"},
{ "source": "locator", "signal": "onLocatedMarkers", "destination": "objectTransform", "slot": "setTransform"}
],
"cleanups": []
},
"end": {
"preconnections": [],
"postconnections": [],
"connections": [],
"cleanups": []
}
}
}
<html>
<head>
<title>ARCS: marker experiment</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script src="../../build/arcs_browser.js"
data-base-url="../.."
data-arcsapp="arcsapp.json"
type="module">
</script>
<meta charset="UTF-8">
</head>
<body>
<video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
<canvas id="canvas"></canvas>
<div id="container" ></div>
<div id="contents">
<!-- div id="console">
<div style="float: right; font-size: 150%; padding:0; margin:0;" onclick="document.getElementById('output').classList.toggle('hide');">&#9881;</div>
<p id="output">Console log:<br/></p>
</div -->
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</body>
</html>
newmtl Material
Ns 92.1568627451
Kd 0.756191134453 0.756191134453 0.756191134453
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl (null)
Ns 92.1568627451
Kd 0.800000011921 0.800000011921 0.800000011921
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1L
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2L
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3L
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4L
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handL
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1R
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2R
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3R
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4R
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pelvis
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handR
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl coat
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shirt
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl tie
Ns 92.1568627451
Kd 0.5 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl buttons
Ns 92.1568627451
Kd 0.40000000596 0.40000000596 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hat
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl band
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.300000011921
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl face
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hair
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisR
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilR
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisL
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilL
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
#canvas {
width: 320px;
height: 240px;
display: none;
}
.hide {
display: none;
}
#scorezone {
position: absolute;
z-index: 10;
left: 40px;
top: 40px;
padding: 10px;
background: navy;
/*height: 2em;*/
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
#console {
position: absolute;
bottom: 10px;
margin: 10px;
padding: 0px;
font-weight: bold;
width: auto;
border: solid 1px black;
background: navy;
opacity: 0.6;
color: white;
}
#contents {
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
#notification {
position: absolute;
left: 50%;
margin-left: -35%;
top: 50%;
margin-top: -1.5em;
text-align: center;
width: 70%;
bottom: 50%;
display: none;
font-size: 180%;
font-weight: bold;
background: navy;
height: 3em;
opacity: 0.6;
color: white;
display: none;
}
#output {
color: white;
height: 4em;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
scroll-top: false;
overflow: auto;
width: 90%;
}
.central {
position: absolute;
text-align: center;
margin: 10px;
left: auto;
right: auto;
top: auto;
bottom: 50%;
}
.marker {
display: inline-block;
width: 6em;
padding-right: 1em;
text-align: right;
}
#container {
left:0px;
top:0px;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context": {
"libraries": [
"components/arviewer","components/animator",
"components/objloader","components/video",
"components/arucodetector", "components/markerlocator",
"components/windowevent", "components/tokensender", "components/objecttransform"
],
"components": {
"viewer": { "type": "ARViewer"},
"animator": { "type": "Animator"},
"detector": { "type": "ARUCODetector" },
"locator": { "type":"MarkerLocator"},
"windowresize": { "type": "WindowEvent"},
"objectTransform": { "type": "ObjectTransform"},
"ts" : { "type": "TokenSender", "value": ["next"] },
"sm": {
"type": "StateMachine",
"value": {
"initial": "init", "final": "end",
"transitions": {
"init": { "next": "start"},
"start": { "next": "end" }
}
}
},
"objectLoader": {"type": "OBJLoader"},
"video": {"type": "VideoSource"}
}
},
"controller" : "sm",
"sheets": {
"init" : {
"preconnections": [
{ "destination": "video", "slot": "setWidgets", "value": ["video", "canvas"] },
{ "destination": "viewer", "slot": "keepAspectRatio", "value": [true] },
{ "destination": "viewer", "slot": "setWidgets", "value": ["container", "video"]},
{ "destination": "viewer", "slot": "setFocal", "value": [ 600 ]},
{ "destination": "objectTransform", "slot": "setId", "value": [ 17 ] },
{ "destination": "viewer", "slot": "setSceneId", "value": [17] },
{ "destination":"locator", "slot":"setImageSource", "value":["canvas"]},
{ "destination": "locator", "slot":"setModelSize", "value":[0.07]},
{ "destination": "locator", "slot": "setIntrinsics", "value": [ [ 600 , 0 , 160, 0, 600, 120, 0 ,0, 1 ] ]}
],
"postconnections": [
{ "destination": "objectLoader", "slot": "load", "value": ["al3.obj","al2.mtl"] }
],
"connections": [
{ "source": "objectLoader", "signal": "onLoad", "destination": "viewer", "slot": "addScene" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "objectTransform", "slot" : "setObject" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "ts", "slot" : "next" },
{ "source": "ts", "signal": "sendToken", "destination": "sm", "slot" : "setToken" }
],
"cleanups": [
{ "destination": "objectLoader", "slot": "resize", "value": [0.05]}
]
},
"start": {
"preconnections": [
],
"postconnections": [
{ "destination": "viewer", "slot": "viewAll", "value": []},
{ "destination": "animator", "slot": "start", "value":[]}
],
"connections": [
{ "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
{ "source": "detector", "signal": "onMarkers", "destination": "locator", "slot": "locateMarkers"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "viewer", "slot": "render"},
{ "source": "video", "signal": "onReady", "destination": "viewer", "slot": "resetCamera"},
{ "source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"},
{ "source": "locator", "signal": "onLocatedMarkers", "destination": "objectTransform", "slot": "setTransform"}
],
"cleanups": []
},
"end": {
"preconnections": [],
"postconnections": [],
"connections": [],
"cleanups": []
}
}
}
<html>
<head>
<title>ARCS: marker experiment</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
<meta charset="UTF-8">
</head>
<body>
<video id="video" width=320 height=240 autoplay="true" loop="true" style="display: none;">
<source src="webcam.webm" type="video/webm">
</video>
<canvas id="canvas"></canvas>
<div id="container" ></div>
<div id="contents">
<!-- div id="console">
<div style="float: right; font-size: 150%; padding:0; margin:0;" onclick="document.getElementById('output').classList.toggle('hide');">&#9881;</div>
<p id="output">Console log:<br/></p>
</div -->
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</body>
</html>
No preview for this file type
newmtl Material
Ns 92.1568627451
Kd 0.756191134453 0.756191134453 0.756191134453
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl (null)
Ns 92.1568627451
Kd 0.800000011921 0.800000011921 0.800000011921
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1L
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2L
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3L
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4L
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handL
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmL
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe1R
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe2R
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe3R
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shoe4R
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowlegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uplegR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pelvis
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl lowarmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl sleaveR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl handR
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl coat
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl shirt
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl tie
Ns 92.1568627451
Kd 0.5 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl buttons
Ns 92.1568627451
Kd 0.40000000596 0.40000000596 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl uparmR
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hat
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.20000000298
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl band
Ns 92.1568627451
Kd 0.10000000149 0.10000000149 0.300000011921
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl face
Ns 92.1568627451
Kd 0.899999976158 0.5 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl hair
Ns 92.1568627451
Kd 0.300000011921 0.20000000298 0.10000000149
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisR
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteR
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilR
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl irisL
Ns 92.1568627451
Kd 0.20000000298 0.20000000298 0.40000000596
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl eyewhiteL
Ns 92.1568627451
Kd 1.0 1.0 1.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
newmtl pupilL
Ns 92.1568627451
Kd 0.0 0.0 0.0
Ka 0.20000000298 0.20000000298 0.20000000298
Ks 1.0 1.0 1.0
d 1.0
illum 2
This diff could not be displayed because it is too large.
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
#canvas {
width: 256px;
height: 256px;
position: absolute;
margin:0px;
padding:0px;
left: 0px;
bottom:0px;
background: #4F81BD;
}
#videoCanvas {
width: 640px;
height: 480px;
}
.hide {
display: none;
}
#scorezone {
position: absolute;
z-index: 10;
left: 40px;
top: 40px;
padding: 10px;
background: navy;
/*height: 2em;*/
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
#console {
position: absolute;
top: 10px;
margin: 10px;
padding: 0px;
font-weight: bold;
width: auto;
border: solid 1px black;
background: navy;
opacity: 0.6;
color: white;
}
#contents {
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
#notification {
position: absolute;
left: 50%;
margin-left: -35%;
top: 50%;
margin-top: -1.5em;
text-align: center;
width: 70%;
bottom: 50%;
display: none;
font-size: 180%;
font-weight: bold;
background: navy;
height: 3em;
opacity: 0.6;
color: white;
display: none;
}
#output {
color: white;
height: 4em;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
scroll-top: false;
overflow: auto;
width: 90%;
}
.central {
position: absolute;
text-align: center;
margin: 10px;
left: auto;
right: auto;
top: auto;
bottom: 50%;
}
.marker {
display: inline-block;
width: 6em;
padding-right: 1em;
text-align: right;
}
#container {
left:0px;
top:0px;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context": {
"libraries": [
"components/arviewer","components/animator",
"components/objloader","components/video",
"components/windowevent", "components/tokensender", "components/objecttransform",
"components/dicedetector"
],
"components": {
"viewer": { "type": "ARViewer"},
"animator": { "type": "Animator"},
"windowresize": { "type": "WindowEvent"},
"detector": {
"type" : "DiceDetector", "value": {
"canvas" : "canvas",
"debugCanvas" : "videoCanvas",
"faces": [
{
"center" : [ 0, 0, 0.03 ],
"xaxis" : [ 1, 0, 0],
"yaxis" : [ 0, 1, 0],
"width" : 0.06, "height": 0.06,
"imageId" : "lena"
},
{
"center" : [-0.03, 0, 0],
"xaxis" : [0, -1, 0],
"yaxis" : [0, 0, -1],
"width": 0.06, "height": 0.06,
"imageId" : "tux"
},
{
"center" : [0.03, 0, 0],
"xaxis" : [0, 1, 0],
"yaxis" : [0, 0, -1],
"width": 0.06, "height": 0.06,
"imageId" : "gnu"
},
{
"center" : [0, 0.03, 0],
"xaxis" : [1, 0, 0],
"yaxis" : [0, 0, 1],
"width": 0.06, "height": 0.06,
"imageId" : "earth"
},
{
"center" : [0, -0.03, 0],
"xaxis" : [1, 0, 0],
"yaxis" : [0, 0, -1],
"width": 0.06, "height": 0.06,
"imageId" : "mandrill"
},
{
"center" : [0, 0, -0.03],
"xaxis" : [-1, 0, 0],
"yaxis" : [0, 1, 0],
"width": 0.06, "height": 0.06,
"imageId" : "queen"
}
]
}
},
"objectTransform": { "type": "ObjectTransform"},
"ts" : { "type": "TokenSender", "value": ["next"] },
"sm": {
"type": "StateMachine",
"value": {
"initial": "init", "final": "end",
"transitions": {
"init": { "next": "start"},
"start": { "next": "end" }
}
}
},
"objectLoader": {"type": "OBJLoader"},
"video": {"type": "LiveSource"}
}
},
"controller" : "sm",
"sheets": {
"init" : {
"preconnections": [
{ "destination": "video", "slot": "setWidgets", "value": ["video", "videoCanvas"] },
{ "destination": "viewer", "slot": "keepAspectRatio", "value": [true] },
{ "destination": "viewer", "slot": "setWidgets", "value": ["container", "videoCanvas"]},
{ "destination": "viewer", "slot": "setFocal", "value": [ 600 ]},
{ "destination": "detector", "slot": "setFocalLength", "value" : [ 600 ]},
{ "destination": "detector", "slot": "setId", "value": [1337]},
{ "destination": "objectTransform", "slot": "setId", "value": [ 1337 ] },
{ "destination": "viewer", "slot": "setSceneId", "value": [1337] }
],
"postconnections": [
{ "destination": "objectLoader", "slot": "load", "value": ["al3.obj","al2.mtl"] }
],
"connections": [
{ "source": "objectLoader", "signal": "onLoad", "destination": "viewer", "slot": "addScene" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "objectTransform", "slot" : "setObject" },
{ "source": "objectLoader", "signal": "onLoad", "destination": "ts", "slot" : "next" },
{ "source": "ts", "signal": "sendToken", "destination": "sm", "slot" : "setToken" }
],
"cleanups": [
{ "destination": "objectLoader", "slot": "resize", "value": [0.05]}
]
},
"start": {
"preconnections": [
],
"postconnections": [
{ "destination": "viewer", "slot": "viewAll", "value": []},
{ "destination": "animator", "slot": "start", "value":[]}
],
"connections": [
{ "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "viewer", "slot": "render"},
{ "source": "video", "signal": "onReady", "destination": "viewer", "slot": "resetCamera"},
{ "source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"},
{ "source": "detector", "signal": "sendPose", "destination": "objectTransform", "slot": "setTransform"}
],
"cleanups": []
},
"end": {
"preconnections": [],
"postconnections": [],
"connections": [],
"cleanups": []
}
}
}
<html>
<head>
<title>ARCS: model based experiment</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
<meta charset="UTF-8">
</head>
<body>
<video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
<canvas id="canvas"></canvas>
<canvas id="videoCanvas" class="hide"></canvas>
<div id="container" ></div>
<div id="contents">
<!--div id="console">
<div style="float: right; font-size: 150%; padding:0; margin:0;" onclick="document.getElementById('output').classList.toggle('hide');">&#9881;</div>
<p id="output">Console log:<br/></p>
</div-->
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
<img id="lena" class="hide" src="img/lena.jpg"/>
<img id="tux" class="hide" src="img/tux.png"/>
<img id="gnu" class="hide" src="img/gnu.png"/>
<img id="earth" class="hide" src="img/earth.jpg"/>
<img id="mandrill" class="hide" src="img/mandrill.jpg"/>
<img id="queen" class="hide" src="img/queen.png"/>
</body>
</html>
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context" : {
"libraries" : [
"components/video", "components/animator"
],
"components": {
"video": { "type": "LiveSource" },
"animator": { "type": "Animator" },
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "start",
"final": "end",
"transitions" : {
"start" : { "end" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"start" : {
"preconnections" : [
{ "destination":"video", "slot":"setWidgets", "value":["video", "canvas"] }
],
"postconnections" : [
],
"connections" : [
{ "source": "video", "signal": "onReady", "destination": "animator", "slot": "start"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"}
],
"cleanups" : [
]
},
"end" : {
"preconnections" : [],
"postconnections" : [],
"connections" : [],
"cleanups" : []
}
}
}
\ No newline at end of file
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" charset="UTF-8">
<title>Fast camera calibration</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</body>
</html>
\ No newline at end of file
{
"context" : {
"libraries" : [ "../components/filter.js", "../components/console.js"],
"components" : {
"loop": {
"type": "Filter",
"value": {
"signals": [ "newIteration", "endLoop" ],
"slots": [{
"slot": "setIterations",
"func": "n => { for(let i=0; i<n; i++){console.log(\"Loop: emitting\",i); self.emit(\"newIteration\",i);}self.emit(\"endLoop\");}"
}]
}
},
"dint": {
"type": "Filter",
"value": {
"slots": [{
"slot": "display",
"func": "n => console.log(\" DisplayInt:\",n)"
}]
}
},
"console": { "type":"Console", "value":"output"},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "state1",
"transitions" : {
"state1" : { "next" : "state2"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"state1" : {
"preconnections" : [],
"postconnections" : [
{ "destination":"loop", "slot":"setIterations", "value":[4] }
],
"connections" : [
{ "source":"loop", "signal":"newIteration", "destination":"dint", "slot":"display" },
{ "source":"loop", "signal":"endLoop", "destination":"statemachine", "slot":"next" }
],
"cleanups" : []
},
"state2" : {
"preconnections" : [],
"postconnections" : [
{ "destination":"loop", "slot":"setIterations", "value":[8] }
],
"connections" : [
{ "source":"loop", "signal":"newIteration", "destination":"dint", "slot":"display" },
{ "source":"loop", "signal":"endLoop", "destination":"statemachine", "slot":"next" }
],
"cleanups" : []
}
}
}
<html>
<head>
<title>ARCS engine: filter example</title>
<script data-base-url="../.."
data-arcsapp="arcsapp.json"
type="module"
src="../../build/arcs_browser.js">
</script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>ARCS in Web Browser, with filters</h1>
<div style="height:80vh; overflow: auto; border: solid 1px navy;">
<p id="output" style="margin: 5px; padding: 5px; font-family: monospace;"></p>
<div>
</body>
</html>
{
"context" : {
"libraries" : [ "../components/geolocator.js","../components/uimapper.js"],
"components" : {
"geolocator": {"type":"GeoLocator"},
"positionWidget": { "type": "UIMapper", "value": {
"updatePosition" : [
{ "param" : "0.coords.longitude", "field" : "#lon.innerHTML", "format": "e=>e.toFixed(6)" },
{ "param" : "0.coords.latitude", "field" : "#lat.innerHTML", "format": "e=>e.toFixed(6)" },
{ "param" : "0.coords.accuracy", "field" : "#acc.innerHTML", "format": "e=>e.toFixed(2)" }
]
}},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "start",
"final": "end",
"transitions" : {
"start" : { "end" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"start" : {
"preconnections" : [
{ "destination":"geolocator", "slot":"enableHighAccuracy", "value":[] },
{ "destination":"geolocator", "slot":"setTimeout", "value": [10000] }
],
"postconnections" : [
{ "destination":"geolocator", "slot":"watchPosition", "value":[] }
],
"connections" : [
{ "source":"geolocator", "signal":"sendCoordinates", "destination":"positionWidget", "slot":"updatePosition" }
],
"cleanups" : []
}
}
}
body {
font-family: sans-serif;
}
table {
border: 1px solid black;
}
th {
text-align: left;
}
\ No newline at end of file
<html>
<head>
<title>Geolocation with ARCS</title>
<script data-base-url="../.."
data-arcsapp="arcsapp.json"
type="module"
src="../../build/arcs_browser.js">
</script>
<link rel="stylesheet" href="geoloc.css">
</head>
<body>
<h1>Geolocation with ARCS</h1>
<table>
<tr>
<th>Longitude </th>
<td id="lon"></td>
</tr>
<tr>
<th>Latitude</th>
<td id="lat"></td>
</tr>
<tr>
<th>Accuracy</th>
<td id="acc"></td>
</tr>
</table>
</body>
</html>
{
"context" : {
"libraries" : [ "../components/inertial.js","../components/uimapper.js"],
"components" : {
"inertial": {"type":"Inertial"},
"inertialWidget": { "type": "UIMapper", "value": {
"updateOrientation": [
{ "param" : "0.alpha", "field": "#alpha.innerHTML"},
{ "param" : "0.beta", "field": "#beta.innerHTML"},
{ "param" : "0.gamma", "field": "#gamma.innerHTML"}
]
}
},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "start",
"final": "end",
"transitions" : {
"start" : { "end" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"start" : {
"preconnections" : [
],
"postconnections" : [
{ "destination": "inertial", "slot": "start", "value":[] }
],
"connections" : [
{ "source":"inertial", "signal":"sendOrientation", "destination":"inertialWidget", "slot":"updateOrientation" }
],
"cleanups" : []
}
}
}
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
}
table {
border: 1px solid black;
}
th {
text-align: left;
}
\ No newline at end of file
<html>
<head>
<title>Orientation with ARCS</title>
<script type="module"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../build/arcs_browser.js">
</script>
<link rel="stylesheet" href="geoloc.css">
</head>
<body>
<h1>Orientation with ARCS</h1>
<table>
<tr>
<th>Alpha</th>
<td id="alpha"></td>
</tr>
<tr>
<th>Beta</th>
<td id="beta"></td>
</tr>
<tr>
<th>Gamma</th>
<td id="gamma"></td>
</tr>
</table>
</body>
</html>
{
"context" : {
"libraries" : [ "components/loop","components/console", "components/logger"],
"components" : {
"loop": { "type": "Loop" },
"dint": { "type": "DisplayInt" },
"logger" : { "type": "Logger", "value" : {
"dbconfig" : { "clear" : true },
"server" : "ws://localhost:8080/",
"slots" : [ "loginteger" ]
}
},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "init",
"transitions" : {
"init" : { "database & socket" : "start"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"init" : {
"preconnections" : [],
"postconnections" : [
{ "destination": "logger", "slot" : "initialise", "value":[]}
],
"connections" : [
{ "source":"logger", "signal":"onDatabaseReady", "destination":"statemachine", "slot":"database" },
{ "source":"logger", "signal":"onSocketReady", "destination":"statemachine", "slot":"socket" }
],
"cleanups" : []
},
"start" : {
"preconnections" : [],
"postconnections" : [
{ "destination":"loop", "slot":"setIterations", "value":[8] }
],
"connections" : [
{ "source":"loop", "signal":"newIteration", "destination":"dint", "slot":"display" },
{ "source":"loop", "signal":"newIteration", "destination":"logger", "slot": "loginteger"}
],
"cleanups" : []
}
}
}
\ No newline at end of file
<html>
<head>
<title>ARCS engine</title>
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
</head>
<body style="font-family: sans-serif">
<h1>ARCS in Web Browser</h1>
<h2>Logging facilities</h2>
<div style="border: solid 1px navy; padding: 10px;">
<p>This is an application demonstrating ARCS logging capabilities
(<a target="_blank" href="view-source:arcsapp.json">view description here</a>).
Progammatically we can define slot names the logger will use, in this case
a slot named <i><b>logInteger</b></i>. Logs will register a javascript timestamp,
the name of the event as well as the data passed as parameters of the slot.
Logs are recorded in an indexedDB storage in the browser and will be sent
using JSON format to a local WebSocket server listening on port 8080. This
last one is available in <code>utils/log/logserver.js</code> in sources of your
ARCS.js distribution.
</p>
<p>
You can also notice that the application description is a kind of "event logic"
to describe tokens that must be recieved to activate sheet switching.
</p>
</div>
</body>
</html>
This diff could not be displayed because it is too large.
@viewport {
width: device-width;
height: device-height;
zoom: 1;
}
body, html {
height: 100%;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
#canvas {
width: 320px;
height: 240px;
display: none;
}
.hide {
display: none;
}
#scorezone {
position: absolute;
z-index: 10;
left: 40px;
top: 40px;
padding: 10px;
background: navy;
/*height: 2em;*/
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
#console {
position: absolute;
bottom: 10px;
margin: 10px;
padding: 0px;
font-weight: bold;
width: auto;
border: solid 1px black;
background: navy;
opacity: 0.6;
color: white;
}
#contents {
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
#notification {
position: absolute;
left: 50%;
margin-left: -35%;
top: 50%;
margin-top: -1.5em;
text-align: center;
width: 70%;
bottom: 50%;
display: none;
font-size: 180%;
font-weight: bold;
background: navy;
height: 3em;
opacity: 0.6;
color: white;
display: none;
}
#output {
color: white;
height: 4em;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
scroll-top: false;
overflow: auto;
width: 90%;
}
.central {
position: absolute;
text-align: center;
margin: 10px;
left: auto;
right: auto;
top: auto;
bottom: 50%;
}
.marker {
display: inline-block;
width: 6em;
padding-right: 1em;
text-align: right;
}
#container {
left:0px;
top:0px;
width: 100%;
height: 100vh;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context": {
"libraries": [
"components/animator",
"components/arviewer",
"components/geojson",
"components/geolocator",
"components/gpsinertialpose",
"components/inertial",
"components/video",
"components/windowevent"
],
"components": {
"viewer": { "type": "ARViewer"},
"animator": { "type": "Animator"},
"windowresize": { "type": "WindowEvent"},
"gps" : { "type" : "GeoLocator" },
"inertial" : { "type" : "Inertial" },
"fuser" : { "type" : "GPSInertialPose" },
"pipeNetwork" : { "type" : "PipeNetwork", "url": "./Conduites_UFRST.geojson"},
"video": {"type": "LiveSource"},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "init",
"transitions" : {
"init" : { "video&data" : "start"}
}
}
}
}
},
"controller": "statemachine",
"sheets": {
"init": {
"preconnections": [
{ "destination": "video", "slot": "setWidgets", "value": ["video", "canvas"] },
{ "destination": "viewer", "slot": "keepAspectRatio", "value": [true] },
{ "destination": "viewer", "slot": "setWidgets", "value": ["container", "video"]},
{ "destination": "viewer", "slot": "setFocal", "value": [ 600 ]},
{ "destination": "fuser", "slot": "setId", "value": [ 17 ] },
{ "destination": "viewer", "slot": "setSceneId", "value": [17] },
{ "destination": "inertial", "slot": "start", "value": [] },
{ "destination": "gps", "slot": "watchPosition", "value": [] }
],
"postconnections": [
{ "destination": "pipeNetwork", "slot": "init", "value": [] }
],
"connections": [
{ "destination": "viewer", "slot": "addScene", "source": "pipeNetwork", "signal": "sendSceneGraph" },
{ "destination": "statemachine", "slot": "data", "source": "pipeNetwork", "signal": "sendSceneGraph" },
{ "destination": "statemachine", "slot": "video", "source": "video", "signal": "onReady"}
],
"cleanups": [
]
},
"start": {
"preconnections": [
],
"postconnections": [
{ "destination": "viewer", "slot": "viewAll", "value": []},
{ "destination": "animator", "slot": "start", "value":[]}
],
"connections": [
{ "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{ "source": "video", "signal": "onImage", "destination": "viewer", "slot": "render"},
{ "source": "video", "signal": "onReady", "destination": "viewer", "slot": "resetCamera"},
{ "source": "gps", "signal": "sendCoordinates", "destination": "fuser", "slot": "setPosition"},
{ "source": "inertial", "signal": "sendOrientation", "destination": "fuser", "slot": "setOrientation"},
{ "source": "fuser", "signal": "sendPose", "destination": "viewer", "slot": "setExtrinsics"}
],
"cleanups": []
}
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Water network explorer</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
<meta charset="UTF-8">
</head>
<body>
<video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
<canvas id="canvas" ></canvas>
<div id="container"></div>
<div id="contents">
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</body>
</html>
\ No newline at end of file
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
#canvas {
width: 320px;
height: 240px;
display: none;
}
.hide {
display: none;
}
#scorezone {
position: absolute;
z-index: 10;
left: 40px;
top: 40px;
padding: 10px;
background: navy;
/*height: 2em;*/
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
#console {
position: absolute;
bottom: 10px;
margin: 10px;
padding: 0px;
font-weight: bold;
width: auto;
border: solid 1px black;
background: navy;
opacity: 0.6;
color: white;
}
#contents {
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
#notification {
position: absolute;
left: 50%;
margin-left: -35%;
top: 50%;
margin-top: -1.5em;
text-align: center;
width: 70%;
bottom: 50%;
display: none;
font-size: 180%;
font-weight: bold;
background: navy;
height: 3em;
opacity: 0.6;
color: white;
display: none;
}
#output {
color: white;
height: 4em;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
scroll-top: false;
overflow: auto;
width: 90%;
}
.central {
position: absolute;
text-align: center;
margin: 10px;
left: auto;
right: auto;
top: auto;
bottom: 50%;
}
.marker {
display: inline-block;
width: 6em;
padding-right: 1em;
text-align: right;
}
#container {
left:0px;
top:0px;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
\ No newline at end of file
{
"context" : {
"libraries" : [ "components/video", "components/animator",
"components/arucodetector", "components/arviewer",
"components/windowevent", "components/messagebox",
"components/pong","components/scoreboard",
"components/markerlocator",
"components/console", "components/notificator"],
"components" : {
"video": { "type": "LiveSource" },
"animator": { "type": "Animator" },
"detector": { "type": "ARUCODetector" },
"viewer": { "type": "ARViewer"},
"windowresize": { "type": "WindowEvent"},
"locator": { "type":"MarkerLocator"},
"messagebox": { "type": "MessageBox"},
"pong" : { "type": "Pong"},
"scoreboard": {"type":"ScoreBoard", "value": ["score[0]", "score[1]"] },
"console": { "type": "Console", "value": "output"},
"notificator" : { "type": "Notificator"},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "start",
"final": "end",
"transitions" : {
"start" : { "end" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"start" : {
"preconnections" : [
{ "destination":"video", "slot":"setWidgets", "value":["video", "canvas"] },
{ "destination":"locator", "slot":"setImageSource", "value":["canvas"]},
{ "destination":"notificator", "slot":"setNotificationZone", "value":["notification"]},
{ "destination":"viewer", "slot":"keepAspectRatio", "value":[false]}
],
"postconnections" : [
{ "destination":"viewer", "slot":"setWidgets", "value":["container", "video"]},
{ "destination":"viewer", "slot":"setFocal", "value":[600]},
{ "destination":"pong", "slot":"createScene", "value":[] }
],
"connections" : [
{ "source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"},
{ "source": "video", "signal": "onReady", "destination": "animator", "slot": "start"},
{ "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{ "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
{ "source": "video", "signal": "onImage", "destination": "viewer", "slot": "render"},
{ "source": "pong", "signal": "onSceneBuilt", "destination": "viewer", "slot": "addScene"},
{ "source": "detector", "signal": "onMarkers", "destination": "locator", "slot": "locateMarkers"},
{ "source": "locator", "signal": "onLocatedMarkers", "destination": "pong", "slot": "updateScene"},
{ "source": "pong", "signal": "onMessage", "destination": "notificator", "slot": "display"},
{ "source": "pong", "signal": "onEndMessage", "destination": "notificator", "slot":"hide"},
{ "source": "pong", "signal": "onResetScore", "destination": "scoreboard", "slot": "resetScore"},
{ "source": "pong", "signal": "onPlayer1Winning", "destination": "scoreboard", "slot": "player1IsScoring"},
{ "source": "pong", "signal": "onPlayer2Winning", "destination": "scoreboard", "slot": "player2IsScoring"}
],
"cleanups" : []
},
"end" : {
"preconnections" : [],
"postconnections" : [],
"connections" : [],
"cleanups" : []
}
}
}
\ No newline at end of file
<html>
<head>
<title>ARCS: Pong experiment</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
</head>
<body onload="document.getElementById('output').classList.toggle('hide');">
<video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
<canvas id="canvas"></canvas>
<div id="container" ></div>
<div id="contents">
<div id="console">
<div style="float: right; font-size: 150%; padding:0; margin:0;" onclick="document.getElementById('output').classList.toggle('hide');">&#9881;</div>
<p id="output"><a style="color:6666ff;" href="http://arcs.ibisc.fr/doku.php?id=pong_experiment">How to play?</a><br/>Console log:<br/></p>
</div>
<div id="notification"></div>
<div id="scorezone">
<b>Score: <span style="color: #ff0;" id="score[0]">0</span>/<span style="color: #f00;" id="score[1]">0</span></b>
</div>
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</body>
</html>
@viewport {
width: device-width;
zoom: 1;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
{
"context" : {
"libraries" : [ "../components/video.js","../components/animator.js", "../components/qrcodedetector.js"],
"components" : {
"animator" : { "type": "Animator"},
"video" : { "type": "LiveSource", "value" : { "video": "#video", "facingMode": "environment"}},
"detector" : { "type": "QRCodeDetector"},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "init",
"final": "end",
"transitions" : {
"init" : { "next": "start"},
"start" : { "next" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets": {
"init" : {
"preconnections": [],
"connections": [
{ "source": "video", "signal": "onReady", "destination": "statemachine", "slot" : "next"}
],
"postconnections": [
{ "destination": "video", "slot": "start", "value": [] }
],
"cleanups": []
},
"start" : {
"preconnections": [],
"connections": [
{"source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
{"source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"}
],
"postconnections": [
{ "destination": "animator", "slot": "start", "value":[]}
],
"cleanups": []
},
"end" : {
"preconnections": [],
"connections": [],
"postconnections": [],
"cleanups": []
}
}
}
body {
font-family: sans-serif;
}
table {
border: 1px solid black;
}
th {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>QRCode detector</title>
<meta charset="utf-8">
<script data-base-url="../.."
data-arcsapp="arcsapp.json"
type="module"
src="../../build/arcs_browser.js">
</script>
<link rel="stylesheet" href="qrcode.css">
<link rel="stylesheet" href="arcs.css">
</head>
<body style="margin: 0;">
<video id="video" width=640 height=480 autoplay="true" style="width: 100vw; height: 100vh;"></video>
<div id="contents">
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</body>
</html>
{
"context" : {
"libraries" : [
"components/logger" ,
"components/inertial","components/inertialwidget",
"components/geolocator","components/positionwidget"
],
"components" : {
"logger" : { "type": "Logger", "value" : {
"dbconfig" : { "clear" : true },
"slots" : [ "orientation", "location", "acceleration", "rotationRate", "accelerationWithGravity" ]
}
},
"geolocator": {"type":"GeoLocator"},
"positionWidget": { "type": "PositionWidget", "value": ["lon", "lat", "acc"] },
"inertial": {"type":"Inertial"},
"inertialWidget": { "type": "InertialWidget", "value": [
{ "alpha": "alpha", "beta":"beta", "gamma":"gamma" }
] },
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "init",
"final": "end",
"transitions" : {
"init" : { "next" : "start"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"init" : {
"preconnections" : [
{ "destination":"geolocator", "slot":"enableHighAccuracy", "value":[] },
{ "destination":"geolocator", "slot":"setTimeout", "value": [10000] }
],
"postconnections" : [
{ "destination": "logger", "slot" : "initialise", "value":[]}
],
"connections" : [
{ "source":"logger", "signal":"onDatabaseReady", "destination":"statemachine", "slot":"next" }
],
"cleanups" : []
},
"start" : {
"preconnections" : [],
"postconnections" : [
{ "destination":"geolocator", "slot":"watchPosition", "value":[] },
{ "destination": "inertial", "slot": "start", "value":[] }
],
"connections" : [
{ "source":"inertial", "signal":"sendOrientation", "destination":"inertialWidget", "slot":"updateOrientation" },
{ "source":"geolocator", "signal":"sendCoordinates", "destination":"positionWidget", "slot":"updatePosition" },
{ "source":"inertial", "signal":"sendOrientation", "destination":"logger", "slot":"orientation"},
{ "source":"geolocator", "signal":"sendCoordinates", "destination":"logger", "slot":"location"},
{ "source":"inertial", "signal":"sendAcceleration", "destination":"logger", "slot":"acceleration"},
{ "source":"inertial", "signal":"sendAccelerationIncludingGravity", "destination":"logger", "slot":"accelerationWithGravity"},
{ "source":"inertial", "signal":"sendRotationRate", "destination":"logger", "slot":"rotationRate"}
],
"cleanups" : []
}
}
}
\ No newline at end of file
<html>
<head>
<title>ARCS engine</title>
<script data-main="../../build/arcs_browser"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
</script>
</head>
<body>
<h1>ARCS in Web Browser</h1>
<table>
<tr>
<th colspan="3">Orientation</th>
</tr>
<tr>
<th>Alpha</th>
<td id="alpha"></td>
</tr>
<tr>
<th>Beta</th>
<td id="beta"></td>
</tr>
<tr>
<th>Gamma</th>
<td id="gamma"></td>
</tr>
<tr>
<th colspan="3">Geolocation</th>
</tr>
<tr>
<th>Longitude </th>
<td id="lon"></td>
</tr>
<tr>
<th>Latitude</th>
<td id="lat"></td>
</tr>
<tr>
<th>Accuracy</th>
<td id="acc"></td>
</tr>
</table>
</table>
</body>
</html>
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
.info {
background: navy;
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
.info p {
margin:0;
}
#coords {
position: absolute;
padding: 10px;
left: 10px;
top: 10px;
}
#container {
left:0px;
top:0px;
width: 100vw;
height: 100vh;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
{
"context" : {
"libraries" : [ "../components/xrviewer.js", "../components/uimapper.js"],
"components" : {
"viewer" : { "type": "XRViewer", "value": {
"sessionConfig": {
"optionalFeatures": [ "local-floor", "dom-overlay" ],
"domOverlay" : { "root": "body"}
}
}
},
"display" : { "type": "UIMapper", "value": {
"updatePosition" : [
{ "param" : "1.position.x", "field" : "#x.innerHTML", "format": "e=>e.toFixed(2)" },
{ "param" : "1.position.y", "field" : "#y.innerHTML", "format": "e=>e.toFixed(2)" },
{ "param" : "1.position.z", "field" : "#z.innerHTML", "format": "e=>e.toFixed(2)" }
]
}
},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "start",
"final": "end",
"transitions" : {
"start" : { "end" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"start" : {
"preconnections" : [],
"postconnections" : [
{ "destination": "viewer", "slot": "start", "value": []}
],
"connections" : [
{ "source": "viewer", "signal": "postRender", "destination": "display", "slot": "updatePosition"}
],
"cleanups" : []
},
"end" : {
"preconnections" : [],
"postconnections" : [],
"connections" : [],
"cleanups" : []
}
}
}
<html>
<head>
<title>ARCS: WebXR example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="arcs.css">
<script type="module"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../build/arcs_browser.js">
</script>
</head>
<body>
<div id="container">
<div class="info" id="coords">
<p>X <span id="x"></span></p>
<p>Y <span id="y"></span></p>
<p>Z <span id="z"></span></p>
</div>
<div id="contents">
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
</div>
</body>
</html>
@viewport {
width: device-width;
zoom: 1;
}
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
.info {
background: navy;
opacity: 0.6;
font-weight: bold;
font-size: 120%;
color: white;
}
.info p {
margin:0;
}
#coords {
position: absolute;
padding: 10px;
left: 10px;
top: 10px;
}
#container {
left:0px;
top:0px;
width: 100vw;
height: 100vh;
}
#notification {
position: absolute;
max-width: 80vw;
padding: 10px;
left: 10px;
bottom: 10px;
}
video {
position: absolute;
right: 0px;
top: 0px;
}
#logo {
position: absolute;
margin:0px;
padding:0px;
right: 0px;
bottom:0px;
}
{
"context" : {
"libraries" : [
"../components/xrviewer.js", "../components/uimapper.js",
"../components/video.js", "../components/qrcodedetector.js",
"../components/filter.js"
],
"components" : {
"video" : { "type": "LiveSource", "value": { "video": "video", "facingMode": "environment" }},
"viewer" : { "type": "XRViewer", "value": {
"sessionConfig": {
"optionalFeatures": [ "local-floor", "dom-overlay" ],
"domOverlay" : { "root": "#container"}
}
}
},
"filters" : { "type": "Filter", "value": {
"signals": [ "onSessionStarted","updateProjection" ],
"slots" : [
{
"slot": "triggerCamera",
"func": "(t,c,f) => {self.xr = self.xr || false; if(f && !self.xr) { self.xr = true; self.emit(\"onSessionStarted\"); } } "
},
{
"slot": "computeProjection",
"func": "(t,c,f) => {let au,av,u0,v0,m;m=c.projectionMatrix.elements;au=m[0]/2;av=m[5]/2;u0=m[8]/2;v0=m[9]/2;self.emit(\"updateProjection\",au,av,u0,v0);}"
}
]
}
},
"display" : { "type": "UIMapper", "value": {
"slots" : {
"updatePosition" : [
{ "param" : "1.position.x", "field" : "#x.innerHTML", "format": "e=>e.toFixed(2)" },
{ "param" : "1.position.y", "field" : "#y.innerHTML", "format": "e=>e.toFixed(2)" },
{ "param" : "1.position.z", "field" : "#z.innerHTML", "format": "e=>e.toFixed(2)" }
],
"updateProjection" : [
{ "param" : "0", "field": "#Au.innerHTML", "format": "e=>e.toFixed(2)"},
{ "param" : "1", "field": "#Av.innerHTML", "format": "e=>e.toFixed(2)"},
{ "param" : "2", "field": "#u0.innerHTML", "format": "e=>e.toFixed(2)"},
{ "param" : "3", "field": "#v0.innerHTML", "format": "e=>e.toFixed(2)"}
]
}
}
},
"statemachine" : {
"type": "StateMachine",
"value" : {
"initial": "init",
"final": "end",
"transitions" : {
"init" : { "next" : "end"}
}
}
}
}
},
"controller" : "statemachine",
"sheets" : {
"init" : {
"preconnections" : [],
"postconnections" : [
{ "destination": "video", "slot": "start", "value": []},
{ "destination": "viewer", "slot": "start", "value": []}
],
"connections" : [
{ "source": "viewer", "signal": "onRender", "destination": "display", "slot": "updatePosition"},
{ "source": "viewer", "signal": "onRender", "destination": "filters", "slot": "computeProjection"},
{ "source": "viewer", "signal": "onRender", "destination": "filters", "slot": "triggerCamera"},
{ "source": "viewer", "signal": "onRender", "destination": "video", "slot": "grabFrame"},
{ "source": "viewer", "signal": "onStarted", "destination": "video", "slot": "start"},
{ "source": "filters", "signal": "updateProjection", "destination": "display", "slot": "updateProjection"}
],
"cleanups" : []
},
"end" : {
"preconnections" : [],
"postconnections" : [],
"connections" : [],
"cleanups" : []
}
}
}
<html>
<head>
<title>ARCS: WebXR example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="arcs.css">
<!--script src="../../deps/mobileconsole/hnl.mobileConsole.js"></script-->
<!--script>mobileConsole.init()</script-->
<script type="module"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../build/arcs_browser.js">
</script>
</head>
<body>
<div id="container">
<div class="info" id="coords">
<p>X <span id="x"></span></p>
<p>Y <span id="y"></span></p>
<p>Z <span id="z"></span></p>
<p>P <span id="p"></span></p>
<p>Au <span id="au"></span></p>
<p>Av <span id="av"></span></p>
<p>u0 <span id="u0"></span></p>
<p>v0 <span id="v0"></span></p>
</div>
<video width=320 height=240 autoplay=true></video>
<div class="info" style="display: none;" id="notification">
</div>
<div id="logo">
<p style="color:white;">Powered by<br/>
<a href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</p>
</div>
</div>
</body>
</html>
import ARCS from '../build/arcs.js';
var Animator;
/**
* @class Animator
* @classdesc A component that request new frames for animation.
* This component is useful when you want to create animations in the
* context of a web browser.
*/
Animator = ARCS.Component.create(
function() {
var paused = false;
var self=this;
var tick = function () {
if (paused === false) {
requestAnimationFrame(tick);
self.emit("onAnimationFrame");
}
}
/**
* Starts requesting frames for animation. As soon as it is started,
* the signal <b>onAnimationFrame</b> is periodically triggered.
* @slot
* @emits onAnimationFrame
* @function Animator#start
*/
this.start = function () {
paused = false;
tick();
};
/**
* Stops requesting frames for animation.
* @slot
* @function Animator#stop
*/
this.stop = function () {
paused = true;
};
},
['start','stop'],
'onAnimationFrame'
);
/**
* Signals that an animation frame is ready.
* @signal
* @function Animator#onAnimationFrame
*/
export default {Animator: Animator};
import ARCS from '../build/arcs.js';
import CV from '../deps/cv/index.js';
import AR from '../deps/aruco/index.js';
var ARUCODetector;
/**
* @class ARUCODetector
* @classdesc Component that detects ARUCO markers in images
* This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
*/
ARUCODetector = ARCS.Component.create(
function() {
var detector ;
/*1 Instanciate here the detector */
detector = new AR.Detector();
/**
* Detects ARUCO markers in the given image.
* If markers are detected, this slot triggers the signal <b>onMarkers</b>.
* @param image {obj} the image in which markers should be detected
* @emits onMarkers
* @function ARUCODetector#detect
* @slot
*/
this.detect = function (image) {
/*1 recover markers from image
* then send they will be sent through onMarkers event
*/
var markers = detector.detect(image);
this.emit("onMarkers",markers);
};
/**
* Signal that is emitted when markers are detected in an image.
* @function ARUCODetector#onMarkers
* @param markers {Marker[]} Array of detected markers.
* @signal
*/
/**
* @typedef {Object} Marker
* @property {number} id - marker id
* @property {Object} pose - computed pose for the marker
* @property {number[]} pose.rotation - rotation matrix (3x3)
* @property {number[]} pose.position - translation (3 components)
*/
},
'detect',
['onMarkers']
);
export default {ARUCODetector: ARUCODetector};
This diff is collapsed. Click to expand it.
arcs_module(function(ARCS) {
var Compass;
Compass = ARCS.Component.create( function() {
var self = this;
},
"",
""
);
return { Compass: Compass};
});
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
import ARCS from '../build/arcs.js';
let Filter;
/**
* SlotConfig
* @typedef {object} SlotConfig
* @property slot {string} slot name.
* @property func {string} a string enclosing javascript code acting as the body
* of the slot function. <b>self</b> can be used inside of it in order to emit
* signals.
*/
/**
* @class Filter
* @classdesc Creates a filter in between a signal and a slot
*
* The idea is to create a dynamic component with a slot list and signals
* so that data is adapted, on the fly, by the component.
* In a way, it is similar to filters in pipe|filter architectures.
*
* @param config {Object} configuration object to initialize filter
* @param config.signals {Array.string} the list signals potentially emitted by
* the filter.
* @param config.slots {Array.SlotConfig} the list of slots declared for this
* component.
*/
Filter = ARCS.Component.create(
/** @lends Filter.prototype */
function(config) {
let self = this;
let _config = config || {};
self.signals = self.signals || {};
//self.signal(self.signals);
if (_config.signals) {
_config.signals.forEach(e => {
self.signals[e] = [];
});
}
if (_config.slots) {
_config.slots.forEach(e => {
if (!e.slot || !e.func) return;
let slotName = e.slot;
let slotFunc = new Function('self',`return ${e.func}`)(self);
self.slots.push(slotName);
self[slotName] = slotFunc;
});
}
},
[],
[]
);
export default {Filter: Filter};
import ARCS from '../build/arcs.js';
let FullscreenManager ;
FullscreenManager = ARCS.Component.create(
function() {
},
[],
[]
);
export default { FullscreenManager: FullscreenManager };
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
var PipeNetwork = ARCS.Component.create(
function ( jsonData ) {
console.log("instanciating pipe network");
var pipeNetwork = new THREE.Object3D();
var X_OFFSET = 0; // 2.428592;
var Y_OFFSET = 0; // 48.613426;
const mmtoDeg = 0.00000001;
var createTube = function(coords, p, color, idx) {
var i, j, k;
// the father of it all
var root = new THREE.Object3D();
// computing the internal diameter of the conduct
var diametre = (p.DIAMETRE*mmtoDeg) || (100*mmtoDeg) ;
for (j=0; j < coords.length ; j++) {
if (coords[j].length >= 2) {
var path = new THREE.CurvePath();
for (k=0; k < coords[j].length-1 ; k++) {
path.add(
new THREE.LineCurve3(
new THREE.Vector3( coords[j][k][0] - X_OFFSET, coords[j][k][1] - Y_OFFSET,0),
new THREE.Vector3( coords[j][k+1][0] - X_OFFSET , coords[j][k+1][1] - Y_OFFSET, 0)
)
);
}
var geometry = new THREE.TubeGeometry(path, 10, diametre,10);
var bufferedGeometry = new THREE.BufferGeometry();
bufferedGeometry.fromGeometry(geometry);
root = new THREE.Mesh( bufferedGeometry, new THREE.MeshBasicMaterial({
color: color,
})); //new THREE.MeshBasicMaterial({color : color}) );
root.userData = idx;
}
}
return root;
};
var prepareNetwork = function ( gjObject, color ) {
if (gjObject.type === "FeatureCollection") {
if (gjObject.features === undefined) { return ; }
var i, j, k;
for (i=0; i < gjObject.features.length; i++) {
var feature = gjObject.features[i];
if (feature.geometry === undefined || feature.properties === undefined) {
return ;
}
var geometry = feature.geometry;
if (geometry.type === "MultiLineString") {
pipeNetwork.add(createTube(geometry.coordinates, feature.properties , color, i));
}
}
}
};
prepareNetwork(jsonData, 0x0000ff);
this.init = function() {
this.emit('sendSceneGraph', pipeNetwork);
};
},
['init'],
['sendSceneGraph']
);
export default { PipeNetwork : PipeNetwork };
import ARCS from '../build/arcs.js';
/**
* @class GeoLocator
* @classdesc Uses the location provider of the browser to
* determine the geolocation of the device.
* This component relies on the
* {@link http://www.w3.org/TR/geolocation-API/|Geolocation API}.
*/
let GeoLocator = ARCS.Component.create(function() {
var self = this;
var geolocator = navigator.geolocation ;
var watcher;
var timeout = 1000;
var enableHighAccuracy = false;
var handlePosition = function(position) {
self.emit("sendPosition",position.coords.longitude,position.coords.latitude);
self.emit("sendCoordinates", position);
};
var handleError = function(positionError) {
switch(positionError.code) {
case positionError.TIMEOUT:
console.error("Timeout while geolocalizing", positionError.message);
break;
case positionError.PERMISSION_DENIED:
console.error("You must authorize geolocation", positionError.message);
break;
case positionError.POSITION_UNAVAILABLE:
console.error("Position is unavailable", positionError.message);
break;
}
self.emit("geolocationDisabled");
};
/**
* Set the timeout (in milliseconds) between the call of
* {@link GeoLocator#getPosition|getPosition} or
* {@link GeoLocator#watchPosition|watchPosition} and
* the sending of signal {@link GeoLocator#sendPosition|sendPosition}.
* @param t {number} timeout duration in milliseconds
* @function GeoLocator#setTimeout
* @slot
*/
this.setTimeout = function(t) {
timeout = t;
};
this.enableHighAccuracy = function() {
enableHighAccuracy = true;
};
this.disableHighAccuracy = function() {
enableHighAccuracy = false;
};
/**
* Retrieves the geolocation of the device. Use this function for a
* one shot retrieval. If it succeeds, signals {@link GeoLocator#sendPosition|sendPosition}
* and {@link GeoLocator#sendCoordinates|sendCoordinates} are triggered.
* Otherwise, signal {@link GeoLocator#geolocationDisabled|geolocationDisabled} is triggered.
* @emits sendPosition
* @emits sendCoordinates
* @emits geolocationDisabled
* @function GeoLocator#getPosition
* @slot
*/
this.getPosition = function() {
if (geolocator) {
geolocator.getCurrentPosition(handlePosition,handleError,
{ timeout: timeout, enableHighAccuracy : enableHighAccuracy} );
} else {
this.emit("geolocationDisabled");
}
};
/**
* Retrieves the geolocation of the device. Use this function if you
* want to continuously obtain the geolocation of the device.
* If it succeeds, signals {@link GeoLocator#sendPosition|sendPosition}
* and {@link GeoLocator#sendCoordinates|sendCoordinates} are triggered.
* Otherwise, signal {@link GeoLocator#geolocationDisabled|geoLocationDisabled} is triggered.
* You can use {@link clearWatch} to stop watching the position.
* @emits sendPosition
* @emits sendCoordinates
* @emits geolocationDisabled
* @function GeoLocator#watchPosition
* @slot
*/
this.watchPosition= function() {
if (geolocator) {
if (watcher) {
geolocator.clearWatch(watcher);
}
watcher = geolocator.watchPosition(handlePosition, handleError,
{ timeout: timeout, enableHighAccuracy : enableHighAccuracy} );
} else {
this.emit("geolocationDisabled");
}
};
/**
* Ends geolocation queries.
* @see {@link GeoLocator#watchPosition|watchPosition}
* @function GeoLocator#clearWatch
* @slot
*/
this.clearWatch = function() {
if (geolocator) {
if (watcher) {
geolocator.clearWatch(watcher);
}
}
};
/**
* Sends the position of the device (longitude and latitude)
* @param lon {number} longitude of the geolocation
* @param lat {number} latitude of the geolocation
* @function GeoLocator#sendPosition
* @signal
*/
/**
* Sends the coordinates of the device using the coordinates object
* proposed in the specification of the geolocation API.
* @param coords {object} coordinates of the device.
* @function GeoLocator#sendCoordinates
* @signal
*/
/**
* Notifies that the geolocation service is disabled
* @function GeoLocator#geolocationDisabled
* @signal
*/
},
[
"getPosition","watchPosition","clearWatch","setTimeout",
"enableHighAccuracy", "disableHighAccuracy"
], // liste slots
["sendPosition","sendCoordinates","geolocationDisabled"] // liste de signaux
);
export default { GeoLocator:GeoLocator};
import ARCS from '../build/arcs.js';
var GPSInertialPose = new ARCS.Component.create(
function() {
var id = 0;
var pose = {
position : [ 0, 0, 0],
rotation : [ [ 1, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 1 ] ]
};
var cos = Math.cos;
var sin = Math.sin;
var meterToDegree = 0.00001;
this.setId = function(identifier) {
id = identifier;
};
this.setPosition = function(longitude, latitude) {
pose.position = [ longitude, latitude, 1.2*meterToDegree ];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
// this function computes the rotation matrix according to
// https://w3c.github.io/deviceorientation/spec-source-orientation.html
this.setOrientation = function(orientation) {
var alpha = orientation.alpha;
var beta = orientation.beta;
var gamma = orientation.gamma;
pose.rotation = [[
cos(alpha)*cos(gamma) - sin(alpha)*sin(beta)*sin(gamma),
-cos(beta)*sin(alpha),
cos(gamma)*sin(alpha)*sin(beta) + cos(alpha)*sin(gamma)
], [
cos(gamma)*sin(alpha) + cos(alpha)*sin(beta)*sin(gamma),
cos(alpha)*cos(beta),
sin(alpha)*sin(gamma) - cos(alpha)*cos(gamma)*sin(beta)
], [
-cos(beta)*sin(gamma),
sin(beta),
cos(beta)*cos(gamma)
]
];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
},
['setPosition','setOrientation', 'setId'],
['sendPose']
);
export default { GPSInertialPose: GPSInertialPose };
import ARCS from '../build/arcs.js';
let Inertial = ARCS.Component.create( function() {
var self = this;
var screenOrientation = false;
// here, we should correct orientation
var handleOrientation = function (event) {
if (screenOrientation) {
var orientation = screen.msOrientation
|| screen.mozOrientation || screen.orientation;
event.alpha -= (orientation)?orientation.angle:0;
}
self.emit("sendOrientation",event);
};
var handleMotion = function(event) {
self.emit("sendAcceleration",event.acceleration);
self.emit("sendAccelerationIncludingGravity", event.accelerationIncludingGravity);
self.emit("sendRotationRate",event.rotationRate);
};
this.start = function() {
if (window.DeviceOrientationEvent) {
console.log("Device orientation capability detected");
window.addEventListener("deviceorientation", handleOrientation, false);
} else {
console.log("[Inertial]","no device orientation API");
}
if (window.DeviceMotionEvent) {
console.log("Device motion capability detected");
window.addEventListener("devicemotion", handleMotion, true);
} else {
console.log("[Inertial]","no device motion API");
}
};
this.setScreenOrientation = function(flag) {
screenOrientation = flag;
};
},
["start","setScreenOrientation"],
["sendOrientation","sendAcceleration","sendAccelerationIncludingGravity", "sendRotationRate"]
);
export default { Inertial : Inertial };
import ARCS from '../build/arcs.js';
var Logger;
var indexedDB = window.indexedDB;
// two modes: websockets or indexeddb
// the idea is to add a timestamp as well as a timestamp for the start of
// the component.
// we need to structure indexeddb, the key is the timestamp.
// a simple websocket server may write down data in offline json file
// for a start.
// it might be great to be able to analyse and draw some graphs using the
// tools and libraries used by Mathieu (Mouttapa).
// see flot charting library (based on canvas) or epoch (based on svg).
// configuration: DB, name, table?, websocket, url?,
// the goal of this function is to transform the object into a structured
// data compliant with the logger
var toStructuredData = function( obj) {
var i, p, res;
if (obj instanceof Function) {
return undefined;
}
if (obj instanceof Array) {
res = [];
for (i= 0; i<obj.length; i++) {
res.push(toStructuredData(obj[i]));
}
return res;
}
if (obj instanceof Object) {
res = {};
if (obj instanceof Event) {
for(p in obj) {
if (! Event.prototype.hasOwnProperty(p)) {
res[p] = toStructuredData(obj[p]);
}
}
} else {
for (p in obj) {
res[p] = toStructuredData(obj[p]);
}
}
return res;
}
return obj;
};
Logger = ARCS.Component.create(
function(obj) {
var i;
var self = this;
var dbconfig;
var server;
var db;
var ws;
var dbversion;
var request;
var openDatabase;
if (typeof obj !== "object") {
console.error("[Logger] Wrong object structure at initialisation");
return ;
}
/**********************************************************************
* Creation of data needed for database
*********************************************************************/
if (obj.dbconfig != undefined) {
dbconfig = obj.dbconfig;
dbconfig.name = dbconfig.name || "ARCS" ;
dbconfig.table = dbconfig.table || "logtable";
dbconfig.clear = dbconfig.clear || false;
if (indexedDB === undefined) {
console.error("[Logger] IndexedDB extension not available");
return;
}
var openDatabase = function ( version ) {
var request = indexedDB.open(dbconfig.name, version);
request.onerror = function(event) {
console.error("[Logger] Could not open database " + dbconfig.name);
};
request.onsuccess = function(event) {
db = request.result;
// let's check if the table is available.
if (!db.objectStoreNames.contains(dbconfig.table)) {
// otherwise, we should trigger an update
dbversion = db.version;
db.close();
openDatabase(dbversion+1);
} else {
if (dbconfig.clear) {
var request2 = db.transaction([dbconfig.table],"readwrite").objectStore(dbconfig.table).clear();
request2.onsuccess = function(event) {
self.emit("onDatabaseReady");
};
request2.onerror = function(event) {
console.error("[Logger] Could not clear table " + dbconfig.table);
};
} else {
self.emit("onDatabaseReady");
}
}
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore(dbconfig.table, { autoIncrement : true});
objectStore.createIndex("timestamp", "timestamp", {unique : false});
objectStore.createIndex("event", "event", { unique: false});
};
};
// the line below should be called later
//openDatabase();
}
if (obj.slots != undefined) {
var arr = obj.slots;
for (i=0; i< arr.length; i++) {
if (typeof arr[i] === "string") {
this.slots.push(arr[i]);
//TokenSender.prototype.slots.push(arr[i]);
this[arr[i]] = function( s ) {
return function() {
// we keep the "event" name i.e. the slot name
// and we construct an object with the surrounding data
var data = [], i, p, tmpobj ;
for (i = 0; i < arguments.length ; i++) {
data.push(toStructuredData(arguments[i]));
}
var obj = { timestamp : new Date().valueOf() , event: s, data: data };
if (db !== undefined) {
try {
var request = db.transaction([dbconfig.table], "readwrite").objectStore(dbconfig.table).add(obj);
request.onerror = function (event) {
console.error("[Logger] could not write data in table " + dbconfig.table);
};
} catch (e) {
console.error("[Logger] problem pushing value in database ("+ e + "): " + JSON.stringify(obj));
}
}
if (ws !== undefined) {
if (ws.readyState === WebSocket.OPEN) {
try {
ws.send(JSON.stringify(obj));
} catch (e) {
console.error("[Logger] problem pushing value through socket");
}
}
}
};
} (arr[i]);
}
}
}
// few things should be located inside an init slot
// this is mainly the preparation of the websocket client
// and the preparation of the database.
// the idea is to start a little bit later events that could be sent
this.initialise = function() {
if (openDatabase !== undefined) {
openDatabase();
}
if (obj.server != undefined) {
// here we will create a connection to a websocket server
if (obj.server === "") {
obj.server = 'ws://' + window.location.hostname + ':8080';
}
ws = new WebSocket(obj.server);
ws.onopen = function() {
// may be we should put notifications
self.emit("onSocketReady");
};
ws.onerror = function() {
console.error("[Logger] Trouble opening web socket: "+ obj.server);
};
}
};
},
["initialise"],
[ "onDatabaseReady","onSocketReady"]
);
export default { Logger: Logger };
import ARCS from '../build/arcs.js';
import POS from '../deps/pose/square_pose.js';
var MarkerLocator;
MarkerLocator = ARCS.Component.create(
function () {
var square_pose = new POS.SquareFiducial();
this.setFocalLength = function (focalLength) {
square_pose.setFocalLength(focalLength);
};
this.setModelSize = function (modelSize) {
square_pose.setModelSize(modelSize);
};
this.setIntrinsics = function (intrinsics) {
square_pose.setMatrix(intrinsics);
};
this.setImageSource = function (id) {
var imageSource = document.getElementById(id);
if (id === undefined) {
return;
}
var imageSourceStyle = window.getComputedStyle(imageSource);
square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
};
this.locateMarkers = function (markers) {
var k, pose;
for (k=0; k < markers.length; k++) {
corners = markers[k].corners;
markers[k].pose = square_pose.pose(corners);
}
this.emit("onLocatedMarkers",markers);
};
},
['locateMarkers','setFocalLength','setModelSize','setImageSource'],
['onLocatedMarkers']
);
export default { MarkerLocator: MarkerLocator };
/**
* DEPRECATED
*/
arcs_module(
function(ARCS) {
var MessageBox;
MessageBox = ARCS.Component.create(
function() {
var widget;
this.setWidget = function (wName) {
widget = document.getElementById(wName);
};
this.displayMessage = function (message) {
if (widget === undefined)
return ;
widget.innerHTML = message;
widget.style.display = 'block';
};
this.hide = function () {
if (widget !== undefined) {
widget.style.display = 'none';
}
};
},
['setWidget','displayMessage','hide'],
[]
);
return { MessageBox: MessageBox };
}
);
/**
* DEPRECATED
*/
arcs_module(
function(ARCS) {
var Notificator;
Notificator = ARCS.Component.create(
function () {
var notificationZone;
var self=this;
this.setNotificationZone = function( id ) {
notificationZone = document.getElementById(id);
};
this.display = function (message, timeout) {
if (notificationZone === undefined) {
return;
}
notificationZone.innerHTML = message;
notificationZone.style.display = "block";
if (timeout !== undefined) {
setTimeout(function () { self.hide();}, timeout);
}
};
this.hide = function () {
if (notificationZone === undefined) {
return;
}
notificationZone.style.display = "none";
};
},
["setNotificationZone", "display", "hide"],
[]
);
return { Notificator: Notificator};
}
);
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
var ObjectTransform ;
/**
* @class ObjectTransform
* @classdesc Apply transformations to objects
*/
ObjectTransform = ARCS.Component.create(
function() {
var objRoot;
var refMat;
var id = -1;
/**
* Sets the object of interest on which we would like to apply transforms.
* @param obj {object} a Three.js Object3D
* @function ObjectTransform#setObject
*/
this.setObject = function (obj) {
objRoot = new THREE.Object3D();
obj.parent.add(objRoot);
obj.parent.remove(obj);
objRoot.add(obj);
var box = new THREE.Box3;
box.setFromObject(obj);
var s = box.size();
var scale = MAX3(s.x, s.y, s.z);
console.log(scale);
obj.add(new THREE.AxisHelper(scale / 2));
};
var MAX3 = function (a,b,c) {
if ( a >= b ) {
if ( a >= c) {
return a;
} else {
return c;
}
} else {
if (b >= c) {
return b;
} else {
return c;
}
}
};
// right now, we make something compatible with aruco markers
// it may evolve in the future
/**
* Takes an array of markers and then applies transformations
* to the referenced object.
* @function ObjectTransform#setTransform
* @param arr {Marker[]} an array of detected markers.
*/
this.setTransform = function ( arr ) {
/*2 set here the transformation we should apply on objRoot
* Each marker has 3 major properties :
* - id is the marker id;
* - pose.rotation gives its orientation using a rotation matrix
* and is a 3x3 array
* - pose.position gives its position with respect to the camera
* and is a vector with 3 components.
*/
if (objRoot === undefined) { return ; }
var i ;
for ( i = 0; i < arr.length; i++) {
if ( arr[i].id === id ) {
// insert your code here.
//<--
var rotation = arr[i].pose.rotation;
var translation = arr[i].pose.position;
/*var matrix = new THREE.Matrix4(
rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
0 , 0, 0, 1);
var r = new THREE.Euler();
r.setFromRotationMatrix(matrix);
objRoot.rotation.x = r.x;
objRoot.rotation.y = r.y;
objRoot.rotation.z = r.z;
objRoot.position.x = translation[0];
objRoot.position.y = translation[1];
objRoot.position.z = translation[2];
objRoot.scale.x = 1;
objRoot.scale.y = 1;
objRoot.scale.z = 1;*/
objRoot.rotation.x = -Math.asin(-rotation[1][2]);
objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
objRoot.position.x = translation[0];
objRoot.position.y = translation[1];
objRoot.position.z = -translation[2];
//-->
}
}
};
this.setId = function (i) {
id = i;
};
},
['setObject', 'setTransform', 'setId'],
[]
);
export default { ObjectTransform : ObjectTransform };
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
import { OBJLoader } from '../deps/objloader/objloader.js';
import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
var internalOBJLoader;
internalOBJLoader = ARCS.Component.create(
function() {
var self = this;
var innerObject;
var onLoadWrapper = function(obj) {
innerObject = obj;
console.log("[OBJLoader] object has %d components", obj.children.length);
//console.log(obj);
self.emit("onLoad", obj);
};
var onLoadJSON = function(geom, mat) {
innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
self.emit("onLoad", innerObject);
};
var progress = function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
};
var error = function ( xhr ) {
console.log( 'An error happened' );
};
this.load = function(objURL, mtlURL) {
var loader;
// we may use a string tokenizer to determine file types
// then all would be in the same loading slot.
//console.log("loading objects", objURL, mtlURL);
var manager = new THREE.LoadingManager();
//manager.addHandler( /\.dds$/i, new DDSLoader() );
if (mtlURL === undefined) {
//console.log("using loader");
loader = new OBJLoader(manager);
loader.load(objURL, onLoadWrapper, progress, error);
} else {
//console.log("using mtl loader");
loader = new MTLLoader(manager);
loader.load(mtlURL, function(materials) {
materials.preload();
console.log(materials);
new OBJLoader(manager)
.setMaterials(materials)
.load(objURL, onLoadWrapper, progress, error);
}, progress, error);
}
};
this.loadJSON = function(jsonURL) {
var loader;
//console.log("loading objects", jsonURL);
loader = new THREE.ObjectLoader();
loader.load(jsonURL, onLoadJSON); //, progress, error);
};
var MAX3 = function (a,b,c) {
if ( a >= b ) {
if ( a >= c) {
return a;
} else {
return c;
}
} else {
if (b >= c) {
return b;
} else {
return c;
}
}
};
this.unitize = function() {
if (innerObject === undefined) { return ; }
var box = new THREE.Box3();
box.setFromObject(innerObject);
var s = box.size();
var c = box.center();
var scale = 1 / MAX3(s.x, s.y, s.z);
innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale;
};
this.resize = function(s) {
this.unitize();
if (innerObject === undefined) { return ; }
innerObject.scale.x *= s;
innerObject.scale.y *= s;
innerObject.scale.z *= s;
};
},
["load","unitize", "resize"],
["onLoad"]
);
export default { OBJLoader: internalOBJLoader};
This diff is collapsed. Click to expand it.
import ARCS from '../build/arcs.js';
let QRCodeDetector;
QRCodeDetector = ARCS.Component.create(
function() {
let self = this;
let makeFromJSQR = function(code) {
return {
id: code.data,
corners: [
code.location.topLeftCorner,
code.location.topRightCorner,
code.location.bottomRightCorner,
code.location.bottomLeftCorner
]
};
};
let makeFromBarcodeReader = function(code) {
return {
id: code.rawValue,
corners: code.cornerPoints
};
};
if (window.BarcodeDetector) {
let detector = new BarcodeDetector();
this.detect= async function(imageData) {
let codes = await detector.detect(imageData);
for(const code of codes) {
if (code.format === 'qr_code') {
console.log(makeFromBarcodeReader(code));
this.emit('onQRCode', makeFromBarcodeReader(code));
}
}
};
} else {
let busy = false;
let dataCache = null;
const worker = new Worker('../../deps/jsqr/worker.js');
worker.addEventListener("message", ((data) => {
busy = false;
dataCache = data.data;
}));
this.detect= function(imageData) {
if (!busy) {
busy = true;
worker.postMessage(imageData);
}
if (dataCache !== null) {
console.log("qrdata", makeFromJSQR(dataCache));
this.emit('onQRCode', makeFromJSQR(dataCache));
}
};
}
},
['detect'],
['onQRCode']
);
export default {QRCodeDetector: QRCodeDetector};
/**
* DEPRECATED
*/
arcs_module(
function (ARCS) {
var ScoreBoard;
ScoreBoard = ARCS.Component.create(
function (score_ids) {
var score = [0,0];
var redScore = document.getElementById(score_ids[0]);
var yellowScore = document.getElementById(score_ids[1]);
//console.log("score_ids", score_id1, score_id2);
var updateScore = function () {
yellowScore.innerHTML = score[0];
redScore.innerHTML = score[1];
};
this.resetScore = function () {
score = [0,0];
updateScore();
};
this.player1IsScoring = function () {
score[0]++;
updateScore();
};
this.player2IsScoring = function () {
score[1]++;
updateScore();
};
this.updateValues = function( a, b) {
score[0] = a;
score[1] = b;
updateScore();
};
},
['resetScore','updateValues', 'player1IsScoring', 'player2IsScoring'],
[]
);
return { ScoreBoard: ScoreBoard };
}
);
import ARCS from '../build/arcs.js';
var TokenSender;
TokenSender = ARCS.Component.create(
function( arr ) {
var i;
var self = this;
for (i=0; i< arr.length; i++) {
if (typeof arr[i] === "string") {
this.slots.push(arr[i]);
//TokenSender.prototype.slots.push(arr[i]);
this[arr[i]] = function( s ) {
return function() {
console.log("[TokenSender] emitting %s", s);
this.emit("sendToken",s);
};
} (arr[i]);
}
}
},
[],
['sendToken']
);
export default { TokenSender : TokenSender };
import ARCS from '../build/arcs.js';
let UIMapper ;
/**
* UIMapperSlot
* An item describing a slot for an UIMapper component
* @typedef {Object} UIMapperSlot
* @property param {string} a string representing a parameter. It can reach
* subcomponents of an object by using the notation X.subcomp1.subcomp2 ...
* where X value is the position index of the parameter
* @property field {string} a string representing a reference to an HTML element
* and its subcomponents in the same way as the param property. However, the X
* component relates to a CSS selector (without CSS classes)
* @property format {string} a string representing code for a callback function.
* The callback should only expect one parameter, which is the value given by
* the parameter param
* @property value a value that should be injected by the slot to the HTML field.
* It can be used instead of param.
*/
/**
* UIMapperSignal
* An item describing a signal for an UIMapper component
* @typedef {Object} UIMapperSignal
* @property selector {string} a CSS selector to target a DOM element
* @property event {string} the event of the DOM element that should trigger
* the signal.
*/
/**
* @class UIMapper
* @classdesc Component that maps slot input to an HTML element
* UIMapper is using metaprogramming, that is to say the configuration object
* will determine what are the needed slots for the component instance as well
* as the way they will tie to any HTML element.
* @param obj {object} configuration object to initialize the component.
* @param obj.slots {object} an object where keys are slot names and descriptions
* objects of type UIMapperSlot
* @param obj.signals {object} an object where keys are signal names and
* descriptions objects of type UIMapperSlot
*/
UIMapper = ARCS.Component.create(
function(obj) {
let self = this;
// returns a map function
const mapFunction = function(param, field, format, val) {
let params = param.split('.');
let func = null;
if (format !== undefined) {
func = new Function('self', `return ${format}`)(self);
}
let fields = field.split('.');
let eltField = document.querySelector(fields[0]);
for(let i=1; i < fields.length-1; i++) {
eltField = eltField[fields[i]];
}
return function() {
let value ;
if (val === undefined) {
value = arguments[params[0]];
for (let i=1; i < params.length; i++) {
value = value[params[i]];
}
} else {
value = val;
}
eltField[fields[fields.length-1]] = (func)?((typeof func === 'function')?func(value):func):value;
}
};
obj = obj || {};
if (obj.slots) {
for(let p in obj.slots) {
let slotName = p;
let slotFunction = function(pobj) {
return function() {
pobj.map( elt => {
mapFunction(elt.param, elt.field,elt.format, elt.value).apply(null, arguments);
});
};
}
if (self.slots.indexOf(slotName) < 0) {
self.slots.push(slotName);
self[slotName] = slotFunction(obj.slots[p]);
}
};
}
self.signals = self.signals || {};
let osignals = obj.signals;
if (osignals) {
for (let s in osignals) {
let signalName = s;
let signalDescr = osignals[s];
let domElt;
switch(signalDescr.selector) {
case "document":
domElt = document;
break;
case "window":
domElt = window;
break;
default:
domElt = document.querySelector(signalDescr.selector);
}
if (domElt) {
domElt.addEventListener(signalDescr.event, self => {
return e => self.emit(s, e)
});
}
self.signals[s] = [];
}
}
}, [], []
);
export default {UIMapper : UIMapper};
import ARCS from '../build/arcs.js';
/* LiveSource browser compatibility :
* - Chrome: 53+
* - Edge: 12+
* - Firefox: 42+
* - Safari: 11+
*/
var LiveSource, VideoSource;
/**
* @class LiveSource
* @classdesc Starts the acquisition of a live video stream provided by a webcam
* @param config {object} configuration object to initialize the component.
* @param [config.width=320] {number} - preferred image width in pixels.
* @param [config.height=240] {number} - preferred image height in pixels.
* @param [config.facingMode] {string} - camera facingMode as listed in [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode}
* @param [config.video] {HTMLVideoElement} - css selector for the video element (default: newly created shadow video element)
* @param [config.canvas] {HTMLCanvasElement} - css selector for the canvas element (default: newly created shadow canvas element)
*/
LiveSource = ARCS.Component.create(
/** @lends LiveSource.prototype */
function (config) {
let context, canvas, video, imageData;
let _config = config ||{};
let defaultWidth = _config.width || 320;
let defaultHeight = _config.height || 240;
let facingMode = _config.facingMode || null;
if (_config.video) video = document.querySelector(_config.video);
if (_config.canvas) canvas = document.querySelector(_config.canvas);
video = video|| document.createElement("video");
canvas = canvas || document.createElement("canvas");
canvas.width = video.width = defaultWidth;
canvas.height = video.height = defaultHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
let shadow = document.body;
if (!_config.video) {
video.style.display = "none";
shadow.appendChild(video);
}
if (!_config.canvas) {
canvas.style.display = "none";
shadow.appendChild(canvas);
}
context = canvas.getContext("2d");
var self = this;
var handleMediaStream = function(stream) {
video.srcObject = stream;
stream.addEventListener('ended', e => console.log('video ended', e));
video.load();
video.onloadedmetadata = e => video.play();
video.onerror = e => console.log('video error', e);
/*video.videoWidth=defaultWidth;
video.videoHeight=defaultHeight;*/
self.emit("onReady");
};
var errorMediaStream = function(error) {
console.error("Cannot initialize video component: " + error.code + ' ' + error.name + ' ' + error.message);
};
/**
* starts the video stream
* @slot
* @function LiveSource#start
* @emits onReady
*/
this.start = function() {
if (video.srcObject && video.srcObject.active) {
this.stop();
}
/*navigator.mediaDevices.enumerateDevices().
then((devices) => {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
});*/
navigator.mediaDevices.getUserMedia({video: {facingMode: _config.facingMode, width: defaultWidth, height: defaultHeight}})
//navigator.mediaDevices.getUserMedia({video: {facingMode: _config.facingMode}})
.then(handleMediaStream)
.catch(errorMediaStream);
};
this.stop = function() {
video.srcObject.getTracks().forEach(track => track.stop);
};
this.continue = function() {
if (video) {
video.play();
}
};
/**
* captures a frame from the video stream.
* Emits the signal <b>onImage</b> when the frame is captured
* @slot
* @function LiveSource#grabFrame
* @emits onImage
*/
this.grabFrame = function () {
if (!video.srcObject)
return;
if (video.paused)
video.play();
if (video.paused || video.ended) {
console.log('paused', video.paused, 'ended', video.ended);
return;
}
if( video.srcObject.ended) {
console.log('stream has been ended');
return;
}
if (video.readyState === video.HAVE_ENOUGH_DATA) {
//console.log('grab :', video.readyState);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
this.emit("onImage",imageData);
}
};
},
['start','stop','grabFrame'],
['onReady','onImage']
);
/**
* emitted when live video stream has been started
* @function LiveSource#onReady
* @signal
*/
/**
* emitted when an image from the video stream is ready
* @function LiveSource#onImage
* @param image {ImageData}
* @signal
*/
/**
* @class VideoSource
* @classdesc Uses a video element from the browser to process images.
*/
VideoSource = ARCS.Component.create(
/** @lends VideoSource.prototype */
function() {
let context, canvas, video;
let _config = config ||{};
let defaultWidth = _config.width || 320;
let defaultHeight = _config.height || 240;
if (!_config.video) video = document.querySelector(_config.video);
if (!_config.canvas) {
canvas = document.querySelector(_config.canvas);
canvas.style.width = defaultWidth + "px";
canvas.style.height = defaultHeight + "px";
}
video = video|| document.createElement("video");
canvas = canvas || document.createElement("canvas");
canvas.width = video.width = defaultWidth;
canvas.height = video.height = defaultHeight;
let shadow = document.body;
if (_config.video) {
video.style.display = "none";
shadow.appendChild(video);
}
if (_config.canvas) {
canvas.style.display = "none";
shadow.appendChild(canvas);
}
context = canvas.getContext("2d");
let self = this;
/**
* starts the video stream
* @slot
* @function VideoSource#start
* @emits onReady
*/
this.start = function() {
if (video.paused || video.ended) {
video.addEventListener('play', function() {
self.emit("onReady");
});
} else {
self.emit("onReady");
}
};
/**
* captures a frame from the video stream.
* Emits the signal <b>onImage</b> when the frame is captured
* @slot
* @function VideoSource#grabFrame
* @emits onImage
*/
this.grabFrame = function () {
if ( context === undefined || canvas === undefined || video === undefined)
createWidgets();
if (video.paused || video.ended) {
console.log('paused', video.paused, 'ended', video.ended);
return;
}
console.log('grab');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
this.emit("onImage",imageData);
};
},
['grabFrame', 'start'],
['onReady', 'onImage']
);
/**
* emitted when video stream has been started
* @function VideoSource#onReady
* @signal
*/
/**
* emitted when an image from the video stream is ready
* @function VideoSource#onImage
* @param image {ImageData}
* @signal
*/
export default {LiveSource: LiveSource, VideoSource: VideoSource};
import ARCS from '../build/arcs.js';
let WindowEvent;
WindowEvent = ARCS.Component.create(
function () {
let self= this;
window.onresize = function() {
self.emit("onResize",window.innerWidth, window.innerHeight);
};
},
[],
["onResize"]
);
export default { WindowEvent: WindowEvent};
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
import {ARButton} from '../deps/three.js/ARButton.js';
var XRViewer;
/**
* @class XRViewer
* @classdesc Simple compositing viewer for augmented reality using WebXR
* @param [config] {object} configuration object for the viewer
* @param [config.rootElement="document.body"] {string} element on which to attach renderer
* @param [config.sessionConfig] {object} an object to configure an immersive
* session as formulated in WebXR specification.
*/
XRViewer = ARCS.Component.create(
/** @lends XRViewer.prototype */
function (config) {
let renderer, scene, camera;
let sceneId;
let container;
let self = this;
let defaultStyle;
let _config = config || {};
container = (_config.rootElement !== undefined)?
document.querySelector(_config.rootElement):document.body;
container = container || document.body;
let rootOverlay = container;
if (_config.sessionConfig && _config.sessionConfig.domOverlay
&& _config.sessionConfig.domOverlay && _config.sessionConfig.domOverlay.root) {
rootOverlay = document.querySelector(_config.sessionConfig.domOverlay.root) || rootOverlay;
_config.sessionConfig.domOverlay.root = rootOverlay; // || document.body;
}
let defaultDisplay = window.getComputedStyle(rootOverlay).getPropertyValue("display");
let firstFrame = true;
// scenegraph initializations
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
//renderer.setClearColor(0x000000, 1);
renderer.setSize(container.width, container.height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.xr.enabled = true;
renderer.xr.cameraAutoUpdate = false;
container.appendChild(renderer.domElement);
rootOverlay.appendChild(ARButton.createButton(renderer,_config.sessionConfig));
var theta = 45;
camera = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10);
var _light = new THREE.DirectionalLight(0xffffff);
_light.position.set(0,5,5);
scene.add(_light);
/*renderer.domElement.addEventListener('webglcontextlost', (event) => {
console.log(event);
});*/
/**
* Adds new objects to the current 3D scene
* @param scene {object} 3D object as defined by Three.js to add to the scene.
* @slot
* @function XRViewer#addScene
*/
this.addScene = function (subScene) {
scene.add(subScene);
};
/**
* Removes an object from the current 3D scene
* @param scene {object} 3D object as defined by Three.js to remove from the scene.
* @slot
* @function XRViewer#removeScene
*/
this.removeScene = function (subScene) {
scene.remove(subScene);
};
/**
* Sets the pose
* @param pos {object} a position with x, y and z coordinates
* @param rot {object} unused so far
* @slot
* @function XRViewer#setPose
*/
this.setPose = function(pos, rot) {
let session = renderer.xr.getSession();
let p = camera.position;
let q = new THREE.Quaternion();
q.setFromRotationMatrix(camera.matrixWorld);
session.requestReferenceSpace(renderer.xr.getReferenceSpace()).then(
(space) => {
let xrSpace = space;
xrSpace = xrSpace.getOffsetReferenceSpace(
new XRRigidTransform(
{ x: p.x, y: p.y, z: p.z, w: 1 },
{ x: q.x, y: q.y, z: q.z, w: q.w}
)
);
// we will also have to modify the orientation
// because offset position is not enough
xrSpace = xrSpace.getOffsetReferenceSpace(
new XRRigidTransform(
{ x: pos.x, y: pos.y, z:pos.z, w:1},
{ x: 0, y:0, z:0, w:1}
)
);
}
);
};
/**
* Starts the animation loop.
* Each time an animation frame is obtained, preRender and postRender
* signals are triggered
* @slot
* @function XRViewer#start
* @triggers preRender
* @triggers postRender
*/
this.start = function() {
renderer.setAnimationLoop(render);
};
let render = function (time, frame) {
if (frame) {
renderer.xr.updateCamera(camera);
if (firstFrame) {
renderer.xr.getSession().addEventListener('end',() => {
firstFrame = true;
rootOverlay.style.display = defaultDisplay;
self.emit('onEnded');
});
firstFrame = false;
self.emit('onStarted');
}
//console.log(JSON.stringify(renderer.xr.getCamera().position));
let pose = frame.getViewerPose(renderer.xr.getReferenceSpace());
//console.log(pose);
/*for (let xrView of pose.views) {
if (xrView.camera) {
console.log("I can see a camera");
} */
/*if (pose) {
console.log(pose.views[0].projectionMatrix);
}*/
self.emit("onRender",time,renderer.xr.getCamera(),frame);
}
renderer.render(scene, camera);
}
},
/** @lends XRViewer.slots */
['addScene','removeScene','start','setPose'],
['onRender','onEnded', 'onStarted']
);
/**
* emitted when a frame is obtained after rendering of the scene.
* @function XRViewer#onRender
* @signal
* @param time {number} time elapsed since the beginning of the loop in seconds
* @param camera {THREE.Camera} the camera object
* @param frame {XRFrame} a frame as setup by the WebXR loop
*/
export default {XRViewer: XRViewer};
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.