SpaSca : open SCAffolding to SPAcially and textualy explore interfaces
https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
12 KiB
202 lines
12 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<title>SpaSca : Spatial Scaffolding</title>
|
|
<head>
|
|
<!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
|
|
|
|
<!--<script src='dependencies/aframe.min.js'></script>-->
|
|
<script src='dependencies/aframe.offline.min.js'></script>
|
|
<script src="dependencies/a-console.js"></script>
|
|
<script src='dependencies/aframe-html.js'></script>
|
|
<script src='dependencies/aframe-mirror.js'></script>
|
|
<script src='dependencies/aframe-troika-text.min.js'></script>
|
|
<!--<script type="module" id=immersbundle src='dependencies/immers-client.js?save=true'></script>-->
|
|
<!--<script type="module" id=immersbundle src="https://cdn.jsdelivr.net/npm/immers-client/dist/destination.bundle.js?role=modFull"></script>-->
|
|
<!--<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>-->
|
|
|
|
<script src="dependencies/shiki0.14.1.js"></script>
|
|
|
|
<!-- for input sharing -->
|
|
<script src='dependencies/peerjs.min.js'></script>
|
|
<!-- for content sharing, using NAF
|
|
<script src='dependencies/socket.io.slim.js'></script>
|
|
<script src="https://naf.benetou.fr/easyrtc/easyrtc.js"></script>
|
|
<script src='dependencies/networked-aframe.min.js'></script>
|
|
-->
|
|
|
|
<script src="dependencies/aframe-physics-system.min.js"></script>
|
|
|
|
<!-- still experimenting, see webdav.html -->
|
|
<script src='dependencies/webdav.js'></script>
|
|
|
|
<script src='jxr.js?#123'></script>
|
|
<!-- replacing with local copies as CDNs are like unpkg tend to be slow
|
|
<script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
|
|
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
|
|
<script src="aframe-html.js"></script>
|
|
|
|
<script src="https://unpkg.com/peerjs@1.4.5/dist/peerjs.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.slim.js"></script>
|
|
<script src="https://naf.benetou.fr/easyrtc/easyrtc.js"></script>
|
|
<script src="https://unpkg.com/networked-aframe@^0.10.0/dist/networked-aframe.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/aframe-mirror@latest/index.js"></script>
|
|
-->
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="manifest" href="site.webmanifest">
|
|
</head>
|
|
<body>
|
|
|
|
<div style='position:fixed;z-index:1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee; '>
|
|
<a href="https://git.benetou.fr/utopiah/text-code-xr-engine/issues/">
|
|
<img style='position:fixed;left:10px;' title='code repository' src='gitea_logo.svg'>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<div id="observablehq-numberOfPages-835aa7e9"></div>
|
|
<div id="observablehq-result_as_html-ab4c1560"></div>
|
|
</div>
|
|
|
|
<div id="observablehq-key">
|
|
<div id="observablehq-viewof-offsetExample-ab4c1560"></div>
|
|
<div id="observablehq-result_as_html-ab4c1560"></div>
|
|
</div>
|
|
<button id=mainbutton style="display:none; z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="startExperience()">Start the experience (hand tracking recommended)</button>
|
|
|
|
<a-scene cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;" adjust-height-in-vr
|
|
startfunctions
|
|
toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json>
|
|
<!-- screenstack dynamic-view selectionboxonpinches glossary timeline issues fot
|
|
networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;"
|
|
refresh-text-content-from-wiki-page="pagename:TestingPairCollaboration"
|
|
-->
|
|
<a-assets>
|
|
<template id="avatar-template"> <a-cylinder opacity=.3 scale=".2 1.2 .2" networked-audio-source></a-cylinder> </template>
|
|
<template id="left-hand-default-template">
|
|
<a-entity networked-hand-controls="hand:left"></a-entity>
|
|
</template>
|
|
<template id="right-hand-default-template">
|
|
<a-entity networked-hand-controls="hand:right"></a-entity>
|
|
</template>
|
|
</a-assets>
|
|
|
|
<a-entity id="rig">
|
|
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
|
|
hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0"></a-entity>
|
|
<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
|
|
<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
|
|
</a-entity>
|
|
|
|
<a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink">
|
|
<a-entity collider-check raycaster="objects: .collidable; showLine:true;" ></a-entity>
|
|
</a-box>
|
|
<!-- could attach functions here... BUT then they have to be activable with the other hand! -->
|
|
<!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->
|
|
|
|
<a-entity light="type: ambient; color: #BBB; intensity: 0.6"></a-entity>
|
|
<a-entity light="type: directional; color: #FFF; intensity: 1.4" position="-0.5 1 1"></a-entity>
|
|
|
|
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284"
|
|
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text>
|
|
<a-sky hide-on-enter-ar color="lightgray"></a-sky>
|
|
<a-entity hide-on-enter-ar="" id="environment" class="hidableenvironment" ></a-entity>
|
|
<a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
|
|
<a-troika-text anchor=left target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<!--
|
|
|
|
<a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D;back:aide a venir;"
|
|
value="jxr startDraw2D()" position="0 1.45 -1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target id="mvxo" annotation="content:pengouin pas sud;back:aide a venir;"
|
|
value='jxr qs #penguin ga position .x--' position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target id="mvz" annotation="content:pengouin pas est;back:aide a venir;"
|
|
value='jxr qs #penguin ga position .z++' position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target id="mvzo" annotation="content:pengouin pas ouest;back:aide a venir;"
|
|
value='jxr qs #penguin ga position .z--' position="0 1.25 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target id="mvx" annotation="content:pengouin pas nord;back:aide a venir;"
|
|
value='jxr qs #penguin ga position .x++' position="0 1.15 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target id="displaypred" value="jxr displayPred()" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target id="makeAnchorsVisibleOnTargets" value="jxr makeAnchorsVisibleOnTargets()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target value="jxr tiltUpId('codeditor')" position=" -0.3 1.65 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr tiltDownId('codeditor')" position=" -0.3 1.60 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
-->
|
|
<script>
|
|
function mistrallocal(prompt){
|
|
//fetch('http://192.168.0.129:8080/completion', {
|
|
// failed on Quest, needs https, could try through ngrok
|
|
fetch('https://0670-2a02-1811-1c74-7f00-5649-1451-ab01-7f3d.ngrok-free.app/completion' , {
|
|
//fetch('http://localhost:8080/completion', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
'prompt': prompt,
|
|
'n_predict': 128
|
|
})
|
|
}).then( res => res.json() ).then( res => {
|
|
setFeedbackHUD(res.content)
|
|
let el = addNewNote(res.content)
|
|
el.setAttribute('annotation', prompt)
|
|
})
|
|
}
|
|
|
|
function getDirections(){
|
|
fetch('https://5ae9-83-217-141-167.ngrok-free.app/route?point=50.837974%2C4.379907&point=50.839004%2C4.358106&profile=car').then(r=>r.json()).then(r=>{
|
|
let inst = r.paths[0]?.instructions.map(i=>i.text.split(' - ')[0]).reverse();
|
|
let si = setInterval( _ => {
|
|
let i = inst.pop();
|
|
if (i) { console.log(i); setFeedbackHUD(i) } else { clearInterval(si) }
|
|
}, 3000 )
|
|
})
|
|
|
|
}
|
|
</script>
|
|
<a-troika-text anchor=left target value="jxr getDirections()" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<!--
|
|
<a-troika-text anchor=left target value="jxr mistrallocal('tell the short story of a penguin friend with a fish')" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
<a-troika-text anchor=left target value="jxr pushLeftClass('maptile')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr pushRightClass('maptile')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr pushUpClass('maptile')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr pushDownClass('maptile')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr pushBackClass('maptile')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left target value="jxr pushFrontClass('maptile')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
-->
|
|
|
|
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position
|
|
<a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
|
|
<a-console position="-1 1.2 -0.8" rotation="-5 80 0" font-size="34" height=.1 skip-intro=true></a-console>
|
|
|
|
<a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5"
|
|
rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
|
|
<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model>
|
|
|
|
-->
|
|
<a-entity id="tablescaled" scale=".1 .1 .1" position="0 0.8 -.3">
|
|
<a-gltf-model src="../content/winterset/Crystal.glb" position="-1 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
|
|
<a-gltf-model id="fish" src="../content/winterset/Fish.glb" position="2 0 -2" rotation="0 0 0" scale=".01 .01 .01" class="clonableasset"></a-gltf-model>
|
|
<a-gltf-model id="penguin" src="../content/winterset/Penguin.glb" position="0 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
|
|
|
|
</a-entity>
|
|
<!--
|
|
<a-gltf-model src="../content/winterset/Pinetree.glb" position="0 3 -10" rotation="0 0 0" scale="5 5 5" class="clonableasset"></a-gltf-model>
|
|
-->
|
|
|
|
<a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane>
|
|
</a-scene>
|
|
</body>
|
|
</script>
|
|
</html>
|
|
|