[components/webvr-recorder] default controller selectors

Author: ngokevin

README.md

@@ -25,7 +25,7 @@ See documentation for individual components:
 - [sun-sky](https://github.com/ngokevin/kframe/tree/master/components/sun-sky/) - Gradient sky with adjustable sun in A-Frame
 - [template](https://github.com/ngokevin/kframe/tree/master/components/template/) - Encapsulate groups of entities, use templating engines, and do string interpolations in A-Frame
 - [text](https://github.com/ngokevin/kframe/tree/master/components/text/) - Geometry-based text in A-Frame
-- [webvr-recorder](https://github.com/ngokevin/kframe/tree/master/components/webvr-recorder/) - WebVR Recorder component for A-Frame.
+- [webvr-recorder](https://github.com/ngokevin/kframe/tree/master/components/webvr-recorder/) - A-Frame component to record WebVR pose and events to localStorage or JSON. Then replay them without needing VR.
 
 
 ## Local Installation

components/webvr-recorder/examples/record/index.html

@@ -11,12 +11,8 @@
       <a-sky color="#DADADA"></a-sky>
     </a-scene>
 
-    <p style="background: #222; color: #FAFAFA; position: fixed; top: 0; margin: 0 auto; padding: 10px; left: 0; right: 0">
-      Hit `r` to record, `r` to stop recording, and then `r` to replay.
-    </p>
-
     <!--githubcorner-->
-    <a href="https://github.com/ngokevin/kframe/tree/master/components/webvr-recorder/examples/basic/" class="github-corner">
+    <a href="https://github.com/ngokevin/kframe/tree/master/components/webvr-recorder/examples/record/" class="github-corner">
       <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
       </svg>

components/webvr-recorder/examples/replay/index.html

@@ -48,5 +48,15 @@
         ></a-cursor>
       </a-camera>
     </a-scene>
+
+    <!--githubcorner-->
+    <a href="https://github.com/ngokevin/kframe/tree/master/components/webvr-recorder/examples/replay/" class="github-corner">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+    </style>
+    <!--endgithubcorner-->
   </body>
 </html>

components/webvr-recorder/index.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <title>A-Frame webvr-recorder Component</title>
-    <meta name="description" content="Component to record WebVR pose and events to localStorage or JSON. Then replay them without needing VR."></meta>
+    <meta name="description" content=""></meta>
     <style>
       html {
         background: #497285;
@@ -61,18 +61,24 @@ <h1><i>webvr-recorder</i> Component for <a href="https://aframe.io">A-Frame</a><
 
     <a class="back" href="https://ngokevin.github.io/kframe/">&larr; K-Frame</a>
 
-    <p>WebVR Recorder component for A-Frame.</p>
+    <p>A-Frame component to record WebVR pose and events to localStorage or JSON. Then replay them without needing VR.</p>
 
     <h2>Examples</h2>
 
     <ul id="examples">
-
+      
         <li>
-          <a href="examples/basic/" style="background-color: #222; background-image: url()"></a>
-          <h3>A-Frame WebVR Recorder Component - Basic</h3>
+          <a href="examples/record/" style="background-color: #222; background-image: url()"></a>
+          <h3>A-Frame WebVR Recorder Component - Record</h3>
           <p></p>
         </li>
-
+      
+        <li>
+          <a href="examples/replay/" style="background-color: #222; background-image: url()"></a>
+          <h3>WebVR Recorder Component - Replay</h3>
+          <p>An example of playing a pre-recorded recording on a Minecraft example with controller interactions.</p>
+        </li>
+      
     </ul>
 
         <!--githubcorner-->

components/webvr-recorder/index.js

@@ -25,8 +25,8 @@ const EVENTS_DECODE = {
  */
 AFRAME.registerComponent('webvr-recorder', {
   schema: {
-    controller1: {type: 'string'},
-    controller2: {type: 'string'},
+    controller1: {default: '#controller1', type: 'string'},
+    controller2: {default: '#controller2', type: 'string'},
     source: {default: 'webvr-recorder.json'}
   },
 
@@ -240,12 +240,6 @@ function createDownloadLink () {
   return link;
 }
 
-const re = new RegExp('(\\d+\\.\\d{' + 4 + '})(\\d)');
-function truncNum (num) {
-  var m = num.toString().match(re);
-  return m ? parseFloat(m[1]) : num.valueOf();
-};
-
 function serializeVec3 (vec3) {
-  return truncNum(vec3.x) + ' ' + truncNum(vec3.y) + ' ' + truncNum(vec3.z);
+  return vec3.x + ' ' + vec3.y + ' ' + vec3.z;
 }

index.html

@@ -120,7 +120,7 @@ <h2>Components</h2>
         </li>
       <li>
           <a href="components/webvr-recorder/">webvr-recorder</a>
-          <p>WebVR Recorder component for A-Frame.</p>
+          <p>A-Frame component to record WebVR pose and events to localStorage or JSON. Then replay them without needing VR.</p>
         </li>
 
     </ul>