diff options
author | Stefan Radomski <radomski@tk.informatik.tu-darmstadt.de> | 2014-06-06 17:58:03 (GMT) |
---|---|---|
committer | Stefan Radomski <radomski@tk.informatik.tu-darmstadt.de> | 2014-06-06 17:58:03 (GMT) |
commit | e5a393584b030ac90c4e7abf65063ef72b910555 (patch) | |
tree | bfab1a3c3e4a1c8fc5dc3d27bd1b4f0044901293 /apps | |
parent | 4ecca617e628e94845dafafbdee46ce57f7bc843 (diff) | |
download | uscxml-e5a393584b030ac90c4e7abf65063ef72b910555.zip uscxml-e5a393584b030ac90c4e7abf65063ef72b910555.tar.gz uscxml-e5a393584b030ac90c4e7abf65063ef72b910555.tar.bz2 |
Changed getNames signature from set to list
Diffstat (limited to 'apps')
-rw-r--r-- | apps/samples/vrml/viewer-webgl-setpose.js | 1353 | ||||
-rw-r--r-- | apps/samples/vrml/viewer-webgl.js | 875 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.html | 100 | ||||
-rw-r--r-- | apps/uscxml-browser.cpp | 12 |
4 files changed, 1812 insertions, 528 deletions
diff --git a/apps/samples/vrml/viewer-webgl-setpose.js b/apps/samples/vrml/viewer-webgl-setpose.js new file mode 100644 index 0000000..e2d3c6c --- /dev/null +++ b/apps/samples/vrml/viewer-webgl-setpose.js @@ -0,0 +1,1353 @@ +// 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++; + + // public attribute defaults + this.width = 450; + this.height = 350; + + { + var pose = { + pitch: 0, + roll: 0, + yaw: 0, + zoom: 1, + x: 0, + y: 0, + z: 0, + autorotate: false, + }; + this.pose = pose; + } + + this.enableMovies = false; + this.enableDND = true; + this.enableWebGL = true; + this.enableSceneshots = false; + this.enableDraggables = false; + this.treeNavigationStyle = true; + this.listNavigationStyle = true; + this.listDirectory = ""; + + 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) { + if (self.hasOwnProperty(param)) { + self[param] = params[param]; + } else { + console.log("Unknown paramter " + param); + } + } + } + + if (!self.pose.width) + self.pose.width = self.width; + if (!self.pose.height) + self.pose.height = self.height; + + var hasWebGL = function() { + try { + if (!window.WebGLRenderingContext) { + return false; + } + var canvas = document.createElement("canvas"); + var names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"]; + for (var i = 0; i < 4; i++) { + var gl = canvas.getContext(names[i]); + if (gl) { + return true; + } + } + } catch(e) { + return false; + } + return false; + }; + + if (self.enableWebGL && !hasWebGL()) { + console.log("Your browser does no support WebGL, falling back to sceneshots"); + self.enableWebGL = false; + self.enableSceneshots = true; + } + + /** + * 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://" && + !self.serverURL.substring(0, 8) == "https://") + self.serverURL = "http://" + self.serverURL; + if (!self.serverURL.lastIndexOf("/") === self.serverURL.length) + self.serverURL += self.serverURL.substring(0, self.serverURL - 1); + + // make sure we have a listDirectory with navigation style list ending in / + if (self.modelNavigationStyle === "list" && !self.listDirectory && self.imagePath) + self.listDirectory = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); + if (!self.listDirectory.indexOf("/", self.listDirectory.length - 1) !== -1) + self.listDirectory += "/"; + + // use latest image if none given + if (!self.imagePath) + self.imagePath = self.listDirectory + "latest"; + + 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, [])); + var loadModel = function(url) { + osg.log("loading " + url); + var req = new XMLHttpRequest(); + req.open('GET', url, true); + req.onreadystatechange = function(aEvt) { + 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.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(); } + } + } + }; + req.send(null); + }; + loadModel(url); + return defer.promise; + }; + + /** + * Concatenate pose as query string + */ + var urlSuffixForPose = function(pose) { + var queryString = + '?width=' + pose.width + + '&height=' + pose.height + + '&pitch=' + pose.pitch + + '&roll=' + pose.roll + + '&yaw=' + pose.yaw + + '&x=' + pose.x + + '&y=' + pose.y + + '&z=' + pose.z + + '&zoom=' + pose.zoom + + '&autorotate=' + (pose.autorotate ? '1' : '0'); + 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, + y: mover.y - containerPos.y + }; + }; + + 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; + } + + 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({ + // The URL to request + url: server, + handleAs:"json", + headers:{"X-Requested-With":null}, + load: function(result) { + for (var codec in result.video) { + if (codec !== "mpeg1video" && + codec !== "mpeg2video" && + codec !== "mpeg4" && + codec !== "h264" && + codec !== "ayuv" && + codec !== "flashsv" && + codec !== "flashsv2" && + codec !== "flv" && + codec !== "rv40" && + codec !== "theora" && + codec !== "v210" && + codec !== "v308" && + codec !== "v408" && + codec !== "v410" && + codec !== "wmv3" && + codec !== "y41p" && + codec !== "yuv4") + continue; + // 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 = {}; + if (self.fileStandby) { self.fileStandby.show(); } + + self.xhr.get({ + // The URL to request + url: server, + handleAs:"json", + headers:{"X-Requested-With":null}, + error: function(result) { + + if (self.browseButton) { self.browseButton.setAttribute('label', 'Browse'); } + if (self.fileStandby) { self.fileStandby.hide(); } + + if (!params.skipTree) { + if (self.fileTreeStore) { + var allItems = self.fileTreeStore.query(); + for (var i = 0; i < allItems.total; i++) { + self.fileTreeStore.remove(allItems[i].id); + } + } + } + if (!params.skipList) { + if (self.fileListStore) { + var allItems = self.fileListStore.query(); + for (var i = 0; i < allItems.total; i++) { + self.fileListStore.remove(allItems[i].id); + } + } + } + }, + load: function(result) { +// self.localStorage.put("vrmlServer", self.serverURL, null); + if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } + if (self.fileStandby) { self.fileStandby.hide(); } + + if (self.treeNavigationStyle && !params.skipTree) { + // empty store + var allItems = self.fileTreeStore.query(); + for (var i = 0; i < allItems.total; i++) { + self.fileTreeStore.remove(allItems[i].id); + } + + // parse result as tree + (function fillstore(tree, parentId) { + // todo: respect navigation style + for (key in tree) { + if ('url' in tree[key]) { + self.fileTreeStore.add({id:parentId+key, name:key, url:tree[key].path, parent:parentId}); + } else { + self.fileTreeStore.add({id:parentId+key, name:key, parent:parentId}); + fillstore(tree[key], parentId+key); + } + } + } (result.models, "root", "")); + } + if (self.listNavigationStyle && !params.skipList) { + + // empty store + var allItems = self.fileListStore.query(); + for (var i = 0; i < allItems.total; i++) { + self.fileListStore.remove(allItems[i].id); + } + + // parse result as list + if (!self.listDirectory) + console.log("Requested modelNavigationStyle === list but provided no listDirectory"); + var dirs = self.listDirectory.split("/"); + var models = result.models; + for (var dir in dirs) { + if (!dirs[dir].length) + continue; + if (dirs[dir] in models) { + models = models[dirs[dir]]; + } else { + console.log("No " + dirs[dir] + " in " + models); + } + } + for (var key in models) { + var url = self.serverURL + models[key].path; + self.fileListStore.add({id:key, value:models[key].path, label:key, name:key, url:url}); + } + self.fileListSelect.startup(); + } + // 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) { + + if (serverURL && serverURL != self.serverURL) { + self.refreshServer(serverURL); + } + + self.imagePath = imagePath; + self.imageFormat = imageFormat; + + for (var key in pose) { + self.pose[key] = pose[key]; + } + + 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", + "dojo/on", + "dojo/_base/array", + "dojox/storage", + "dojo/store/Memory", + "dojo/store/Observable", + "dijit/tree/ObjectStoreModel", + "dojo/data/ObjectStore", + "dijit/Tree", + "dijit/form/TextBox", + "dijit/form/Button", + "dojox/widget/Standby", + "dijit/form/DropDownButton", + "dijit/TooltipDialog", + "dojo/dnd/Moveable", + "dojo/ready", + "dojo/dnd/Source", + "dijit/form/HorizontalSlider", + "dijit/form/Select", + "dijit/form/NumberSpinner"], + function(domConst, + xhr, + dom, + on, + array, + storage, + Memory, + Observable, + ObjectStoreModel, + ObjectStore, + Tree, + TextBox, + Button, + Standby, + DropDownButton, + TooltipDialog, + Moveable, + ready, + Source, + HorizontalSlider, + Selector, + NumberSpinner) { + + ready(function() { + + if (typeof(element) === 'string') { + element = dom.byId(element); + } + element.style.height = self.pose.height; + element.style.width = self.pose.width; + + self.element = element; + self.xhr = xhr; + + // establish our dom + element.appendChild(domConst.toDom('\ + <table>\ + <tr>\ + <td valign="top">\ + <div style="position: relative; padding: 0px; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ + <div class="screenShot" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ + <img class="screenShot" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\ + </div>\ + <div class="webGL" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ + <canvas class="webGL" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></canvas>\ + </div>\ + <div style="z-index: -1; position: absolute; right: 45%; top: 45%">\ + <div class="progress"></div>\ + </div>\ + <div style="position: absolute; left: 10px; top: 10px">\ + <table></tr>\ + <td class="treeNavigation filesDropDown" style="vertical-align: middle"></td>\ + <td class="movieControls">\ + <div class="movieDropDown" style="display: inline"></div>\ + <button type="button" class="movieAddButton"></button>\ + </td>\ + <td align="right"><button type="button" class="resetButton"></button></td>\ + <td class="dndHandler" style="vertical-align: middle; padding-top: 4px;"></td>\ + </tr></table>\ + </div>\ + <div style="position: absolute; right: 10px; top: 15%; height: 50%">\ + <div class="zoomSlide"></div>\ + </div>\ + <div class="draggable" style="position: absolute; right: 50%; top: 50%">\ + <div class="pitchRollHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ + <table>\ + <tr>\ + <td><img class="pitchRollHandlerImg" src="' + self.resRoot + 'img/pitchRoll-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ + <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\ + </tr>\ + </table>\ + </div>\ + </div>\ + <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ + <div class="yawZoomHandler">\ + <div style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px; position: absolute; left: -34px;">\ + <table>\ + <tr>\ + <td><img class="yawZoomHandlerImg" src="' + self.resRoot + 'img/yawZoom-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ + <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\ + </tr>\ + </table>\ + </div>\ + </div>\ + </div>\ + <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ + <div class="xyHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ + <table>\ + <tr>\ + <td><img class="xyHandlerImg" src="' + self.resRoot + 'img/xy-handle.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\ + <td><div class="xLabel"></div><div class="yLabel"></div></td>\ + </tr>\ + </table>\ + </div>\ + </div>\ + <div class="listNavigation" style="position: absolute; left: 10px; bottom: 10px">\ + <table></tr>\ + <td style="vertical-align: middle"><button class="prevButton" type="button" /></td>\ + <td style="vertical-align: middle"><div class="fileList" /></td>\ + <td style="vertical-align: middle"><button class="nextButton" type="button" /></td>\ + </tr></table>\ + </div>\ + </div>\ + </td>\ + <td valign="top" height="100%">\ + </td>\ + </tr>\ + <tr>\ + <td colspan="2"><div class="messages"></div></td>\ + </tr>\ + </table>\ + ')); + + // fetch special dom nodes for content + self.messageBox = dojo.query("div.messages", element)[0]; + self.imgElem = dojo.query("img.screenShot", element)[0]; + + /** + * === WebGL ==================== + */ + var activateWebGL = function(enable) { + if (enable) { + self.canvasElem = dojo.query("canvas.webGL", element)[0]; + self.canvasElem.style.width = self.width; + self.canvasElem.style.height = self.height; + self.canvasElem.width = self.width; + self.canvasElem.height = self.height; + + if (self.webGLViewer === undefined) { + 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.setupManipulator(); + self.webGLViewer.run(); + + self.webGLStandby = new Standby({target: self.element }); + self.element.appendChild(self.webGLStandby.domNode); + } + + // show elements + array.forEach(dojo.query(".webGL", element), function(entry, i) { + entry.style.display = "inline"; + }); + } else { + if (self.webGLViewer) { + self.webGLViewer.stop(); + } + // hide elements + array.forEach(dojo.query(".webGL", element), function(entry, i) { + entry.style.display = "none"; + }); + } + }; + activateWebGL(self.enableWebGL); + + var activateScreenshot = function(enable) { + if (enable) { + array.forEach(dojo.query(".screenShot", element), function(entry, i) { + entry.style.display = "inline"; + }); + } else { + array.forEach(dojo.query(".screenShot", element), function(entry, i) { + 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", + onClick: function() { + if (self.webGLViewer) { + self.webGLViewer.setupManipulator(); + self.webGLViewer.getManipulator().computeHomePosition(); + } + self.pose.x = 0; + self.pose.y = 0; + self.pose.pitch = 0; + self.pose.roll = 0; + 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.updateScene(); + } + }, self.resetButtonElem); + + var activateDraggables = function(enable) { + if (enable) { + if (self.pitchRollHandler == undefined) { + self.progressElem = dojo.query("div.progress", element)[0]; + + self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0]; + self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0]; + self.xyHandlerElem = dojo.query(".xyHandler", element)[0]; + + self.pitchRollHandler = new Moveable(self.pitchRollHandlerElem); + self.pitchRollHandler.onMoveStop = function(mover) { + var handlerImg = dojo.query("img.pitchRollHandlerImg", mover.node)[0]; + var pitchLabel = dojo.query("div.pitchLabel", mover.node)[0]; + var rollLabel = dojo.query("div.rollLabel", mover.node)[0]; + pitchLabel.innerHTML = ''; + rollLabel.innerHTML = ''; + self.updateScene(); + }; + self.pitchRollHandler.onMoving = function(mover) { + var handlerImg = dojo.query(".pitchRollHandlerImg", mover.node)[0]; + var pitchLabel = dojo.query(".pitchLabel", mover.node)[0]; + var rollLabel = dojo.query(".rollLabel", mover.node)[0]; + var offset = moverRelativeTo(handlerImg, self.element); + + offset.x += 30; + offset.y += 20; + + self.xyHandlerElem.style.zIndex = 1; + self.yawZoomHandlerElem.style.zIndex = 1; + self.pitchRollHandlerElem.style.zIndex = 2; + + self.pose.roll = offset.x / self.pose.width - 0.5; + self.pose.pitch = offset.y / self.pose.height - 0.5; + self.pose.pitch *= -1; + self.pose.roll *= 2 * 3.14159; + self.pose.pitch *= 2 * 3.14159; + self.pose.roll = Math.ceil((self.pose.roll) * 10) / 10; + self.pose.pitch = Math.ceil((self.pose.pitch) * 10) / 10; + pitchLabel.innerHTML = 'Pitch:' + self.pose.pitch; + rollLabel.innerHTML = 'Roll:' + self.pose.roll; + }; + + self.yawZoomHandler = new Moveable(self.yawZoomHandlerElem); + self.yawZoomHandler.onMoveStop = function(mover) { + var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; + var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; + var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; + yawLabel.innerHTML = ''; + zoomLabel.innerHTML = ''; + self.updateScene(); + }; + self.yawZoomHandler.onMoving = function(mover) { + var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; + var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; + var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; + var offset = moverRelativeTo(handlerImg, self.element); + + offset.x += 7; + offset.y += 9; + + self.xyHandlerElem.style.zIndex = 1; + self.yawZoomHandlerElem.style.zIndex = 2; + self.pitchRollHandlerElem.style.zIndex = 1; + + // self.pose.pitch = self.pose.pitch % (2 * 3.14159); + // self.pose.roll = self.pose.roll % (2 * 3.14159); + self.pose.yaw = (self.pose.width - offset.x) / self.pose.width - 0.5; + self.pose.zoom = offset.y / self.pose.height - 0.5; + self.pose.yaw *= 2 * 3.14159; + self.pose.zoom = self.pose.zoom * 3 + 1; + self.pose.zoom = Math.ceil((self.pose.zoom) * 10) / 10; + self.pose.yaw = Math.ceil((self.pose.yaw) * 10) / 10; + yawLabel.innerHTML = 'Yaw:' + self.pose.yaw; + zoomLabel.innerHTML = 'Zoom:' + self.pose.zoom; + }; + + self.xyHandler = new Moveable(self.xyHandlerElem); + self.xyHandler.onMoveStop = function(mover) { + var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; + var xLabel = dojo.query("div.xLabel", mover.node)[0]; + var yLabel = dojo.query("div.yLabel", mover.node)[0]; + + xLabel.innerHTML = ''; + yLabel.innerHTML = ''; + + self.updateScene(); + }; + self.xyHandler.onMoving = function(mover) { + var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; + var xLabel = dojo.query("div.xLabel", mover.node)[0]; + var yLabel = dojo.query("div.yLabel", mover.node)[0]; + var offset = moverRelativeTo(handlerImg, self.element); + + offset.x += 3; + offset.y += 13; + + self.xyHandlerElem.style.zIndex = 2; + self.yawZoomHandlerElem.style.zIndex = 1; + self.pitchRollHandlerElem.style.zIndex = 1; + + self.pose.x = offset.x / self.pose.width - 0.5; + self.pose.y = offset.y / self.pose.height - 0.5; + self.pose.x *= 100; + self.pose.y *= 100; + self.pose.y = Math.ceil((self.pose.y) * 10) / 10; + self.pose.x = Math.ceil((self.pose.x) * 10) / 10; + xLabel.innerHTML = 'X:' + self.pose.x; + yLabel.innerHTML = 'Y:' + self.pose.y; + }; + } + + // 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); + + /** + * === DRAG HANDLER ==================== + */ + var activateDND = function(enable) { + if (enable) { + self.createAvatar = function(item, mode) { + if (mode == 'avatar') { + // create your avatar if you want + 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.serverURL + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; + item.srcEcc = "VRMLViewer"; + item.iconPoseUrl = self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl; + item.imagePath = self.imagePath; + item.imageFormat = self.imageFormat; + item.serverURL = self.serverURL; + item.pose = avatarPose; + return {node: avatar, data: item, type: item.type}; + } + var handler = dojo.create( 'div', { innerHTML: '<img src="' + self.resRoot + 'img/drag.png" width="20px" />' }); + return {node: handler, data: item, type: item.type}; + }; + + self.dndHandler = new Source(dojo.query("td.dndHandler", element)[0], {copyOnly: true, creator: self.createAvatar}); + self.dndHandler.insertNodes(false, [ { } ]); + + 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); + + /** + * === FILE NAVIGATION ==================== + */ + + var activateListNavigation = function(enable) { + if (enable) { + array.forEach(dojo.query(".listNavigation", element), function(entry, i) { + entry.style.display = "inline"; + }); + + if (!self.fileListStore) { + // setup fileStore + self.fileListStore = new Observable(new Memory({ + data: [], + })); + + self.prevButtonElem = dojo.query("button.prevButton", element)[0]; + self.nextButtonElem = dojo.query("button.nextButton", element)[0]; + self.fileListElem = dojo.query("div.fileList", element)[0]; + + self.fileListSelect = new Selector({ + store: new ObjectStore({ objectStore: self.fileListStore }), + onChange: function(name) { + var item = self.fileListStore.query({ id: name })[0]; + self.imagePath = self.listDirectory + item.name; + self.updateScene(); + } + }, self.fileListElem); + + self.prevButton = new Button({ + label: "<", + onClick: function() { + 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); + if (self.serverURL + self.imagePath === allItems[i].url) { + foundAt = i; + break; + } + } + + if (foundAt > 0) { + self.imagePath = self.listDirectory + allItems[foundAt - 1].name; + self.fileListSelect.attr( 'value', allItems[foundAt - 1].id ); + if (self.serverURL + self.imagePath !== allItems[foundAt - 1].url) + console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt - 1].url); + self.updateScene(); + } + } + }, self.prevButtonElem); + + self.nextButton = new Button({ + label: ">", + onClick: function() { + 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); + if (self.serverURL + self.imagePath === allItems[i].url) { + foundAt = i; + break; + } + } + if (foundAt + 1 < allItems.total) { + self.imagePath = self.listDirectory + allItems[foundAt + 1].name + ".png"; + self.fileListSelect.attr( 'value', allItems[foundAt + 1].id ); + if (self.serverURL + self.imagePath !== allItems[foundAt + 1].url) + console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt + 1].url); + self.updateScene(); + } + } + }, self.nextButtonElem); + } + } else { + array.forEach(dojo.query(".listNavigation", element), function(entry, i) { + entry.style.display = "none"; + }); + } + }; + activateListNavigation(self.listNavigationStyle); + + var activateTreeNavigation = function(enable) { + if (enable) { + + array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { + entry.style.display = ""; + }); + + if (!self.fileTreeStore) { + // setup fileStore + self.fileTreeStore = new Observable(new Memory({ + data: [ { id: 'root', name:'3D Models'} ], + getChildren: function(object){ + return this.query({parent: object.id}); + } + })); + + self.fileTreeModel = new ObjectStoreModel({ + store: self.fileTreeStore, + query: { id: "root" } + }); + + // setup actual tree dijit + self.fileTree = new dijit.Tree({ + id: "fileTree" + self.instanceId, + model: self.fileTreeModel, + persist: false, + showRoot: false, + style: "height: 300px;", + onClick: function(item){ + if ('url' in item) { + self.imagePath = item.url; + var newListDir = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); + if (newListDir.length > 0) + newListDir += '/'; + if (newListDir !== self.listDirectory) { + self.listDirectory = newListDir; + self.refreshServer(self.serverURL, { skipTree: true }); + } + self.updateScene(); + } + }, + getIconClass: function(item, opened) { + return (!item || !('url' in item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"; + }, + getIconStyle: function(item, opened){ + if('url' in item) { + return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"}; + } + } + }); + + self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; + + self.serverBox = new TextBox({ + name: "Server", + value: self.serverURL, + style: "width: 65%", + + onKeyUp: function(e) { + if (self.browseButton) { + if (this.get("value") !== self.serverURL) { + self.browseButton.setAttribute('label', 'Browse'); + } else { + self.browseButton.setAttribute('label', 'Refresh'); + } + } + }, + + onKeyDown: function(e) { + var code = e.keyCode || e.which; + if( code === 13 ) { + e.preventDefault(); + self.refreshServer(this.get("value")); + return false; + } + }, + }); + + self.browseButton = new Button({ + label: "Browse", + onClick: function(){ + self.refreshServer(self.serverBox.get("value")); + } + }); + + self.filesDropDownContent = domConst.toDom('<div />'); + self.filesDropDownContent.appendChild(self.serverBox.domNode); + self.filesDropDownContent.appendChild(self.browseButton.domNode); + self.filesDropDownContent.appendChild(self.fileTree.domNode); + + self.filesToolTip = new TooltipDialog({ content:self.filesDropDownContent, style:"max-height:320px"}); + self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip }); + self.filesDropDownElem.appendChild(self.filesDropDown.domNode); + + self.fileStandby = new Standby({target: self.filesDropDownContent }); + self.filesDropDownContent.appendChild(self.fileStandby.domNode); + } + } else { + array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { + entry.style.display = "none"; + }); + } + }; + + activateTreeNavigation(self.treeNavigationStyle); + + /** + * === 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>' + ); + + 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]; + + 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); + + 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); + + 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); + + 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; + + return {node: thumb, data: item, type: item.type}; + } + }; + + 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.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.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(){ + + var form = document.createElement("form"); + + 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; + + 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)); + + 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 }, + }); + + // 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); + } + } + 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(); + } + + }); + }); + +}; 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 diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html index 1a0732d..7a079df 100644 --- a/apps/samples/vrml/viewer.html +++ b/apps/samples/vrml/viewer.html @@ -79,62 +79,62 @@ enableSceneshots: false, enableDraggables: false, enablePosePublishing: true, - listNavigationStyle: false, - treeNavigationStyle: false, + listNavigationStyle: true, + treeNavigationStyle: true, listDirectory: "/cranehook/cranehook_bad_convergence", imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_001", imageFormat: "png", - serverURL: "http://epikur.local:8008/vrml/", + serverURL: "http://femkit.smartvortex.eu:8086/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; + // 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://femkit.smartvortex.eu:8086/vrml/", + // }); - viewer1.setPose(pose2); - viewer2.setPose(pose2); - - }, 400); - }, 1000); + // 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); }); diff --git a/apps/uscxml-browser.cpp b/apps/uscxml-browser.cpp index cd74154..5d3b389 100644 --- a/apps/uscxml-browser.cpp +++ b/apps/uscxml-browser.cpp @@ -121,9 +121,6 @@ int main(int argc, char** argv) { #endif InterpreterOptions options = InterpreterOptions::fromCmdLine(argc, argv); - if (!options) { - InterpreterOptions::printUsageAndExit(argv[0]); - } // setup logging google::LogToStderr(); @@ -133,6 +130,13 @@ int main(int argc, char** argv) { Factory::setDefaultPluginPath(options.pluginPath); } + if (options.verbose) { + Factory::getInstance()->listComponents(); + } + if (!options) { + InterpreterOptions::printUsageAndExit(argv[0]); + } + // setup HTTP server HTTPServer::SSLConfig* sslConf = NULL; if (options.certificate.length() > 0) { @@ -149,7 +153,7 @@ int main(int argc, char** argv) { } HTTPServer::getInstance(options.httpPort, options.wsPort, sslConf); - + DebuggerServlet* debugger; if (options.withDebugger) { debugger = new DebuggerServlet(); |