bugfix: terminal now works in AR & immersive-pause mode again

com/data2event.js

@@ -18,7 +18,9 @@
  *
  */
 
-AFRAME.registerComponent('data2event',{
+if( !AFRAME.components.data2event ){
+
+  AFRAME.registerComponent('data2event',{
 
     init: function(){
       setTimeout( () => {
@@ -43,4 +45,6 @@ AFRAME.registerComponent('data2event',{
       })
     },
 
-})
+  })
+
+}

com/dom.js

@@ -32,7 +32,9 @@
  * | `DOMready`   | self   | fired when dom component (`this.dom`) is created                                                   |
  */
 
-AFRAME.registerComponent('dom',{
+if( !AFRAME.components.dom ){
+
+  AFRAME.registerComponent('dom',{
 
     init: function(){
       Object.values(this.el.components)
@@ -133,4 +135,5 @@ AFRAME.registerComponent('dom',{
       }
     }
 
-})
+  })
+}

com/example/helloworld-htmlform.js

@@ -57,9 +57,7 @@ AFRAME.registerComponent('helloworld-htmlform', {
       const instance = this.el.cloneNode(false)
       this.el.sceneEl.appendChild( instance )
       instance.setAttribute("dom",      "")
-      instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
+      instance.setAttribute("show-texture-in-xr", "")  // only show aframe-html in xr 
-      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
       instance.setAttribute("grabbable","")
       instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
 
@@ -75,7 +73,11 @@ AFRAME.registerComponent('helloworld-htmlform', {
           root: document.querySelector("#overlay"),
           mount: instance.dom,
           onclose: () => { instance.dom.style.display = 'none'; return false; },
-          oncreate: () => instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+          oncreate: () => {
+            instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
+            instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+            instance.setAttribute("show-texture-in-xr","") // only show aframe-html texture in xr mode
+          }
         });
         instance.dom.style.display = AFRAME.utils.XD() == '3D' ? 'none' : '' // show/hide
 

com/example/helloworld-iframe.js

@@ -87,7 +87,9 @@ AFRAME.registerComponent('helloworld-iframe', {
           onclose: () => { instance.dom.style.display = 'none'; return false; },
           oncreate: () => {
             com.data.url = URL
+            instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
             instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+            instance.setAttribute("show-texture-in-xr","") // only show aframe-html texture in xr mode
           }
         });
         instance.dom.style.display = ''

com/example/helloworld-window.js

@@ -5,7 +5,7 @@ AFRAME.registerComponent('helloworld-window', {
 
   requires:     {
     dom:         "./com/dom.js",                                                  // interpret .dom object
-    xd:          "./com/dom.js",                                                  // allow switching between 2D/3D 
+    xrtexture:   "./com/html-as-texture-in-xr.js",                                // allow switching between 3D/3D 
     html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
     winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
     winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
@@ -40,9 +40,6 @@ AFRAME.registerComponent('helloworld-window', {
       const instance = this.el.cloneNode(false)
       this.el.sceneEl.appendChild( instance )
       instance.setAttribute("dom",             "")
-      instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
-      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
       instance.setAttribute("grabbable","")
       instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
 
@@ -59,7 +56,9 @@ AFRAME.registerComponent('helloworld-window', {
           root: document.querySelector("#overlay"),
           mount: instance.dom,
           onclose: () => { instance.dom.style.display = 'none'; return false; },
-          oncreate: () => instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+          oncreate: () => {
+            instance.setAttribute("show-texture-in-xr",`domid: #${instance.uid}`) // only show aframe-html texture in xr mode
+          }
         });
         instance.dom.style.display = '' // show
 

com/html-as-texture-in-xr.js

@@ -0,0 +1,123 @@
+if( !AFRAME.components['html-as-textre-in-xr'] ){
+
+  AFRAME.registerComponent('html-as-texture-in-xr', {
+    schema: {
+      domid: { type:"string"}
+    },
+
+    dependencies:{
+      html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    },
+
+    init: async function () { 
+      let s = await AFRAME.utils.require(this.dependencies)
+      this.el.setAttribute("html",`html: ${this.data.domid}; cursor:#cursor`)
+      this.el.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+      this.el.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
+    },
+
+    manifest: { // HTML5 manifest to identify app to xrsh
+      "short_name": "show-texture-in-xr",
+      "name": "2D/3D switcher",
+      "icons": [],
+      "id": "/?source=pwa",
+      "start_url": "/?source=pwa",
+      "background_color": "#3367D6",
+      "display": "standalone",
+      "scope": "/",
+      "theme_color": "#3367D6",
+      "category":"system",
+      "shortcuts": [
+        {
+          "name": "What is the latest news?",
+          "cli":{
+            "usage":  "helloworld <type> [options]",
+            "example": "helloworld news",
+            "args":{
+              "--latest": {type:"string"}
+            }
+          },
+          "short_name": "Today",
+          "description": "View weather information for today",
+          "url": "/today?source=pwa",
+          "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+        }
+      ],
+      "description": "use ESC-key to toggle between 2D / 3D",
+      "screenshots": [
+        {
+          "src": "/images/screenshot1.png",
+          "type": "image/png",
+          "sizes": "540x720",
+          "form_factor": "narrow"
+        }
+      ],
+      "help":`
+  Helloworld application
+
+      `
+    }
+
+  });
+
+  AFRAME.utils.XD = function(){
+    return document.body.classList.contains('XR') ? '3D' : '2D'
+  }
+
+  AFRAME.utils.XD.toggle = function(state){
+      state = state != undefined ? state : state || !document.body.className.match(/XR/)
+      document.body.classList[ state ? 'add' : 'remove'](['XR'])
+      AFRAME.scenes[0].emit( state ? '3D' : '2D')
+    }
+
+  AFRAME.utils.XD.getPositionInFrontOfCamera = function(distance){
+    const camera = AFRAME.scenes[0].camera;
+    let pos = new THREE.Vector3()
+    let direction = new THREE.Vector3();
+    // Get camera's forward direction (without rotation)
+    camera.getWorldDirection(direction);
+    camera.getWorldPosition(pos)
+    direction.normalize();
+    // Scale the direction by 1 meter
+    if( !distance ) distance = 1.5
+    direction.multiplyScalar(distance);
+    // Add the camera's position to the scaled direction to get the target point
+    pos.add(direction);
+    return pos
+  }
+
+  AFRAME.registerSystem('html-as-texture-in-xr',{
+
+    init: function(){
+      this.sceneEl.addEventListener('enter-vr',() => AFRAME.utils.XD.toggle(true) )
+      this.sceneEl.addEventListener('exit-vr', () => AFRAME.utils.XD.toggle(false) )
+      this.sceneEl.addEventListener('2D', () => this.showElements(false) )
+      this.sceneEl.addEventListener('3D', () => this.showElements(true) )
+
+      // toggle immersive with ESCAPE
+      //document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() )
+
+      document.head.innerHTML += `<style type="text/css">
+        .XR #toggle_overlay{
+          background: transparent;
+          color: #3aacff;
+        }
+
+        /*
+        .XR #overlay{
+          visibility: hidden;
+        }
+        */
+      </style>`
+
+    },
+
+    showElements: function(state){
+      let els = [...document.querySelectorAll('[html-as-texture-in-xr]')]
+      els     = els.filter( (el) => el != this.el ? el : null ) // filter out self
+      els.map( (el) => el.setAttribute("visible", state ? true : false  ) )
+    }
+
+  })
+
+}

com/isoterminal.js

@@ -46,6 +46,9 @@ if( typeof AFRAME != 'undefined '){
       xtermjs:     "https://unpkg.com/@xterm/xterm@5.5.0/lib/xterm.js",
       xtermcss:    "https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css",
       v86:         "com/isoterminal/libv86.js",
+      // html to texture
+      htmlinxr:    "com/html-as-texture-in-xr.js",
+      html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
       // isoterminal features
       core:        "com/isoterminal/core.js",
       utils_9p:    "com/isoterminal/feat/9pfs_utils.js",
@@ -53,10 +56,11 @@ if( typeof AFRAME != 'undefined '){
       xterm:       "com/isoterminal/feat/xterm.js",
       jsconsole:   "com/isoterminal/feat/jsconsole.js",
       javascript:  "com/isoterminal/feat/javascript.js",
+      index:       "com/isoterminal/feat/index.html.js",
     },
 
     dom: {
-      scale:   0.7,
+      scale:   0.5,
       events:  ['click','keydown'],
       html:    (me) => `<div class="isoterminal"></div>`,
 
@@ -77,7 +81,7 @@ if( typeof AFRAME != 'undefined '){
                         .isoterminal style{ display:none }
 
                         .wb-body:has(> .isoterminal){ 
-                          background: #000c; 
+                          background: #000F; 
                           overflow:hidden;
                         }
 
@@ -147,6 +151,9 @@ if( typeof AFRAME != 'undefined '){
         this.isoterminal.addEventListener('ready', function(e){
           instance.dom.classList.remove('blink')
           instance.winbox.maximize()
+          setTimeout( () => { // important: after window maximize animation to get true size
+            instance.setAttribute("html-as-texture-in-xr", `domid: #${instance.uid}`)  // only show aframe-html in xr 
+          },1500)
         })
 
         this.isoterminal.addEventListener('status', function(e){
@@ -172,13 +179,11 @@ if( typeof AFRAME != 'undefined '){
         instance.addEventListener('window.onmaximize', resize )
 
         instance.setAttribute("dom",      "")
-        instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
-        instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-        instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
 
         const focus = () => document.querySelector('canvas.a-canvas').focus()
         instance.addEventListener('obbcollisionstarted', focus )
         this.el.sceneEl.addEventListener('enter-vr', focus )
+        this.el.sceneEl.addEventListener('enter-ar', focus )
 
         instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
       }

com/isoterminal/feat/9pfs_utils.js

@@ -2,6 +2,32 @@ ISOTerminal.addEventListener('emulator-started', function(){
   let emulator    = this.emulator
   let isoterminal = this 
 
+  emulator.fs9p.Read = async function(inodeid, offset, count){
+    let file
+    const inode    = this.inodes[inodeid];
+    const inodeDir = this.GetParent(inode.fid)
+
+    if( !inodeDir ){ // undefined = /mnt
+      for( const [name,childid] of this.inodes[0].direntries ){
+        if( childid == inode.fid ){ file = name }
+      }
+    }
+
+    if( file ){
+      let data = {promise:false, file}
+      isoterminal.emit('file-read', data)
+      // if( data.promise ){ return await data.promise } // *FIX* size already 
+    }
+
+    if(this.is_forwarder(inode))
+    {
+        const foreign_id = inode.foreign_id;
+        return await this.follow_fs(inode).Read(foreign_id, offset, count);
+    }
+
+    return await this.get_data(inodeid, offset, count);
+  };
+
   emulator.fs9p.update_file = async function(file,data){
 
       const p = this.SearchPath(file);

com/isoterminal/feat/index.html.js

@@ -0,0 +1,10 @@
+ISOTerminal.addEventListener('ready', function(){
+  this.addEventListener('file-read', (e) => {
+    const data = e.detail
+    if( data.file == 'index.html'){
+      data.promise = new Promise( (resolve,reject) => {
+        resolve( this.toUint8Array(document.documentElement.outerHTML) )
+      })
+    }
+  })
+})

com/isoterminal/mnt/profile

@@ -26,6 +26,6 @@ command_not_found_handle(){
 resize
 test $HOSTNAME = localhost || clear
 cat /mnt/motd
-export PATH=$PATH:/mnt
+export PATH=$PATH:/mnt:~/bin
 export PS1="\n\[\033[38;5;57m\]x\[\033[38;5;93m\]r\[\033[38;5;129m\]s\[\033[38;5;165m\]h \[\033[38;5;201m\]# \[\033[0m\]"
 

com/isoterminal/mnt/profile.xrsh

@@ -20,26 +20,29 @@ test -d /dev/browser || {
   setup_browser_dev(){
     mkdir -p /mnt/dev/browser
     touch /mnt/dev/browser/js
-    touch /mnt/dev/browser/html
     touch /mnt/console.tty
     ln -s /mnt/dev/browser /dev/browser
-    ln -s /dev/browser/html ~/index.html
+    # emulator.write_file() only writes to /mnt/. :(
-    # setup console goodies
+    # should be in /proc, but v86 gives 'no such file or dir' when creating it there
-    ln -s /mnt/console.tty /dev/browser/console.tty # emulator.write_file() only writes to /mnt/. :(
+    ln -s /mnt/console.tty /dev/browser/console.tty 
-    echo 0 > /dev/browser/console.tty               # should be in /proc, but v86 gives 'no such file or dir' when creating it there
+    echo 0 > /dev/browser/console.tty
-    touch /mnt/console
+    touch /mnt/console    && ln -s /mnt/console /dev/browser/console
-    ln -s /mnt/console /dev/browser/console
+    touch /mnt/index.html && ln -s /mnt/index.html /dev/browser/index.html
+    ln -s /dev/browser/index.html ~/index.html
 
     test -f /etc/profile && rm /etc/profile
     ln -s /mnt/profile /etc/profile
   }
 
   setup_hook_dirs(){ # see /mnt/hook for usage
+    mkdir ~/bin
     mkdir -p ~/hook.d/alert  
     echo -e "#!/bin/sh\necho hook.d/alert/yo: yo \$*"                                   > ~/hook.d/alert/yo 
     echo -e "#!/bin/js\nalert(\"hook.d/alert/yo.js \"+args.slice(1).join(' '))"         > ~/hook.d/alert/yo.js
     echo -e "#!/usr/bin/env lua\nprint(\"hook.d/alert/yo.lua: yo \" .. arg[1])"         > ~/hook.d/alert/yo.lua
     echo -e "#!/usr/bin/awk -f\nBEGIN{\n\tprint \"hook.d/alert/yo.awk: yo \" ARGV[1]\n}" > ~/hook.d/alert/yo.awk
+    echo -e "#!/bin/sh\necho hello \$*"                                                 > ~/bin/hello 
+    chmod +x ~/bin/hello
   }
 
   setup_network(){

com/window.js

@@ -12,7 +12,6 @@ AFRAME.registerComponent('window', {
 
   dependencies:{
     dom:         "com/dom.js",
-    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
     winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
     //winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // main theme
   },
@@ -41,7 +40,6 @@ AFRAME.registerComponent('window', {
         // resize after the dom content has been rendered & updated 
         setTimeout( () => {
           winbox.resize( this.el.dom.offsetWidth+'px', this.el.dom.offsetHeight+'px' )
-          setTimeout( () => this.el.setAttribute("html",`html:#${this.data.uid}; cursor:#cursor`), 1000)
           // hint grabbable's obb-collider to track the window-object
           this.el.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0'
           this.el.components['obb-collider'].update()
@@ -53,7 +51,6 @@ AFRAME.registerComponent('window', {
         if( e.halt ) return true 
         this.data.dom.style.display = 'none';
         this.data.dom.parentElement.remove()
-        debugger
         this.el.parentElement.remove( this.el )
         return false
       },

com/xd.js

@@ -1,111 +0,0 @@
-AFRAME.registerComponent('xd', {
-  schema: {
-    foo: { type:"string"}
-  },
-
-  init: function () {
-    if( Object.keys(this.el.components).length > 1 ) return // we collect a-entities which wish to be toggled in this.showElements()
-
-    this.el.sceneEl.addEventListener('enter-vr',() => this.toggle(true) )
-    this.el.sceneEl.addEventListener('exit-vr', () => this.toggle(false) )
-    this.el.sceneEl.addEventListener('2D', () => this.showElements(false) )
-    this.el.sceneEl.addEventListener('3D', () => this.showElements(true) )
-
-    // toggle immersive with ESCAPE
-    document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() )
-
-    document.head.innerHTML += `<style type="text/css">
-      .XR #toggle_overlay{
-        background: transparent;
-        color: #3aacff;
-      }
-
-      .XR #overlay{
-        visibility: hidden;
-      }
-    </style>`
-
-    this.events.launcher = () => this.toggle()
-  },
-
-  showElements: function(state){
-    let els = [...document.querySelectorAll('[xd]')]
-    els     = els.filter( (el) => el != this.el ? el : null ) // filter out self
-    els.map( (el) => el.setAttribute("visible", state ? "true" : false  ) )
-  },
-
-  // draw a button so we can toggle apps between 2D / XR
-  toggle: function(state){
-    state = state != undefined ? state : state || !document.body.className.match(/XR/)
-    document.body.classList[ state ? 'add' : 'remove'](['XR'])
-    AFRAME.scenes[0].emit( state ? '3D' : '2D')
-  },
-
-  manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "XD",
-    "name": "2D/3D switcher",
-    "icons": [],
-    "id": "/?source=pwa",
-    "start_url": "/?source=pwa",
-    "background_color": "#3367D6",
-    "display": "standalone",
-    "scope": "/",
-    "theme_color": "#3367D6",
-    "category":"system",
-    "shortcuts": [
-      {
-        "name": "What is the latest news?",
-        "cli":{
-          "usage":  "helloworld <type> [options]",
-          "example": "helloworld news",
-          "args":{
-            "--latest": {type:"string"}
-          }
-        },
-        "short_name": "Today",
-        "description": "View weather information for today",
-        "url": "/today?source=pwa",
-        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
-      }
-    ],
-    "description": "use ESC-key to toggle between 2D / 3D",
-    "screenshots": [
-      {
-        "src": "/images/screenshot1.png",
-        "type": "image/png",
-        "sizes": "540x720",
-        "form_factor": "narrow"
-      }
-    ],
-    "help":`
-Helloworld application
-
-This is a help file which describes the application.
-It will be rendered thru troika text, and will contain
-headers based on non-punctualized lines separated by linebreaks,
-in above's case "\nHelloworld application\n" will qualify as header.
-    `
-  }
-
-});
-
-AFRAME.utils.XD = function(){
-  return document.body.classList.contains('XR') ? '3D' : '2D'
-}
-
-
-AFRAME.utils.XD.getPositionInFrontOfCamera = function(distance){
-  const camera = AFRAME.scenes[0].camera;
-  let pos = new THREE.Vector3()
-  let direction = new THREE.Vector3();
-  // Get camera's forward direction (without rotation)
-  camera.getWorldDirection(direction);
-  camera.getWorldPosition(pos)
-  direction.normalize();
-  // Scale the direction by 1 meter
-  if( !distance ) distance = 1.5
-  direction.multiplyScalar(distance);
-  // Add the camera's position to the scaled direction to get the target point
-  pos.add(direction);
-  return pos
-}