diff options
Diffstat (limited to 'apps/samples/vrml')
-rw-r--r-- | apps/samples/vrml/viewer-webgl.js | 875 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.html | 89 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.js | 15 |
3 files changed, 543 insertions, 436 deletions
diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js index 33359b1..e2d3c6c 100644 --- a/apps/samples/vrml/viewer-webgl.js +++ b/apps/samples/vrml/viewer-webgl.js @@ -1,11 +1,29 @@ -function VRMLViewer(element, params) { +// 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); + }; // 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++; @@ -23,10 +41,8 @@ function VRMLViewer(element, params) { x: 0, y: 0, z: 0, - width: false, - height: false, autorotate: false, - } + }; this.pose = pose; } @@ -35,17 +51,17 @@ function VRMLViewer(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:8082"; - this.webSocketURL = "localhost:8083"; + this.serverURL = "localhost:8080"; this.imagePath = ""; this.imageFormat = ".png"; this.resRoot = ""; + osg.setNotifyLevel(osg.ERROR); + // copy over values from constructor arguments if (params) { for (var param in params) { @@ -62,13 +78,6 @@ function VRMLViewer(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) { @@ -86,39 +95,17 @@ function VRMLViewer(element, params) { return false; } return false; - } - self.hasWebGL = hasWebGL(); + }; if (self.enableWebGL && !hasWebGL()) { - console.log("Your browser does not support WebGL, falling back to sceneshots"); + console.log("Your browser does no support WebGL, falling back to sceneshots"); self.enableWebGL = false; self.enableSceneshots = true; } - // 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 + /** + * normalize given parameters + */ var normalizeParams = function() { // make sure server url begins with protocol and does *not* ends in / if (!self.serverURL.substring(0, 7) == "http://" && @@ -139,14 +126,18 @@ function VRMLViewer(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(); @@ -155,23 +146,36 @@ function VRMLViewer(element, params) { if (req.readyState == 4) { if(req.status == 200) { osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) { - node.setMatrix(osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); + + 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.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 + @@ -187,7 +191,16 @@ function VRMLViewer(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, @@ -195,37 +208,59 @@ function VRMLViewer(element, params) { }; }; - // 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 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; + } - // 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 = ""; - } - } + 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 ); } - }; - + + /* 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({ @@ -253,17 +288,20 @@ function VRMLViewer(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 = {}; @@ -297,7 +335,7 @@ function VRMLViewer(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(); } @@ -349,38 +387,132 @@ function VRMLViewer(element, params) { } self.fileListSelect.startup(); } - //self.updateScene(); + // self.updateScene(); } }); }; - this.setPose = function(imagePath, imageFormat, pose, serverURL) { + 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) { + if (serverURL && serverURL != self.serverURL) { self.refreshServer(serverURL); } + self.imagePath = imagePath; self.imageFormat = imageFormat; - self.pose = pose; - 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; + for (var key in pose) { + self.pose[key] = pose[key]; + } - 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.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.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", @@ -530,17 +662,7 @@ function VRMLViewer(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(); @@ -555,7 +677,7 @@ function VRMLViewer(element, params) { // show elements array.forEach(dojo.query(".webGL", element), function(entry, i) { entry.style.display = "inline"; - }) + }); } else { if (self.webGLViewer) { self.webGLViewer.stop(); @@ -563,9 +685,9 @@ function VRMLViewer(element, params) { // hide elements array.forEach(dojo.query(".webGL", element), function(entry, i) { entry.style.display = "none"; - }) + }); } - } + }; activateWebGL(self.enableWebGL); var activateScreenshot = function(enable) { @@ -578,13 +700,13 @@ function VRMLViewer(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", @@ -600,12 +722,12 @@ function VRMLViewer(element, params) { self.pose.yaw = 0; self.pose.zoom = 1; - 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; + 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.updateScene(); } @@ -725,15 +847,15 @@ function VRMLViewer(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); /** @@ -767,15 +889,16 @@ function VRMLViewer(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); /** @@ -836,10 +959,10 @@ function VRMLViewer(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) { @@ -857,7 +980,7 @@ function VRMLViewer(element, params) { entry.style.display = "none"; }); } - } + }; activateListNavigation(self.listNavigationStyle); var activateTreeNavigation = function(enable) { @@ -909,7 +1032,6 @@ function VRMLViewer(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]; @@ -963,318 +1085,269 @@ function VRMLViewer(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); + activateTreeNavigation(self.treeNavigationStyle); /** * === MOVIE DROPDOWN ==================== */ - 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>' - ); + 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>' + ); - 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 { + 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]; + // 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]; + 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]; - 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; - }; + 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; + }; - 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); + 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); + 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); - - // 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); - } - }); + form.appendChild(hiddenField); + + 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); + } + // 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); + } + }, 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.setPose(self.params.imagePath, self.params.pose, self.params.serverURL); + self.setScene(self.params.imagePath, self.params.pose, self.params.serverURL); + + if (self.serverURL) { + self.refreshServer(self.serverURL); + self.updateScene(); + } }); }); - -} +}; diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html index 7a1bdb5..1a0732d 100644 --- a/apps/samples/vrml/viewer.html +++ b/apps/samples/vrml/viewer.html @@ -60,7 +60,7 @@ <script type="text/javascript"> require(["dojo/domReady!", "dojo"], function(dom, dojo) { - var viewer = new VRMLViewer("scene1", { + var viewer1 = new VRMLViewer("scene1", { pose: { pitch : 0, roll : 0, @@ -79,40 +79,65 @@ enableSceneshots: false, enableDraggables: false, enablePosePublishing: true, - listNavigationStyle: true, - treeNavigationStyle: true, - listDirectory: "/hard_mp", - imagePath: "/hard_mp/HARD_MP_VAL_000", + listNavigationStyle: false, + treeNavigationStyle: false, + listDirectory: "/cranehook/cranehook_bad_convergence", + imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_001", imageFormat: "png", - serverURL: "http://localhost:8082/vrml", - webSocketURL: "ws://localhost:8083/vrml", + serverURL: "http://epikur.local:8008/vrml/", }); - // var viewer2 = new VRMLViewer("scene2", { - // pose: { - // pitch : 0, - // roll : 0, - // yaw : 0, - // zoom : 1, - // x : 0, - // y : 0, - // z : 0, - // autorotate : true - // }, - // height: 300, - // width: 400, - // enableMovies: true, - // enableDND: false, - // enableWebGL: false, - // enableSceneshots: true, - // enableDraggables: true, - // listNavigationStyle: true, - // treeNavigationStyle: true, - // listDirectory: "/hard_mp", - // imagePath: "/hard_mp/HARD_MP_VAL_000", - // imageFormat: "png", - // serverURL: "http://localhost:8082/vrml" - // }); + + var viewer2 = new VRMLViewer("scene2", { + pose: { + pitch : 0, + roll : 0, + yaw : 0, + zoom : 1, + x : 0, + y : 0, + z : 0, + autorotate : true + }, + height: 300, + width: 400, + enableMovies: false, + enableDND: false, + enableWebGL: false, + enableSceneshots: true, + enableDraggables: false, + enablePosePublishing: true, + listNavigationStyle: false, + treeNavigationStyle: false, + listDirectory: "/cranehook/cranehook_bad_convergence", + imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_000", + imageFormat: "png", + serverURL: "http://epikur.local:8008/vrml/", + }); + + setTimeout(function() { + setInterval(function(){ + var pose1 = viewer1.getPose(); + var pose2 = viewer2.getPose(); + console.log("Pose1 - pitch: " + pose1.pitch + ", roll: " + pose1.roll + ", yaw: " + pose1.yaw); + console.log("Pose2 - pitch: " + pose2.pitch + ", roll: " + pose2.roll + ", yaw: " + pose2.yaw); + + pose1.pitch += 0.1; + pose2.pitch += 0.1; + + pose1.roll += 0.2; + pose2.roll += 0.2; + + pose1.yaw += 0.4; + pose2.yaw += 0.4; + + viewer1.setPose(pose2); + viewer2.setPose(pose2); + + }, 400); + }, 1000); }); + + </script> </head> <body class="tundra"> diff --git a/apps/samples/vrml/viewer.js b/apps/samples/vrml/viewer.js index ed62047..4b59a8c 100644 --- a/apps/samples/vrml/viewer.js +++ b/apps/samples/vrml/viewer.js @@ -141,13 +141,18 @@ function VRMLViewer(element, params) { }); } - this.refreshServer = function(server) { - self.serverURL = server; + this.setServer = function(serverURL) { + if (!serverURL || serverURL == self.serverURL) { + // nothing to do + return; + } + + self.serverURL = serverURL; if (self.fileStandby) { self.fileStandby.show(); } self.xhr.get({ // The URL to request - url: server, + url: serverURL, handleAs:"json", headers:{"X-Requested-With":null}, error: function(result) { @@ -212,6 +217,10 @@ function VRMLViewer(element, params) { }); }; + this.setModel = function(imagePath) { + self.imagePath = imagePath; + } + this.setPose = function(imagePath, pose, serverURL) { if (serverURL && serverURL != self.serverURL) { self.refreshServer(serverURL); |