<!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 >
AFRAME.registerComponent('realm', {
// beyond the visual and self-editable aspect of https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/scaffolding generalizing it and make it, hopefully, safe.
})
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
}
});
let page = "Wiki.VirtualRealityInterface";
let pageFromParam = AFRAME.utils.getUrlParameter('page')
if (pageFromParam) page = pageFromParam
setTimeout( _ => {
Array.from( document.querySelectorAll("[value='"+page+"']") ).map( n =>
n.setAttribute("onreleased", "console.log('dropped, should toggle display children,"+n.id+"')"));
Array.from( document.querySelectorAll("[value='"+page+"']>a-sphere") ).map( n => n.setAttribute("color", "purple"))
}, 5000)
< / 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-box realm width = 10 height = 6 depth = 10 wireframe = "true" position = "10 3 1" > < a-troika-text scale = "10 10 10" value = "realm West" > < / a-troika-text > < / a-box >
< a-box realm width = 10 height = 6 depth = 10 wireframe = "true" position = "-10 3 1" > < a-troika-text scale = "10 10 10" value = "realm East" > < / a-troika-text > < / a-box >
< a-box realm width = 10 height = 6 depth = 10 wireframe = "true" position = "0 3 11" > < a-troika-text scale = "10 10 10" value = "realm North" > < / a-troika-text > < / a-box >
< a-box realm width = 10 height = 6 depth = 10 wireframe = "true" position = "0 3 -11" > < a-troika-text scale = "10 10 10" value = "realm South" > < / a-troika-text > < / a-box >
< / a-scene >
< / body >
< / script >
< / html >
