repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 885ae09f42f5d06d092c4a2b9db7c5d7a6cad1e3:
path_to: 
revision_to: 

commit 885ae09f42f5d06d092c4a2b9db7c5d7a6cad1e3
Author: James Baicoianu 
Date:   Thu Oct 22 15:57:52 2020 -0700

    Improved Enter VR button functionality

diff --git a/media/assets/webui/apps/buttons/buttons.css b/media/assets/webui/apps/buttons/buttons.css

--- a/media/assets/webui/apps/buttons/buttons.css
+++ b/media/assets/webui/apps/buttons/buttons.css
@@ -1,6 +1,7 @@
 janus-button-webvr,
 janus-button-webar,
-janus-ui-editor-button {
+janus-ui-editor-button,
+janus-button-start {
   border: none;
   border-radius: .5em;
   padding: .1em .5em;
@@ -17,16 +18,19 @@ janus-ui-editor-button {
 }
 janus-button-webvr[hover],
 janus-button-webar[hover],
-janus-ui-editor-button[hover] {
+janus-ui-editor-button[hover],
+janus-button-start[hover] {
   background-image: linear-gradient(#323232, #404142 40%, #393b3d);
 }
 janus-button-webvr:active,
 janus-button-webar:active,
-janus-ui-editor-button:active {
+janus-ui-editor-button:active,
+janus-button-start:active {
   background-image: linear-gradient(#020202, #101112 40%, #191b1d);
 }
 janus-button-webvr[disabled],
 janus-button-webar[disabled],
+janus-button-start[disabled],
 janus-ui-editor-button[disabled] {
   color: #999;
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
@@ -51,3 +55,6 @@ janus-ui-buttons>ui-buttonbar>janus-ui-editor-button {
     font-size: .8em;
     font-weight: bold;
 }
+janus-ui-buttons>ui-buttonbar>ui-button[name="fullscreen"] {
+  font-size: 1.5em;
+}
diff --git a/media/assets/webui/apps/buttons/buttons.html b/media/assets/webui/apps/buttons/buttons.html

--- a/media/assets/webui/apps/buttons/buttons.html
+++ b/media/assets/webui/apps/buttons/buttons.html
@@ -1,9 +1,9 @@
       
-        Edit
-        Share
-        Expand
-        
-        
-        Config
+        {#showedit}Edit{/showedit}
+        {#showshare}Share{/showshare}
+        {#showfullscreen}⛶{/showfullscreen}
+        {#showvr}{/showvr}
+        {#showar}{/showar}
+        {#showsettings}Config{/showsettings}
       

diff --git a/media/assets/webui/apps/buttons/buttons.js b/media/assets/webui/apps/buttons/buttons.js

--- a/media/assets/webui/apps/buttons/buttons.js
+++ b/media/assets/webui/apps/buttons/buttons.js
@@ -1,6 +1,24 @@
 elation.elements.define('janus.ui.buttons', class extends elation.elements.base {
+  init() {
+    super.init();
+    this.defineAttributes({
+      showedit: { type: 'boolean', default: true },
+      showshare: { type: 'boolean', default: true },
+      showfullscreen: { type: 'boolean', default: true },
+      showvr: { type: 'boolean', default: true },
+      showar: { type: 'boolean', default: true },
+      showsettings: { type: 'boolean', default: true },
+    });
+  }
   create() {
-    this.innerHTML = elation.template.get('janus.ui.buttons');
+console.log('show me?', this.showedit, this.showshare, this.showfullscreen, this.showvr, this.showar, this.showsettings);
+    if (this.showedit == 'false') this.showedit = false;
+    if (this.showshare == 'false') this.showshare = false;
+    if (this.showfullscreen == 'false') this.showfullscreen = false;
+    if (this.showvr == 'false') this.showvr = false;
+    if (this.showar == 'false') this.showar = false;
+    if (this.showsettings == 'false') this.showsettings = false;
+    this.innerHTML = elation.template.get('janus.ui.buttons', this);
   }
 });
 elation.elements.define('janus-buttons-display', class extends elation.elements.ui.dropdownbutton {
@@ -55,16 +73,19 @@ elation.elements.define('janus-button-fullscreen', class extends elation.element
 elation.elements.define('janus-button-webvr', class extends elation.elements.ui.togglebutton {
   create() {
     this.xr = false;
-    this.activelabel = 'WebVR';
-    this.inactivelabel = 'WebVR';
+    this.defineAttributes({
+      activelabel: { type: 'string', default: 'Exit VR' },
+      inactivelabel: { type: 'string', default: 'VR' },
+    });

     this.label = this.activelabel;
     super.create();
     this.view = janus.engine.client.view;

+    elation.events.add(janus.engine.client, 'xrsessionstart', ev => this.handleXRSessionStart(ev));
+    elation.events.add(janus.engine.client, 'xrsessionend', ev => this.handleXRSessionEnd(ev));
+
     if ('xr' in navigator) {
-      this.activelabel = 'Exit VR';
-      this.inactivelabel = 'Enter VR';
       this.label = this.inactivelabel;
       this.xr = true;
     } else if ('getVRDevices' in navigator) {
@@ -84,28 +105,38 @@ elation.elements.define('janus-button-webvr', class extends elation.elements.ui.
     }
   }
   onactivate(ev) {
-    this.label = this.activelabel;
+    if (this.disabled) return;
     if (this.xr) {
-      janus.engine.client.startXR();
+      let client = janus.engine.client;
+      if (client.xrsession) {
+        client.stopXR();
+        this.label = this.inactivelabel;
+      } else {
+        this.disabled = true;
+        this.label = 'Initializing...'
+        client.startXR();
+      }
     } else {
       this.view.toggleVR(true);
     }
   }
   ondeactivate(ev) {
+    // FIXME - the button detects its state when it's clicked, we should really just use a  here
+    this.onactivate(ev);
+  }
+  handleXRSessionStart(ev) {
+    this.label = this.activelabel;
+    this.disabled = false;
+  }
+  handleXRSessionEnd(ev) {
     this.label = this.inactivelabel;
-    if (this.xr) {
-      //this.view.stopXR();
-      janus.engine.client.stopXR();
-    } else {
-      this.view.toggleVR(false);
-    }
   }
 });
 elation.elements.define('janus-button-webar', class extends elation.elements.ui.togglebutton {
   create() {
     this.xr = false;
     this.activelabel = 'Exit AR';
-    this.inactivelabel = 'Enter AR';
+    this.inactivelabel = 'AR';
     this.enabled = false;

     this.label = this.activelabel;
@@ -143,3 +174,19 @@ elation.elements.define('janus-buttons-ou3d', class extends elation.elements.ui.
 });
 elation.elements.define('janus-buttons-peppersghost', class extends elation.elements.ui.togglebutton {
 });
+elation.elements.define('janus-button-start', class extends elation.elements.ui.button {
+  create() {
+    super.create();
+    this.addEventListener('click', (ev) => this.onclick(ev));
+  }
+  onclick(ev) {
+    janus.engine.systems.sound.enableSound();
+    janus.engine.systems.controls.requestPointerLock();
+    if (room.objects.scroller) {
+      room.objects.scroller.disable();
+    }
+    //player.flying = false;
+    player.enable();
+    //janus.ui.show();
+  }
+});

-----END OF PAGE-----