OpenNewsLabs · jeromeetienne · Aug 20, 2017 · Aug 20, 2017
diff --git a/cmdline/Makefile b/cmdline/Makefile
@@ -0,0 +1,3 @@
+test:
+	node cmdline.js  --title 'super title' --mode ar --text 'I want a scene showing a text saying "Hi!".' --output examples/output.html
+	# node cmdline.js  --title 'super title' --mode vr 'A sky at sunset' > examples/output.html
diff --git a/cmdline/TODO.md b/cmdline/TODO.md
@@ -0,0 +1,12 @@
+# Issues
+- make it work in AR
+
+# Have a good support of aframe-ar.js
+- support ar.js options from the guri-xr
+
+# Idea with twitter and AR.js Augmented Website
+- make it work with library like 3d.io
+- with the twitter cards
+- tweet 'i want a 3d.io furniture XXX in ar' and it replies the link with the twitter cards
+- and you consume it directly on twitter
+- it can be an iframe too that you put in any site
diff --git a/cmdline/cmdline.js b/cmdline/cmdline.js
@@ -0,0 +1,40 @@
+var buildStory = require('../client/shared/story-builder')
+var nlp = require('../client/shared/nlp')
+var commandLineArgs = require('command-line-args')
+
+//////////////////////////////////////////////////////////////////////////////
+//                Code Separator
+//////////////////////////////////////////////////////////////////////////////
+
+// Attempts at cmdline option parsing...
+// - needs a -h --help
+// - needs error message when error
+// - i picked this package at random. aka it is the first i saw
+// - may need a more knowledgable choise
+var optionDefinitions = [
+        { name: 'title', alias: 't', type: String },
+        { name: 'mode', alias: 'm', type: String },
+        { name: 'output', alias: 'o', type: String },
+        { name: 'text', type: String },
+]
+
+var options = commandLineArgs(optionDefinitions)
+
+//////////////////////////////////////////////////////////////////////////////
+//                generate the html page
+//////////////////////////////////////////////////////////////////////////////
+var chapters = nlp(options.text)
+var story = {
+        title: options.title,
+        chapters: chapters,
+        mode: options.mode
+}
+console.log(JSON.stringify(story, null, '\t'))
+var html = buildStory(story)
+
+//////////////////////////////////////////////////////////////////////////////
+//                output html page
+//////////////////////////////////////////////////////////////////////////////
+
+// dump the html into a file
+require('fs').writeFileSync(options.output, html, 'utf8');
diff --git a/cmdline/examples/output.html b/cmdline/examples/output.html
@@ -0,0 +1,166 @@
+
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="twitter:card" content="player">
+    <meta name="twitter:site" content="@guri_vr">
+    <meta name="twitter:title" content="super title">
+    <meta name="twitter:image" content="https://s3.amazonaws.com/gurivr/logo_twitter.png">
+    <meta name="twitter:description" content="">
+    <meta name="twitter:player" content="https://s3.amazonaws.com/gurivr/s/undefined.html">
+    <meta name="twitter:player:width" content="400">
+    <meta name="twitter:player:height" content="370">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>super title</title>
+    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
+    <script src="https://rawgit.com/ngokevin/aframe-look-at-component/master/dist/aframe-look-at-component.min.js"></script>
+    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
+    <style>
+      html, body, #root, #arVideo {
+        background-color: transparent;
+        height: 100vh;
+        width: 100vw;
+        color: #fff;
+        font-size: 1.6em;
+        text-align: center;
+      }
+
+      #root {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      #arVideo {
+        width: 100%    !important;
+        max-width: 100%    !important;
+        height: auto   !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1000;
+      }
+    </style>
+  </head>
+  <body>
+    <a-scene>
+      <a-entity camera="userHeight: 1.6" look-controls wasd-controls>
+        <a-entity id="cursor"
+                  cursor="fuse: false; maxDistance: 30; timeout: 500"
+                  position="0 0 -5"
+                  geometry="primitive: ring; radiusInner: 0.2; radiusOuter: 0.3"
+                  material="color: white; shader: flat">
+        </a-entity>
+      </a-entity>
+      <a-assets></a-assets>
+
+  <a-entity class="chapter" visible="false">
+    <a-entity look-at="0 1.6 0" scale="25 25 25" position="0 1.6 -8" text="value: Hi!; font: roboto; align: center; anchor: center;"></a-entity>
+  </a-entity>
+
+    </a-scene>
+    <div id="root" style="background: #000; z-index: 999 !important; cursor: pointer; position: absolute; top: 0; left: 0;" onclick="javascript:start()"><svg style="width:50px;height:50px" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg></div>
+    <script>
+
+    var times = [null];
+    var voices = [null];
+
+    var chapters = document.querySelectorAll('.chapter');
+    var cursor = document.querySelector('#cursor')
+    var prevIdx = null;
+    var cancelNext;
+
+    function nextChapter(i) {
+      if(i >= chapters.length) return end();
+
+      clearTimeout(cancelNext);
+
+      var curr = chapters[i];
+      var prev;
+
+      if (prevIdx != null) {
+        prev = chapters[prevIdx];
+      }
+
+      playVoiceover(i);
+
+      if (curr.classList.contains('cursor')) {
+        cursor.setAttribute('visible', 'true');
+      } else {
+        cursor.setAttribute('visible', 'false');
+      }
+
+      if (prevIdx != null) {
+        prev.setAttribute('visible', false);
+      }
+      curr.setAttribute('visible', true);
+
+      if (prevIdx != null) {
+        var assets = document.querySelectorAll('.chapter-' + prevIdx);
+        for (var j = 0; j < assets.length; j++) {
+          assets[j] && assets[j].pause && assets[j].pause();
+        }
+      }
+
+      assets = document.querySelectorAll('.chapter-' + i);
+      for (var j = 0; j < assets.length; j++) {
+        assets[j] && assets[j].play && assets[j].play();
+      }
+
+      if (times[i]) {
+        cancelNext = setTimeout(function() {
+          nextChapter(i + 1);
+        }, times[i] * 1000);
+      }
+
+      prevIdx = i
+    }
+
+    function start() {
+      document.querySelector('a-scene').setAttribute('vr-mode-ui', 'enabled: true');
+      var $root = document.querySelector('#root');
+      $root.parentNode.removeChild($root);
+      nextChapter(0);
+    }
+
+    function end() {
+      document.body.innerHTML = '<div id="root" style="background: #000; cursor: pointer" onclick="javascript:window.location = window.location"><svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg></div>';
+    }
+
+    function playVoiceover(i) {
+      if (voices[i]) {
+        try {
+          speechSynthesis.cancel();
+          var txt = new SpeechSynthesisUtterance(voices[i]);
+          speechSynthesis.speak(txt);
+        } catch (err) {}
+      }
+    }
+    start()
+
+
+  var sky = document.querySelectorAll('a-sky, a-panorama, a-videosphere');
+
+  for (var i = 0; i < sky.length; i++) {
+    sky[i].setAttribute('visible', 'false');
+  }
+
+  var scene = document.querySelector('a-scene');
+  scene.setAttribute('arjs', 'sourceType: webcam;')
+  scene.setAttribute('embedded', 'embedded')
+
+
+    </script>
+  </body>
+</html>