Working on player

Data/AtomicEditor/Deployment/Web/AtomicLoader.js

@@ -1,127 +1,73 @@
-var AtomicLoader;
-if (typeof AtomicLoader === 'undefined') AtomicLoader = eval('(function() { try { return AtomicLoader || {} } catch(e) { return {} } })()');
 
-window.addEventListener("keydown", function(e) {
+var Module;
+/*
+window.onerror = function(event) {
+  // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+  Module.setStatus('Exception thrown, see JavaScript console');
+  Module.setStatus = function(text) {
+    if (text) Module.printErr('[post-exception status] ' + text);
+  };
+};
+*/
 
-  // Disable stock behavior, which was causing scroll errors
-  // space and arrow keys
-  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
-    e.preventDefault();
-  }
-}, false);
+var AtomicLoader = function(playerCanvas, spinner, width, height) {
 
+  AtomicLoader.instance = this;
 
-var atomicCanvas = document.getElementById('canvas');
+  this.playerCanvas = playerCanvas;
+  this.spinner = spinner;
+  this.width = width;
+  this.height = height;
 
-var _backgroundImageData = null;
+  playerCanvas.width = width;
+  playerCanvas.height = height;
 
-// <canvas id="loadcanvas" width="800" height="600" oncontextmenu="event.preventDefault()"></canvas>
+  // starts invisible
+  playerCanvas.style.display = 'none';
 
-function DrawProgress(text, current) {
+  this.backgroundImageData = null;
 
-  var bg = document.getElementById('loadcanvas');
-  var ctx = bg.getContext('2d');
-  var rect = bg.getBoundingClientRect();
+  this.progress = 0.0;
+  this.progressText = "Downloading"
 
-  var cwidth = rect.width;
-  var cheight = rect.height;
+  this.initModuleObject();
 
-  // for background image
-  if (!_backgroundImageData)
-    _backgroundImageData = ctx.getImageData(0, 0, cwidth, cheight);
+}
 
-  ctx.putImageData(_backgroundImageData, 0, 0);
+AtomicLoader.prototype.constructor = AtomicLoader;
 
-  ctx.font="30px Arial";
+AtomicLoader.prototype.initModuleObject = function() {
 
-  var progressText = (current * 100) + "%";
+  Module = {
 
-  var textSize =  ctx.measureText(progressText);
+    arguments: ["-x", AtomicLoader.instance.width.toString(), "-y", AtomicLoader.instance.height.toString()],
 
-  ctx.fillText(progressText, cwidth/2 - textSize.width/2, cheight/2 + 15);
+    preRun:[function() {
+      var loader = AtomicLoader.instance;
+    }],
 
-  ctx.beginPath();
-  ctx.strokeStyle = '#99CC33';
-  ctx.lineCap = 'square';
-  ctx.closePath();
-  ctx.fill();
-  ctx.lineWidth = 10.0;
+    postRun: [function() {
+      var loader = AtomicLoader.instance;
+      loader.playerCanvas.style.display = 'block';
+      loader.spinner.style.display = 'none';
+    }],
 
-  var circ = Math.PI * 2;
-  var quart = Math.PI / 2;
-  ctx.beginPath();
-  ctx.arc(cwidth/2, cheight/2, 70, -(quart), ((circ) * current) - quart, false);
-  ctx.stroke();
+    canvas: (function() {
+      var loader = AtomicLoader.instance;
+      // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+      // application robust, you may want to override this behavior before shipping!
+      // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+      loader.playerCanvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+      return loader.playerCanvas;
+    })(),
 
-}
+    setStatus: function(text) {
 
-document.getElementById('canvas').style.display = 'none';
-
-DrawProgress("Downloading", 0.1);
-
-var Module = {
-
-  arguments: ["-x", "800", "-y", "600"],
-
-  preRun:[function() {
-    DrawProgress("Initializing", 0.75);
-  }],
-
-  postRun: [function() {
-    document.getElementById('loadcanvas').style.display = 'none';
-    document.getElementById('canvas').style.display = 'block';
-  }],
-
-  print: (function() {
-    var element = document.getElementById('output');
-    if (element) element.value = ''; // clear browser cache
-    return function(text) {
-      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-      // These replacements are necessary if you render to raw HTML
-      //text = text.replace(/&/g, "&amp;");
-      //text = text.replace(/</g, "&lt;");
-      //text = text.replace(/>/g, "&gt;");
-      //text = text.replace('\n', '<br>', 'g');
-      console.log(text);
-      if (element) {
-        element.value += text + "\n";
-        element.scrollTop = element.scrollHeight; // focus on bottom
-      }
-    };
-  })(),
-  printErr: function(text) {
-    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-    if (0) { // XXX disabled for safety typeof dump == 'function') {
-      dump(text + '\n'); // fast, straight to the real console
-    } else {
-      console.error(text);
+    },
+    totalDependencies: 0,
+    monitorRunDependencies: function(left) {
+      this.totalDependencies = Math.max(this.totalDependencies, left);
+      Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
     }
-  },
-  canvas: (function() {
-    var canvas = document.getElementById('canvas');
-
-    // As a default initial behavior, pop up an alert when webgl context is lost. To make your
-    // application robust, you may want to override this behavior before shipping!
-    // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
-    canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
-
-    return canvas;
-  })(),
-  setStatus: function(text) {
-
-  },
-  totalDependencies: 0,
-  monitorRunDependencies: function(left) {
-    this.totalDependencies = Math.max(this.totalDependencies, left);
-    Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
-  }
-};
-
-Module.setStatus('Downloading...');
-window.onerror = function(event) {
-  // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
-  Module.setStatus('Exception thrown, see JavaScript console');
-  Module.setStatus = function(text) {
-    if (text) Module.printErr('[post-exception status] ' + text);
   };
-};
+}

Data/AtomicEditor/Deployment/Web/AtomicPlayer.html

@@ -3,12 +3,55 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script type="text/javascript" src="AtomicLoader.js"></script>
+
     <title>Atomic Player</title>
 
     <style>
       /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-      canvas.emscripten { border: 0px none; }
+      canvas.atomic { border: 0px none; }
+
+      /* spinner as this keeps going even when page setInterval does not*/
+      .spinner {
+              height: 30px;
+              width: 30px;
+              margin: 0;
+              margin-top: 20px;
+              margin-left: 20px;
+              display: inline-block;
+              vertical-align: top;
+
+              -webkit-animation: rotation .8s linear infinite;
+              -moz-animation: rotation .8s linear infinite;
+              -o-animation: rotation .8s linear infinite;
+              animation: rotation 0.8s linear infinite;
+
+              border-left: 5px solid rgb(235, 235, 235);
+              border-right: 5px solid rgb(235, 235, 235);
+              border-bottom: 5px solid rgb(235, 235, 235);
+              border-top: 5px solid rgb(120, 120, 120);
+
+              border-radius: 100%;
+              background-color: rgb(189, 215, 46);
+            }
+
+            @-webkit-keyframes rotation {
+              from {-webkit-transform: rotate(0deg);}
+              to {-webkit-transform: rotate(360deg);}
+            }
+            @-moz-keyframes rotation {
+              from {-moz-transform: rotate(0deg);}
+              to {-moz-transform: rotate(360deg);}
+            }
+            @-o-keyframes rotation {
+              from {-o-transform: rotate(0deg);}
+              to {-o-transform: rotate(360deg);}
+            }
+            @keyframes rotation {
+              from {transform: rotate(0deg);}
+              to {transform: rotate(360deg);}
+            }
 
     </style>
 
@@ -16,19 +59,35 @@
 
   <body>
 
-    <script>
+    <div id="atomic_player_canvas_wrapper">
+    <canvas class="atomic" id="atomic_player_canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+
+    <div class="spinner" id='atomic_spinner'></div>
 
-      console.log( $( window ).width() + 'is the width' );
-      console.log( $( window ).height() + 'is the height' );
+    <script type="text/javascript">
+
+      (function() {
+
+      var playerCanvas = document.getElementById('atomic_player_canvas');
+      var spinner = document.getElementById('atomic_spinner');
+
+      var width = $( window ).width();
+      var height = $( window ).height();
+
+      new AtomicLoader(playerCanvas, spinner, width, height);
+
+      }) ();
 
     </script>
 
-    <canvas id="loadcanvas" width="800" height="600" oncontextmenu="event.preventDefault()"></canvas>
-    <canvas class="emscripten" id="canvas" width="800" height="600" oncontextmenu="event.preventDefault()"></canvas>
+    <!---->
+    <!--
 
     <!-- <textarea id="output" rows="8" cols="80"></textarea> -->
 
-    <script type="text/javascript" src="AtomicLoader.js"></script>
+
+
     <script async type="text/javascript" src="AtomicResources.js"></script>
     <script async type="text/javascript" src="AtomicPlayer.js"></script>
 

Data/AtomicEditor/Deployment/Web/index.html

@@ -1,4 +1,4 @@
 
 
 
-<iframe src="AtomicPlayer.html" width="800" height="600", marginwidth="0", marginheight="0", frameborder="0", scrolling="no"></iframe>
+<iframe src="AtomicPlayer.html" width="1024" height="768", marginwidth="0", marginheight="0", frameborder="0", scrolling="no"></iframe>