diff --git a/app/apptiler.js b/app/apptiler.js index 73bf23f..176ebaf 100644 --- a/app/apptiler.js +++ b/app/apptiler.js @@ -7,8 +7,8 @@ AFRAME.registerComponent('apptiler', { }, requires:{ - "goldenlayout_css1": "https://unpkg.com/golden-layout@2.6.0/dist/css/goldenlayout-base.css", - "goldenlayout_css2": "https://unpkg.com/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css" + goldenlayout_css1: "https://unpkg.com/golden-layout@2.6.0/dist/css/goldenlayout-base.css", + goldenlayout_css2: "https://unpkg.com/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css", }, dom: { @@ -27,9 +27,12 @@ AFRAME.registerComponent('apptiler', { await this.initLayout(this) AFRAME.app.foreach( (opts) => { this.add( opts.component, opts.app.el.dom) - if( opts.component != 'apptiler' ) opts.app.el.dom.querySelector('.modal').classList.add(['tile']) + if( opts.component != 'apptiler' ) opts.app.el.dom.classList.add(['tile']) }) setTimeout( () => document.querySelector('#overlay').classList.add(['apptiler']), 100 ) + // surf to entrypoint of other xrsh worlds + // + //AFRAME.XRF.navigator.to("https://coderofsalvation.github.io/xrsh-media/assets/background.glb") }, }, @@ -135,7 +138,7 @@ document.head.innerHTML += ` body, html.a-fullscreen body{ - color: var(--xrsh-dark-gray); + color: var(--xrsh-light-gray); font-size: var(--xrsh-font-size-1); font-family: var(--xrsh-font-sans-serif); accent-color: var(--xrsh-light-primary); @@ -151,11 +154,15 @@ document.head.innerHTML += ` } h1,h2,h3,h4,h5{ - color: var(--xrsh-gray); + color: var(--xrsh-light-gray); } h1 { font-size: var(--xrsh-font-size-3); } h2,h3,h4{ font-size: var(--xrsh-font-size-2); } + a,a:visited,a:active{ + color: var(--xrsh-light-primary); + } + button,.btn,input[type=submit]{ border-radius:7px; background: var(--xrsh-primary); @@ -273,6 +280,7 @@ document.head.innerHTML += ` margin-right: 3px; } #windowmanager .lm_content{ + overflow-y: auto; box-sizing:content-box; border:1px solid #444; background:transparent; diff --git a/app/helloworld.js b/app/helloworld.js index 56da0db..60890a4 100644 --- a/app/helloworld.js +++ b/app/helloworld.js @@ -4,8 +4,8 @@ AFRAME.registerComponent('helloworld', { }, requires:{ - "html": "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME - "stylis": "https://unpkg.com/stylis@4.3.1/dist/umd/stylis.js" // modern CSS (https://stylis.js.org) + html: "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME + stylis: "https://unpkg.com/stylis@4.3.1/dist/umd/stylis.js", // modern CSS (https://stylis.js.org) }, dom: { @@ -67,7 +67,7 @@ AFRAME.registerComponent('helloworld', { init: function () { this.require( this.requires ) - + this.scene.addEventListener('apps:2D', () => this.el.setAttribute('visible', false) ) this.scene.addEventListener('apps:XR', () => { this.el.setAttribute('visible', true) diff --git a/app/iso.js b/app/iso.js deleted file mode 100644 index 59f869b..0000000 --- a/app/iso.js +++ /dev/null @@ -1,113 +0,0 @@ -AFRAME.registerComponent('helloworld', { - schema: { - foo: { type:"string"} - }, - dependencies:{ - "html": "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME - "stylis": "https://unpkg.com/stylis@4.3.1/dist/umd/stylis.js" // modern CSS (https://stylis.js.org) - }, - dom: { - scale: 3.5, - events: ['click'], - html: `
`, - css: `div{ #hello {position:absolute;top:0;width:300px} }` - }, - events:{ - "html": function( ){ console.log("htmlmesh component mounted!") }, // html-component was added to this AFRAME entity - "title": function(e){ this.dom.el.querySelector("button").innerHTML = e.detail.v }, // this.data.title was changed - "click": function(e){ alert("clicked "+ (e.detail.target || e.target).tagName ) }, // a click was detected on this.dom.el or AFRAME entity -// "aframe-html": function(){ -// this.el.setAttribute() -// alert("aframe loaded") -// } - -// "iso": function(tty){// act when component gets mounted -// // 'term' is basically AFRAME.components.ISOterminal -// tty.write('hello to tty ISO-os from AFRAME') -// tty.on('stdout', (data) => { -// // react to data being spoken/typed into the terminal -// // (spatial prompting like 'open foo.gltf', 'component helloworld' e.g.) -// }) -// }, -// -// "xterm": function(xterm){// act when component gets mounted -// // 'term' is basically AFRAME.components.ISOterminal -// }, -// -// "content-menu": function(menu){ -// menu.add({ -// name: 'edit', // "everything must have an edit-button" ~ Fabien Benetou -// icon: 'gear', // see https://jsonforms.io to see json-2-html forms -// type: 'object', // json-2-webxr has nothing like it (yet) but offers uniform interfaces across components -// properties:{ -// enabled: { type: 'boolean', default: true, format: 'checkbox' }, -// edit_terminal: { type: 'function', cb: () => AFRAME.components.ISOterminal.exec('pico /com/helloworld.js') }, -// edit_spatial: { type: 'function', cb: () => this.require({"spatial-edit":{required:true}}) } -// } -// }) -// } - }, - - init: function () { - this.require( this.dependencies ) - .then( () => { - document.body.appendChild(this.dom.el) - - setInterval( () => this.data.title = String(Math.random()), 500 ) - this.el.setAttribute("html",'html:#hello; cursor:#cursor') - }) - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "Hello world", - "name": "Hello world", - "icons": [ - { - "src": "/images/icons-vector.svg", - "type": "image/svg+xml", - "sizes": "512x512" - } - ], - "id": "/?source=pwa", - "start_url": "/?source=pwa", - "background_color": "#3367D6", - "display": "standalone", - "scope": "/", - "theme_color": "#3367D6", - "shortcuts": [ - { - "name": "How are you today?", - "short_name": "Today", - "description": "View weather information for today", - "url": "/today?source=pwa", - "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] - }, - { - "name": "How's weather tomorrow?", - "short_name": "Tomorrow", - "description": "View weather information for tomorrow", - "url": "/tomorrow?source=pwa", - "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }] - } - ], - "description": "Hello world information", - "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. - ` - } - -}); - diff --git a/app/manual.js b/app/manual.js new file mode 100644 index 0000000..842db20 --- /dev/null +++ b/app/manual.js @@ -0,0 +1,102 @@ +AFRAME.registerComponent('manual', { + schema: { + foo: { type:"string"} + }, + + requires:{}, + + dom: { + events: ['click'], + html: (me) => ` +
+

Welcome to XRSHell

+
+ +

+ The xrsh (xrshell) brings the FOSS- and Linux-soul to WebXR, promoting the use of (interactive text) terminal and user-provided operating systems inside WebXR. +

Technically, xrsh is a bundle of freshly created re-usable FOSS WebXR components.
These provide a common filesystem interface for interacting with WebXR, offering the well-known linux/unix toolchain including a commandline to invoke, store, edit and run WebXR utilities - regardless of their implementation. +

Think of it as termux for the VR/AR headset browser, which can be used to e.g. livecode (using terminal auto-completion!) for XR component (registries). + +
+ + +
`, + css: ` + #manual { + padding:15px; + } + #manual img{ + width: 100%; + max-width: 550px; + border-radius: 7px; + } + + ` + }, + + events:{ + DOMready: function(e){}, + click: function(e){}, // click was detected on this.el.dom or AFRAME entity + }, + + init: function () { + this.require( this.requires ) + }, + + manifest: { // HTML5 manifest to identify app to xrsh + "short_name": "XRSH Manual", + "name": "XRSH Manual", + "icons": [ + { + "src": "/images/icons-vector.svg", + "type": "image/svg+xml", + "sizes": "512x512" + } + ], + "id": "/?source=pwa", + "start_url": "/?source=pwa", + "background_color": "#3367D6", + "display": "standalone", + "scope": "/", + "theme_color": "#3367D6", + "shortcuts": [ + { + "name": "What is the latest news?", + "cli":{ + "usage": "man xrsh", + "example": "", + "args":{ + "topic": {type:"string"} + } + }, + "short_name": "Today", + "description": "View weather information for today", + "url": "/today?source=pwa", + "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] + } + ], + "description": "XRSH Manual information", + "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. + ` + } + +}); + diff --git a/com/app.js b/com/app.js index 2b71f55..9e87b60 100644 --- a/com/app.js +++ b/com/app.js @@ -262,4 +262,5 @@ document.addEventListener("DOMContentLoaded", (event) => { if( VRbtn ) document.body.appendChild(VRbtn) // move to body if( ARbtn ) document.body.appendChild(ARbtn) // so they will always be visible }) + }) diff --git a/com/xrsh.js b/com/xrsh.js deleted file mode 100644 index 384b407..0000000 --- a/com/xrsh.js +++ /dev/null @@ -1,8 +0,0 @@ -AFRAME.registerComponent('xrsh', { - init: function ( ) { - - console.log("this is the boot component which initializes other components") - - }, - -});