manual added

This commit is contained in:
Leon van Kammen 2024-01-03 18:43:34 +01:00
parent 0c173ce21c
commit 42fd529492
6 changed files with 119 additions and 129 deletions

View File

@ -7,8 +7,8 @@ AFRAME.registerComponent('apptiler', {
}, },
requires:{ requires:{
"goldenlayout_css1": "https://unpkg.com/golden-layout@2.6.0/dist/css/goldenlayout-base.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" goldenlayout_css2: "https://unpkg.com/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css",
}, },
dom: { dom: {
@ -27,9 +27,12 @@ AFRAME.registerComponent('apptiler', {
await this.initLayout(this) await this.initLayout(this)
AFRAME.app.foreach( (opts) => { AFRAME.app.foreach( (opts) => {
this.add( opts.component, opts.app.el.dom) 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 ) setTimeout( () => document.querySelector('#overlay').classList.add(['apptiler']), 100 )
// surf to entrypoint of other xrsh worlds
//<script src="https://xrfragment.org/feat/multiparty/dist/xrfragment.aframe.js"></script>
//AFRAME.XRF.navigator.to("https://coderofsalvation.github.io/xrsh-media/assets/background.glb")
}, },
}, },
@ -135,7 +138,7 @@ document.head.innerHTML += `
body, body,
html.a-fullscreen body{ html.a-fullscreen body{
color: var(--xrsh-dark-gray); color: var(--xrsh-light-gray);
font-size: var(--xrsh-font-size-1); font-size: var(--xrsh-font-size-1);
font-family: var(--xrsh-font-sans-serif); font-family: var(--xrsh-font-sans-serif);
accent-color: var(--xrsh-light-primary); accent-color: var(--xrsh-light-primary);
@ -151,11 +154,15 @@ document.head.innerHTML += `
} }
h1,h2,h3,h4,h5{ h1,h2,h3,h4,h5{
color: var(--xrsh-gray); color: var(--xrsh-light-gray);
} }
h1 { font-size: var(--xrsh-font-size-3); } h1 { font-size: var(--xrsh-font-size-3); }
h2,h3,h4{ font-size: var(--xrsh-font-size-2); } 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]{ button,.btn,input[type=submit]{
border-radius:7px; border-radius:7px;
background: var(--xrsh-primary); background: var(--xrsh-primary);
@ -273,6 +280,7 @@ document.head.innerHTML += `
margin-right: 3px; margin-right: 3px;
} }
#windowmanager .lm_content{ #windowmanager .lm_content{
overflow-y: auto;
box-sizing:content-box; box-sizing:content-box;
border:1px solid #444; border:1px solid #444;
background:transparent; background:transparent;

View File

@ -4,8 +4,8 @@ AFRAME.registerComponent('helloworld', {
}, },
requires:{ requires:{
"html": "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME 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) stylis: "https://unpkg.com/stylis@4.3.1/dist/umd/stylis.js", // modern CSS (https://stylis.js.org)
}, },
dom: { dom: {

View File

@ -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: `<div id="hello"><button>hello</button></div>`,
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.
`
}
});

102
app/manual.js Normal file
View File

@ -0,0 +1,102 @@
AFRAME.registerComponent('manual', {
schema: {
foo: { type:"string"}
},
requires:{},
dom: {
events: ['click'],
html: (me) => `
<div id="manual">
<h1>Welcome to XRSHell</h1>
<br>
<img src="https://i.imgur.com/BW22wrb.png"/>
<br><br>
The <b>xrsh</b> (xrshell) brings the <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">FOSS</a>- and <a href="https://en.wikipedia.org/wiki/Linux" target="_blank">Linux</a>-soul to <a href="https://en.wikipedia.org/wiki/WebXR" target="_blank">WebXR</a>, promoting the use of (interactive text) terminal and user-provided operating systems inside WebXR.
<br><br>Technically, <b>xrsh</b> is a bundle of freshly created re-usable FOSS WebXR components.<br>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.
<br><br>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).
<br>
<ul>
<li><a href="https://forgejo.isvery.ninja/xrsh" target="_blank">source xrsh</a></li>
<li><a href="https://forgejo.isvery.ninja/xrsh-apps" target="_blank">source xrsh apps</a></li>
<li><a href="https://forgejo.isvery.ninja/xrsh-media" target="_blank">roadmap meeting recordings</a></li>
</ul>
</div>`,
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.
`
}
});

View File

@ -262,4 +262,5 @@ document.addEventListener("DOMContentLoaded", (event) => {
if( VRbtn ) document.body.appendChild(VRbtn) // move to body if( VRbtn ) document.body.appendChild(VRbtn) // move to body
if( ARbtn ) document.body.appendChild(ARbtn) // so they will always be visible if( ARbtn ) document.body.appendChild(ARbtn) // so they will always be visible
}) })
}) })

View File

@ -1,8 +0,0 @@
AFRAME.registerComponent('xrsh', {
init: function ( ) {
console.log("this is the boot component which initializes other components")
},
});