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.
122 lines
6.5 KiB
122 lines
6.5 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>
|
|
/* potential paths, from the most traditional to the most exotic
|
|
https://developer.mozilla.org/en-US/docs/Glossary/Scope
|
|
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
|
|
https://tc39.es/ecma262/#sec-code-realms
|
|
https://tc39.es/proposal-shadowrealm/
|
|
|
|
this starts to look like an "excuse" though for complexity and/or exploring novelty of the language itself and its execution environment
|
|
the goal remains to
|
|
efficiently modify the current environment
|
|
which from experience requires
|
|
affordances (assumed here as solved, via e.g keyboard typing, <a-console>, jxr, etc) to code
|
|
a safe environment
|
|
thus allowing e.g rollback
|
|
so far jxr/javascript is executed within a try { eval() } block as
|
|
alternatively eval?.( generatedCodeToEval )
|
|
// forcing global scope but fails, at least result is undefined in that scope
|
|
in code-generation branch
|
|
also in nodal branch
|
|
this is currently not supported
|
|
namely the context is not saved and can't be replaced back after a failure
|
|
one has to exit XR (if the bug or new behavior is breaking)
|
|
reload the page
|
|
until now refreshing has been the way to rollback
|
|
some explorations via undo in the speech branch
|
|
|
|
*/
|
|
|
|
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>
|
|
|