xrsh
/
xrsh-com
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

better grabbable + example form now demos increase/decrease iconsize

This commit is contained in:
Leon van Kammen 2025-03-21 15:59:16 +01:00
parent 987828b233
commit 1f0710be78
4 changed files with 62 additions and 60 deletions

16
com/helloworld-window.js
View File

@ -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","")

10
com/isoterminal.js
View File

@ -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) => {

93
com/pressable.js
View File

@ -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(){
if( this.handEls.length == 0 ){
this.handEls = document.querySelectorAll('[hand-tracking-controls]');
},
detectPress: function(){
if( !this.el.sceneEl.renderer.xr.isPresenting ) return // ignore events in desktop mode
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
// 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
},
}
}
this.distance = minDistance
},
});

3
com/window.js
View File

@ -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)
},