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.
142 lines
7.8 KiB
142 lines
7.8 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.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>
|
|
|
|
scaffoldingInnerHTMLTemplate = `
|
|
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
|
|
<a-entity position="0 0.5 0" class="scaffolding_front">
|
|
<a-cylinder radius=".05"></a-cylinder>
|
|
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
|
|
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
|
|
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
|
|
</a-entity>
|
|
<a-entity position="0 0.5 -.4" class="scaffolding_back">
|
|
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
|
|
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
|
|
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
|
|
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
|
|
</a-entity>`
|
|
|
|
setTimeout( _ => {
|
|
let rot = "0 0 0"
|
|
let positions = [ "-1 1 -3.5", "-1 2 -3.5", "0 0 -3.5", "0 1 -3.5", "1 0 -3.5", "-1 0 -3.5" ]
|
|
// triangle example, could be based on room boundaries instead
|
|
positions.map( pos => { addFromTemplate(pos, rot, scaffoldingInnerHTMLTemplate) })
|
|
}, 2000)
|
|
|
|
function addFromTemplate(pos="0 0 0", rot="0 0 0", template="<a-box></a-box>"){
|
|
let el = document.createElement("a-entity")
|
|
el.innerHTML = template
|
|
AFRAME.scenes[0].appendChild(el)
|
|
el.setAttribute("position", pos)
|
|
el.setAttribute("rotation", rot)
|
|
}
|
|
|
|
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", "")
|
|
})
|
|
},
|
|
// could support multi
|
|
events: {
|
|
emptypinch: function (e) {
|
|
// 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}`);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
AFRAME.registerComponent('scaffolding', {
|
|
init: function(){
|
|
console.log(this.el.innerHTML)
|
|
// should become editable then saved back/replaced (or cloned)
|
|
// could do a test with switching to wireframe or grey color
|
|
// BT keyboard does get focus on Vision Pro too
|
|
// enter key does not seem to work though
|
|
// it does work on desktop tso should console.log() what keypresses are actually received
|
|
// Meta+Enter does work though! (on Corne-ish Zen it's Linux key with Enter)
|
|
// still prepare jxr regexes
|
|
// e.g el = document.querySelector("[scaffolding]")l el.innerHTML = el.innerHTML.replaceAll("<a-cylinder", "<a-cylinder wireframe=true")
|
|
// block based too
|
|
// responsive pedagogical way, as discuss with Adam particularly, metaphor of the electrician and consecutive pannels with limited access
|
|
// put this.el.innerHTML on a plane, e.g 1x1 black plane at back of current scaffolding
|
|
// arrow keys (on physical keyboard) move through that, initially changing color or current char
|
|
// use a font that faciliates positionning
|
|
// as done before, make the carret, e.g | directly in the content text itself
|
|
// on save (ESC? to define and test), remove carret then save back to this.el.innerHTML
|
|
|
|
}
|
|
});
|
|
|
|
</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 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-plane color="black" opacity=".3" position="1.0095 0.81549 0.3473" rotation="0 -40 0" material="" geometry="" scale="1.37 1.73 1"></a-plane>
|
|
|
|
<a-troika-text anchor=left value="View-source for WebXR" target position="0.5 1.55 0" rotation="0 -40 0" scale="0.3 0.3 0.3"></a-troika-text>
|
|
<a-troika-text anchor=left value="Why immersive Web needs visible scaffolding" target position="0.5 1.45 0" rotation="0 -40 0" scale="0.2 0.2 0.2"></a-troika-text>
|
|
<a-troika-text anchor=left line-height="1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " target position="0.5 1.25 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
<a-troika-text anchor=left value="jxr addFromTemplate( '0 1 -1', '', scaffoldingInnerHTMLTemplate)" target position="0.5 1.05 0" rotation="0 -40 0" scale="0.1 0.1 0.1">
|
|
<a-triangle scale=".5 .5 .5" position="-.5 0 0" rotation="0 0 30"></a-triangle>
|
|
</a-troika-text>
|
|
<a-troika-text anchor=left line-height="1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " target position="0.5 .85 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
</a-scene>
|
|
</body>
|
|
</script>
|
|
</html>
|
|
|