jos
10 years ago
4 changed files with 493 additions and 479 deletions
Unified View
Diff Options
-
+9 -1index.js
-
+135 -0lib/graph3d/Camera.js
-
+3 -478lib/graph3d/Graph3d.js
-
+346 -0lib/graph3d/Slider.js
+ 9
- 1
index.js
View File
+ 135
- 0
lib/graph3d/Camera.js
View File
| @ -0,0 +1,135 @@ | |||||
| var Point3d = require('./Point3d'); | |||||
| /** | |||||
| * @class Camera | |||||
| * The camera is mounted on a (virtual) camera arm. The camera arm can rotate | |||||
| * The camera is always looking in the direction of the origin of the arm. | |||||
| * This way, the camera always rotates around one fixed point, the location | |||||
| * of the camera arm. | |||||
| * | |||||
| * Documentation: | |||||
| * http://en.wikipedia.org/wiki/3D_projection | |||||
| */ | |||||
| Camera = function () { | |||||
| this.armLocation = new Point3d(); | |||||
| this.armRotation = {}; | |||||
| this.armRotation.horizontal = 0; | |||||
| this.armRotation.vertical = 0; | |||||
| this.armLength = 1.7; | |||||
| this.cameraLocation = new Point3d(); | |||||
| this.cameraRotation = new Point3d(0.5*Math.PI, 0, 0); | |||||
| this.calculateCameraOrientation(); | |||||
| }; | |||||
| /** | |||||
| * Set the location (origin) of the arm | |||||
| * @param {Number} x Normalized value of x | |||||
| * @param {Number} y Normalized value of y | |||||
| * @param {Number} z Normalized value of z | |||||
| */ | |||||
| Camera.prototype.setArmLocation = function(x, y, z) { | |||||
| this.armLocation.x = x; | |||||
| this.armLocation.y = y; | |||||
| this.armLocation.z = z; | |||||
| this.calculateCameraOrientation(); | |||||
| }; | |||||
| /** | |||||
| * Set the rotation of the camera arm | |||||
| * @param {Number} horizontal The horizontal rotation, between 0 and 2*PI. | |||||
| * Optional, can be left undefined. | |||||
| * @param {Number} vertical The vertical rotation, between 0 and 0.5*PI | |||||
| * if vertical=0.5*PI, the graph is shown from the | |||||
| * top. Optional, can be left undefined. | |||||
| */ | |||||
| Camera.prototype.setArmRotation = function(horizontal, vertical) { | |||||
| if (horizontal !== undefined) { | |||||
| this.armRotation.horizontal = horizontal; | |||||
| } | |||||
| if (vertical !== undefined) { | |||||
| this.armRotation.vertical = vertical; | |||||
| if (this.armRotation.vertical < 0) this.armRotation.vertical = 0; | |||||
| if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI; | |||||
| } | |||||
| if (horizontal !== undefined || vertical !== undefined) { | |||||
| this.calculateCameraOrientation(); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Retrieve the current arm rotation | |||||
| * @return {object} An object with parameters horizontal and vertical | |||||
| */ | |||||
| Camera.prototype.getArmRotation = function() { | |||||
| var rot = {}; | |||||
| rot.horizontal = this.armRotation.horizontal; | |||||
| rot.vertical = this.armRotation.vertical; | |||||
| return rot; | |||||
| }; | |||||
| /** | |||||
| * Set the (normalized) length of the camera arm. | |||||
| * @param {Number} length A length between 0.71 and 5.0 | |||||
| */ | |||||
| Camera.prototype.setArmLength = function(length) { | |||||
| if (length === undefined) | |||||
| return; | |||||
| this.armLength = length; | |||||
| // Radius must be larger than the corner of the graph, | |||||
| // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the | |||||
| // graph | |||||
| if (this.armLength < 0.71) this.armLength = 0.71; | |||||
| if (this.armLength > 5.0) this.armLength = 5.0; | |||||
| this.calculateCameraOrientation(); | |||||
| }; | |||||
| /** | |||||
| * Retrieve the arm length | |||||
| * @return {Number} length | |||||
| */ | |||||
| Camera.prototype.getArmLength = function() { | |||||
| return this.armLength; | |||||
| }; | |||||
| /** | |||||
| * Retrieve the camera location | |||||
| * @return {Point3d} cameraLocation | |||||
| */ | |||||
| Camera.prototype.getCameraLocation = function() { | |||||
| return this.cameraLocation; | |||||
| }; | |||||
| /** | |||||
| * Retrieve the camera rotation | |||||
| * @return {Point3d} cameraRotation | |||||
| */ | |||||
| Camera.prototype.getCameraRotation = function() { | |||||
| return this.cameraRotation; | |||||
| }; | |||||
| /** | |||||
| * Calculate the location and rotation of the camera based on the | |||||
| * position and orientation of the camera arm | |||||
| */ | |||||
| Camera.prototype.calculateCameraOrientation = function() { | |||||
| // calculate location of the camera | |||||
| this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical); | |||||
| this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical); | |||||
| this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical); | |||||
| // calculate rotation of the camera | |||||
| this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical; | |||||
| this.cameraRotation.y = 0; | |||||
| this.cameraRotation.z = -this.armRotation.horizontal; | |||||
| }; | |||||
| module.exports = Camera; | |||||
+ 3
- 478
lib/graph3d/Graph3d.js
View File
+ 346
- 0
lib/graph3d/Slider.js
View File
| @ -0,0 +1,346 @@ | |||||
| var util = require('../util'); | |||||
| /** | |||||
| * @constructor Slider | |||||
| * | |||||
| * An html slider control with start/stop/prev/next buttons | |||||
| * @param {Element} container The element where the slider will be created | |||||
| * @param {Object} options Available options: | |||||
| * {boolean} visible If true (default) the | |||||
| * slider is visible. | |||||
| */ | |||||
| function Slider(container, options) { | |||||
| if (container === undefined) { | |||||
| throw 'Error: No container element defined'; | |||||
| } | |||||
| this.container = container; | |||||
| this.visible = (options && options.visible != undefined) ? options.visible : true; | |||||
| if (this.visible) { | |||||
| this.frame = document.createElement('DIV'); | |||||
| //this.frame.style.backgroundColor = '#E5E5E5'; | |||||
| this.frame.style.width = '100%'; | |||||
| this.frame.style.position = 'relative'; | |||||
| this.container.appendChild(this.frame); | |||||
| this.frame.prev = document.createElement('INPUT'); | |||||
| this.frame.prev.type = 'BUTTON'; | |||||
| this.frame.prev.value = 'Prev'; | |||||
| this.frame.appendChild(this.frame.prev); | |||||
| this.frame.play = document.createElement('INPUT'); | |||||
| this.frame.play.type = 'BUTTON'; | |||||
| this.frame.play.value = 'Play'; | |||||
| this.frame.appendChild(this.frame.play); | |||||
| this.frame.next = document.createElement('INPUT'); | |||||
| this.frame.next.type = 'BUTTON'; | |||||
| this.frame.next.value = 'Next'; | |||||
| this.frame.appendChild(this.frame.next); | |||||
| this.frame.bar = document.createElement('INPUT'); | |||||
| this.frame.bar.type = 'BUTTON'; | |||||
| this.frame.bar.style.position = 'absolute'; | |||||
| this.frame.bar.style.border = '1px solid red'; | |||||
| this.frame.bar.style.width = '100px'; | |||||
| this.frame.bar.style.height = '6px'; | |||||
| this.frame.bar.style.borderRadius = '2px'; | |||||
| this.frame.bar.style.MozBorderRadius = '2px'; | |||||
| this.frame.bar.style.border = '1px solid #7F7F7F'; | |||||
| this.frame.bar.style.backgroundColor = '#E5E5E5'; | |||||
| this.frame.appendChild(this.frame.bar); | |||||
| this.frame.slide = document.createElement('INPUT'); | |||||
| this.frame.slide.type = 'BUTTON'; | |||||
| this.frame.slide.style.margin = '0px'; | |||||
| this.frame.slide.value = ' '; | |||||
| this.frame.slide.style.position = 'relative'; | |||||
| this.frame.slide.style.left = '-100px'; | |||||
| this.frame.appendChild(this.frame.slide); | |||||
| // create events | |||||
| var me = this; | |||||
| this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);}; | |||||
| this.frame.prev.onclick = function (event) {me.prev(event);}; | |||||
| this.frame.play.onclick = function (event) {me.togglePlay(event);}; | |||||
| this.frame.next.onclick = function (event) {me.next(event);}; | |||||
| } | |||||
| this.onChangeCallback = undefined; | |||||
| this.values = []; | |||||
| this.index = undefined; | |||||
| this.playTimeout = undefined; | |||||
| this.playInterval = 1000; // milliseconds | |||||
| this.playLoop = true; | |||||
| } | |||||
| /** | |||||
| * Select the previous index | |||||
| */ | |||||
| Slider.prototype.prev = function() { | |||||
| var index = this.getIndex(); | |||||
| if (index > 0) { | |||||
| index--; | |||||
| this.setIndex(index); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Select the next index | |||||
| */ | |||||
| Slider.prototype.next = function() { | |||||
| var index = this.getIndex(); | |||||
| if (index < this.values.length - 1) { | |||||
| index++; | |||||
| this.setIndex(index); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Select the next index | |||||
| */ | |||||
| Slider.prototype.playNext = function() { | |||||
| var start = new Date(); | |||||
| var index = this.getIndex(); | |||||
| if (index < this.values.length - 1) { | |||||
| index++; | |||||
| this.setIndex(index); | |||||
| } | |||||
| else if (this.playLoop) { | |||||
| // jump to the start | |||||
| index = 0; | |||||
| this.setIndex(index); | |||||
| } | |||||
| var end = new Date(); | |||||
| var diff = (end - start); | |||||
| // calculate how much time it to to set the index and to execute the callback | |||||
| // function. | |||||
| var interval = Math.max(this.playInterval - diff, 0); | |||||
| // document.title = diff // TODO: cleanup | |||||
| var me = this; | |||||
| this.playTimeout = setTimeout(function() {me.playNext();}, interval); | |||||
| }; | |||||
| /** | |||||
| * Toggle start or stop playing | |||||
| */ | |||||
| Slider.prototype.togglePlay = function() { | |||||
| if (this.playTimeout === undefined) { | |||||
| this.play(); | |||||
| } else { | |||||
| this.stop(); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Start playing | |||||
| */ | |||||
| Slider.prototype.play = function() { | |||||
| // Test whether already playing | |||||
| if (this.playTimeout) return; | |||||
| this.playNext(); | |||||
| if (this.frame) { | |||||
| this.frame.play.value = 'Stop'; | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Stop playing | |||||
| */ | |||||
| Slider.prototype.stop = function() { | |||||
| clearInterval(this.playTimeout); | |||||
| this.playTimeout = undefined; | |||||
| if (this.frame) { | |||||
| this.frame.play.value = 'Play'; | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Set a callback function which will be triggered when the value of the | |||||
| * slider bar has changed. | |||||
| */ | |||||
| Slider.prototype.setOnChangeCallback = function(callback) { | |||||
| this.onChangeCallback = callback; | |||||
| }; | |||||
| /** | |||||
| * Set the interval for playing the list | |||||
| * @param {Number} interval The interval in milliseconds | |||||
| */ | |||||
| Slider.prototype.setPlayInterval = function(interval) { | |||||
| this.playInterval = interval; | |||||
| }; | |||||
| /** | |||||
| * Retrieve the current play interval | |||||
| * @return {Number} interval The interval in milliseconds | |||||
| */ | |||||
| Slider.prototype.getPlayInterval = function(interval) { | |||||
| return this.playInterval; | |||||
| }; | |||||
| /** | |||||
| * Set looping on or off | |||||
| * @pararm {boolean} doLoop If true, the slider will jump to the start when | |||||
| * the end is passed, and will jump to the end | |||||
| * when the start is passed. | |||||
| */ | |||||
| Slider.prototype.setPlayLoop = function(doLoop) { | |||||
| this.playLoop = doLoop; | |||||
| }; | |||||
| /** | |||||
| * Execute the onchange callback function | |||||
| */ | |||||
| Slider.prototype.onChange = function() { | |||||
| if (this.onChangeCallback !== undefined) { | |||||
| this.onChangeCallback(); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * redraw the slider on the correct place | |||||
| */ | |||||
| Slider.prototype.redraw = function() { | |||||
| if (this.frame) { | |||||
| // resize the bar | |||||
| this.frame.bar.style.top = (this.frame.clientHeight/2 - | |||||
| this.frame.bar.offsetHeight/2) + 'px'; | |||||
| this.frame.bar.style.width = (this.frame.clientWidth - | |||||
| this.frame.prev.clientWidth - | |||||
| this.frame.play.clientWidth - | |||||
| this.frame.next.clientWidth - 30) + 'px'; | |||||
| // position the slider button | |||||
| var left = this.indexToLeft(this.index); | |||||
| this.frame.slide.style.left = (left) + 'px'; | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Set the list with values for the slider | |||||
| * @param {Array} values A javascript array with values (any type) | |||||
| */ | |||||
| Slider.prototype.setValues = function(values) { | |||||
| this.values = values; | |||||
| if (this.values.length > 0) | |||||
| this.setIndex(0); | |||||
| else | |||||
| this.index = undefined; | |||||
| }; | |||||
| /** | |||||
| * Select a value by its index | |||||
| * @param {Number} index | |||||
| */ | |||||
| Slider.prototype.setIndex = function(index) { | |||||
| if (index < this.values.length) { | |||||
| this.index = index; | |||||
| this.redraw(); | |||||
| this.onChange(); | |||||
| } | |||||
| else { | |||||
| throw 'Error: index out of range'; | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * retrieve the index of the currently selected vaue | |||||
| * @return {Number} index | |||||
| */ | |||||
| Slider.prototype.getIndex = function() { | |||||
| return this.index; | |||||
| }; | |||||
| /** | |||||
| * retrieve the currently selected value | |||||
| * @return {*} value | |||||
| */ | |||||
| Slider.prototype.get = function() { | |||||
| return this.values[this.index]; | |||||
| }; | |||||
| Slider.prototype._onMouseDown = function(event) { | |||||
| // only react on left mouse button down | |||||
| var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1); | |||||
| if (!leftButtonDown) return; | |||||
| this.startClientX = event.clientX; | |||||
| this.startSlideX = parseFloat(this.frame.slide.style.left); | |||||
| this.frame.style.cursor = 'move'; | |||||
| // add event listeners to handle moving the contents | |||||
| // we store the function onmousemove and onmouseup in the graph, so we can | |||||
| // remove the eventlisteners lateron in the function mouseUp() | |||||
| var me = this; | |||||
| this.onmousemove = function (event) {me._onMouseMove(event);}; | |||||
| this.onmouseup = function (event) {me._onMouseUp(event);}; | |||||
| util.addEventListener(document, 'mousemove', this.onmousemove); | |||||
| util.addEventListener(document, 'mouseup', this.onmouseup); | |||||
| util.preventDefault(event); | |||||
| }; | |||||
| Slider.prototype.leftToIndex = function (left) { | |||||
| var width = parseFloat(this.frame.bar.style.width) - | |||||
| this.frame.slide.clientWidth - 10; | |||||
| var x = left - 3; | |||||
| var index = Math.round(x / width * (this.values.length-1)); | |||||
| if (index < 0) index = 0; | |||||
| if (index > this.values.length-1) index = this.values.length-1; | |||||
| return index; | |||||
| }; | |||||
| Slider.prototype.indexToLeft = function (index) { | |||||
| var width = parseFloat(this.frame.bar.style.width) - | |||||
| this.frame.slide.clientWidth - 10; | |||||
| var x = index / (this.values.length-1) * width; | |||||
| var left = x + 3; | |||||
| return left; | |||||
| }; | |||||
| Slider.prototype._onMouseMove = function (event) { | |||||
| var diff = event.clientX - this.startClientX; | |||||
| var x = this.startSlideX + diff; | |||||
| var index = this.leftToIndex(x); | |||||
| this.setIndex(index); | |||||
| util.preventDefault(); | |||||
| }; | |||||
| Slider.prototype._onMouseUp = function (event) { | |||||
| this.frame.style.cursor = 'auto'; | |||||
| // remove event listeners | |||||
| util.removeEventListener(document, 'mousemove', this.onmousemove); | |||||
| util.removeEventListener(document, 'mouseup', this.onmouseup); | |||||
| util.preventDefault(); | |||||
| }; | |||||
| module.exports = Slider; | |||||