Add basic animation queue, documentation to follow. Update README with new shots.
This commit is contained in:
parent
543cad5228
commit
b90370351d
|
@ -35,7 +35,7 @@ Some code linting practices and security tests can be executed by running the li
|
||||||
### Drawing
|
### Drawing
|
||||||
![Device drawing](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/device.jpg "Drawing on the device")
|
![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
|
### Camera
|
||||||
![Using your camera](https://raw.githubusercontent.com/sexybiggetje/pixdisp/screenshots/camera.jpg "Using your 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")
|
![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.
|
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.
|
||||||
|
|
|
@ -11,6 +11,7 @@ class VMController
|
||||||
this.delta = 0;
|
this.delta = 0;
|
||||||
this.sandbox = {};
|
this.sandbox = {};
|
||||||
this.vm = null;
|
this.vm = null;
|
||||||
|
this.runNextFrame = false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,9 +35,11 @@ class VMController
|
||||||
}
|
}
|
||||||
|
|
||||||
resetSandbox() {
|
resetSandbox() {
|
||||||
|
this.previousTime = this.getTimeData();
|
||||||
let matrixSize = this.driver.getSize();
|
let matrixSize = this.driver.getSize();
|
||||||
|
|
||||||
this.sandbox = {
|
this.sandbox = {
|
||||||
|
'sandbox': {},
|
||||||
'WIDTH': matrixSize.width,
|
'WIDTH': matrixSize.width,
|
||||||
'HEIGHT': matrixSize.height,
|
'HEIGHT': matrixSize.height,
|
||||||
|
|
||||||
|
@ -51,7 +54,8 @@ class VMController
|
||||||
'drawCircle': this.driver.drawCircle.bind( this.driver ),
|
'drawCircle': this.driver.drawCircle.bind( this.driver ),
|
||||||
'write': this.driver.write.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 delta = 0;
|
||||||
let tmd = this.getTimeData();
|
let tmd = this.getTimeData();
|
||||||
|
|
||||||
if ( this.previousTime === 0 ) {
|
|
||||||
this.previousTime = tmd;
|
|
||||||
} else {
|
|
||||||
delta = tmd - this.previousTime;
|
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' );
|
this.vm.run( this.runningVmScript, 'pixdisp-sandbox.js' );
|
||||||
|
|
||||||
|
if ( this.runNextFrame === true ) {
|
||||||
|
this.runNextFrame = false;
|
||||||
|
setTimeout( this.runScript.bind( this ), 1 );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getTimeData() {
|
getTimeData() {
|
||||||
|
@ -85,6 +90,10 @@ class VMController
|
||||||
getDelta() {
|
getDelta() {
|
||||||
return this.delta;
|
return this.delta;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
run() {
|
||||||
|
this.runNextFrame = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.VMController = VMController;
|
exports.VMController = VMController;
|
Loading…
Reference in New Issue