<!DOCTYPE html>
<html>
<title>SpaSca : Spatial Scaffolding</title>
<head>
<!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
<script src='dependencies/aframe.offline.min.js'></script>
<script src="dependencies/a-console.js"></script>
<script src='dependencies/aframe-troika-text.min.js'></script>
<script src='dependencies/webdav.js'></script>
<script src='jxr-core.js?1234'></script>
<script src='jxr-postitnote.js?13235'></script>
</head>
<body>
<script>
/*
SpaSca circular menu inspired by https://www.olegfrolov.design/spatialcomputing or the Meta OS menu
on empty pinch moving, if (moving duration above threshold 500ms)
then
show menu nearby position with JXR commands that hides on released,
on moving
highlight closest snippet
rewrite nearby getClosestTargetElements() to be only over a subset or targets, i.e the ones from active menu
on release
if (nearby one of the created JXR snippets), execute it
remove those JXR commands
<a-troika-text id="spatial-introspection-test" anchor=left value="console.log('executing from secondary pinch');"
onreleased="console.log('run on released')"
onpicked="console.log('run on picked')"
target position=" -0.3 1.35 0" rotation="0 40 0" scale="0.1 0.1 0.1">
</a-troika-text>
*/
function cloneTarget(target){
let el = target.cloneNode(true)
if (!el.id)
el.id = "clone_" + crypto.randomUUID()
else
el.id += "_clone_" + crypto.randomUUID()
AFRAME.scenes[0].appendChild(el)
}
function deleteTarget(target){
targets = targets.filter( e => e != target)
target.remove()
}
function runClosestJXR(){
// ideally this would come from event details
let latest = selectedElements[selectedElements.length-1].element
let el = getClosestTargetElement( latest.getAttribute('position') )
if (el) interpretJXR( el.getAttribute("value") )
}
// should move to jxr-core.js
AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent with event name
init: function(){
AFRAME.scenes[0].addEventListener('enter-vr', e => {
console.log('entered vr')
document.querySelector("[cursor]").setAttribute("visible", "true")
document.querySelector("[camera]").setAttribute("cursor", "")
})
this.menuTargets = []
this.menuEl = document.createElement("a-box")
this.menuEl.setAttribute("scale", ".01 .01 .01")
this.menuEl.setAttribute("opacity", 0)
this.menuEl.setAttribute("color", "red")
this.menuEl.setAttribute("wireframe", "true")
this.menuOpacity = 0
AFRAME.scenes[0].appendChild(this.menuEl)
let colors =["green", "blue", "orange", "yellow", "brown", "black"].map( (c,i) => {
let newEl = document.createElement("a-box")
newEl.setAttribute("position", "" + ((i+1)*3) + " 0 0")
newEl.setAttribute("opacity", 0)
newEl.setAttribute("wireframe", "true")
newEl.setAttribute("color", c )
this.menuEl.appendChild( newEl )
this.menuTargets.push( newEl )
})
this.menuTargets.push( this.menuEl )
},
// could support multi
events: {
emptypinch: function (e) {
this.menuEl.setAttribute("position", e.detail.position)
// works with AFRAME.scenes[0].emit('emptypinch', {position:"0 0 0"})
let code = this.el.getAttribute('onemptypinch')
// if multi, should also look for onreleased__ not just onreleased
try {
eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
} catch (error) {
console.error(`Evaluation failed with ${error}`);
}
},
emptypinchmoved: function (e) {
let foundElement = getClosestElement( e.detail.position, threshold=0.01, this.menuTargets )
this.menuTargets.map( mt => mt.setAttribute("wireframe", "true") )
if ( foundElement ) foundElement.setAttribute("wireframe", "false")
if (this.menuOpacity < 1) {
this.menuOpacity += .01
this.menuTargets.map( mt => mt.setAttribute("opacity", this.menuOpacity) )
}
let code = this.el.getAttribute('onemptypinchmoved')
// if multi, should also look for onreleased__ not just onreleased
try {
eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
} catch (error) {
console.error(`Evaluation failed with ${error}`);
}
},
emptypinchreleased: function (e) {
// could also check if above this.menuOpacity threshold, e.g not doing below .3 to avoid unexpected action
let foundElement = getClosestElement( e.detail.position, threshold=0.02, this.menuTargets )
// does not seem to execute anymore after teleporting, did work before though
if ( foundElement ){
document.getElementById("box").setAttribute("color", foundElement.getAttribute("color") )
}
this.menuOpacity = 0
this.menuEl.setAttribute("opacity", this.menuOpacity)
this.menuTargets.map( mt => mt.setAttribute("opacity", this.menuOpacity) )
let code = this.el.getAttribute('onemptypinchreleased')
// if multi, should also look for onreleased__ not just onreleased
try {
eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
} catch (error) {
console.error(`Evaluation failed with ${error}`);
}
},
}
})
function onHoveredTeleport(){
// iterate over targets
// see instead of teleportable https://aframe.io/docs/1.5.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
Array.from( document.querySelectorAll("[teleporter]") ).map( target => {
if ( target.states.includes( "cursor-hovered" ) ){
target.setAttribute("material", "color", "magenta") // visited
document.getElementById('rig').setAttribute('position', target.getAttribute("position") )
}
})
}
AFRAME.registerComponent('teleporter', {
init: function(){
this.el.setAttribute("opacity", .5)
},
events: {
mouseenter: function (e) { this.el.setAttribute("opacity", .8) },
mouseleave: function (e) { this.el.setAttribute("opacity", .5) },
click: function (e) { document.getElementById('rig').setAttribute('position', this.el.getAttribute("position") ) }
// makes it compatible with mouse on desktop ... but also somehow enable the wrist shortcut?!
}
});
</script>
<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>
<a-scene startfunctions onemptypinch="onHoveredTeleport()" >
<a-gltf-model hide-on-enter-ar="" id="environment" src="../content/CubeRoom.glb" rotation="0 -90 0" position="0 0 1" scale="" ></a-gltf-model>
<!-- Cube Room by Anonymous [CC-BY] via Poly Pizza -->
<a-entity id="rig">
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
hud camera look-controls wasd-controls position="0 1.6 0">
<a-entity cursor position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.005; radiusOuter: 0.01"
material="color: black; shader: flat; opacity:.05;"
></a-entity>
</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-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
</a-entity>
<a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="-3 5 -2"
scale="3 3 3" rotation="80 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-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 value="jxr onNextPrimaryPinch(deleteTarget)" target position=" -0.3 1.50 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr onNextPrimaryPinch(cloneTarget)" target position=" -0.3 1.60 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr location.reload()" target position=" -0.3 1.30 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr makeAnchorsVisibleOnTargets()" target position=" -0.3 1.20 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="forceXaxis toggling"
onreleased="console.log('run on released');forceXaxis=!forceXaxis"
onpicked="console.log('run on picked');forceXaxis=!forceXaxis"
target position=" -0.3 1.45 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="translate targets"
onreleased="toggleTranslateTargets()"
onpicked="toggleTranslateTargets()"
target position=" 1 1.45 -.2" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr setTimeout( _ => toggleAttachToSelf(), 1000); toggleAttachToSelf()" target position=" -0.3 1.25 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-box teleporter height=".1" class="teleportable" material="color: cyan" position="3.5 0 -3.5" ></a-box>
<a-box teleporter height=".1" class="teleportable" material="color: cyan" position="-4 0 4" ></a-box>
<a-box teleporter height=".1" class="teleportable" material="color: cyan" position="3 3 4" >
<a-troika-text anchor=left value="jxr location.reload()" target position="0 1.30 -.5" rotation="0 0 0" scale="0.1 0.1 0.1"></a-troika-text>
<!-- works to execute but not to move, should either reparent or take into account the parent offset while moving -->
<!-- see pinchmoved in primary pinch in jxr-core.js as potential solution -->
</a-box>
<a-box teleporter height=".1" class="teleportable" material="color: cyan" position="0 0 0" ></a-box>
<a-troika-text id="spatial-introspection-test" anchor=left value="console.log('executing from secondary pinch');"
onreleased="console.log('run on released')"
onpicked="console.log('run on picked')"
target position=" -0.3 1.35 0" rotation="0 40 0" scale="0.1 0.1 0.1">
</a-troika-text>
</a-scene>
</body>
</script>
</html>