From 01d04455d358591d50754d041c3baed0e073cedd Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Thu, 7 Mar 2024 17:34:03 +0100 Subject: [PATCH] reduced scale to match AR/VR scale better --- app/example/helloworld-html.js | 2 +- app/example/helloworld-htmlform.js | 2 +- app/example/helloworld-window.js | 3 +- app/example/helloworld.js | 17 ++-- app/example/helloworld.old.js | 137 ----------------------------- 5 files changed, 15 insertions(+), 146 deletions(-) delete mode 100644 app/example/helloworld.old.js diff --git a/app/example/helloworld-html.js b/app/example/helloworld-html.js index 87217ea..7e5408a 100644 --- a/app/example/helloworld-html.js +++ b/app/example/helloworld-html.js @@ -13,7 +13,7 @@ AFRAME.registerComponent('helloworld-html', { }, dom: { - scale: 3, + scale: 1, events: ['click'], html: (me) => `
helloworld-html: ${me.data.foo} ${me.data.myvalue} diff --git a/app/example/helloworld-htmlform.js b/app/example/helloworld-htmlform.js index 762ad6a..ec242e0 100644 --- a/app/example/helloworld-htmlform.js +++ b/app/example/helloworld-htmlform.js @@ -12,7 +12,7 @@ AFRAME.registerComponent('helloworld-htmlform', { }, dom: { - scale: 3, + scale: 1, events: ['click','input'], html: (me) => `
diff --git a/app/example/helloworld-window.js b/app/example/helloworld-window.js index 190653f..c5d8765 100644 --- a/app/example/helloworld-window.js +++ b/app/example/helloworld-window.js @@ -12,7 +12,7 @@ AFRAME.registerComponent('helloworld-window', { }, dom: { - scale: 3, + scale: 1, events: ['click','keydown'], html: (me) => `
${me.data.foo} ${me.data.myvalue} @@ -25,7 +25,6 @@ AFRAME.registerComponent('helloworld-window', { // component events html: function( ){ console.log("html-mesh requirement mounted") }, - stylis: function( ){ console.log("stylis requirement mounted") }, // combined AFRAME+DOM reactive events click: function(e){ }, // diff --git a/app/example/helloworld.js b/app/example/helloworld.js index bbd7863..4c9ede9 100644 --- a/app/example/helloworld.js +++ b/app/example/helloworld.js @@ -5,10 +5,15 @@ AFRAME.registerComponent('helloworld', { init: function () { this.el.object3D.visible = false - this.el.setAttribute("geometry","primitive: octahedron") - this.interval = setInterval( () => { - this.data.myvalue = ((this.data.myvalue||1.0) + 0.25) % 1 - }, 400 ) + + this.el.innerHTML = ` + + + + + ` + + this.interval = setInterval( () => this.data.wireframe = !this.data.wireframe, 500 ) }, requires:{ @@ -26,7 +31,9 @@ AFRAME.registerComponent('helloworld', { }, // reactive this.data value demo - myvalue:function( ){ this.el.object3D.children[0].scale.y = this.data.myvalue } + wireframe:function( ){ + this.el.object3D.traverse( (obj) => obj.material && (obj.material.wireframe = this.data.wireframe) ) + } }, diff --git a/app/example/helloworld.old.js b/app/example/helloworld.old.js deleted file mode 100644 index db483ed..0000000 --- a/app/example/helloworld.old.js +++ /dev/null @@ -1,137 +0,0 @@ -AFRAME.registerComponent('helloworld', { - schema: { - foo: { type:"string"} - }, - - 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) - }, - - dom: { - scale: 3, - events: ['click','input'], - html: (me) => ` - `, - css: ` - /* -* * HTML-2-WebGL limitations / guidelines for html-mesh compatibility: - * no icon libraries (favicon e.g.) - * in case of 'border-radius: 2px 3px 4px 5px' (2px will apply to all corners) - * dont use transform: scale(1.2) e.g. -* */ - .modal.hello { - position:relative; - top:0; - width:200px; - .title { font-weight:bold; } /* modern nested buildless css thanks to stylis */ - }` - }, - - events:{ - - html: function( ){ console.log("html-mesh requirement mounted") }, - stylis: function( ){ console.log("stylis requirement mounted") }, - - DOMready: function(e){ - // our reactive dom element has been added to the dom (DOMElement = this.el.dom) - }, - - click: function(e){ // a click was detected on this.el.dom or AFRAME entity - let el = e.detail.target || e.detail.srcElement - if( !el ) return - if( el.className.match("fold") ) this.el.toggleFold() - if( el.className.match("close") ) this.el.close() - }, - - input: function(e){ - if( !e.detail.target ) return - if( e.detail.target.id == 'myRange' ) this.data.value = e.detail.target.value // reactive demonstration - }, - - value: function(e){ this.el.dom.querySelector("#value").innerHTML = e.detail.v }, // auto-emitted when this.data.value gets updated - - }, - - 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) - this.el.setAttribute("html",`html:#${this.el.uid}; 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": "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. - ` - } - -}); -