diff --git a/README.md b/README.md index 62513d7..64ba099 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,11 @@ This is a library of useful AFRAME components which can be used in any AFRAME ap ``` + +## Funding + +This project is funded through [NGI0 Entrust](https://nlnet.nl/entrust), a fund established by [NLnet](https://nlnet.nl) with financial support from the European Commission's [Next Generation Internet](https://ngi.eu) program. Learn more at the [NLnet project page](https://nlnet.nl/project/xrsh). + +[NLnet foundation logo](https://nlnet.nl) +[NGI Zero Logo](https://nlnet.nl/entrust) + diff --git a/com.refactor/aframe-inspector.js b/com.refactor/aframe-inspector.js deleted file mode 100644 index caa8c51..0000000 --- a/com.refactor/aframe-inspector.js +++ /dev/null @@ -1,75 +0,0 @@ -AFRAME.registerComponent('aframe-inspector', { - schema: { - foo: { type:"string"} - }, - - init: function () { - document.querySelector('a-scene').setAttribute("inspector","url: https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js") - }, - - requires:{ }, - - events:{ - - // component events - ready: function(e){ }, - - launcher: function(e){ - $('[inspector]').components.inspector.openInspector() - }, - - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "inspector", - "name": "AFRAME inspector", - "icons": [ - { - "src": "https://css.gg/list-tree.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": "helloworld [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 CTRL+ALT+i to launch inspector", - "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.refactor/isoterminal.js b/com.refactor/isoterminal.js deleted file mode 100644 index 3db35e8..0000000 --- a/com.refactor/isoterminal.js +++ /dev/null @@ -1,182 +0,0 @@ -AFRAME.registerComponent('isoterminal', { - schema: { - cols: { type: 'number', default: 120 }, - rows: { type: 'number', default: 50 }, - transparent: { type:'boolean', default:false } // need good gpu - }, - - 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", // - 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" - }, - - dom: { - scale: 3, - events: ['click','keydown'], - html: (me) => `
`, - - 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: 16 - }) - - term.open(this.el.dom) - this.canvas = this.el.dom.querySelector('.xterm-text-layer') - this.canvas.id = 'terminal-' + (terminalInstance++) - this.canvasContext = this.canvas.getContext('2d') - - this.cursorCanvas = this.el.dom.querySelector('.xterm-cursor-layer') - - //this.el.setAttribute('material', `transparent: ${this.data.transparent?'true':'false'}; src: #${this.canvas.id}` ) - - term.on('refresh', () => { - console.log("refresh") - }) - - term.on('data', (data) => { - this.el.emit('xterm-data', data) - }) - - this.el.addEventListener('click', () => { - term.focus() - }) - - 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){ }, // - - // reactive events for this.data updates - myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue }, - - 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: window.innerWidth*0.8, - height: window.innerHeight*0.8, - x:"center", - y:"center", - 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 - this.el.dom.style.display = 'none' - return false - } - }); - - }, - - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "iso": "linux-x64-4.15.iso", - "short_name": "ISOTerm", - "name": "terminal", - "icons": [ - { - "src": "https://css.gg/terminal.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": "helloworld [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": "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. - ` - } - -}); - -AFRAME.registerComponent('xterm-shell', { - dependencies: ['xterm'], - init: function() { - const message = 'Run \x1B[1;3;31m\'node server.js\'\x1B[0m to open a shell\r\n' - const xterm = this.el.components['xterm'] - - xterm.write(message) - - const socket = new WebSocket('ws://localhost:8080/') - - // Listen on data, write it to the terminal - socket.onmessage = ({data}) => { - xterm.write(data) - } - - socket.onclose = () => { - xterm.write('\r\nConnection closed.\r\n') - } - - // Listen on user input, send it to the connection - this.el.addEventListener('xterm-data', ({detail}) => { - socket.send(detail) - }) - } -}) diff --git a/com.refactor/load.js b/com.refactor/load.js deleted file mode 100644 index b0b61a0..0000000 --- a/com.refactor/load.js +++ /dev/null @@ -1,111 +0,0 @@ -AFRAME.registerComponent('load', { - schema: { - foo: { type:"string"} - }, - - init: function () { - this.el.object3D.visible = false - - //this.el.innerHTML = ` ` - }, - - requires:{ - // somecomponent: "https://unpkg.com/some-aframe-component/mycom.min.js" - }, - - events:{ - - // component events - somecomponent: function( ){ console.log("component requirement mounted") }, - ready: function(e){ console.log("requires are loaded") }, - - launcher: function(e){ - this.filedialog( (data) => { - if( data.match(/{ - var file = e.target.files[0]; - if (!file) { - return; - } - var reader = new FileReader(); - reader.onload = function(e) { - var contents = e.target.result; - onDone(contents) - }; - reader.readAsText(file); - }) - document.body.appendChild(el) - } - this.fileEl.click() - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "Hello world", - "name": "Hello world", - "icons": [ - { - "src": "https://css.gg/arrow-up-r.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": "helloworld [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": "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/com.refactor/manual.js b/com.refactor/manual.js deleted file mode 100644 index f044d7a..0000000 --- a/com.refactor/manual.js +++ /dev/null @@ -1,130 +0,0 @@ -AFRAME.registerComponent('manual', { - schema: { - foo: { type:"string"} - }, - - init: function () { - // requires are loaded - this.el.addEventListener('ready', () => this.el.dom.style.display = 'none' ) - }, - - 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", // deadsimple windows: https://nextapps-de.github.io/winbox - }, - - dom: { - scale: 3, - events: ['click','keydown'], - 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: (me) => `.manual > div { padding:11px }` - }, - - events:{ - - // component events - html: function( ){ console.log("html-mesh requirement mounted") }, - - // combined AFRAME+DOM reactive events - click: function(e){ }, // - keydown: function(e){ }, // - - // reactive events for this.data updates - myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue }, - - launcher: function(){ - new WinBox( this.manifest.name, { - width: '70%', - height: '70%', - x:"center", - y:"center", - id: this.el.uid, // important hint for html-mesh - root: document.querySelector("#overlay"), - mount: this.el.dom, - onclose: () => { this.el.dom.style.display = 'none'; return false; } - }); - this.el.dom.style.display = '' - this.el.setAttribute("xrf", document.location.search || "https://coderofsalvation.github.io/xrsh-media/assets/background.glb") - // navigate with: AFRAME.XRF.navigator.to("https://xrfragment.org/index.glb") - }, - - DOMready: function( ){ - this.el.dom.style.display = 'none' - console.log("this.el.dom has been added to DOM") - this.data.myvalue = 1 - setInterval( () => this.data.myvalue++, 100 ) - } - - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "XRSH Manual", - "name": "XRSH Manual", - "icons": [ - { - "src": "https://css.gg/coffee.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": "helloworld [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": "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/com.refactor/vconsole.js b/com.refactor/vconsole.js deleted file mode 100644 index 2a4ec5b..0000000 --- a/com.refactor/vconsole.js +++ /dev/null @@ -1,95 +0,0 @@ -AFRAME.registerComponent('vconsole', { - schema: { - foo: { type:"string"} - }, - - init: function () { - //AFRAME.XRF.navigator.to("https://coderofsalvation.github.io/xrsh-media/assets/background.glb") - document.head.innerHTML += ` - - ` - }, - - requires:{ - vconsole: "https://unpkg.com/vconsole@latest/dist/vconsole.min.js" - }, - - events:{ - - // requires are loaded - ready: function(e){ - this.vConsole = new window.VConsole() - document.querySelector('.vc-mask').remove() - document.querySelector('.vc-switch').remove() - }, - - launcher: function(){ - if( !this.vConsole ) return - let panel = document.querySelector('.vc-panel') - if( panel.style.display == 'none' ) this.vConsole.show() - else this.vConsole.hide() - }, - }, - - manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "Hello world", - "name": "Hello world", - "icons": [ - { - "src": "https://css.gg/border-bottom.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": "helloworld [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": "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. - ` - } - -}); -