From 82c439696dc7f82939c90de3efe01c47ccc4047c Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Fri, 19 Apr 2024 16:42:46 +0200 Subject: [PATCH] work in progress [might break] --- app/example/helloworld-html.js | 2 +- app/example/helloworld-htmlform.js | 2 +- app/example/helloworld-iframe.js | 2 +- app/example/helloworld-window.js | 2 +- app/isoterminal.js | 53 ++++++++---------- app/launcher.js | 90 ++++++++++++++++++------------ app/manual.js | 2 +- app/spatialize.js | 35 ++++++------ app/vconsole.js | 1 + com/app.js | 2 +- 10 files changed, 102 insertions(+), 89 deletions(-) diff --git a/app/example/helloworld-html.js b/app/example/helloworld-html.js index 7e5408a..31252c7 100644 --- a/app/example/helloworld-html.js +++ b/app/example/helloworld-html.js @@ -19,7 +19,7 @@ AFRAME.registerComponent('helloworld-html', {
helloworld-html: ${me.data.foo} ${me.data.myvalue}
`, - css: `.helloworld-html { + css: (me) => `.helloworld-html { color: var(--xrsh-light-gray); /* see index.css */ }`, }, diff --git a/app/example/helloworld-htmlform.js b/app/example/helloworld-htmlform.js index ec242e0..f05830e 100644 --- a/app/example/helloworld-htmlform.js +++ b/app/example/helloworld-htmlform.js @@ -31,7 +31,7 @@ AFRAME.registerComponent('helloworld-htmlform', { `, - css: `.helloworld-htmlform > div { padding:11px; }` + css: (me) => `.helloworld-htmlform > div { padding:11px; }` }, diff --git a/app/example/helloworld-iframe.js b/app/example/helloworld-iframe.js index 1384048..4a115af 100644 --- a/app/example/helloworld-iframe.js +++ b/app/example/helloworld-iframe.js @@ -18,7 +18,7 @@ AFRAME.registerComponent('helloworld-iframe', { `, - css: ` + css: (me) => ` .XR #overlay .winbox.iframe{ visibility: visible; } /* don't hide in XR mode */ .winbox.iframe iframe { background:#FFF; } ` diff --git a/app/example/helloworld-window.js b/app/example/helloworld-window.js index c5d8765..8a103b8 100644 --- a/app/example/helloworld-window.js +++ b/app/example/helloworld-window.js @@ -18,7 +18,7 @@ AFRAME.registerComponent('helloworld-window', {
${me.data.foo} ${me.data.myvalue}
`, - css: `.helloworld-window div.pad { padding:11px; }` + css: (me) => `.helloworld-window div.pad { padding:11px; }` }, events:{ diff --git a/app/isoterminal.js b/app/isoterminal.js index dea102b..3db35e8 100644 --- a/app/isoterminal.js +++ b/app/isoterminal.js @@ -1,18 +1,18 @@ AFRAME.registerComponent('isoterminal', { - schema: { - cols: { type: 'number', default: 80 }, - rows: { type: 'number', default: 25 }, + schema: { + cols: { type: 'number', default: 120 }, + rows: { type: 'number', default: 50 }, transparent: { type:'boolean', default:false } // need good gpu }, - init: function(){ + init: function(){ this.el.object3D.visible = false }, requires:{ 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", // + winboxcss: "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css", // xtermcss: "https://unpkg.com/xterm@3.12.0/dist/xterm.css", xtermjs: "https://unpkg.com/xterm@3.12.0/dist/xterm.js", axterm: "https://unpkg.com/aframe-xterm-component/aframe-xterm-component.js" @@ -23,23 +23,21 @@ AFRAME.registerComponent('isoterminal', { events: ['click','keydown'], html: (me) => `
`, - css: `.isoterminal{ - width:512px; - height:256px; + css: (me) => `.isoterminal{ overflow:hidden; }` }, createTerminal: function(){ this.el.object3D.visible = true - + const term = this.term = new Terminal({ allowTransparency: this.data.transparent, cursorBlink: true, disableStdin: false, rows: this.data.rows, cols: this.data.cols, - fontSize: 64 + fontSize: 16 }) term.open(this.el.dom) @@ -49,14 +47,10 @@ AFRAME.registerComponent('isoterminal', { this.cursorCanvas = this.el.dom.querySelector('.xterm-cursor-layer') - this.el.setAttribute('material', 'transparent', this.data.transparent ) - this.el.setAttribute('material', 'src', '#' + this.canvas.id) + //this.el.setAttribute('material', `transparent: ${this.data.transparent?'true':'false'}; src: #${this.canvas.id}` ) term.on('refresh', () => { - const material = this.el.getObject3D('mesh').material - if (!material.map) return - this.canvasContext.drawImage(this.cursorCanvas, 0,0) - material.map.needsUpdate = true + console.log("refresh") }) term.on('data', (data) => { @@ -67,43 +61,42 @@ AFRAME.registerComponent('isoterminal', { term.focus() }) - const message = 'Hello from \x1B[1;3;31mWebVR\x1B[0m !\r\n$ ' + const message = 'Hello from \x1B[1;3;31mWebVR\x1B[0m !\r\n$ ' term.write(message) }, events:{ // combined AFRAME+DOM reactive events - click: function(e){ }, // - keydown: function(e){ }, // + click: function(e){ }, // + keydown: function(e){ }, // - // reactive events for this.data updates + // reactive events for this.data updates myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue }, - ready: function( ){ + ready: function( ){ this.el.dom.style.display = 'none' }, launcher: function(){ this.el.dom.style.display = '' + this.createTerminal() - new WinBox( this.manifest.iso + ' ' + this.manifest.name, { - width: '512px', - height: '256px', + new WinBox( this.manifest.iso + ' ' + this.manifest.name, { + width: window.innerWidth*0.8, + height: window.innerHeight*0.8, x:"center", y:"center", - id: this.el.uid, // important hint for html-mesh + id: this.el.uid, // important hint for html-mesh root: document.querySelector("#overlay"), mount: this.el.dom, - onclose: () => { - if( !confirm('do you want to kill this virtual machine and all its processes?') ) return true + onclose: () => { + if( !confirm('do you want to kill this virtual machine and all its processes?') ) return true this.el.dom.style.display = 'none' return false } }); - this.createTerminal() - }, }, @@ -151,7 +144,7 @@ AFRAME.registerComponent('isoterminal', { } ], "help":` -Helloworld application +Helloworld application This is a help file which describes the application. It will be rendered thru troika text, and will contain diff --git a/app/launcher.js b/app/launcher.js index acd034f..170e2e5 100644 --- a/app/launcher.js +++ b/app/launcher.js @@ -1,27 +1,27 @@ /* - * ## launcher + * ## launcher * * displays app (icons) for enduser to launch * * ```javascript * * ``` - * + * * | property | type | example | * |--------------|--------------------|----------------------------------------------------------------------------------------| - * | `registries` | `array` of strings | | + * | `registries` | `array` of strings | | * * | event | target | info | * |--------------|-------------------------------------------------------------------------------------------------------------| - * | `launcher` | an app | when pressing an app icon, `launcher` event will be send to the respective app | + * | `launcher` | an app | when pressing an app icon, `launcher` event will be send to the respective app | */ AFRAME.registerComponent('launcher', { - schema: { + schema: { foo: { type:"string"} }, - init: function () { + init: function () { this.data.apps = [] AFRAME.scenes.map( (scene) => { @@ -40,47 +40,53 @@ AFRAME.registerComponent('launcher', {
`, - css: `#iconmenu { + css: (me) => `#iconmenu { z-index: 1000; display: flex; - flex-direction: column-reverse; - align-items: flex-end; - height: 100%; + flex-direction: row; + align-items: flex-start; + height: 50px; + overflow:hidden; position: fixed; - top: 0px; - right: 20px; - bottom: 0; - padding-bottom: 72px; + right: 162px; + bottom: 0px; + left:20px; + background: transparent; + padding-bottom: 54px; box-sizing: border-box; pointer-events: none; visibility: visible !important; } #iconmenu > button { + line-height:0px; pointer-events:all; width: 58px; - height: 39px; - padding: 12px 0px 20px 0px; + height: 34px; + padding: 12px 0px 12px 0px; border-radius: 0px; color: var(--xrsh-primary); background: #FFF; - border-left: 5px solid var(--xrsh-primary); - border-right: 5px solid var(--xrsh-primary); + border-top: 2px solid #BBB; + border-bottom: 2px solid #BBB; + font-size:18px; } #iconmenu > button:first-child { - border-radius:0px 0px 30px 30px; - border-bottom: 5px solid var(--xrsh-primary); - padding-bottom:35px; + border-radius: 5px 0px 0px 5px; + border-bottom: 2px solid #BBB; + border-left: 2px solid #BBB; + padding-bottom:16px; } #iconmenu > button:last-child { - border-radius:30px 30px 0px 0px; - border-top: 5px solid var(--xrsh-primary); + border-radius:0px 5px 5px 0px; + border-top: 2px solid #BBB; + border-right: 2px solid #BBB; padding-top:13px; } #iconmenu > button > img { - transform: translate(0px,-5px); + transform: translate(0px,-14px); opacity:0.5; padding: 5px; border-radius: 0px; @@ -95,12 +101,12 @@ AFRAME.registerComponent('launcher', { events:{ // combined AFRAME+DOM reactive events - click: function(e){ + click: function(e){ console.dir(e) - }, // + }, // - ready: function( ){ + ready: function( ){ this.el.dom.children[0].id = this.el.uid // important hint for html-mesh }, @@ -109,27 +115,36 @@ AFRAME.registerComponent('launcher', { render: function(app){ clearTimeout(this.timeout) this.timeout = setTimeout( () => { - AFRAME.app.foreach( (app) => { - if( !app.manifest ) return - + const drawButton = (app) => { + if( !app.manifest ) return console.log(app.data.uri+" "+app.data.order) - let btn = app.btn = document.createElement('button') if( app.manifest.icons?.length > 0){ - let img = document.createElement('img') + let img = document.createElement('img') img.src = app.manifest.icons[0].src img.title = app.manifest.name + ": " + app.manifest.description btn.appendChild(img) }else btn.innerText = app.manifest.short_name - btn.addEventListener('click', () => app.el.emit('launcher',app) ) + btn.addEventListener('click', () => { + app.el.emit('launcher',app) + app.el.sceneEl.emit('launched',app) + }) this.el.dom.querySelector('#iconmenu').appendChild(btn) - }) + } + + const drawCategory = (app,c) => app.manifest && + app.manifest.short_name != "launcher" && + app.manifest.category == c ? drawButton(app) : false + + AFRAME.app.foreach( (app) => drawCategory(app,undefined) ) + AFRAME.app.foreach( (app) => drawCategory(app,"system") ) + },100) }, manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "Hello world", - "name": "Hello world", + "short_name": "launcher", + "name": "App Launcher", "icons": [ { "src": "https://css.gg/browser.svg", @@ -137,6 +152,7 @@ AFRAME.registerComponent('launcher', { "sizes": "512x512" } ], + "category":"system", "id": "/?source=pwa", "start_url": "/?source=pwa", "background_color": "#3367D6", @@ -169,7 +185,7 @@ AFRAME.registerComponent('launcher', { } ], "help":` -Helloworld application +Helloworld application This is a help file which describes the application. It will be rendered thru troika text, and will contain diff --git a/app/manual.js b/app/manual.js index 38f6ed5..f044d7a 100644 --- a/app/manual.js +++ b/app/manual.js @@ -35,7 +35,7 @@ AFRAME.registerComponent('manual', { `, - css: `.manual > div { padding:11px }` + css: (me) => `.manual > div { padding:11px }` }, events:{ diff --git a/app/spatialize.js b/app/spatialize.js index 18bc533..2da2aec 100644 --- a/app/spatialize.js +++ b/app/spatialize.js @@ -1,5 +1,5 @@ AFRAME.registerComponent('spatialize', { - schema: { + schema: { foo: { type:"string"} }, @@ -7,8 +7,8 @@ AFRAME.registerComponent('spatialize', { document.querySelector('a-scene').addEventListener('enter-vr',() => this.toggle(true) ) document.querySelector('a-scene').addEventListener('exit-vr', () => this.toggle(false) ) - // toggle immersive with ESCAPE - document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() ) + // toggle immersive with ESCAPE + document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() ) document.head.innerHTML += `` + + this.el.sceneEl.addEventListener('launched',(e) => { + console.dir(e) + let appEl = e.detail.el.dom + if( appEl.style.display != 'none' && appEl.innerHTML ){ + this.btn.style.display = '' // show button + } + }) }, requires:{ @@ -30,7 +38,9 @@ AFRAME.registerComponent('spatialize', { // component events ready: function(e){ + this.btn.style.display = 'none' this.btn.style.background = 'var(--xrsh-primary)' + this.btn.style.color = '#FFF' }, launcher: function(e){ this.toggle() }, @@ -41,28 +51,21 @@ AFRAME.registerComponent('spatialize', { toggle: function(state){ state = state || !document.body.className.match(/XR/) document.body.classList[ state ? 'add' : 'remove'](['XR']) - AFRAME.scenes[0].emit( state ? 'apps:XR' : 'apps:2D') - this.btn.querySelector('img').src = state ? this.manifest.icons[0].src_2D - : this.manifest.icons[0].src + AFRAME.scenes[0].emit( state ? 'apps:XR' : 'apps:2D') + this.btn.innerHTML = state ? "2D" : "2D" }, manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "spatialize", + "short_name": "2D", "name": "spatialize", - "icons": [ - { - "src": "https://css.gg/display-grid.svg", - "src_2D": "https://css.gg/stack.svg", - "type": "image/svg+xml", - "sizes": "512x512" - } - ], + "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?", @@ -89,7 +92,7 @@ AFRAME.registerComponent('spatialize', { } ], "help":` -Helloworld application +Helloworld application This is a help file which describes the application. It will be rendered thru troika text, and will contain diff --git a/app/vconsole.js b/app/vconsole.js index 99b96c0..2a4ec5b 100644 --- a/app/vconsole.js +++ b/app/vconsole.js @@ -33,6 +33,7 @@ AFRAME.registerComponent('vconsole', { }, launcher: function(){ + if( !this.vConsole ) return let panel = document.querySelector('.vc-panel') if( panel.style.display == 'none' ) this.vConsole.show() else this.vConsole.hide() diff --git a/com/app.js b/com/app.js index c79af2b..3383b6d 100644 --- a/com/app.js +++ b/com/app.js @@ -188,7 +188,7 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){ addCSS: () => { if( this.dom.css && !document.head.querySelector(`style#${this.attrName}`) ){ - document.head.innerHTML += `` + document.head.innerHTML += `` } return tasks },