Add basic animation queue, documentation to follow. Update README with new shots.

README.md

@@ -35,7 +35,7 @@ Some code linting practices and security tests can be executed by running the li
 ### Drawing
 ![Device drawing](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/device.jpg "Drawing on the device")
 
-Simple clicking on the canvas in the responsive webinterface makes things light up.
+Simple clicking on the canvas in the responsive webinterface makes things light up, when you press submit it will get sent to the device.
 
 ### Camera
 ![Using your camera](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/camera.jpg "Using your camera")
@@ -46,3 +46,10 @@ The webinterface allows you to capture your camera and submit images from there.
 ![Web interface](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/webui.png "Webinterface")
 
 A simple web interface is included for drawing on the device. Defaults to port 8080.
+
+### Coding
+![Coding](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/animation.jpg "Coding")
+
+[![Demo](http://img.youtube.com/vi/4mPzOF_h1kQ/0.jpg)](http://www.youtube.com/watch?v=4mPzOF_h1kQ)
+
+With an advanced editor you can write simple animations in the browser using a secure sandboxed javascript. Documentation will follow here once the API is final.

controllers/vmcontroller.js

@@ -11,6 +11,7 @@ class VMController
 		this.delta = 0;
 		this.sandbox = {};
 		this.vm = null;
+		this.runNextFrame = false;
 
 	}
 
@@ -34,9 +35,11 @@ class VMController
 	}
 
 	resetSandbox() {
+		this.previousTime = this.getTimeData();
 		let matrixSize = this.driver.getSize();
 
 		this.sandbox = {
+			'sandbox': {},
 			'WIDTH': matrixSize.width,
 			'HEIGHT': matrixSize.height,
 
@@ -51,7 +54,8 @@ class VMController
 			'drawCircle': this.driver.drawCircle.bind( this.driver ),
 			'write': this.driver.write.bind( this.driver ),
 
-			'delta': this.getDelta.bind( this )
+			'delta': this.getDelta.bind( this ),
+			'run': this.run.bind( this )
 		};
 	}
 
@@ -60,17 +64,18 @@ class VMController
 		let delta = 0;
 		let tmd = this.getTimeData();
 
-		if ( this.previousTime === 0 ) {
+		delta = tmd - this.previousTime;
-			this.previousTime = tmd;
-		} else {
-			delta = tmd - this.previousTime;
-			this.previousTime = tmd;
-		}
 
-		this.delta = delta;
+		this.previousTime = tmd;
+
+		this.delta = delta / 1000000;
 
 		this.vm.run( this.runningVmScript, 'pixdisp-sandbox.js' );
 
+		if ( this.runNextFrame === true ) {
+			this.runNextFrame = false;
+			setTimeout( this.runScript.bind( this ), 1 );
+		}
 	}
 
 	getTimeData() {
@@ -85,6 +90,10 @@ class VMController
 	getDelta() {
 		return this.delta;
 	}
+
+	run() {
+		this.runNextFrame = true;
+	}
 }
 
 exports.VMController = VMController;