add mocked net vizs

3 files changed, 125 insertions, 32 deletions

diff --git a/code/weightvis.js b/code/weightvis.js
index 5265cee..64d398c 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -215,9 +215,57 @@ var Loader = (function() {
     return Loader;
 })();
 
+var Mocker = (function() {
+    function Mocker() {
+    }
 
-/* animation stepping */
+    Mocker.prototype.load = function(shape, callback) {
+        // shape is an array [layer1size, layer2size, …]
+        callback(this._createLayout(shape), this._createData(shape));
+    };
 
+    Mocker.prototype._createLayout = function(shape) {
+        // json format:
+        // see Loader class
+        var layout = {};
+        layout.data = {};
+        layout.data.batches = 1;
+        layout.data.epochs  = 1;
+        layout.net = {};
+        // network structure
+        layout.net.layers = shape.length;
+        for (layer=0; layer<layout.net.layers; layer++) {
+            layerObj = {};
+            layerObj.isBias = false;
+            layerObj.size = shape[layer];
+            layout.net[layer] = layerObj;
+        }
+        // layer properties
+        layout.layers = {};
+        layout.layers[0] = {};
+        layout.layers[0][0] = {};
+        layout.layers[0][0].max = 0;
+        layout.layers[0][0].min = 0;
+        return layout;
+    };
+
+    Mocker.prototype._createData = function(shape) {
+        var data = {"0": {"0": {}}};
+        for (layer=0; layer<shape.length; layer++) {
+            data[0][0][layer] = [];
+            for (weight=0; weight<shape[layer]; weight++) {
+                data[0][0][layer].push(0);
+            }
+        }
+        return data;
+    };
+
+    return Mocker;
+})();
+
+
+/* animation stepping */
+// TODO move out of this file
 var Animator = (function() {
     function Animator(layout, time, step) {
         this.layout = layout;
@@ -264,6 +312,7 @@ var NetVisualizer = (function() {
 
     function NetVisualizer(svg) {
         this.loader = new Loader();
+        this.mocker = new Mocker();
         this.svg = svg;
         this.stepHooks = [];
         this.stopHooks = [];
@@ -287,6 +336,17 @@ var NetVisualizer = (function() {
         this.loader.load(url, wrapper);
     };
 
+    NetVisualizer.prototype.mock = function(shape, callback) {
+        var self = this;
+        function wrapper(layout, data) {
+            self.layout = layout;
+            self.data = data;
+            self._setup();
+            callback();
+        }
+        this.mocker.load(shape, wrapper);
+    };
+
     NetVisualizer.prototype.stopAnimation = function() {
         if (this.animator) this.animator.stop();
     };
diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index ad33092..c1586d1 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -26,6 +26,7 @@ var WeightVisWrapper = (function() {
             .style("top", "50%");
         componentHandler.upgradeElement(this.spinner.node());
 
+        // TODO move controlContainer out of weightVisWrapper
         this.controlContainer
             .style("margin-left", "auto")
             .style("margin-right", "auto")
@@ -56,10 +57,22 @@ var WeightVisWrapper = (function() {
 
     WeightVisWrapper.prototype.load = function(url, callback) {
         var self = this;
-        this.netVisualizer.load(url, function(){
-            var inputNodes = self.svg.selectAll(".layer-1")[0];
+        this.netVisualizer.load(url, function() { self.loaded(callback); });
+    };
+
+    WeightVisWrapper.prototype.mock = function(shape, callback) {
+        var self = this;
+        this.controlContainer.style("display", "none");
+        this.netVisualizer.mock(shape, function() { self.loaded(callback); });
+    };
+
+    WeightVisWrapper.prototype.loaded = function(callback) {
+        var self = this;
+        var inputNodes = this.svg.selectAll(".layer-1")[0];
+        if (inputNodes.length == attributeNames.length) {
+            // TODO too specialized to be abstract
             for (node=0; node<inputNodes.length; node++) {
-                self.svg
+                this.svg
                     .append("text")
                     .attr("class", "attribute")
                     .attr("text-anchor", "middle")
@@ -69,37 +82,37 @@ var WeightVisWrapper = (function() {
                     .attr("cursor", "default")
                     .text(attributeNames[node]);
             }
-            self.resizeHooks.push(function() { self.netVisualizer.reposition(); });
-            self.resizeHooks.push(function() { self.placeAttributes(); });
-            self.netVisualizer.hookStepper(function(step) { self.slider.node().MaterialSlider.change(step); });
-            self.netVisualizer.hookStop(function() {
+        }
+        this.resizeHooks.push(function() { self.netVisualizer.reposition(); });
+        this.resizeHooks.push(function() { self.placeAttributes(); });
+        this.netVisualizer.hookStepper(function(step) { self.slider.node().MaterialSlider.change(step); });
+        this.netVisualizer.hookStop(function() {
+            self.button.attr("data-pressed", "false");
+            self.button.select(".play").style("display", "");
+            self.button.select(".pause").style("display", "none");
+            if (self.slider.node().value >= self.slider.node().max * 0.95) {
+                self.slider.node().MaterialSlider.change(0); // wrap at right end
+            }
+        });
+        this.slider.attr("max", this.netVisualizer.getSteps() - 1);
+        this.slider.node().addEventListener("input", function() { self.netVisualizer.showStep(self.value); });
+        this.button.node().addEventListener("click", function toggle() {
+            if (self.button.attr("data-pressed") != "true") {
+                var step = self.slider.node().value;
+                self.netVisualizer.animate(15, 10, step);
+                self.button.attr("data-pressed", "true");
+                self.button.select(".play").style("display", "none");
+                self.button.select(".pause").style("display", "");
+            } else {
+                self.netVisualizer.stopAnimation();
                 self.button.attr("data-pressed", "false");
                 self.button.select(".play").style("display", "");
                 self.button.select(".pause").style("display", "none");
-                if (self.slider.node().value >= self.slider.node().max * 0.95) {
-                    self.slider.node().MaterialSlider.change(0); // wrap at right end
-                }
-            });
-            self.slider.attr("max", self.netVisualizer.getSteps() - 1);
-            self.slider.node().addEventListener("input", function() { self.netVisualizer.showStep(this.value); });
-            self.button.node().addEventListener("click", function toggle() {
-                if (self.button.attr("data-pressed") != "true") {
-                    var step = self.slider.node().value;
-                    self.netVisualizer.animate(15, 10, step);
-                    self.button.attr("data-pressed", "true");
-                    self.button.select(".play").style("display", "none");
-                    self.button.select(".pause").style("display", "");
-                } else {
-                    self.netVisualizer.stopAnimation();
-                    self.button.attr("data-pressed", "false");
-                    self.button.select(".play").style("display", "");
-                    self.button.select(".pause").style("display", "none");
-                }
-            });
-            self.ready = true;
-            callback();
-            self.readyHooks.forEach(function(hook) { hook(); });
+            }
         });
+        this.ready = true;
+        callback();
+        this.readyHooks.forEach(function(hook) { hook(); });
     };
 
     WeightVisWrapper.prototype.afterLoad = function(cb) {
@@ -160,6 +173,7 @@ var WeightVisWrapper = (function() {
 })();
 
 /* helps with impress.js' stepenter/stepleave events */
+// TODO move into its own file
 var VisIntegrater = (function() {
     function VisIntegrater(enterCb, leaveCb, selector) {
         var self = this;
diff --git a/index.html b/index.html
index 972e889..80f9678 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,26 @@
             <h1 class="mdl-layout__header">Abstraktion der Ein- und Ausgabe</h1>
         </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
+        <div class="step slide mdl-layout mdl-js-layout" data-x="9500" data-y="0" data-z="1000">
+            <div class="mdl-layout__header">
+                <h2>Ein leeres Netz</h2>
+            </div>
+
+            <div class="visContainer"></div>
+
+            <script type="text/javascript">
+                var mocker = new WeightVisWrapper();
+                new VisIntegrater(function(c) {
+                    mocker.mock([3, 2, 1], function() {
+                        mocker.openIn(c);
+                    });
+                }, function(c) {
+                    mocker.remove(c);
+                }, ".visContainer");
+            </script>
+        </div>
+
+        <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="0" data-z="1000">
             <div class="mdl-layout__header">
                 <h2>Der Fehler im Verlauf</h2>
             </div>