Barebones sample updates

Add styling for the buttons to make them easier to use, and tweak the DOM Overlay example a bit to match the sample code in the explainer.
TomDDH · Mar 13, 2020 · 91f2e5c · 91f2e5c
1 parent 282157c
commit 91f2e5c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/ar-barebones.html b/ar-barebones.html
@@ -29,24 +29,26 @@
     <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
     <link rel='stylesheet' href='css/common.css'>
 
-    <title>Barebones VR</title>
+    <title>Barebones AR</title>
   </head>
   <body>
-    <header>
-      <details open>
-        <summary>Barebones WebXR DOM Overlay</summary>
-        <p>
-          This sample demonstrates extremely simple use of an "immersive-ar"
-          session with no library dependencies, with an optional DOM overlay.
-          It doesn't render anything exciting, just draws a square with a slowly
-          changing color to prove it's working.
-          <a class="back" href="./index.html">Back</a>
-        </p>
-        <div id="session-info"></div>
-        <div id="warning-zone"></div>
-        <button id="xr-button" class="barebones-button" disabled>XR not found</button>
-      </details>
-    </header>
+    <div id="overlay">
+      <header>
+        <details open>
+          <summary>Barebones WebXR DOM Overlay</summary>
+          <p>
+            This sample demonstrates extremely simple use of an "immersive-ar"
+            session with no library dependencies, with an optional DOM overlay.
+            It doesn't render anything exciting, just draws a rectangle with a
+            slowly changing color to prove it's working.
+            <a class="back" href="./index.html">Back</a>
+          </p>
+          <div id="session-info"></div>
+          <div id="warning-zone"></div>
+          <button id="xr-button" class="barebones-button" disabled>XR not found</button>
+        </details>
+      </header>
+    </div>
     <main style='text-align: center;'>
       <p>Click 'Enter AR' to see content</p>
     </main>
@@ -87,10 +89,9 @@
       function onButtonClicked() {
         if (!xrSession) {
             // Ask for an optional DOM Overlay, see https://immersive-web.github.io/dom-overlays/
-            // Use BODY as the root element.
             navigator.xr.requestSession('immersive-ar', {
                 optionalFeatures: ['dom-overlay'],
-                domOverlay: {root: document.body}
+                domOverlay: {root: document.getElementById('overlay')}
             }).then(onSessionStarted, onRequestSessionError);
         } else {
           xrSession.end();

diff --git a/css/common.css b/css/common.css
@@ -62,3 +62,20 @@ canvas {
   margin-right: 0.2em;
   margin-left: 0.2em;
 }
+
+/* Used for the 'barebones' samples */
+.barebones-button {
+  font-family: "Karla", sans-serif;
+  border: rgb(80, 168, 252) 2px solid;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background: none;
+  height: 55px;
+  min-width: 176px;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  font-size: 18px;
+  color: rgb(80, 168, 252);
+  background-color: rgba(255, 255, 255, 0.7);
+}
diff --git a/vr-barebones.html b/vr-barebones.html
@@ -42,7 +42,7 @@
           color to prove it's working.
           <a class="back" href="./">Back</a>
         </p>
-        <button id="xr-button" disabled>XR not found</button>
+        <button id="xr-button" class="barebones-button" disabled>XR not found</button>
       </details>
     </header>
     <main style='text-align: center;'>