Compare commits
	
		
			10 commits
		
	
	
		
			5dc9f066db
			...
			1539df1fef
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 1539df1fef | |||
| 0b609e271b | |||
| 244c350579 | |||
| 48bb6b2c26 | |||
| 5a51eaa59d | |||
| 43ebcbb5e1 | |||
| 274194a55c | |||
| db62d92998 | |||
| 544a2be784 | |||
| 76e3244a1a | 
					 7 changed files with 115 additions and 110 deletions
				
			
		| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
# WebXROS apps
 | 
			
		||||
# XRshell apps & components
 | 
			
		||||
 | 
			
		||||
<img src='https://github.com/coderofsalvation/xrshell/raw/main/src/assets/xrshell.svg' width="25%"/>
 | 
			
		||||
<img src='https://github.com/coderofsalvation/xrshell/raw/main/src/assets/logo.svg' width="25%"/>
 | 
			
		||||
 | 
			
		||||
This is a library of useful AFRAME components which can be used in any AFRAME app, but also are exposed as 'apps' in [xrshell](https://github.com/coderofsalvation/xrshell):
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										93
									
								
								app/helloworld.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										93
									
								
								app/helloworld.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,93 @@
 | 
			
		|||
AFRAME.registerComponent('helloworld', {
 | 
			
		||||
  schema: { 
 | 
			
		||||
 | 
			
		||||
  },
 | 
			
		||||
  dependencies:{
 | 
			
		||||
    "iso":          "https://rawgit.com/Utopiah/reponame/master/dist/file.min.js",  // fallback URL for xrsh in case component 
 | 
			
		||||
    "xterm":        "https://rawgit.com/Utopiah/reponame/master/dist/file.min.js",  // was not loaded (in AFRAME.components)
 | 
			
		||||
    "content-menu": "https://rawgit.com/Utopiah/reponame/master/dist/file.min.js",  // TIP: include branch/commit in URL to lock specify version
 | 
			
		||||
  },
 | 
			
		||||
  events:{
 | 
			
		||||
 | 
			
		||||
    "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 () {  },
 | 
			
		||||
 | 
			
		||||
  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.
 | 
			
		||||
    `
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										19
									
								
								boot.js
									
										
									
									
									
								
							
							
						
						
									
										19
									
								
								boot.js
									
										
									
									
									
								
							| 
						 | 
				
			
			@ -1,19 +0,0 @@
 | 
			
		|||
AFRAME.registerComponent('boot', {
 | 
			
		||||
  init: function ( ) { 
 | 
			
		||||
 | 
			
		||||
    let scene  = document.querySelector('a-scene').object3D
 | 
			
		||||
 | 
			
		||||
    // webxros events are optional, but can be listed here 
 | 
			
		||||
    scene.addEventListener('tty', (tty) => {
 | 
			
		||||
      tty.write("hello terminal from XR")
 | 
			
		||||
      tty.on('stdout', (data) => {
 | 
			
		||||
        // react to data being spoken/typed into the terminal
 | 
			
		||||
        // (spatial prompting like 'open foo.gltf', 'component helloworld' e.g.)
 | 
			
		||||
      })
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    console.log("this is the boot component which initializes other components")
 | 
			
		||||
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
							
								
								
									
										12
									
								
								com/require.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								com/require.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,12 @@
 | 
			
		|||
AFRAME.registerComponent('require', {
 | 
			
		||||
  init: function() { 
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
    //<script src="https://coderofsalvation.github.io/xrsh-apps/helloworld.js"></script> 
 | 
			
		||||
const updateComponents = AFRAME.AEntity.prototype.updateComponents
 | 
			
		||||
AFRAME.AEntity.prototype.updateComponents = function(updateComponents){
 | 
			
		||||
  return function(){
 | 
			
		||||
    return updateComponents.apply(this,args)
 | 
			
		||||
  }
 | 
			
		||||
}(updateComponents)
 | 
			
		||||
							
								
								
									
										8
									
								
								com/xrsh.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								com/xrsh.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,8 @@
 | 
			
		|||
AFRAME.registerComponent('xrshell', {
 | 
			
		||||
  init: function ( ) { 
 | 
			
		||||
 | 
			
		||||
    console.log("this is the boot component which initializes other components")
 | 
			
		||||
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			@ -1,47 +0,0 @@
 | 
			
		|||
AFRAME.registerComponent('helloworld', {
 | 
			
		||||
  schema: { },
 | 
			
		||||
 | 
			
		||||
  init: function () { 
 | 
			
		||||
 | 
			
		||||
    // entrypoint for single-file webxros/AFRAME components 
 | 
			
		||||
    this.addEventListener('webxros', (opts) => {
 | 
			
		||||
      this.require({
 | 
			
		||||
          "superclipboard":    { required: false, repo: "https://github.com/Utopiah/aframe-components"     },
 | 
			
		||||
          "spatialeditor":     { required: false, repo: "https://github.com/coderofsalvation/webxros-apps" }, 
 | 
			
		||||
          "jsonform":          { required: false, repo: "https://github.com/coderofsalvation/webxros-apps" }, 
 | 
			
		||||
          "speech-controls":   { required: false, url:  "https://rawgit.com/Utopiah/aframe-speech-controls-component/master/dist/aframe-speech-controls-component.min.js"},
 | 
			
		||||
          "ISOterminal":       { required: false } 
 | 
			
		||||
      })
 | 
			
		||||
      // the components above get saved cached/to the browser (IndexedDB) filesystem (so the ISOterminal can read/edit them as well in realtime)
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    this.addEventListener('microgesture-auth', (com)  => { // component was mounted
 | 
			
		||||
    this.addEventListener('superclipboard',    (com)  => { // component was mounted
 | 
			
		||||
    this.addEventListener('ISOterminal',       (term) => { 
 | 
			
		||||
      // 'term' is basically AFRAME.components.ISOterminal
 | 
			
		||||
      term.write('hello to XR linux terminal from AFRAME')
 | 
			
		||||
      term.on('stdout', (data) => {
 | 
			
		||||
        // react to data being spoken/typed into the terminal
 | 
			
		||||
        // (spatial prompting like 'open foo.gltf', 'component helloworld' e.g.)
 | 
			
		||||
      })
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    this.addEventListener('jsonform', (form) => {
 | 
			
		||||
      form.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_spatialeditor: { type: 'function', cb: () => AFRAME.components.spatialeditor.edit('helloworld')            }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    console.log("hello world!")
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			@ -1,42 +0,0 @@
 | 
			
		|||
{
 | 
			
		||||
  "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"
 | 
			
		||||
    }
 | 
			
		||||
  ]
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	Add table
		
		Reference in a new issue