diff options
Diffstat (limited to 'apps/samples/vrml/viewer-webgl.js')
-rw-r--r-- | apps/samples/vrml/viewer-webgl.js | 875 |
1 files changed, 401 insertions, 474 deletions
diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js index e2d3c6c..bc5833b 100644 --- a/apps/samples/vrml/viewer-webgl.js +++ b/apps/samples/vrml/viewer-webgl.js @@ -1,29 +1,11 @@ -// Define the namespace -// var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {}; - -// eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) { -VRMLViewer = function (element, params) { - element.innerHTML = "<div name='vrmlviewer'/>"; - - this.updatePose = function(pose) { - console.log("Updating pose."); - console.log("Pose = " + JSON.stringify(pose, null, 4)); - if (!pose.width) pose.width = self.pose.width; - if (!pose.height) pose.height = self.pose.height; - // this.setScene(this.imagePath, this.imageFormat, pose, this.serverURL); - }; +function VRMLViewer(element, params) { // private attributes var self = this; var batchChanges = false; var webGLManipulatorsSetup = false; - var currWebGLModel = ""; // private instanceId - // if (!eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances) - // eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances = 0; - // this.instanceId = eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances++; - if (!VRMLViewer.instances) VRMLViewer.instances = 0; this.instanceId = VRMLViewer.instances++; @@ -41,8 +23,10 @@ VRMLViewer = function (element, params) { x: 0, y: 0, z: 0, + width: false, + height: false, autorotate: false, - }; + } this.pose = pose; } @@ -51,17 +35,17 @@ VRMLViewer = function (element, params) { this.enableWebGL = true; this.enableSceneshots = false; this.enableDraggables = false; + this.enablePosePublishing = true; this.treeNavigationStyle = true; this.listNavigationStyle = true; this.listDirectory = ""; - this.serverURL = "localhost:8080"; + this.serverURL = "localhost:8082"; + this.webSocketURL = "localhost:8083"; this.imagePath = ""; this.imageFormat = ".png"; this.resRoot = ""; - osg.setNotifyLevel(osg.ERROR); - // copy over values from constructor arguments if (params) { for (var param in params) { @@ -78,6 +62,13 @@ VRMLViewer = function (element, params) { if (!self.pose.height) self.pose.height = self.height; + this.hasWebSockets = ("WebSocket" in window); + + if (self.enablePosePublishing && !self.hasWebSockets) { + console.log("Your browser does not support WebSockets, deactivating pose publishing"); + self.enablePosePublishing = false; + } + var hasWebGL = function() { try { if (!window.WebGLRenderingContext) { @@ -95,17 +86,39 @@ VRMLViewer = function (element, params) { return false; } return false; - }; + } + self.hasWebGL = hasWebGL(); if (self.enableWebGL && !hasWebGL()) { - console.log("Your browser does no support WebGL, falling back to sceneshots"); + console.log("Your browser does not support WebGL, falling back to sceneshots"); self.enableWebGL = false; self.enableSceneshots = true; } - /** - * normalize given parameters - */ + // see http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript + function syntaxHighlight(json) { + if (typeof json != 'string') { + json = JSON.stringify(json, undefined, 2); + } + json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); + return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { + var cls = 'number'; + if (/^"/.test(match)) { + if (/:$/.test(match)) { + cls = 'key'; + } else { + cls = 'string'; + } + } else if (/true|false/.test(match)) { + cls = 'boolean'; + } else if (/null/.test(match)) { + cls = 'null'; + } + return '<span class="' + cls + '">' + match + '</span>'; + }); + } + + // normalize parameters var normalizeParams = function() { // make sure server url begins with protocol and does *not* ends in / if (!self.serverURL.substring(0, 7) == "http://" && @@ -126,18 +139,14 @@ VRMLViewer = function (element, params) { if (!self.imageFormat.substring(0, 1) !== ".") self.imageFormat = "." + self.imageFormat; - }; + } normalizeParams(); - - /** - * Fetch a remote WebGL model and return a future for it - */ + var getWebGLModel = function(url) { - console.log("Loading " + url); if (self.webGLStandby) { self.webGLStandby.show(); } var defer = osgDB.Promise.defer(); var node = new osg.MatrixTransform(); - // node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, [])); + //node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, [])); var loadModel = function(url) { osg.log("loading " + url); var req = new XMLHttpRequest(); @@ -146,36 +155,23 @@ VRMLViewer = function (element, params) { if (req.readyState == 4) { if(req.status == 200) { osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) { - - console.log("Loaded " + url); - - var rotate = []; - osg.Matrix.makeIdentity(rotate); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - - node.setMatrix(rotate); + node.setMatrix(osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); node.addChild(child); defer.resolve(node); osg.log("success " + url); - }); - if (self.webGLStandby) { self.webGLStandby.hide(); } } else { osg.log("error " + url); - if (self.webGLStandby) { self.webGLStandby.hide(); } } + if (self.webGLStandby) { self.webGLStandby.hide(); } } }; req.send(null); }; loadModel(url); return defer.promise; - }; + } - /** - * Concatenate pose as query string - */ var urlSuffixForPose = function(pose) { var queryString = '?width=' + pose.width + @@ -191,16 +187,7 @@ VRMLViewer = function (element, params) { return queryString; }; - /** - * Get relative position of two elements - */ var moverRelativeTo = function(mover, container) { - // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag - var absolutePosition = function(el) { - for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); - return {x: lx,y: ly}; - }; - var containerPos = absolutePosition(container); return { x: mover.x - containerPos.x, @@ -208,59 +195,37 @@ VRMLViewer = function (element, params) { }; }; - var eulerToMatrix = function(pitch, roll, yaw) { - // see http://www.flipcode.com/documents/matrfaq.html#Q36 - var m = osg.Matrix.makeIdentity([]); - - var A = Math.cos(pitch); - var B = Math.sin(pitch); - var C = Math.cos(roll); - var D = Math.sin(roll); - var E = Math.cos(yaw); - var F = Math.sin(yaw); - var AD = A * D; - var BD = B * D; - - osg.Matrix.setRow(m, 0, (C * E), (-C * F), (-D), 0); - osg.Matrix.setRow(m, 1, (-BD * E + A * F), (BD * F + A * E), (-B * C), 0); - osg.Matrix.setRow(m, 2, (AD * E + B * F), (-AD * F + B * E), (A * C), 0); - osg.Matrix.setRow(m, 3, 0, 0, 0, 1); - - return m; - } + // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag + var absolutePosition = function(el) { + for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); + return {x: lx,y: ly}; + }; - var matrixToEuler = function(m) { - // see: http://www.flipcode.com/documents/matrfaq.html#Q37 - var angleX = 0; - var angleZ = 0; - var D = -1 * Math.asin(osg.Matrix.get(m,0,2)); /* Calculate Y-axis angle */ - var angleY = D; - var C = Math.cos(angleY); - - /* Gimbal lock? */ - if (Math.abs(C) > 0.005) { - var tr_x = osg.Matrix.get(m,2,2) / C; /* No, so get X-axis angle */ - var tr_y = -1 * osg.Matrix.get(m,1,2) / C; - angleX = Math.atan2( tr_y, tr_x ); - tr_x = osg.Matrix.get(m,0,0) / C; /* Get Z-axis angle */ - tr_y = -1 * osg.Matrix.get(m,0,1) / C; - angleZ = Math.atan2( tr_y, tr_x ); - } else { - /* Gimball lock has occurred */ - angleX = 0; /* Set X-axis angle to zero */ - var tr_x = osg.Matrix.get(m,1,1); /* And calculate Z-axis angle */ - var tr_y = osg.Matrix.get(m,1,0); - angleZ = Math.atan2( tr_y, tr_x ); + // update the scene + this.updateScene = function() { + if (self.serverURL && self.imagePath && !self.batchChanges) { + console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose)); + if (self.enableWebGL) { + osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) { + self.webGLViewer.setSceneData(model); + if (!webGLManipulatorsSetup) { + self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false); + self.webGLViewer.getManipulator().computeHomePosition(); + } + webGLManipulatorsSetup = true; + }); + } + if (self.enableSceneshots) { + self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose); + if (self.enableMovies && self.movieAddButton) { + // we are showing an image, activate movie controls + self.movieAddButton.domNode.style.display = ""; + self.movieDropDown.domNode.style.display = ""; + } + } } - - /* Clamp all angles to range */ - return { - pitch: angleX % (2 * 3.14159), - roll: angleY % (2 * 3.14159), - yaw: angleZ % (2 * 3.14159) - }; - } - + }; + // get list of supported ffmpeg codecs from server this.populateMovieCodecs = function(server, selectElem) { self.xhr.get({ @@ -288,20 +253,17 @@ VRMLViewer = function (element, params) { codec !== "y41p" && codec !== "yuv4") continue; - // console.log(codec); + //console.log(codec); selectElem.options.push({ label: result.video[codec].longName, value: codec }); if (codec === "mpeg4") selectElem.options[selectElem.options.length - 1].selected = true; } } }); - }; + } // update list of vrml files from server this.refreshServer = function(server, params) { - if (!self.listNavigationStyle && !self.treeNavigationStyle) - return; - self.serverURL = server; if (!params) params = {}; @@ -335,7 +297,7 @@ VRMLViewer = function (element, params) { } }, load: function(result) { -// self.localStorage.put("vrmlServer", self.serverURL, null); +// self.localStorage.put("vrmlServer", self.serverURL, null); if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } if (self.fileStandby) { self.fileStandby.hide(); } @@ -387,132 +349,38 @@ VRMLViewer = function (element, params) { } self.fileListSelect.startup(); } - // self.updateScene(); + //self.updateScene(); } }); }; - this.getPose = function() { - if (self.webGLViewer && self.webGLViewer.getSceneData()) { - var rotate = []; - osg.Matrix.makeIdentity(rotate); - - osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - osg.Matrix.postMult(self.webGLViewer.getSceneData().getMatrix(), rotate); - - var pose = matrixToEuler(rotate); - return pose; - } else { - return { - pitch: self.pose.pitch, - roll: self.pose.roll, - yaw: self.pose.yaw, - } - } - } - - this.setPose = function(pose) { - this.setScene(self.imagePath, self.imageFormat, pose, self.serverURL); - } - - this.setScene = function(imagePath, imageFormat, pose, serverURL) { - + this.setPose = function(imagePath, imageFormat, pose, serverURL) { if (serverURL && serverURL != self.serverURL) { self.refreshServer(serverURL); } - self.imagePath = imagePath; self.imageFormat = imageFormat; + self.pose = pose; - for (var key in pose) { - self.pose[key] = pose[key]; - } + var pitch = (pose.pitch % (2 * 3.14159) + 0.5) * 100; + var roll = (pose.roll % (2 * 3.14159) + 0.5) * 100; + var yaw = (pose.yaw % (2 * 3.14159) + 0.5) * 100; + + var x = ((pose.x / 100) + 0.5) * 100; + var y = ((pose.y / 100) + 0.5) * 100; + + var zoom = (((pose.zoom - 1) / 3) + 0.5) * 100; - self.pose.pitch = (2 * 3.14159 + self.pose.pitch) % (2 * 3.14159); - self.pose.roll = (2 * 3.14159 + self.pose.roll) % (2 * 3.14159); - self.pose.yaw = (2 * 3.14159 + self.pose.yaw) % (2 * 3.14159); - - var pitch = (self.pose.pitch / (2 * 3.14159) + 0.5) * 100; - var roll = (self.pose.roll / (2 * 3.14159) + 0.5) * 100; - var yaw = (self.pose.yaw / (2 * 3.14159) + 0.5) * 100; - var x = ((self.pose.x / 100) + 0.5) * 100; - var y = ((self.pose.y / 100) + 0.5) * 100; - var zoom = (((self.pose.zoom - 1) / 3) + 0.5) * 100; - - // console.log("pitch: " + pitch); - - if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.right = pitch + "%"; - if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.top = roll + "%"; - if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.right = yaw + "%"; - if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.top = zoom + "%"; - if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.right = x + "%"; - if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.top = y + "%"; + self.pitchRollHandlerElem.parentNode.style.right = pitch + "%"; + self.pitchRollHandlerElem.parentNode.style.top = roll + "%"; + self.yawZoomHandlerElem.parentNode.style.right = yaw + "%"; + self.yawZoomHandlerElem.parentNode.style.top = zoom + "%"; + self.xyHandlerElem.parentNode.style.right = x + "%"; + self.xyHandlerElem.parentNode.style.top = y + "%"; self.updateScene(); }; - // update the scene - this.updateScene = function() { - if (self.serverURL && self.imagePath && !self.batchChanges) { - // console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose)); - - if (self.enableWebGL) { - var setWebGLPose = function() { - - // reset camera controls - self.webGLViewer.getManipulator().reset(); - self.webGLViewer.getManipulator().computeHomePosition(); - - var bs = self.webGLViewer.getSceneData().getBound(); - var zoom = 1; //self.pose.zoom || 10; - var eye = [0, 0, bs.radius() * (1.9 * zoom)]; - // var center = bs.center(); - // var up = [1,1,0]; - - self.webGLViewer.getManipulator().setEyePosition(eye); - - // var poseMatrix = eulerToMatrix(self.pose.pitch, self.pose.yaw, -1 * self.pose.roll); - var poseMatrix = eulerToMatrix(self.pose.pitch * -1, self.pose.roll * -1, self.pose.yaw); - - var rotate = []; - osg.Matrix.makeIdentity(rotate); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - osg.Matrix.postMult(poseMatrix, rotate); - - // osg.Matrix.preMult(rotate, poseMatrix); - self.webGLViewer.getSceneData().setMatrix(rotate); - - } - - if (self.imagePath != currWebGLModel) { - currWebGLModel = self.imagePath; - osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) { - self.webGLViewer.setSceneData(model); - if (!webGLManipulatorsSetup) { - self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false); - self.webGLViewer.getManipulator().computeHomePosition(); - } - webGLManipulatorsSetup = true; - setWebGLPose(); - }); - } - if (self.webGLViewer && currWebGLModel == self.imagePath && self.webGLViewer.getSceneData()) { - setWebGLPose(); - } - } - if (self.enableSceneshots) { - self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose); - if (self.enableMovies && self.movieAddButton) { - // we are showing an image, activate movie controls - self.movieAddButton.domNode.style.display = ""; - self.movieDropDown.domNode.style.display = ""; - } - } - } - }; - require(["dojo/dom-construct", "dojo/_base/xhr", "dojo/dom", @@ -662,7 +530,17 @@ VRMLViewer = function (element, params) { self.canvasElem.style.height = self.height; self.canvasElem.width = self.width; self.canvasElem.height = self.height; - + + // osgDB.Promise.when(getWebGLModel('http://localhost:8081/vrml/cranehook/cranehook_bad_convergence/HARD_MP_VAL_013.osgjs')).then(function(model) { + // self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true }); + // self.webGLViewer.init(); + // self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]); + // self.webGLViewer.setSceneData(model); + // self.webGLViewer.setupManipulator(); + // self.webGLViewer.getManipulator().computeHomePosition(); + // self.webGLViewer.run(); + // }); + if (self.webGLViewer === undefined) { self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true }); self.webGLViewer.init(); @@ -677,7 +555,7 @@ VRMLViewer = function (element, params) { // show elements array.forEach(dojo.query(".webGL", element), function(entry, i) { entry.style.display = "inline"; - }); + }) } else { if (self.webGLViewer) { self.webGLViewer.stop(); @@ -685,9 +563,9 @@ VRMLViewer = function (element, params) { // hide elements array.forEach(dojo.query(".webGL", element), function(entry, i) { entry.style.display = "none"; - }); + }) } - }; + } activateWebGL(self.enableWebGL); var activateScreenshot = function(enable) { @@ -700,13 +578,13 @@ VRMLViewer = function (element, params) { entry.style.display = "none"; }); } - }; + } activateScreenshot(self.enableSceneshots); - /** * === POSE MANIPULATION AND RESET ==================== */ + self.resetButtonElem = dojo.query("button.resetButton", element)[0]; self.resetButton = new Button({ label: "Reset", @@ -722,12 +600,12 @@ VRMLViewer = function (element, params) { self.pose.yaw = 0; self.pose.zoom = 1; - if (self.xyHandler) self.xyHandler.node.style.left = 0; - if (self.xyHandler) self.xyHandler.node.style.top = 0; - if (self.pitchRollHandler) self.pitchRollHandler.node.style.left = 0; - if (self.pitchRollHandler) self.pitchRollHandler.node.style.top = 0; - if (self.yawZoomHandler) self.yawZoomHandler.node.style.left = 0; - if (self.yawZoomHandler) self.yawZoomHandler.node.style.top = 0; + self.xyHandler.node.style.left = 0; + self.xyHandler.node.style.top = 0; + self.pitchRollHandler.node.style.left = 0; + self.pitchRollHandler.node.style.top = 0; + self.yawZoomHandler.node.style.left = 0; + self.yawZoomHandler.node.style.top = 0; self.updateScene(); } @@ -847,15 +725,15 @@ VRMLViewer = function (element, params) { // show all draggables array.forEach(dojo.query(".draggable", element), function(entry, i) { entry.style.display = "inline"; - }); + }) } else { // show all draggables array.forEach(dojo.query(".draggable", element), function(entry, i) { entry.style.display = "none"; - }); + }) } - }; + } activateDraggables(self.enableDraggables); /** @@ -889,16 +767,15 @@ VRMLViewer = function (element, params) { array.forEach(dojo.query(".dndHandler", element), function(entry, i) { entry.style.display = "inline"; - }); + }) } else { array.forEach(dojo.query(".dndHandler", element), function(entry, i) { entry.style.display = "none"; - }); + }) } - }; - + } activateDND(self.enableDND); /** @@ -959,10 +836,10 @@ VRMLViewer = function (element, params) { var allItems = self.fileListStore.query(); var foundAt = 0; for (var i = 0; i < allItems.total; i++) { - // console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); + //console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); if (self.serverURL + self.imagePath === allItems[i].url) { foundAt = i; - break; + break } } if (foundAt + 1 < allItems.total) { @@ -980,7 +857,7 @@ VRMLViewer = function (element, params) { entry.style.display = "none"; }); } - }; + } activateListNavigation(self.listNavigationStyle); var activateTreeNavigation = function(enable) { @@ -1032,6 +909,7 @@ VRMLViewer = function (element, params) { return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"}; } } + //return {backgroundImage: "url('" + item.url + "?width=16&height=16')"}; }); self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; @@ -1085,269 +963,318 @@ VRMLViewer = function (element, params) { entry.style.display = "none"; }); } - }; - + } activateTreeNavigation(self.treeNavigationStyle); + if (self.serverURL) { + self.refreshServer(self.serverURL); + self.updateScene(); + } + + + /** + * === Pose Publishing ==================== + */ + + var activatePosePublishing = function(enable) { + if (enable && self.hasWebSockets) { + self.poseWebSocket = new WebSocket(self.webSocketURL); + + self.poseWebSocket.onopen = function(evt) { + foo = 0; + function publishPose() { + foo++; + var viewMatrix = self.webGLViewer.getCamera().getViewMatrix(); + var roundMatrix = []; + for (var i = 0; i < 16; i++) { + roundMatrix[i] = viewMatrix[i].toFixed(5); + if (roundMatrix[i] == -0.0) roundMatrix[i] = 0.0; + } + self.poseWebSocket.send(JSON.stringify(roundMatrix)); + self.messageBox.innerHTML = "<pre>SEND" + syntaxHighlight(roundMatrix) + "</pre>"; + // self.poseWebSocket.send(foo); + // self.messageBox.innerHTML = "<pre>SEND" + foo + "</pre>"; + if (self.enablePosePublishing) { + setTimeout(publishPose, 200); + } + } + self.messageBox.innerHTML = "<pre>Starting</pre>"; + publishPose(); + }; + self.poseWebSocket.onclose = function(evt) { + }; + self.poseWebSocket.onmessage = function(evt) { + var result = JSON.parse(evt.data); + self.messageBox.innerHTML = "<pre>RCVD" + syntaxHighlight(JSON.parse(result.data.content)) + "</pre>"; + }; + self.poseWebSocket.onerror = function(evt) { + }; + } else { + + } + } + activatePosePublishing(self.enablePosePublishing); + /** * === MOVIE DROPDOWN ==================== */ - var activateMovies = function(enable) { - if (enable) { - self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; - self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; - - self.movieDropDownContent = domConst.toDom( - '<div style="overflow: auto; max-height: 420px;"> \ - <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \ - <div class=\"dndArea\" /> \ - </div>' - ); + if (self.enableMovies) { + self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; + self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; + + self.movieDropDownContent = domConst.toDom( + '<div style="overflow: auto; max-height: 420px;"> \ + <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \ + <div class=\"dndArea\" /> \ + </div>' + ); - self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0]; - self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0]; - self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0]; + self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0]; + self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0]; + self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0]; - self.createMovieThumb = function(item, mode) { - if (mode == 'avatar') { - // when dragged - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width = 60; - avatarPose.height = 60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + avatarImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } else { - - // when added to list - var thumb = domConst.toDom("\ - <div>\ - <table><tr><td>\ - <img class=\"movieThumb\"/>\ - <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\ - </td><td align=\"left\">\ - <table><tr>\ - <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\ - <td><div class=\"fillInSeries\" \></td>\ - </tr><tr>\ - <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\ - </tr></table>\ - </td></tr></table>\ - </div>\ - "); - thumb = dojo.query("div", thumb)[0]; - - var thumbImgElem = dojo.query("img.movieThumb", thumb)[0]; - var removeImgElem = dojo.query("img.removeThumb", thumb)[0]; - var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0]; - var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0]; - var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0]; + self.createMovieThumb = function(item, mode) { + if (mode == 'avatar') { + // when dragged + var avatar = dojo.create( 'div', { innerHTML: item.data }); + var avatarPose = dojo.clone(self.pose); + avatarPose.width = 60; + avatarPose.height = 60; + var avatarImgUrl = urlSuffixForPose(avatarPose); + avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; + item.srcEcc = "VRMLViewer"; + item.iconPoseUrl = self.imagePath + avatarImgUrl; + item.imagePath = self.imagePath; + item.serverURL = self.serverURL; + item.pose = avatarPose; + return {node: avatar, data: item, type: item.type}; + } else { - item.getThisAndNeighborsFromDnD = function() { - var thisAndNeighbors = {}; - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - if (obj.data === item) { - thisAndNeighbors.this = { key: key, obj: obj }; - } else { - thisAndNeighbors.before = { key: key, obj: obj }; - } - if (thisAndNeighbors.this) { - thisAndNeighbors.after = { key: key, obj: obj }; - return thisAndNeighbors; - } - }); - return thisAndNeighbors; - }; + // when added to list + var thumb = domConst.toDom("\ + <div>\ + <table><tr><td>\ + <img class=\"movieThumb\"/>\ + <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\ + </td><td align=\"left\">\ + <table><tr>\ + <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\ + <td><div class=\"fillInSeries\" \></td>\ + </tr><tr>\ + <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\ + </tr></table>\ + </td></tr></table>\ + </div>\ + "); + thumb = dojo.query("div", thumb)[0]; - item.relFrameLengthSlider = new HorizontalSlider({ - value: 50, - title: "Relative Duration of Frame", - style: "width:150px;" - }, relFrameLengthElem); - - item.relTransitionLengthSlider = new HorizontalSlider({ - value: 100, - title: "Relative Duration of Transition", - style: "width:150px;" - }, relTransitionLengthElem); + var thumbImgElem = dojo.query("img.movieThumb", thumb)[0]; + var removeImgElem = dojo.query("img.removeThumb", thumb)[0]; + var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0]; + var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0]; + var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0]; - removeImgElem.onclick = function() { - var thisItem = item.getThisAndNeighborsFromDnD(); - if (thisItem.this) { - // haha - what a mess! - self.addToMovieHandler.selectNone(); - self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj; - self.addToMovieHandler.deleteSelectedNodes(); + item.getThisAndNeighborsFromDnD = function() { + var thisAndNeighbors = {}; + self.addToMovieHandler.forInItems(function(obj, key, ctx) { + if (obj.data === item) { + thisAndNeighbors.this = { key: key, obj: obj }; + } else { + thisAndNeighbors.before = { key: key, obj: obj }; } - // disable create button if this was the last one - if (!thisItem.after || !thisItem.before) { - self.movieCreateButton.setAttribute('disabled', true); + if (thisAndNeighbors.this) { + thisAndNeighbors.after = { key: key, obj: obj }; + return thisAndNeighbors; } + }); + return thisAndNeighbors; + }; + + item.relFrameLengthSlider = new HorizontalSlider({ + value: 50, + title: "Relative Duration of Frame", + style: "width:150px;" + }, relFrameLengthElem); + + item.relTransitionLengthSlider = new HorizontalSlider({ + value: 100, + title: "Relative Duration of Transition", + style: "width:150px;" + }, relTransitionLengthElem); + + removeImgElem.onclick = function() { + var thisItem = item.getThisAndNeighborsFromDnD(); + if (thisItem.this) { + // haha - what a mess! + self.addToMovieHandler.selectNone(); + self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj; + self.addToMovieHandler.deleteSelectedNodes(); + } + // disable create button if this was the last one + if (!thisItem.after || !thisItem.before) { + self.movieCreateButton.setAttribute('disabled', true); } + } - item.fillInSeriesButton = new Button({ - label: "Insert Series", - style: "display: none;", - onClick: function(){ - alert("foo"); - } - }, fillInSeriesElem); + item.fillInSeriesButton = new Button({ + label: "Insert Series", + style: "display: none;", + onClick: function(){ + alert("foo"); + } + }, fillInSeriesElem); - removeImgElem.src = self.resRoot + "img/close.png"; + removeImgElem.src = self.resRoot + "img/close.png"; - var thumbPose = dojo.clone(self.pose); - thumbPose.width = self.pose.width / 10; - thumbPose.height = self.pose.height / 10; - var thumbImgUrl = urlSuffixForPose(thumbPose); + var thumbPose = dojo.clone(self.pose); + thumbPose.width = self.pose.width / 10; + thumbPose.height = self.pose.height / 10; + var thumbImgUrl = urlSuffixForPose(thumbPose); - thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl; - // removeImgElem.src = self.resRoot + 'img/close.png'; + thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl; + // removeImgElem.src = self.resRoot + 'img/close.png'; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + thumbImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = thumbPose; + item.srcEcc = "VRMLViewer"; + item.iconPoseUrl = self.imagePath + thumbImgUrl; + item.imagePath = self.imagePath; + item.serverURL = self.serverURL; + item.pose = thumbPose; - return {node: thumb, data: item, type: item.type}; - } - }; + return {node: thumb, data: item, type: item.type}; + } + }; - self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb}); + self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb}); - self.movieFormatSelection = new Selector({ - name: "movieFormat", - style: "width: 320px", - options: [] - }); - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); + self.movieFormatSelection = new Selector({ + name: "movieFormat", + style: "width: 320px", + options: [] + }); + self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} )); - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"})); - self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode); + self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} )); + self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"})); + self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode); - self.movieHeightSpinner = new NumberSpinner({ - value: 400, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); + self.movieHeightSpinner = new NumberSpinner({ + value: 400, + smallDelta: 1, + style: "width: 60px", + constraints: { min:40, places:0 }, + }); - self.movieWidthSpinner = new NumberSpinner({ - value: 600, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); + self.movieWidthSpinner = new NumberSpinner({ + value: 600, + smallDelta: 1, + style: "width: 60px", + constraints: { min:40, places:0 }, + }); - self.movieCreateButton = new Button({ - label: "Create", - disabled: true, - onClick: function(){ + self.movieCreateButton = new Button({ + label: "Create", + disabled: true, + onClick: function(){ - var form = document.createElement("form"); + var form = document.createElement("form"); - form.setAttribute("method", "post"); - form.setAttribute("action", self.serverURL + "/movie"); + form.setAttribute("method", "post"); + form.setAttribute("action", self.serverURL + "/movie"); - var submitData = {}; - submitData.frames = []; - submitData.movieLength = self.movieDurationSpinner.value; - submitData.format = self.movieFormatSelection.value; - submitData.width = self.movieWidthSpinner.value; - submitData.height = self.movieHeightSpinner.value; + var submitData = {}; + submitData.frames = []; + submitData.movieLength = self.movieDurationSpinner.value; + submitData.format = self.movieFormatSelection.value; + submitData.width = self.movieWidthSpinner.value; + submitData.height = self.movieHeightSpinner.value; - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - var jsonData = { - iconPoseUrl: obj.data.iconPoseUrl, - imagePath: obj.data.imagePath, - serverURL: obj.data.serverURL, - pose: obj.data.pose, - relFrameLength: obj.data.relFrameLengthSlider.value, - relTransitionLength: obj.data.relTransitionLengthSlider.value, - } - submitData.frames.push(jsonData); - }); + self.addToMovieHandler.forInItems(function(obj, key, ctx) { + var jsonData = { + iconPoseUrl: obj.data.iconPoseUrl, + imagePath: obj.data.imagePath, + serverURL: obj.data.serverURL, + pose: obj.data.pose, + relFrameLength: obj.data.relFrameLengthSlider.value, + relTransitionLength: obj.data.relTransitionLengthSlider.value, + } + submitData.frames.push(jsonData); + }); - var hiddenField = document.createElement("input"); - hiddenField.setAttribute("type", "hidden"); - hiddenField.setAttribute("name", "data"); - hiddenField.setAttribute("value", JSON.stringify(submitData)); + var hiddenField = document.createElement("input"); + hiddenField.setAttribute("type", "hidden"); + hiddenField.setAttribute("name", "data"); + hiddenField.setAttribute("value", JSON.stringify(submitData)); - form.appendChild(hiddenField); - - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - } - }); + form.appendChild(hiddenField); + + // this will not save the returned binary file + // self.xhr.post({ + // form: form, + // load: function(data){ + // alert("asd"); + // } + // }); + + document.body.appendChild(form); + form.submit(); + document.body.removeChild(form); + } + }); - self.movieDurationSpinner = new NumberSpinner({ - value: 10, - smallDelta: 1, - style: "width: 40px", - constraints: { min:0, places:0 }, - }); + self.movieDurationSpinner = new NumberSpinner({ + value: 10, + smallDelta: 1, + style: "width: 40px", + constraints: { min:0, places:0 }, + }); - // append format duration cell - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} )); - var movieDimensionCell = dojo.create('td'); - movieDimensionCell.appendChild(self.movieWidthSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} )); - movieDimensionCell.appendChild(self.movieHeightSpinner.domNode); - movieDimensionCell.appendChild(self.movieDurationSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} )); - self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell); - - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"})); - self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode); - - - self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent }); - self.movieDropDown = new DropDownButton({ - label: "Movie", - style: "display: none;", - dropDown: self.movieToolTip }); - self.movieDropDownElem.appendChild(self.movieDropDown.domNode); - - self.movieAddButton = new Button({ - label: "+", - style: "margin-left: -10px; display: none;", - onClick: function(){ - if (self.movieFormatSelection.options.length == 0) { - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - } - // we could pass item.data here to creator - self.addToMovieHandler.insertNodes(false, [ { } ]); - self.movieCreateButton.setAttribute('disabled', false); - + // append format duration cell + self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} )); + var movieDimensionCell = dojo.create('td'); + movieDimensionCell.appendChild(self.movieWidthSpinner.domNode); + movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} )); + movieDimensionCell.appendChild(self.movieHeightSpinner.domNode); + movieDimensionCell.appendChild(self.movieDurationSpinner.domNode); + movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} )); + self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell); + + self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"})); + self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode); + + + self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent }); + self.movieDropDown = new DropDownButton({ + label: "Movie", + style: "display: none;", + dropDown: self.movieToolTip }); + self.movieDropDownElem.appendChild(self.movieDropDown.domNode); + + self.movieAddButton = new Button({ + label: "+", + style: "margin-left: -10px; display: none;", + onClick: function(){ + if (self.movieFormatSelection.options.length == 0) { + self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); } - }, self.movieAddButtonElem); - } else { - // remove movie controls - var movieControls = dojo.query("td.movieControls", element)[0]; - movieControls.parentNode.removeChild(movieControls); - } + // we could pass item.data here to creator + self.addToMovieHandler.insertNodes(false, [ { } ]); + self.movieCreateButton.setAttribute('disabled', false); + + } + }, self.movieAddButtonElem); + } else { + // remove movie controls + var movieControls = dojo.query("td.movieControls", element)[0]; + movieControls.parentNode.removeChild(movieControls); } - activateMovies(self.enableMovies); - + // do we have parameters for the initial pose? if(self.params && self.params.pose) - self.setScene(self.params.imagePath, self.params.pose, self.params.serverURL); - - if (self.serverURL) { - self.refreshServer(self.serverURL); - self.updateScene(); - } + self.setPose(self.params.imagePath, self.params.pose, self.params.serverURL); }); }); -}; + +}
\ No newline at end of file |