diff options
| -rw-r--r-- | code/weightvis.js | 87 | ||||
| -rw-r--r-- | dep/impress.js | 805 | ||||
| -rw-r--r-- | index.css | 45 | ||||
| -rw-r--r-- | index.html | 176 |
4 files changed, 1035 insertions, 78 deletions
diff --git a/code/weightvis.js b/code/weightvis.js index 3512373..757fa2b 100644 --- a/code/weightvis.js +++ b/code/weightvis.js @@ -112,7 +112,7 @@ var Network = (function() { } }; - Network.prototype.updateWeights = function(weights, epochLayout) { + Network.prototype.updateWeights = function(weights, epochLayout) { // TODO negative weights!?! var cnt = 0; for (layer=0; layer<weights.length; layer++) { for (layer2=0; layer2<weights[layer].length; layer2++) { @@ -212,12 +212,14 @@ var Animator = (function() { function Animator(layout, time, step) { this.layout = layout; this.step = step; - this.batch = this.epoch = 0; this.frameDuration = time / (this.layout.data.batches * this.layout.data.epochs / this.step); } - Animator.prototype.start = function(callback) { + Animator.prototype.start = function(bat, ep, callback, finishedCb) { var self = this; + this.epoch = ep; + this.batch = bat; + this.finishedCb = finishedCb; wrapper = function() { callback(self.batch, self.epoch, self.frameDuration); self.animate(); @@ -225,14 +227,18 @@ var Animator = (function() { this.pid = setInterval(wrapper, this.frameDuration); }; + Animator.prototype.stop = function() { + if (this.finishedCb) this.finishedCb(); + clearInterval(this.pid); + }; + Animator.prototype.animate = function() { this.epoch += this.step; if (this.epoch >= this.layout.data.epochs) { this.epoch = 0; if (++this.batch>= this.layout.data.batches) { this.batch = 0; - clearInterval(this.pid); // suicide - console.log("finished"); + this.stop(); } } }; @@ -249,11 +255,16 @@ var Visualizer = (function() { function Visualizer(svg) { this.loader = new Loader(); this.svg = svg; + this.stepHooks = []; + this.stopHooks = []; } Visualizer.prototype.getSteps = function() { return this.layout.data.batches * this.layout.data.epochs; }; + Visualizer.prototype.getDatashape = function() { + return this.layout.data; + }; Visualizer.prototype.load = function(url, callback) { var self = this; @@ -266,14 +277,30 @@ var Visualizer = (function() { this.loader.load("data/log.json", wrapper); }; - Visualizer.prototype.animate = function(animationTime, resolution) { + Visualizer.prototype.stopAnimation = function() { + this.animator.stop(); + }; + + Visualizer.prototype.animate = function(animationTime, resolution, step) { // animationTime in seconds per frame // resolution in epochs per frame var self = this; - this.domLink = this.svg.selectAll(".link"); - + var batch = Math.floor(step / this.layout.data.epochs), + epoch = step % this.layout.data.epochs; this.animator = new Animator(this.layout, animationTime * 1000, resolution); - this.animator.start(function(batch, epoch){self.show(batch, epoch);}); + this.animator.start(batch, epoch, function(cbatch, cepoch) { + self.show(cbatch, cepoch); + }, function() { + self.stopHooks.forEach(function(hook){ hook(); }); + }); + }; + + Visualizer.prototype.hookStepper = function(hook) { + this.stepHooks.push(hook); + }; + + Visualizer.prototype.hookStop = function(hook) { + this.stopHooks.push(hook); }; Visualizer.prototype.showStep = function(step) { @@ -283,6 +310,7 @@ var Visualizer = (function() { }; Visualizer.prototype.show = function(batch, epoch, transitionDuration) { + var self = this; this.network.updateWeights(this.data[batch][epoch], this.layout.layers[batch][epoch]); if (transitionDuration) { // 10% extra time per frame for the code execution @@ -291,6 +319,25 @@ var Visualizer = (function() { .duration(transitionDuration / 1.1); } this.domLink.style("stroke-width", function(d) { return d.weight * _weightScaler; }); + this.stepHooks.forEach(function(hook){ hook(batch * self.layout.data.epochs + epoch); }); + }; + + Visualizer.prototype.reposition = function() { + var width = parseInt(this.svg.style("width")) || 800, + height = parseInt(this.svg.style("height")) || 600; + var node = this.svg.selectAll(".node"); + + this.network.resize({"width": width, "height": height}); + + node + .attr("cx", function(d) { return d.x; }) + .attr("cy", function(d) { return d.y; }) + .attr("r", function(d) { return d.r; }); + this.domLink + .attr("x1", function(d) { return d.source.x; }) + .attr("y1", function(d) { return d.source.y; }) + .attr("x2", function(d) { return d.target.x; }) + .attr("y2", function(d) { return d.target.y; }); }; Visualizer.prototype._setup = function() { @@ -304,25 +351,7 @@ var Visualizer = (function() { this.network.resize({"width": width, "height": height}); this.network.updateWeights(this.data[0][0], this.layout.layers[0][0]); - function reposition() { - width = parseInt(self.svg.style("width")) || 800; - height = parseInt(self.svg.style("height")) || 600; - - self.network.resize({"width": width, "height": height}); - - node - .attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }) - .attr("r", function(d) { return d.r; }); - link - .attr("x1", function(d) { return d.source.x; }) - .attr("y1", function(d) { return d.source.y; }) - .attr("x2", function(d) { return d.target.x; }) - .attr("y2", function(d) { return d.target.y; }); - } - window.addEventListener("resize", reposition, true); - - var link = this.svg.selectAll(".link") + this.domLink = this.svg.selectAll(".link") .data(this.network.links) .enter().append("line") .attr("class", function(d) { return "link source-" + d.source.id + " target-" + d.target.id; }) @@ -381,7 +410,7 @@ var Visualizer = (function() { } }); - reposition(); + this.reposition(); }; return Visualizer; diff --git a/dep/impress.js b/dep/impress.js new file mode 100644 index 0000000..2529e26 --- /dev/null +++ b/dep/impress.js @@ -0,0 +1,805 @@ +/** + * impress.js + * + * impress.js is a presentation tool based on the power of CSS3 transforms and transitions + * in modern browsers and inspired by the idea behind prezi.com. + * + * + * Copyright 2011-2012 Bartek Szopka (@bartaz) + * + * Released under the MIT and GPL Licenses. + * + * ------------------------------------------------ + * author: Bartek Szopka + * version: 0.5.3 + * url: http://bartaz.github.com/impress.js/ + * source: http://github.com/bartaz/impress.js/ + */ + +/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true, + noarg:true, noempty:true, undef:true, strict:true, browser:true */ + +// You are one of those who like to know how things work inside? +// Let me show you the cogs that make impress.js run... +(function ( document, window ) { + 'use strict'; + + // HELPER FUNCTIONS + + // `pfx` is a function that takes a standard CSS property name as a parameter + // and returns it's prefixed version valid for current browser it runs in. + // The code is heavily inspired by Modernizr http://www.modernizr.com/ + var pfx = (function () { + + var style = document.createElement('dummy').style, + prefixes = 'Webkit Moz O ms Khtml'.split(' '), + memory = {}; + + return function ( prop ) { + if ( typeof memory[ prop ] === "undefined" ) { + + var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1), + props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' '); + + memory[ prop ] = null; + for ( var i in props ) { + if ( style[ props[i] ] !== undefined ) { + memory[ prop ] = props[i]; + break; + } + } + + } + + return memory[ prop ]; + }; + + })(); + + // `arraify` takes an array-like object and turns it into real Array + // to make all the Array.prototype goodness available. + var arrayify = function ( a ) { + return [].slice.call( a ); + }; + + // `css` function applies the styles given in `props` object to the element + // given as `el`. It runs all property names through `pfx` function to make + // sure proper prefixed version of the property is used. + var css = function ( el, props ) { + var key, pkey; + for ( key in props ) { + if ( props.hasOwnProperty(key) ) { + pkey = pfx(key); + if ( pkey !== null ) { + el.style[pkey] = props[key]; + } + } + } + return el; + }; + + // `toNumber` takes a value given as `numeric` parameter and tries to turn + // it into a number. If it is not possible it returns 0 (or other value + // given as `fallback`). + var toNumber = function (numeric, fallback) { + return isNaN(numeric) ? (fallback || 0) : Number(numeric); + }; + + // `byId` returns element with given `id` - you probably have guessed that ;) + var byId = function ( id ) { + return document.getElementById(id); + }; + + // `$` returns first element for given CSS `selector` in the `context` of + // the given element or whole document. + var $ = function ( selector, context ) { + context = context || document; + return context.querySelector(selector); + }; + + // `$$` return an array of elements for given CSS `selector` in the `context` of + // the given element or whole document. + var $$ = function ( selector, context ) { + context = context || document; + return arrayify( context.querySelectorAll(selector) ); + }; + + // `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data + // and triggers it on element given as `el`. + var triggerEvent = function (el, eventName, detail) { + var event = document.createEvent("CustomEvent"); + event.initCustomEvent(eventName, true, true, detail); + el.dispatchEvent(event); + }; + + // `translate` builds a translate transform string for given data. + var translate = function ( t ) { + return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) "; + }; + + // `rotate` builds a rotate transform string for given data. + // By default the rotations are in X Y Z order that can be reverted by passing `true` + // as second parameter. + var rotate = function ( r, revert ) { + var rX = " rotateX(" + r.x + "deg) ", + rY = " rotateY(" + r.y + "deg) ", + rZ = " rotateZ(" + r.z + "deg) "; + + return revert ? rZ+rY+rX : rX+rY+rZ; + }; + + // `scale` builds a scale transform string for given data. + var scale = function ( s ) { + return " scale(" + s + ") "; + }; + + // `perspective` builds a perspective transform string for given data. + var perspective = function ( p ) { + return " perspective(" + p + "px) "; + }; + + // `getElementFromHash` returns an element located by id from hash part of + // window location. + var getElementFromHash = function () { + // get id from url # by removing `#` or `#/` from the beginning, + // so both "fallback" `#slide-id` and "enhanced" `#/slide-id` will work + return byId( window.location.hash.replace(/^#\/?/,"") ); + }; + + // `computeWindowScale` counts the scale factor between window size and size + // defined for the presentation in the config. + var computeWindowScale = function ( config ) { + var hScale = window.innerHeight / config.height, + wScale = window.innerWidth / config.width, + scale = hScale > wScale ? wScale : hScale; + + if (config.maxScale && scale > config.maxScale) { + scale = config.maxScale; + } + + if (config.minScale && scale < config.minScale) { + scale = config.minScale; + } + + return scale; + }; + + // CHECK SUPPORT + var body = document.body; + + var ua = navigator.userAgent.toLowerCase(); + var impressSupported = + // browser should support CSS 3D transtorms + ( pfx("perspective") !== null ) && + + // and `classList` and `dataset` APIs + ( body.classList ) && + ( body.dataset ) && + + // but some mobile devices need to be blacklisted, + // because their CSS 3D support or hardware is not + // good enough to run impress.js properly, sorry... + ( ua.search(/(iphone)|(ipod)|(android)/) === -1 ); + + if (!impressSupported) { + // we can't be sure that `classList` is supported + body.className += " impress-not-supported "; + } else { + body.classList.remove("impress-not-supported"); + body.classList.add("impress-supported"); + } + + // GLOBALS AND DEFAULTS + + // This is where the root elements of all impress.js instances will be kept. + // Yes, this means you can have more than one instance on a page, but I'm not + // sure if it makes any sense in practice ;) + var roots = {}; + + // some default config values. + var defaults = { + width: 1024, + height: 768, + maxScale: 1, + minScale: 0, + + perspective: 1000, + + transitionDuration: 1000 + }; + + // it's just an empty function ... and a useless comment. + var empty = function () { return false; }; + + // IMPRESS.JS API + + // And that's where interesting things will start to happen. + // It's the core `impress` function that returns the impress.js API + // for a presentation based on the element with given id ('impress' + // by default). + var impress = window.impress = function ( rootId ) { + + // If impress.js is not supported by the browser return a dummy API + // it may not be a perfect solution but we return early and avoid + // running code that may use features not implemented in the browser. + if (!impressSupported) { + return { + init: empty, + goto: empty, + prev: empty, + next: empty + }; + } + + rootId = rootId || "impress"; + + // if given root is already initialized just return the API + if (roots["impress-root-" + rootId]) { + return roots["impress-root-" + rootId]; + } + + // data of all presentation steps + var stepsData = {}; + + // element of currently active step + var activeStep = null; + + // current state (position, rotation and scale) of the presentation + var currentState = null; + + // array of step elements + var steps = null; + + // configuration options + var config = null; + + // scale factor of the browser window + var windowScale = null; + + // root presentation elements + var root = byId( rootId ); + var canvas = document.createElement("div"); + + var initialized = false; + + // STEP EVENTS + // + // There are currently two step events triggered by impress.js + // `impress:stepenter` is triggered when the step is shown on the + // screen (the transition from the previous one is finished) and + // `impress:stepleave` is triggered when the step is left (the + // transition to next step just starts). + + // reference to last entered step + var lastEntered = null; + + // `onStepEnter` is called whenever the step element is entered + // but the event is triggered only if the step is different than + // last entered step. + var onStepEnter = function (step) { + if (lastEntered !== step) { + triggerEvent(step, "impress:stepenter"); + lastEntered = step; + } + }; + + // `onStepLeave` is called whenever the step element is left + // but the event is triggered only if the step is the same as + // last entered step. + var onStepLeave = function (step) { + if (lastEntered === step) { + triggerEvent(step, "impress:stepleave"); + lastEntered = null; + } + }; + + // `initStep` initializes given step element by reading data from its + // data attributes and setting correct styles. + var initStep = function ( el, idx ) { + var data = el.dataset, + step = { + translate: { + x: toNumber(data.x), + y: toNumber(data.y), + z: toNumber(data.z) + }, + rotate: { + x: toNumber(data.rotateX), + y: toNumber(data.rotateY), + z: toNumber(data.rotateZ || data.rotate) + }, + scale: toNumber(data.scale, 1), + el: el + }; + + if ( !el.id ) { + el.id = "step-" + (idx + 1); + } + + stepsData["impress-" + el.id] = step; + + css(el, { + position: "absolute", + transform: "translate(-50%,-50%)" + + translate(step.translate) + + rotate(step.rotate) + + scale(step.scale), + transformStyle: "preserve-3d" + }); + }; + + // `init` API function that initializes (and runs) the presentation. + var init = function () { + if (initialized) { return; } + + // First we set up the viewport for mobile devices. + // For some reason iPad goes nuts when it is not done properly. + var meta = $("meta[name='viewport']") || document.createElement("meta"); + meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"; + if (meta.parentNode !== document.head) { + meta.name = 'viewport'; + document.head.appendChild(meta); + } + + // initialize configuration object + var rootData = root.dataset; + config = { + width: toNumber( rootData.width, defaults.width ), + height: toNumber( rootData.height, defaults.height ), + maxScale: toNumber( rootData.maxScale, defaults.maxScale ), + minScale: toNumber( rootData.minScale, defaults.minScale ), + perspective: toNumber( rootData.perspective, defaults.perspective ), + transitionDuration: toNumber( rootData.transitionDuration, defaults.transitionDuration ) + }; + + windowScale = computeWindowScale( config ); + + // wrap steps with "canvas" element + arrayify( root.childNodes ).forEach(function ( el ) { + canvas.appendChild( el ); + }); + root.appendChild(canvas); + + // set initial styles + document.documentElement.style.height = "100%"; + + css(body, { + height: "100%", + overflow: "hidden" + }); + + var rootStyles = { + position: "absolute", + transformOrigin: "top left", + transition: "all 0s ease-in-out", + transformStyle: "preserve-3d" + }; + + css(root, rootStyles); + css(root, { + top: "50%", + left: "50%", + transform: perspective( config.perspective/windowScale ) + scale( windowScale ) + }); + css(canvas, rootStyles); + + body.classList.remove("impress-disabled"); + body.classList.add("impress-enabled"); + + // get and init steps + steps = $$(".step", root); + steps.forEach( initStep ); + + // set a default initial state of the canvas + currentState = { + translate: { x: 0, y: 0, z: 0 }, + rotate: { x: 0, y: 0, z: 0 }, + scale: 1 + }; + + initialized = true; + + triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] }); + }; + + // `getStep` is a helper function that returns a step element defined by parameter. + // If a number is given, step with index given by the number is returned, if a string + // is given step element with such id is returned, if DOM element is given it is returned + // if it is a correct step element. + var getStep = function ( step ) { + if (typeof step === "number") { + step = step < 0 ? steps[ steps.length + step] : steps[ step ]; + } else if (typeof step === "string") { + step = byId(step); + } + return (step && step.id && stepsData["impress-" + step.id]) ? step : null; + }; + + // used to reset timeout for `impress:stepenter` event + var stepEnterTimeout = null; + + // `goto` API function that moves to step given with `el` parameter (by index, id or element), + // with a transition `duration` optionally given as second parameter. + var goto = function ( el, duration ) { + + if ( !initialized || !(el = getStep(el)) ) { + // presentation not initialized or given element is not a step + return false; + } + + // Sometimes it's possible to trigger focus on first link with some keyboard action. + // Browser in such a case tries to scroll the page to make this element visible + // (even that body overflow is set to hidden) and it breaks our careful positioning. + // + // So, as a lousy (and lazy) workaround we will make the page scroll back to the top + // whenever slide is selected + // + // If you are reading this and know any better way to handle it, I'll be glad to hear about it! + window.scrollTo(0, 0); + + var step = stepsData["impress-" + el.id]; + + if ( activeStep ) { + activeStep.classList.remove("active"); + body.classList.remove("impress-on-" + activeStep.id); + } + el.classList.add("active"); + + body.classList.add("impress-on-" + el.id); + + // compute target state of the canvas based on given step + var target = { + rotate: { + x: -step.rotate.x, + y: -step.rotate.y, + z: -step.rotate.z + }, + translate: { + x: -step.translate.x, + y: -step.translate.y, + z: -step.translate.z + }, + scale: 1 / step.scale + }; + + // Check if the transition is zooming in or not. + // + // This information is used to alter the transition style: + // when we are zooming in - we start with move and rotate transition + // and the scaling is delayed, but when we are zooming out we start + // with scaling down and move and rotation are delayed. + var zoomin = target.scale >= currentState.scale; + + duration = toNumber(duration, config.transitionDuration); + var delay = (duration / 2); + + // if the same step is re-selected, force computing window scaling, + // because it is likely to be caused by window resize + if (el === activeStep) { + windowScale = computeWindowScale(config); + } + + var targetScale = target.scale * windowScale; + + // trigger leave of currently active element (if it's not the same step again) + if (activeStep && activeStep !== el) { + onStepLeave(activeStep); + } + + // Now we alter transforms of `root` and `canvas` to trigger transitions. + // + // And here is why there are two elements: `root` and `canvas` - they are + // being animated separately: + // `root` is used for scaling and `canvas` for translate and rotations. + // Transitions on them are triggered with different delays (to make + // visually nice and 'natural' looking transitions), so we need to know + // that both of them are finished. + css(root, { + // to keep the perspective look similar for different scales + // we need to 'scale' the perspective, too + transform: perspective( config.perspective / targetScale ) + scale( targetScale ), + transitionDuration: duration + "ms", + transitionDelay: (zoomin ? delay : 0) + "ms" + }); + + css(canvas, { + transform: rotate(target.rotate, true) + translate(target.translate), + transitionDuration: duration + "ms", + transitionDelay: (zoomin ? 0 : delay) + "ms" + }); + + // Here is a tricky part... + // + // If there is no change in scale or no change in rotation and translation, it means there was actually + // no delay - because there was no transition on `root` or `canvas` elements. + // We want to trigger `impress:stepenter` event in the correct moment, so here we compare the current + // and target values to check if delay should be taken into account. + // + // I know that this `if` statement looks scary, but it's pretty simple when you know what is going on + // - it's simply comparing all the values. + if ( currentState.scale === target.scale || + (currentState.rotate.x === target.rotate.x && currentState.rotate.y === target.rotate.y && + currentState.rotate.z === target.rotate.z && currentState.translate.x === target.translate.x && + currentState.translate.y === target.translate.y && currentState.translate.z === target.translate.z) ) { + delay = 0; + } + + // store current state + currentState = target; + activeStep = el; + + // And here is where we trigger `impress:stepenter` event. + // We simply set up a timeout to fire it taking transition duration (and possible delay) into account. + // + // I really wanted to make it in more elegant way. The `transitionend` event seemed to be the best way + // to do it, but the fact that I'm using transitions on two separate elements and that the `transitionend` + // event is only triggered when there was a transition (change in the values) caused some bugs and + // made the code really complicated, cause I had to handle all the conditions separately. And it still + // needed a `setTimeout` fallback for the situations when there is no transition at all. + // So I decided that I'd rather make the code simpler than use shiny new `transitionend`. + // + // If you want learn something interesting and see how it was done with `transitionend` go back to + // version 0.5.2 of impress.js: http://github.com/bartaz/impress.js/blob/0.5.2/js/impress.js + window.clearTimeout(stepEnterTimeout); + stepEnterTimeout = window.setTimeout(function() { + onStepEnter(activeStep); + }, duration + delay); + + return el; + }; + + // `prev` API function goes to previous step (in document order) + var prev = function () { + var prev = steps.indexOf( activeStep ) - 1; + prev = prev >= 0 ? steps[ prev ] : steps[ steps.length-1 ]; + + return goto(prev); + }; + + // `next` API function goes to next step (in document order) + var next = function () { + var next = steps.indexOf( activeStep ) + 1; + next = next < steps.length ? steps[ next ] : steps[ 0 ]; + + return goto(next); + }; + + // Adding some useful classes to step elements. + // + // All the steps that have not been shown yet are given `future` class. + // When the step is entered the `future` class is removed and the `present` + // class is given. When the step is left `present` class is replaced with + // `past` class. + // + // So every step element is always in one of three possible states: + // `future`, `present` and `past`. + // + // There classes can be used in CSS to style different types of steps. + // For example the `present` class can be used to trigger some custom + // animations when step is shown. + root.addEventListener("impress:init", function(){ + // STEP CLASSES + steps.forEach(function (step) { + step.classList.add("future"); + }); + + root.addEventListener("impress:stepenter", function (event) { + event.target.classList.remove("past"); + event.target.classList.remove("future"); + event.target.classList.add("present"); + }, false); + + root.addEventListener("impress:stepleave", function (event) { + event.target.classList.remove("present"); + event.target.classList.add("past"); + }, false); + + }, false); + + // Adding hash change support. + root.addEventListener("impress:init", function(){ + + // last hash detected + var lastHash = ""; + + // `#/step-id` is used instead of `#step-id` to prevent default browser + // scrolling to element in hash. + // + // And it has to be set after animation finishes, because in Chrome it + // makes transtion laggy. + // BUG: http://code.google.com/p/chromium/issues/detail?id=62820 + root.addEventListener("impress:stepenter", function (event) { + window.location.hash = lastHash = "#/" + event.target.id; + }, false); + + window.addEventListener("hashchange", function () { + // When the step is entered hash in the location is updated + // (just few lines above from here), so the hash change is + // triggered and we would call `goto` again on the same element. + // + // To avoid this we store last entered hash and compare. + if (window.location.hash !== lastHash) { + goto( getElementFromHash() ); + } + }, false); + + // START + // by selecting step defined in url or first step of the presentation + goto(getElementFromHash() || steps[0], 0); + }, false); + + body.classList.add("impress-disabled"); + + // store and return API for given impress.js root element + return (roots[ "impress-root-" + rootId ] = { + init: init, + goto: goto, + next: next, + prev: prev + }); + + }; + + // flag that can be used in JS to check if browser have passed the support test + impress.supported = impressSupported; + +})(document, window); + +// NAVIGATION EVENTS + +// As you can see this part is separate from the impress.js core code. +// It's because these navigation actions only need what impress.js provides with +// its simple API. +// +// In future I think about moving it to make them optional, move to separate files +// and treat more like a 'plugins'. +(function ( document, window ) { + 'use strict'; + + // throttling function calls, by Remy Sharp + // http://remysharp.com/2010/07/21/throttling-function-calls/ + var throttle = function (fn, delay) { + var timer = null; + return function () { + var context = this, args = arguments; + clearTimeout(timer); + timer = setTimeout(function () { + fn.apply(context, args); + }, delay); + }; + }; + + // wait for impress.js to be initialized + document.addEventListener("impress:init", function (event) { + // Getting API from event data. + // So you don't event need to know what is the id of the root element + // or anything. `impress:init` event data gives you everything you + // need to control the presentation that was just initialized. + var api = event.detail.api; + + // KEYBOARD NAVIGATION HANDLERS + + // Prevent default keydown action when one of supported key is pressed. + document.addEventListener("keydown", function ( event ) { + if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { + event.preventDefault(); + } + }, false); + + // Trigger impress action (next or prev) on keyup. + + // Supported keys are: + // [space] - quite common in presentation software to move forward + // [up] [right] / [down] [left] - again common and natural addition, + // [pgdown] / [pgup] - often triggered by remote controllers, + // [tab] - this one is quite controversial, but the reason it ended up on + // this list is quite an interesting story... Remember that strange part + // in the impress.js code where window is scrolled to 0,0 on every presentation + // step, because sometimes browser scrolls viewport because of the focused element? + // Well, the [tab] key by default navigates around focusable elements, so clicking + // it very often caused scrolling to focused element and breaking impress.js + // positioning. I didn't want to just prevent this default action, so I used [tab] + // as another way to moving to next step... And yes, I know that for the sake of + // consistency I should add [shift+tab] as opposite action... + document.addEventListener("keyup", function ( event ) { + + if ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ){ + return; + } + + if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { + switch( event.keyCode ) { + case 33: // pg up + case 37: // left + case 38: // up + api.prev(); + break; + case 9: // tab + case 32: // space + case 34: // pg down + case 39: // right + case 40: // down + api.next(); + break; + } + + event.preventDefault(); + } + }, false); + + // delegated handler for clicking on the links to presentation steps + document.addEventListener("click", function ( event ) { + // event delegation with "bubbling" + // check if event target (or any of its parents is a link) + var target = event.target; + while ( (target.tagName !== "A") && + (target !== document.documentElement) ) { + target = target.parentNode; + } + + if ( target.tagName === "A" ) { + var href = target.getAttribute("href"); + + // if it's a link to presentation step, target this step + if ( href && href[0] === '#' ) { + target = document.getElementById( href.slice(1) ); + } + } + + if ( api.goto(target) ) { + event.stopImmediatePropagation(); + event.preventDefault(); + } + }, false); + + // delegated handler for clicking on step elements + document.addEventListener("click", function ( event ) { + var target = event.target; + // find closest step element that is not active + while ( !(target.classList.contains("step") && !target.classList.contains("active")) && + (target !== document.documentElement) ) { + target = target.parentNode; + } + + if ( api.goto(target) ) { + event.preventDefault(); + } + }, false); + + // touch handler to detect taps on the left and right side of the screen + // based on awesome work of @hakimel: https://github.com/hakimel/reveal.js + document.addEventListener("touchstart", function ( event ) { + if (event.touches.length === 1) { + var x = event.touches[0].clientX, + width = window.innerWidth * 0.3, + result = null; + + if ( x < width ) { + result = api.prev(); + } else if ( x > window.innerWidth - width ) { + result = api.next(); + } + + if (result) { + event.preventDefault(); + } + } + }, false); + + // rescale presentation when window is resized + window.addEventListener("resize", throttle(function () { + // force going to active step again, to trigger rescaling + api.goto( document.querySelector(".step.active"), 500 ); + }, 250), false); + + }, false); + +})(document, window); + +// THAT'S ALL FOLKS! +// +// Thanks for reading it all. +// Or thanks for scrolling down and reading the last part. +// +// I've learnt a lot when building impress.js and I hope this code and comments +// will help somebody learn at least some part of it. @@ -1,9 +1,44 @@ -html, body { +/* reset */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { margin: 0; padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } -#visContainer { - position: fixed; - height: 100%; - width: 100%; + +.svgContainer { + height: 70%; +} + +.contentLoader { + position: absolute; + left: 50%; + top: 50%; +} + +h1, h2, h3, h4, h5, h6 { + text-align: center; +} + +.center { + margin-left: auto; + margin-right: auto; +} +.vcenter { + margin-top: auto; + margin-bottom: auto; } @@ -10,53 +10,141 @@ <body> <script src="dep/d3.js" type="text/javascript"></script> <script src="dep/material.min.js"></script> + <script src="dep/impress.js"></script> + <script type="text/javascript"> + var resizeHooks = []; + document.addEventListener("DOMContentLoaded", function() { + impress().init(); + }, false); - <script src="code/weightvis.js" type="text/javascript"></script> + function sizeSlides() { + d3.selectAll(".slide") + .style("width", parseInt(window.innerWidth) * 0.8 + "px") + .style("height", parseInt(window.innerHeight) * 0.8 + "px"); + resizeHooks.forEach(function (hook) { hook(); }); + }; + window.addEventListener("resize", sizeSlides); + document.addEventListener("DOMContentLoaded", sizeSlides); + </script> - <div id="visContainer" /> - <script type="text/javascript"> - var svg = d3.select("#visContainer").append("svg"); - svg - .attr("width", "100%") - .attr("height", "100%"); - svg.append("rect") - .attr("width", "100%") - .attr("height", "100%") - .attr("fill", bgColor); - var visualizer = new Visualizer(svg); + <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> + </div> - var attrFontSize = 20; - function placeAttributes() { - var inputNodes = d3.selectAll(".layer-1")[0]; - var attrs = d3.selectAll(".attribute")[0]; - for (node=0; node<inputNodes.length; node++) { - var iNode = d3.select(inputNodes[node]); - d3.select(attrs[node]) - .attr("x", iNode.attr("cx")) - .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2)); - } - } + <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000"> + <div class="mdl-layout__header"> + <h2>Die Gewichte im Verlauf</h2> + </div> - visualizer.load("data/log.json", function(){ - var attributeNames = - ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"]; - var inputNodes = d3.selectAll(".layer-1")[0]; - for (node=0; node<inputNodes.length; node++) { - var iNode = d3.select(inputNodes[node]); - svg - .append("text") - .attr("class", "attribute") - .attr("text-anchor", "middle") - .attr("font-weight", "bold") - .attr("font-size", attrFontSize + "px") - .attr("pointer-events", "none") // disable hovering - .attr("cursor", "default") - .text(attributeNames[node]); - } - window.addEventListener("resize", placeAttributes, true); - placeAttributes(); - //visualizer.animate(10, 20); - }); - </script> + <div id="visContainer" class="svgContainer"> + <div id="svgLoader" class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active contentLoader"></div> + </div> + <div class="center" style="width: 50%"> + <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="visPlayButton" data-pressed="false" style="float: left;"> + <i class="material-icons" id="visPlay">play_arrow</i> + <i style="display: none" class="material-icons" id="visPause">pause</i> + </button> + <p style="margin-top: 1.4em"> + <input id="visSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="1" value="0" tabindex="0"> + </p> + </div> + + <script src="code/weightvis.js" type="text/javascript"></script> + <script type="text/javascript"> + var thisStep = document.currentScript.parentElement; + + document.addEventListener("DOMContentLoaded", function() { + var svg = d3.select("#visContainer").append("svg").remove(); + svg + .attr("width", "100%") + .attr("height", "100%"); + svg.append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", bgColor); + var visualizer = new Visualizer(svg); + var loaded = false; + + var attrFontSize = 20; + function placeAttributes() { + var inputNodes = d3.selectAll(".layer-1").node(); + var attrs = d3.selectAll(".attribute").node(); + for (node=0; node<inputNodes.length; node++) { + var iNode = d3.select(inputNodes[node]); + d3.select(attrs[node]) + .attr("x", iNode.attr("cx")) + .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2)); + } + } + + visualizer.load("data/log.json", function(){ + d3.select("#svgLoader").remove(); + d3.select("#visContainer").node().appendChild(svg.node()); + var attributeNames = + ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"]; + var inputNodes = d3.selectAll(".layer-1").node(); + for (node=0; node<inputNodes.length; node++) { + var iNode = d3.select(inputNodes[node]); + svg + .append("text") + .attr("class", "attribute") + .attr("text-anchor", "middle") + .attr("font-weight", "bold") + .attr("font-size", attrFontSize + "px") + .attr("pointer-events", "none") // disable hovering + .attr("cursor", "default") + .text(attributeNames[node]); + } + resizeHooks.push(visualizer.reposition); + resizeHooks.push(placeAttributes); + visualizer.hookStepper(function(step) { + d3.select("#visSlider").node().MaterialSlider.change(step); + }); + visualizer.hookStop(function() { + d3.select("#visPlayButton").attr("data-pressed", "false"); + d3.select("#visPlay").style("display", ""); + d3.select("#visPause").style("display", "none"); + var slider = d3.select("#visSlider").node(); + if (slider.value >= slider.max * 0.95) { + slider.MaterialSlider.change(0); // wrap at right end + } + }); + visualizer.reposition(); + placeAttributes(); + var slider = d3.select("#visSlider").attr("max", visualizer.getSteps() - 1); + slider.node().addEventListener("input", function() { + visualizer.showStep(this.value); + }); + d3.select("#visPlayButton").node().addEventListener("click", function() { + var btn = d3.select(this); + if (btn.attr("data-pressed") != "true") { + var step = d3.select("#visSlider").node().value; + visualizer.animate(15, 10, step); + btn.attr("data-pressed", "true"); + d3.select("#visPlay").style("display", "none"); + d3.select("#visPause").style("display", ""); + } else { + visualizer.stopAnimation(); + btn.attr("data-pressed", "false"); + d3.select("#visPlay").style("display", ""); + d3.select("#visPause").style("display", "none"); + } + }); + + loaded = true; + }); + + document.addEventListener("impress:stepenter", function(e) { + if (!loaded || e.target != thisStep) return; + visualizer.animate(10, 20); + }); + }); + </script> + </div> + </div> </body> </html> |