first impress-ions; add error vis

1 files changed, 85 insertions, 6 deletions

diff --git a/index.html b/index.html
index 8f6bb35..972e889 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,11 @@
 
     <script src="code/weightvis.js" type="text/javascript"></script>
     <script src="code/weightviswrapper.js" type="text/javascript"></script>
+    <script src="code/errorvis.js" type="text/javascript"></script>
 
     <script type="text/javascript">
         var weightsWrapper = new WeightVisWrapper();
+        var errorVis = new ErrorVis();
 
         document.addEventListener("DOMContentLoaded", function() {
             impress().init();
@@ -27,6 +29,14 @@
             weightsWrapper.load("data/weights.json", function() {
                 weightsWrapper.reposition();
             });
+
+            d3.selectAll(".errorContainer")[0].forEach(function(el) {
+                errorVis.addPlaceholder(el.parentNode);
+            });
+            errorVis.load("data/error.json", function() {
+                //errorVis.reposition();
+            });
+
             sizeSlides();
         }, false);
 
@@ -37,14 +47,83 @@
                 .style("height", parseInt(window.innerHeight) * 0.9 + "px");
         };
         window.addEventListener("resize", sizeSlides);
+
+        document.addEventListener("impress:innerstep", function(e) {
+            d3.selectAll(".lastInnerstep")[0].forEach(function(ist) { ist.classList.remove("lastInnerstep"); });
+            var stepped = d3.select(e.target).selectAll(".stepped")[0];
+            stepped[stepped.length-1].classList.add("lastInnerstep");
+        });
     </script>
 
     <div id="impress">
-        <div class="step slide" data-x="0" data-y="0">
-            <div class="title mdl-layout mdl-js-layout">
-                <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
-                <h3>38 Gewichte in 15 Minuten</h3>
+        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="5000">
+            <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
+            <h2>38 Gewichte in 20 Minuten</h2>
+        </div>
+
+        <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000">
+            <h1 class="mdl-layout__header">Biologie</h1>
+            <div class="innerStep stepped lastInnerstep center">
+                <h3>Der Mensch und die Maschine.</h3>
+                <p style="font-size: 2500%">
+                    <i style="font-size: 100%;" class="material-icons">accessibility</i>
+                    🖥
+                </p>
             </div>
+            <div class="innerStep center">
+                <h3>Wahrnehmung</h3>
+                <p>
+                    <i style="font-size: 800%;" class="material-icons">remove_red_eye</i>
+                </p>
+                <p>
+                    <span style="font-size: 500%;">Rezeptor</span>
+                </p>
+            </div>
+            <div class="innerStep center">
+                <h3>Reaktion.</h3>
+                <p>
+                    <i style="font-size: 2500%;" class="material-icons">directions_walk</i>
+                </p>
+                <p>
+                    <span style="font-size: 500%;">Effektor</span>
+                </p>
+            </div>
+        </div>
+
+        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="1000">
+            <h1 class="mdl-layout__header">Abstraktion eines Individuums</h1>
+            <p class="innerStep stepped lastInnerstep center" style="font-size: 500%;">
+                Wahrnehmung &#x279e; 
+                <i style="font-size: 100%;" class="material-icons">help_outline</i>
+                &#x279e; Reaktion
+            </p>
+            <p class="innerStep center" style="font-size: 500%;">
+                Eingabe &#x279e; &#x2728; &#x279e; Ausgabe
+            </p>
+        </div>
+
+        <!-- TODO x' besser verteilen -->
+        <div class="mdl-layout mdl-js-layout step slide" data-x="1000" data-y="0" data-z="1000">
+            <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="mdl-layout__header">
+                <h2>Der Fehler im Verlauf</h2>
+            </div>
+
+            <div class="errorContainer"></div>
+
+            <script type="text/javascript">
+                new VisIntegrater(function(c) {
+                    errorVis.afterLoad(function() {
+                        errorVis.openIn(c);
+                        errorVis.showMarker(203);
+                    });
+                }, function(c) {
+                    errorVis.remove(c);
+                }, ".errorContainer");
+            </script>
         </div>
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
@@ -62,7 +141,7 @@
                     });
                 }, function(c) {
                     weightsWrapper.remove(c);
-                });
+                }, ".visContainer");
             </script>
         </div>
 
@@ -81,7 +160,7 @@
                     });
                 }, function(c) {
                     weightsWrapper.remove(c);
-                });
+                }, ".visContainer");
             </script>
         </div>
     </div>