summaryrefslogtreecommitdiffstats
path: root/apps/samples/vrml/viewer-webgl.js
diff options
context:
space:
mode:
authorStefan Radomski <github@mintwerk.de>2016-05-12 13:12:33 (GMT)
committerStefan Radomski <github@mintwerk.de>2016-05-12 13:12:33 (GMT)
commitb62e7979600feee23dc7cdb61042a8fc7673122b (patch)
treef7351372f37979dd2d048e0b68a16a4cd3b2aadb /apps/samples/vrml/viewer-webgl.js
parent1b11b310be61e51b3ac5ebb83f7c8a33aef3d6e8 (diff)
downloaduscxml-b62e7979600feee23dc7cdb61042a8fc7673122b.zip
uscxml-b62e7979600feee23dc7cdb61042a8fc7673122b.tar.gz
uscxml-b62e7979600feee23dc7cdb61042a8fc7673122b.tar.bz2
Major Refactoring v2.0
Diffstat (limited to 'apps/samples/vrml/viewer-webgl.js')
-rw-r--r--apps/samples/vrml/viewer-webgl.js1290
1 files changed, 0 insertions, 1290 deletions
diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js
deleted file mode 100644
index 19a589f..0000000
--- a/apps/samples/vrml/viewer-webgl.js
+++ /dev/null
@@ -1,1290 +0,0 @@
-// Define the namespace
-var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {};
-
-eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) {
-
- console.log(params);
-
- // private attributes
- var self = this;
- var batchChanges = false;
- var webGLManipulatorsSetup = false;
-
- // private instanceId
- // if (!VRMLViewer.instances)
- // VRMLViewer.instances = 0;
- // this.instanceId = VRMLViewer.instances++;
-
- // 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++;
-
- // 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,
- width: false,
- height: false,
- autorotate: false,
- }
- this.pose = pose;
- }
-
- this.enableMovies = false;
- this.enableDND = true;
- 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.imagePath = "";
- this.imageFormat = ".png";
- this.resRoot = "";
-
- // 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;
-
- 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) {
- 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;
- }
- self.hasWebGL = hasWebGL();
-
- if (self.enableWebGL && !hasWebGL()) {
- console.log("Your browser does not 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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
- 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://" &&
- !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();
-
- var getWebGLModel = function(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) {
- node.setMatrix(osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
- node.addChild(child);
- defer.resolve(node);
- osg.log("success " + url);
- });
- } else {
- osg.log("error " + url);
- }
- if (self.webGLStandby) { self.webGLStandby.hide(); }
- }
- };
- req.send(null);
- };
- loadModel(url);
- return defer.promise;
- }
-
- 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;
- };
-
- var moverRelativeTo = function(mover, container) {
- var containerPos = absolutePosition(container);
- return {
- x: mover.x - containerPos.x,
- y: mover.y - containerPos.y
- };
- };
-
- // 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};
- };
-
- // 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 = "";
- }
- }
- }
- };
-
- // 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) {
- 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.setPose = 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;
-
- 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();
- };
-
- 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;
-
- // 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();
- 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;
-
- 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();
- }
- }, 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')"};
- }
- }
- //return {backgroundImage: "url('" + item.url + "?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);
-
- 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 ====================
- */
-
- 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.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);
-
- // 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 },
- });
-
- // 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);
- }
-
- // 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);
-
- });
- });
-
-
-} \ No newline at end of file