xrsh
/
xrsh-com
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

work in progress [might break]

This commit is contained in:
Leon van Kammen 2024-04-19 16:42:46 +02:00
parent ac85f4b713
commit 82c439696d
10 changed files with 102 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/example/helloworld-html.js
View File

@ -19,7 +19,7 @@ AFRAME.registerComponent('helloworld-html', {
<div class="pad"> helloworld-html: ${me.data.foo} <b>${me.data.myvalue}</b></span> <div class="pad"> helloworld-html: ${me.data.foo} <b>${me.data.myvalue}</b></span>
</div>`, </div>`,
css: `.helloworld-html { css: (me) => `.helloworld-html {
color: var(--xrsh-light-gray); /* see index.css */ color: var(--xrsh-light-gray); /* see index.css */
}`, }`,
}, },

2
app/example/helloworld-htmlform.js
View File

@ -31,7 +31,7 @@ AFRAME.registerComponent('helloworld-htmlform', {
<button>hello</button> <button>hello</button>
</div>`, </div>`,
css: `.helloworld-htmlform > div { padding:11px; }` css: (me) => `.helloworld-htmlform > div { padding:11px; }`
}, },

2
app/example/helloworld-iframe.js
View File

@ -18,7 +18,7 @@ AFRAME.registerComponent('helloworld-iframe', {
<iframe src=""></iframe> <iframe src=""></iframe>
</div>`, </div>`,
css: ` css: (me) => `
.XR #overlay .winbox.iframe{ visibility: visible; } /* don't hide in XR mode */ .XR #overlay .winbox.iframe{ visibility: visible; } /* don't hide in XR mode */
.winbox.iframe iframe { background:#FFF; } .winbox.iframe iframe { background:#FFF; }
` `

2
app/example/helloworld-window.js
View File

@ -18,7 +18,7 @@ AFRAME.registerComponent('helloworld-window', {
<div class="pad"> ${me.data.foo} <b>${me.data.myvalue}</b></span> <div class="pad"> ${me.data.foo} <b>${me.data.myvalue}</b></span>
</div>`, </div>`,
css: `.helloworld-window div.pad { padding:11px; }` css: (me) => `.helloworld-window div.pad { padding:11px; }`
}, },
events:{ events:{

53
app/isoterminal.js
View File

@ -1,18 +1,18 @@
AFRAME.registerComponent('isoterminal', { AFRAME.registerComponent('isoterminal', {
schema: { schema: {
cols: { type: 'number', default: 80 }, cols: { type: 'number', default: 120 },
rows: { type: 'number', default: 25 }, rows: { type: 'number', default: 50 },
transparent: { type:'boolean', default:false } // need good gpu transparent: { type:'boolean', default:false } // need good gpu
}, },
init: function(){ init: function(){
this.el.object3D.visible = false this.el.object3D.visible = false
}, },
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
winboxjs: "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js", // deadsimple windows: https://nextapps-de.github.io/winbox 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", xtermcss: "https://unpkg.com/xterm@3.12.0/dist/xterm.css",
xtermjs: "https://unpkg.com/xterm@3.12.0/dist/xterm.js", xtermjs: "https://unpkg.com/xterm@3.12.0/dist/xterm.js",
axterm: "https://unpkg.com/aframe-xterm-component/aframe-xterm-component.js" axterm: "https://unpkg.com/aframe-xterm-component/aframe-xterm-component.js"
@ -23,23 +23,21 @@ AFRAME.registerComponent('isoterminal', {
events: ['click','keydown'], events: ['click','keydown'],
html: (me) => `<div></div>`, html: (me) => `<div></div>`,
css: `.isoterminal{ css: (me) => `.isoterminal{
width:512px;
height:256px;
overflow:hidden; overflow:hidden;
}` }`
}, },
createTerminal: function(){ createTerminal: function(){
this.el.object3D.visible = true this.el.object3D.visible = true
const term = this.term = new Terminal({ const term = this.term = new Terminal({
allowTransparency: this.data.transparent, allowTransparency: this.data.transparent,
cursorBlink: true, cursorBlink: true,
disableStdin: false, disableStdin: false,
rows: this.data.rows, rows: this.data.rows,
cols: this.data.cols, cols: this.data.cols,
fontSize: 64 fontSize: 16
}) })
term.open(this.el.dom) term.open(this.el.dom)
@ -49,14 +47,10 @@ AFRAME.registerComponent('isoterminal', {
this.cursorCanvas = this.el.dom.querySelector('.xterm-cursor-layer') this.cursorCanvas = this.el.dom.querySelector('.xterm-cursor-layer')
this.el.setAttribute('material', 'transparent', this.data.transparent ) //this.el.setAttribute('material', `transparent: ${this.data.transparent?'true':'false'}; src: #${this.canvas.id}` )
this.el.setAttribute('material', 'src', '#' + this.canvas.id)
term.on('refresh', () => { term.on('refresh', () => {
const material = this.el.getObject3D('mesh').material console.log("refresh")
if (!material.map) return
this.canvasContext.drawImage(this.cursorCanvas, 0,0)
material.map.needsUpdate = true
}) })
term.on('data', (data) => { term.on('data', (data) => {
@ -67,43 +61,42 @@ AFRAME.registerComponent('isoterminal', {
term.focus() 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) term.write(message)
}, },
events:{ events:{
// combined AFRAME+DOM reactive events // combined AFRAME+DOM reactive events
click: function(e){ }, // click: function(e){ }, //
keydown: 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 }, myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
ready: function( ){ ready: function( ){
this.el.dom.style.display = 'none' this.el.dom.style.display = 'none'
}, },
launcher: function(){ launcher: function(){
this.el.dom.style.display = '' this.el.dom.style.display = ''
this.createTerminal()
new WinBox( this.manifest.iso + ' ' + this.manifest.name, { new WinBox( this.manifest.iso + ' ' + this.manifest.name, {
width: '512px', width: window.innerWidth*0.8,
height: '256px', height: window.innerHeight*0.8,
x:"center", x:"center",
y:"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"), root: document.querySelector("#overlay"),
mount: this.el.dom, mount: this.el.dom,
onclose: () => { onclose: () => {
if( !confirm('do you want to kill this virtual machine and all its processes?') ) return true if( !confirm('do you want to kill this virtual machine and all its processes?') ) return true
this.el.dom.style.display = 'none' this.el.dom.style.display = 'none'
return false return false
} }
}); });
this.createTerminal()
}, },
}, },
@ -151,7 +144,7 @@ AFRAME.registerComponent('isoterminal', {
} }
], ],
"help":` "help":`
Helloworld application Helloworld application
This is a help file which describes the application. This is a help file which describes the application.
It will be rendered thru troika text, and will contain It will be rendered thru troika text, and will contain

90
app/launcher.js
View File

@ -1,27 +1,27 @@
/* /*
* ## launcher * ## launcher
* *
* displays app (icons) for enduser to launch * displays app (icons) for enduser to launch
* *
* ```javascript * ```javascript
* <a-entity app="app/launcher.js"/> * <a-entity app="app/launcher.js"/>
* ``` * ```
* *
* | property | type | example | * | property | type | example |
* |--------------|--------------------|----------------------------------------------------------------------------------------| * |--------------|--------------------|----------------------------------------------------------------------------------------|
* | `registries` | `array` of strings | <a-entity app="app/launcher.js; registers: https://foo.com/index.json, ./index.json"/> | * | `registries` | `array` of strings | <a-entity app="app/launcher.js; registers: https://foo.com/index.json, ./index.json"/> |
* *
* | event | target | info | * | 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', { AFRAME.registerComponent('launcher', {
schema: { schema: {
foo: { type:"string"} foo: { type:"string"}
}, },
init: function () { init: function () {
this.data.apps = [] this.data.apps = []
AFRAME.scenes.map( (scene) => { AFRAME.scenes.map( (scene) => {
@ -40,47 +40,53 @@ AFRAME.registerComponent('launcher', {
<div id="iconmenu"></div> <div id="iconmenu"></div>
</div>`, </div>`,
css: `#iconmenu { css: (me) => `#iconmenu {
z-index: 1000; z-index: 1000;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: row;
align-items: flex-end; align-items: flex-start;
height: 100%; height: 50px;
overflow:hidden;
position: fixed; position: fixed;
top: 0px; right: 162px;
right: 20px; bottom: 0px;
bottom: 0; left:20px;
padding-bottom: 72px; background: transparent;
padding-bottom: 54px;
box-sizing: border-box; box-sizing: border-box;
pointer-events: none; pointer-events: none;
visibility: visible !important; visibility: visible !important;
} }
#iconmenu > button { #iconmenu > button {
line-height:0px;
pointer-events:all; pointer-events:all;
width: 58px; width: 58px;
height: 39px; height: 34px;
padding: 12px 0px 20px 0px; padding: 12px 0px 12px 0px;
border-radius: 0px; border-radius: 0px;
color: var(--xrsh-primary); color: var(--xrsh-primary);
background: #FFF; background: #FFF;
border-left: 5px solid var(--xrsh-primary); border-top: 2px solid #BBB;
border-right: 5px solid var(--xrsh-primary); border-bottom: 2px solid #BBB;
font-size:18px;
} }
#iconmenu > button:first-child { #iconmenu > button:first-child {
border-radius:0px 0px 30px 30px; border-radius: 5px 0px 0px 5px;
border-bottom: 5px solid var(--xrsh-primary); border-bottom: 2px solid #BBB;
padding-bottom:35px; border-left: 2px solid #BBB;
padding-bottom:16px;
} }
#iconmenu > button:last-child { #iconmenu > button:last-child {
border-radius:30px 30px 0px 0px; border-radius:0px 5px 5px 0px;
border-top: 5px solid var(--xrsh-primary); border-top: 2px solid #BBB;
border-right: 2px solid #BBB;
padding-top:13px; padding-top:13px;
} }
#iconmenu > button > img { #iconmenu > button > img {
transform: translate(0px,-5px); transform: translate(0px,-14px);
opacity:0.5; opacity:0.5;
padding: 5px; padding: 5px;
border-radius: 0px; border-radius: 0px;
@ -95,12 +101,12 @@ AFRAME.registerComponent('launcher', {
events:{ events:{
// combined AFRAME+DOM reactive events // combined AFRAME+DOM reactive events
click: function(e){ click: function(e){
console.dir(e) console.dir(e)
}, // }, //
ready: function( ){ ready: function( ){
this.el.dom.children[0].id = this.el.uid // important hint for html-mesh this.el.dom.children[0].id = this.el.uid // important hint for html-mesh
}, },
@ -109,27 +115,36 @@ AFRAME.registerComponent('launcher', {
render: function(app){ render: function(app){
clearTimeout(this.timeout) clearTimeout(this.timeout)
this.timeout = setTimeout( () => { this.timeout = setTimeout( () => {
AFRAME.app.foreach( (app) => { const drawButton = (app) => {
if( !app.manifest ) return if( !app.manifest ) return
console.log(app.data.uri+" "+app.data.order) console.log(app.data.uri+" "+app.data.order)
let btn = app.btn = document.createElement('button') let btn = app.btn = document.createElement('button')
if( app.manifest.icons?.length > 0){ if( app.manifest.icons?.length > 0){
let img = document.createElement('img') let img = document.createElement('img')
img.src = app.manifest.icons[0].src img.src = app.manifest.icons[0].src
img.title = app.manifest.name + ": " + app.manifest.description img.title = app.manifest.name + ": " + app.manifest.description
btn.appendChild(img) btn.appendChild(img)
}else btn.innerText = app.manifest.short_name }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) 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) },100)
}, },
manifest: { // HTML5 manifest to identify app to xrsh manifest: { // HTML5 manifest to identify app to xrsh
"short_name": "Hello world", "short_name": "launcher",
"name": "Hello world", "name": "App Launcher",
"icons": [ "icons": [
{ {
"src": "https://css.gg/browser.svg", "src": "https://css.gg/browser.svg",
@ -137,6 +152,7 @@ AFRAME.registerComponent('launcher', {
"sizes": "512x512" "sizes": "512x512"
} }
], ],
"category":"system",
"id": "/?source=pwa", "id": "/?source=pwa",
"start_url": "/?source=pwa", "start_url": "/?source=pwa",
"background_color": "#3367D6", "background_color": "#3367D6",
@ -169,7 +185,7 @@ AFRAME.registerComponent('launcher', {
} }
], ],
"help":` "help":`
Helloworld application Helloworld application
This is a help file which describes the application. This is a help file which describes the application.
It will be rendered thru troika text, and will contain It will be rendered thru troika text, and will contain

2
app/manual.js
View File

@ -35,7 +35,7 @@ AFRAME.registerComponent('manual', {
</ul> </ul>
</div>`, </div>`,
css: `.manual > div { padding:11px }` css: (me) => `.manual > div { padding:11px }`
}, },
events:{ events:{

35
app/spatialize.js
View File

@ -1,5 +1,5 @@
AFRAME.registerComponent('spatialize', { AFRAME.registerComponent('spatialize', {
schema: { schema: {
foo: { type:"string"} 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('enter-vr',() => this.toggle(true) )
document.querySelector('a-scene').addEventListener('exit-vr', () => this.toggle(false) ) document.querySelector('a-scene').addEventListener('exit-vr', () => this.toggle(false) )
// toggle immersive with ESCAPE // toggle immersive with ESCAPE
document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() ) document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() )
document.head.innerHTML += `<style type="text/css"> document.head.innerHTML += `<style type="text/css">
.XR #toggle_overlay{ .XR #toggle_overlay{
@ -20,6 +20,14 @@ AFRAME.registerComponent('spatialize', {
visibility: hidden; visibility: hidden;
} }
</style>` </style>`
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:{ requires:{
@ -30,7 +38,9 @@ AFRAME.registerComponent('spatialize', {
// component events // component events
ready: function(e){ ready: function(e){
this.btn.style.display = 'none'
this.btn.style.background = 'var(--xrsh-primary)' this.btn.style.background = 'var(--xrsh-primary)'
this.btn.style.color = '#FFF'
}, },
launcher: function(e){ this.toggle() }, launcher: function(e){ this.toggle() },
@ -41,28 +51,21 @@ AFRAME.registerComponent('spatialize', {
toggle: function(state){ toggle: function(state){
state = state || !document.body.className.match(/XR/) state = state || !document.body.className.match(/XR/)
document.body.classList[ state ? 'add' : 'remove'](['XR']) document.body.classList[ state ? 'add' : 'remove'](['XR'])
AFRAME.scenes[0].emit( state ? 'apps:XR' : 'apps:2D') AFRAME.scenes[0].emit( state ? 'apps:XR' : 'apps:2D')
this.btn.querySelector('img').src = state ? this.manifest.icons[0].src_2D this.btn.innerHTML = state ? "<s>2D</s>" : "2D"
: this.manifest.icons[0].src
}, },
manifest: { // HTML5 manifest to identify app to xrsh manifest: { // HTML5 manifest to identify app to xrsh
"short_name": "spatialize", "short_name": "2D",
"name": "spatialize", "name": "spatialize",
"icons": [ "icons": [],
{
"src": "https://css.gg/display-grid.svg",
"src_2D": "https://css.gg/stack.svg",
"type": "image/svg+xml",
"sizes": "512x512"
}
],
"id": "/?source=pwa", "id": "/?source=pwa",
"start_url": "/?source=pwa", "start_url": "/?source=pwa",
"background_color": "#3367D6", "background_color": "#3367D6",
"display": "standalone", "display": "standalone",
"scope": "/", "scope": "/",
"theme_color": "#3367D6", "theme_color": "#3367D6",
"category":"system",
"shortcuts": [ "shortcuts": [
{ {
"name": "What is the latest news?", "name": "What is the latest news?",
@ -89,7 +92,7 @@ AFRAME.registerComponent('spatialize', {
} }
], ],
"help":` "help":`
Helloworld application Helloworld application
This is a help file which describes the application. This is a help file which describes the application.
It will be rendered thru troika text, and will contain It will be rendered thru troika text, and will contain

1
app/vconsole.js
View File

@ -33,6 +33,7 @@ AFRAME.registerComponent('vconsole', {
}, },
launcher: function(){ launcher: function(){
if( !this.vConsole ) return
let panel = document.querySelector('.vc-panel') let panel = document.querySelector('.vc-panel')
if( panel.style.display == 'none' ) this.vConsole.show() if( panel.style.display == 'none' ) this.vConsole.show()
else this.vConsole.hide() else this.vConsole.hide()

2
com/app.js
View File

@ -188,7 +188,7 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
addCSS: () => { addCSS: () => {
if( this.dom.css && !document.head.querySelector(`style#${this.attrName}`) ){ if( this.dom.css && !document.head.querySelector(`style#${this.attrName}`) ){
document.head.innerHTML += `<style id="${this.attrName}">${this.dom.css}</style>` document.head.innerHTML += `<style id="${this.attrName}">${this.dom.css(this)}</style>`
} }
return tasks return tasks
}, },