better grabbable + example form now demos increase/decrease iconsize

com/helloworld-window.js

@@ -16,12 +16,6 @@ AFRAME.registerComponent('helloworld-window', {
     scale:   0.66,
     events:  ['click','input'],
     html:    (me) => `<div class="htmlform">
-                        <fieldset>
-                          <legend>Theme</legend>
-                          <input type="radio" id="theme" name="theme" value="0" checked style=""><label for="theme" style="margin-right:15px;">Normal</label>
-                          <input type="radio" id="themei" name="theme" value="1"><label for="themei">Invert</label><br>
-                        </fieldset>
-                        <br>
                         <fieldset>
                           <legend>Welcome to XR Shell</legend>
                           A free offline-first morphable<br>
@@ -32,6 +26,12 @@ AFRAME.registerComponent('helloworld-window', {
                             <li>check the <a href="https://forgejo.isvery.ninja/xrsh/xrsh-buildroot/src/branch/main/buildroot-v86/board/v86/rootfs_overlay/root/manual.md" target="_blank">manual</a></li> 
                           </ol>
                         </fieldset>
+                        <br>
+                        <fieldset>
+                          <legend>Icons</legend>
+                          <input type="radio" id="small" name="icons" value="0.8" checked style=""><label for="small" style="margin-right:15px;">Small</label>
+                          <input type="radio" id="big"   name="icons" value="1.5"><label for="big">Big</label><br>
+                        </fieldset>
                         <!--
                         <fieldset>
                           <legend>Size</legend>
@@ -55,7 +55,7 @@ AFRAME.registerComponent('helloworld-window', {
     input: function(e){
       if( !e.detail.target                 ) return
       if(  e.detail.target.id == 'myRange' ) this.data.myvalue = e.detail.target.value // reactive demonstration
-      if(  e.detail.target.name == 'theme' ) document.body.style.filter = `invert(${e.detail.target.value})`
+      if(  e.detail.target.name == 'icons' ) document.querySelector('[launcher]').object3D.getObjectByProperty("HTMLMesh").scale.setScalar( e.detail.target.value )
       if(  e.detail.target.name == 'cmenu' ) document.querySelector(".iconmenu").style.display = e.detail.target.value == 'on' ? '' : 'none';
       console.dir(e.detail)
     },
@@ -72,7 +72,7 @@ AFRAME.registerComponent('helloworld-window', {
     },
 
     DOMready: function(){
-      this.el.setAttribute("window", `title: Welcome; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; width:250; height: 360`)
+      this.el.setAttribute("window", `title: XRSH; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; width:250; height: 360`)
 
       // data2event demo
       this.el.setAttribute("data2event","")

com/isoterminal.js

@@ -120,7 +120,7 @@ if( typeof AFRAME != 'undefined '){
       v86:           "com/isoterminal/libv86.js",
       // allow xrsh to selfcontain scene + itself
       xhook:         "com/lib/xhook.min.js",
-      selfcontain:   "com/selfcontainer.js",
+      //selfcontain:   "com/selfcontainer.js",
       // html to texture
       htmlinxr:      "com/html-as-texture-in-xr.js",
       // isoterminal global features
@@ -140,7 +140,7 @@ if( typeof AFRAME != 'undefined '){
       css:     (me) => `
 
                         .isoterminal{
-                          padding: ${me.com.data.padding}px 0px 0px ${me.com.data.padding}px;
+                          padding: ${me.com.data.padding}px;
                           width:100%;
                           height:99%;
                           resize: both;
@@ -252,8 +252,6 @@ if( typeof AFRAME != 'undefined '){
                           background: transparent;
                         }
 
-                        .wb-control { margin-right:10px }
-
                         .XR .isoterminal{
                           background: #000;
                         }
@@ -338,7 +336,7 @@ if( typeof AFRAME != 'undefined '){
         this.term.emit('term_init', {instance, aEntity:this})
         //instance.winbox.resize(720,380)
         let size = `width: ${this.data.width}; height: ${this.data.height}`
-        instance.setAttribute("window", `title: xrsh; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-max, no-resize, no-close; `)
+        instance.setAttribute("window", `title: xrsh.iso; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-max, no-resize; grabbable: components.html.el.object3D.children.${this.el.children.length}`)
       })
 
       instance.addEventListener('window.oncreate', (e) => {
@@ -374,7 +372,7 @@ if( typeof AFRAME != 'undefined '){
         const w = instance.winbox
         if(!w) return
         w.titleBak = w.titleBak || w.title
-        w.setTitle( `${w.titleBak} ${msg ? "["+msg+"]" : ""}` )
+        w.setTitle( `${w.titleBak} [${msg}]` )
       })
 
       instance.addEventListener('window.onclose', (e) => {

com/pressable.js

@@ -2,7 +2,7 @@
 
 AFRAME.registerComponent('pressable', {
     schema: {
-      pressDistance: { default: 0.005 },
+      pressDistance: { default: 0.008 },
       pressDuration: { default: 300 },
       immersiveOnly: { default: true } 
     },
@@ -32,50 +32,53 @@ AFRAME.registerComponent('pressable', {
              }, y )
            }
         }
-    },
+  },
-    detectPress: function(){
+  detectPress: function(){
-        if( this.handEls.length == 0 ){
+    if( !this.el.sceneEl.renderer.xr.isPresenting ) return // ignore events in desktop mode 
-            this.handEls = document.querySelectorAll('[hand-tracking-controls]');
+
+    if( this.handEls.length == 0 ){
+      this.handEls = document.querySelectorAll('[hand-tracking-controls]');
+    }
+    var handEls = this.handEls;
+    var handEl;
+    let minDistance = 5
+
+    // compensate for an object inside a group 
+    let object3D = this.el.object3D.type == "Group" ? this.el.object3D.children[0] : this.el.object3D
+    if( !object3D ) return
+
+    for (var i = 0; i < handEls.length; i++) {
+      handEl = handEls[i];
+      let indexTip  = handEl.components['hand-tracking-controls'] ?
+        handEl.components['hand-tracking-controls'].indexTipPosition :
+        false 
+      if( ! indexTip ) return // nothing to do here 
+
+      this.raycaster.far = this.data.pressDistance
+
+      // Create a direction vector to negative Z
+      const direction = new THREE.Vector3(0,0,-1.0);
+      direction.normalize()
+      this.raycaster.set(indexTip, direction)
+      intersects = this.raycaster.intersectObjects([object3D],true)
+
+      object3D.getWorldPosition(this.worldPosition)
+      distance    = indexTip.distanceTo(this.worldPosition)
+      minDistance = distance < minDistance ? distance : minDistance 
+
+      if (intersects.length ){
+        this.i = this.i || 0;
+        if( !this.pressed ){
+          this.el.emit('pressedstarted', intersects);
+          this.el.emit('click', {intersection: intersects[0]});
+          this.pressed = setTimeout( () => {
+            this.el.emit('pressedended', intersects);
+            this.pressed = null 
+          }, this.data.pressDuration )
         }
-        var handEls = this.handEls;
+      }
-        var handEl;
+    }
-        let minDistance = 5
+    this.distance = minDistance
-
+  },
-        // compensate for an object inside a group 
-        let object3D = this.el.object3D.type == "Group" ? this.el.object3D.children[0] : this.el.object3D
-        if( !object3D ) return
-
-        for (var i = 0; i < handEls.length; i++) {
-            handEl = handEls[i];
-            let indexTip  = handEl.object3D.getObjectByName('index-finger-tip')
-            if( ! indexTip ) return // nothing to do here 
-
-            this.raycaster.far = this.data.pressDistance
-
-            // Create a direction vector to negative Z
-            const direction = new THREE.Vector3(0,0,-1.0);
-            direction.normalize()
-            this.raycaster.set(indexTip.position, direction)
-            intersects = this.raycaster.intersectObjects([object3D],true)
-
-            object3D.getWorldPosition(this.worldPosition)
-      
-            distance    = indexTip.position.distanceTo(this.worldPosition)
-            minDistance = distance < minDistance ? distance : minDistance 
-
-            if (intersects.length ){
-              this.i = this.i || 0;
-              if( !this.pressed ){
-                this.el.emit('pressedstarted', intersects);
-                this.el.emit('click', intersects);
-                this.pressed = setTimeout( () => {
-                  this.el.emit('pressedended', intersects);
-                  this.pressed = null 
-                }, this.data.pressDuration )
-              }
-            }
-        }
-        this.distance = minDistance
-    },
 
 });

com/window.js

@@ -31,6 +31,7 @@ AFRAME.registerComponent('window', {
     height:    {type:'string',"default":'260px'},
     uid:       {type:'string'},
     attach:    {type:'selector'},
+    grabbable: {type:'string', "default":"components.html.el.object3D.children.0"},
     dom:       {type:'selector'},
     max:       {type:'boolean',"default":false},
     min:       {type:'boolean',"default":false},
@@ -87,7 +88,7 @@ AFRAME.registerComponent('window', {
         setTimeout( () => {
           if( !this.data.max && this.data.autoresize ) winbox.resize( this.el.dom.offsetWidth+'px', this.el.dom.offsetHeight+'px' )
           // 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'].data.trackedObject3D = this.data.grabbable
           this.el.components['obb-collider'].update()
         },1000)
       },