summaryrefslogtreecommitdiffstats
path: root/apps/samples/vrml
diff options
context:
space:
mode:
authorStefan Radomski <radomski@tk.informatik.tu-darmstadt.de>2013-06-10 22:47:14 (GMT)
committerStefan Radomski <radomski@tk.informatik.tu-darmstadt.de>2013-06-10 22:47:14 (GMT)
commit6f56474450b7c54f2c95b5dea6a7a42623141649 (patch)
tree420c52085d8cf778360c09baf9722b21d01259da /apps/samples/vrml
parenta154682fc1b25581742d38dd5fe9aa06ede167b7 (diff)
downloaduscxml-6f56474450b7c54f2c95b5dea6a7a42623141649.zip
uscxml-6f56474450b7c54f2c95b5dea6a7a42623141649.tar.gz
uscxml-6f56474450b7c54f2c95b5dea6a7a42623141649.tar.bz2
W3C MMI Architecture framework
Diffstat (limited to 'apps/samples/vrml')
-rw-r--r--apps/samples/vrml/img/Tutorial.pngbin0 -> 34969 bytes
-rw-r--r--apps/samples/vrml/img/Tutorial.pxmbin0 -> 123387 bytes
-rw-r--r--apps/samples/vrml/img/drag.pngbin0 -> 3543 bytes
-rw-r--r--apps/samples/vrml/img/drag2.pngbin0 -> 509 bytes
-rw-r--r--apps/samples/vrml/img/drag3.pngbin0 -> 186 bytes
-rw-r--r--apps/samples/vrml/img/pitchRoll.pngbin0 -> 913 bytes
-rw-r--r--apps/samples/vrml/img/pitchRoll3.pngbin0 -> 3596 bytes
-rw-r--r--apps/samples/vrml/img/xy.pngbin0 -> 746 bytes
-rw-r--r--apps/samples/vrml/img/xy2.pngbin0 -> 820 bytes
-rw-r--r--apps/samples/vrml/img/yawZoom.pngbin0 -> 2252 bytes
-rw-r--r--apps/samples/vrml/viewer.html33
-rw-r--r--apps/samples/vrml/viewer.js572
12 files changed, 332 insertions, 273 deletions
diff --git a/apps/samples/vrml/img/Tutorial.png b/apps/samples/vrml/img/Tutorial.png
new file mode 100644
index 0000000..7f5a041
--- /dev/null
+++ b/apps/samples/vrml/img/Tutorial.png
Binary files differ
diff --git a/apps/samples/vrml/img/Tutorial.pxm b/apps/samples/vrml/img/Tutorial.pxm
new file mode 100644
index 0000000..682a00c
--- /dev/null
+++ b/apps/samples/vrml/img/Tutorial.pxm
Binary files differ
diff --git a/apps/samples/vrml/img/drag.png b/apps/samples/vrml/img/drag.png
new file mode 100644
index 0000000..b398a3f
--- /dev/null
+++ b/apps/samples/vrml/img/drag.png
Binary files differ
diff --git a/apps/samples/vrml/img/drag2.png b/apps/samples/vrml/img/drag2.png
new file mode 100644
index 0000000..4dfb651
--- /dev/null
+++ b/apps/samples/vrml/img/drag2.png
Binary files differ
diff --git a/apps/samples/vrml/img/drag3.png b/apps/samples/vrml/img/drag3.png
new file mode 100644
index 0000000..467ba6e
--- /dev/null
+++ b/apps/samples/vrml/img/drag3.png
Binary files differ
diff --git a/apps/samples/vrml/img/pitchRoll.png b/apps/samples/vrml/img/pitchRoll.png
new file mode 100644
index 0000000..4f73745
--- /dev/null
+++ b/apps/samples/vrml/img/pitchRoll.png
Binary files differ
diff --git a/apps/samples/vrml/img/pitchRoll3.png b/apps/samples/vrml/img/pitchRoll3.png
new file mode 100644
index 0000000..ede9247
--- /dev/null
+++ b/apps/samples/vrml/img/pitchRoll3.png
Binary files differ
diff --git a/apps/samples/vrml/img/xy.png b/apps/samples/vrml/img/xy.png
new file mode 100644
index 0000000..fe081ee
--- /dev/null
+++ b/apps/samples/vrml/img/xy.png
Binary files differ
diff --git a/apps/samples/vrml/img/xy2.png b/apps/samples/vrml/img/xy2.png
new file mode 100644
index 0000000..2cc3f15
--- /dev/null
+++ b/apps/samples/vrml/img/xy2.png
Binary files differ
diff --git a/apps/samples/vrml/img/yawZoom.png b/apps/samples/vrml/img/yawZoom.png
new file mode 100644
index 0000000..a256b3b
--- /dev/null
+++ b/apps/samples/vrml/img/yawZoom.png
Binary files differ
diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html
index 1e1043b..9838c33 100644
--- a/apps/samples/vrml/viewer.html
+++ b/apps/samples/vrml/viewer.html
@@ -38,16 +38,37 @@
<script type="text/javascript">
require(["dojo/domReady!", "dojo"], function(dom, dojo) {
- var viewer = new VRMLViewer("scene1");
- var annotations = new Annotations("annotations1", { 'viewer': viewer });
+ var viewer = new VRMLViewer("scene1", {
+ "pose": {
+ "pitch" : 0,
+ "roll" : 0,
+ "yaw" : 0,
+ "zoom" : 1,
+ "x" : 0,
+ "y" : 0,
+ "z" : 0,
+ "width" : 400,
+ "height" : 400,
+ "autorotate" : false
+ },
+ "serverURL": "http://smartvortex.tbm.tudelft.nl:8090/vrml",
+ "imageURL": "http://smartvortex.tbm.tudelft.nl:8090/vrml/hook/HARD_MP_VAL_005.png"
+ });
+ var viewer2 = new VRMLViewer("scene2");
+// var annotations = new Annotations("annotations1", { 'viewer': viewer });
});
</script>
</head>
<body class="tundra">
- <table>
- <tr><td>
- <div id="scene1" />
- </td></tr>
+ <table align="center">
+ <tr>
+ <td><br /><br /><br /><br /><br /><br />
+ <div id="scene1" />
+ </td>
+ <td><br /><br /><br /><br /><br /><br />
+ <div id="scene2" />
+ </td>
+ </tr>
<tr><td>
<div id="annotations1"></div>
</td></tr>
diff --git a/apps/samples/vrml/viewer.js b/apps/samples/vrml/viewer.js
index f6f2e42..660a66a 100644
--- a/apps/samples/vrml/viewer.js
+++ b/apps/samples/vrml/viewer.js
@@ -6,10 +6,13 @@ function VRMLViewer(element, params) {
// private instanceId
if (!VRMLViewer.instances)
VRMLViewer.instances = 0;
- var instanceId = VRMLViewer.instances++;
+ this.instanceId = VRMLViewer.instances++;
var batchChanges = false;
// public attributes
+ this.width = 450;
+ this.height = 350;
+
this.pose = {};
this.pose.pitch = 0;
this.pose.roll = 0;
@@ -18,49 +21,142 @@ function VRMLViewer(element, params) {
this.pose.x = 0;
this.pose.y = 0;
this.pose.z = 0;
- this.pose.width = 450;
- this.pose.height = 350;
this.pose.autorotate = false;
-
- this.serverURL = "http://88.69.49.213:8080/vrml";
+ this.serverURL;
this.imageURL;
+
+ this.pose.width = this.width;
+ this.pose.height = this.height;
+
+ this.params = params;
+
+ // privileged public methods
+ this.updateScene = function() {
+ if (self.imageURL && !self.batchChanges) {
+ self.imgElem.src = self.imageURL + urlSuffixForPose(self.pose);
+ }
+ }
+
+ var urlSuffixForPose = function(pose) {
+ var url =
+ '?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 url;
+ }
+
+ 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};
+ }
+
+ this.refreshServer = function(server) {
+ self.serverURL = server;
+ self.localStorage.put("vrmlServer", self.serverURL, null);
+ self.progressElem.appendChild(self.progress.domNode);
+ self.progress.start();
+ self.xhr.get({
+ // The URL to request
+ url: server,
+ handleAs:"json",
+ headers:{"X-Requested-With":null},
+ load: function(result) {
+ self.progress.stop();
+ for (id in self.fileStore.query) {
+ self.fileStore.remove(id);
+ }
+ (function fillstore(tree, parentId) {
+ for (key in tree) {
+ if ('url' in tree[key]) {
+ self.fileStore.add({id:parentId+key, name:key, url:self.serverURL + tree[key].path, parent:parentId});
+ } else {
+ self.fileStore.add({id:parentId+key, name:key, parent:parentId});
+ fillstore(tree[key], parentId+key);
+ }
+ }
+ } (result.models, "root", ""));
+ }
+ });
+ }
+
+ this.setPose = function(imageURL, pose, serverURL) {
+ if (serverURL && serverURL != self.serverURL) {
+ self.refreshServer(serverURL);
+ }
+ self.imageURL = imageURL;
+ 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",
"dojox/storage",
- "dojox/layout/FloatingPane",
"dojo/store/Memory",
"dojo/store/Observable",
"dijit/tree/ObjectStoreModel",
"dijit/Tree",
"dijit/form/TextBox",
"dijit/form/Button",
- "dijit/form/NumberSpinner",
- "dijit/form/VerticalSlider",
- "dijit/form/VerticalRuleLabels",
- "dijit/form/VerticalRule",
- "dijit/form/HorizontalSlider",
"dojox/mobile/ProgressIndicator",
- "dojo/ready"],
+ "dijit/form/DropDownButton",
+ "dijit/TooltipDialog",
+ "dojo/dnd/Moveable",
+ "dojo/ready",
+ "dojo/dnd/Source"],
function(domConst,
xhr,
dom,
+ on,
storage,
- FloatingPane,
Memory,
Observable,
ObjectStoreModel,
Tree,
TextBox,
Button,
- NumberSpinner,
- VerticalSlider,
- VerticalRuleLabels,
- VerticalRule,
- HorizontalSlider,
ProgressIndicator,
- ready) {
+ DropDownButton,
+ TooltipDialog,
+ Moveable,
+ ready,
+ Source) {
ready(function() {
@@ -78,41 +174,54 @@ function VRMLViewer(element, params) {
// establish our dom
element.appendChild(domConst.toDom('\
- <div class="floatPane">\
- <div style="text-align: right"><div class="server" /></div><button type="button" class="browseButton"></button></div>\
- <div style="height: 100%; overflow: auto" class="fileList"></div>\
- </div>\
<table>\
<tr>\
<td valign="top">\
<div style="position: relative; padding: 0px">\
- <img class="model" style="z-index: -1; min-width: ' + self.pose.width + 'px; min-height: ' + self.pose.height + 'px"></img>\
+ <img class="model" src="img/Tutorial.png" style="z-index: -1; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\
<div style="z-index: 1; position: absolute; right: 45%; top: 45%">\
<div class="progress"></div>\
</div>\
- <div style="position: absolute; left: 10px; top: 7%; height: 100%">\
- <div class="pitchSlide"></div>\
+ <div style="position: absolute; left: 10px; top: 10px">\
+ <table></tr>\
+ <td class="browseDropDown" style="vertical-align: middle"></td>\
+ <td align="right"><button type="button" class="resetButton"></button></td>\
+ <td class="dragHandler" 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 style="position: absolute; left: 7%; top: 10px; width: 100%">\
- <div class="rollSlide"></div>\
+ <div style="position: absolute; right: 55%; top: 48%">\
+ <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="img/pitchRoll.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+ <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\
+ </tr>\
+ </table>\
+ </div>\
</div>\
- <div style="position: absolute; left: 7%; bottom: 15px;">\
- <div class="yawSlide"></div>\
+ <div style="position: absolute; right: 45%; top: 48%">\
+ <div class="yawZoomHandler" 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="yawZoomHandlerImg" src="img/yawZoom.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+ <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\
+ </tr>\
+ </table>\
+ </div>\
+ </div>\
+ <div style="position: absolute; right: 50%; top: 58%">\
+ <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="img/xy.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+ <td><div class="xLabel"></div><div class="yLabel"></div></td>\
+ </tr>\
+ </table>\
+ </div>\
</div>\
- <table cellspacing="0" style="position: absolute; right: 5px; bottom: 25px">\
- <tr>\
- <td align="right">x: <input type="text" class="xSpinner"></input></td>\
- </tr>\
- <tr>\
- <td align="right">y: <input type="text" class="ySpinner"></input></td>\
- </tr>\
- <tr>\
- <td align="right"><button type="button" class="resetButton"></button></td>\
- </tr>\
- </table>\
</div>\
</td>\
<td valign="top" height="100%">\
@@ -127,28 +236,127 @@ function VRMLViewer(element, params) {
// fetch special dom nodes for content
self.messageBox = dojo.query("div.messages", element)[0];
self.imgElem = dojo.query("img.model", element)[0];
- self.serverBoxElem = dojo.query("div.server", element)[0];
- self.browseButtonElem = dojo.query("button.browseButton", element)[0];
- self.fileListElem = dojo.query("div.fileList", element)[0];
+ self.browseDropDownElem = dojo.query("td.browseDropDown", element)[0];
self.resetButtonElem = dojo.query("button.resetButton", element)[0];
- self.xSpinnerElem = dojo.query("input.xSpinner", element)[0];
- self.ySpinnerElem = dojo.query("input.ySpinner", element)[0];
- self.pitchSlideElem = dojo.query("div.pitchSlide", element)[0];
- self.rollSlideElem = dojo.query("div.rollSlide", element)[0];
- self.yawSlideElem = dojo.query("div.yawSlide", element)[0];
- self.zoomSlideElem = dojo.query("div.zoomSlide", element)[0];
self.progressElem = dojo.query("div.progress", element)[0];
- self.floatPaneElem = dojo.query("div.floatPane", element)[0];
+ self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0];
+ self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0];
+ self.xyHandlerElem = dojo.query(".xyHandler", element)[0];
- self.floatPane = new FloatingPane({
- title: "VRML Viewer",
- resizable: true, dockable: false, closable: false,
- style: "position:absolute;top:10;left:10;width:250px;height:300px;z-index: 2",
- id: "floatPane",
- }, self.floatPaneElem);
- self.floatPane.startup();
+ 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) {
+ // mover.node.style.backgroundColor = "rgba(255,255,255,0.5)";
+ // mover.node.style.borderRadius = "5px";
+ // mover.node.style.mozBorderRadius = "5px";
+ // mover.node.style.webkitBorderRadius = "5px";
+ 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);
+
+ // self.pose.pitch = self.pose.pitch % (2 * 3.14159);
+ // self.pose.roll = self.pose.roll % (2 * 3.14159);
+ self.pose.roll = offset.x / self.pose.width - 0.5;
+ self.pose.pitch = offset.y / self.pose.height - 0.5;
+ 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);
+
+ // 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);
+
+ 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;
+ }
+
+ 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.imageURL + avatarImgUrl + ' /> ';
+ item.srcEcc = "VRMLViewer";
+ item.iconPoseUrl = self.imageURL + avatarImgUrl;
+ item.imageURL = self.imageURL;
+ item.serverURL = self.serverURL;
+ item.pose = avatarPose;
+ return {node: avatar, data: item, type: item.type};
+ }
+ console.log(item, mode);
+ var handler = dojo.create( 'div', { innerHTML: '<img src="img/drag.png" width="20px" />' });
+ return {node: handler, data: item, type: item.type};
+ };
+
+ self.dragHandler = new Source(dojo.query("td.dragHandler", element)[0], {copyOnly: true, creator: self.createAvatar});
+ self.dragHandler.insertNodes(false, [ { } ]);
+
// setup fileStore for tree list
self.fileStore = new Observable(new Memory({
data: [ { id: 'root', name:'3D Models'} ],
@@ -163,12 +371,12 @@ function VRMLViewer(element, params) {
// setup actual tree dijit
self.fileList = new dijit.Tree({
- id: "fileList",
+ id: "fileList" + self.instanceId,
model: self.fileTreeModel,
persist: false,
showRoot: false,
+ style: "height: 200px;",
onClick: function(item){
- // self.messageBox.innerHTML = '<pre>' + item.url + '?width=200&height=150</pre>' + '<img src="' + item.url + '?width=200&height=150" />';
if ('url' in item) {
self.imageURL = item.url;
self.updateScene();
@@ -184,14 +392,8 @@ function VRMLViewer(element, params) {
}
//return {backgroundImage: "url('" + item.url + "?width=16&height=16')"};
- }).placeAt(self.fileListElem);
- //tree.dndController.singular = true;
-
- var savedServerURL = self.localStorage.get("vrmlServer");
- if (savedServerURL) {
- self.serverURL = savedServerURL;
- }
-
+ });
+
self.serverBox = new TextBox({
name: "Server",
value: self.serverURL,
@@ -205,221 +407,57 @@ function VRMLViewer(element, params) {
return false;
}
},
- }, self.serverBoxElem);
-
-
- self.resetButton = new Button({
- label: "Reset",
- onClick: function(){
- self.xSpinner.set('value',0);
- self.ySpinner.set('value',0);
- self.zSpinner.set('value',0);
- self.pitchSlide.attr('value',0);
- self.rollSlide.attr('value',0);
- self.yawSlide.attr('value',0);
- self.zoomSlide.attr('value',1);
-
- self.floatPane.domNode.style.top = "10px";
- self.floatPane.domNode.style.left = "10px";
-// self.floatPane.startup();
- self.floatPane.show();
- }
- }, self.resetButtonElem);
-
- self.xSpinner = new NumberSpinner({
- value: 0,
- smallDelta: 1,
- constraints: { places:0 },
- style: "width:60px",
- onChange: function(value){
- self.pose.x = value;
- self.updateScene();
- }
- }, self.xSpinnerElem );
-
- self.ySpinner = new NumberSpinner({
- value: 0,
- smallDelta: 1,
- constraints: { places:0 },
- style: "width:60px",
- onChange: function(value){
- self.pose.y = value;
- self.updateScene();
- }
- }, self.ySpinnerElem );
-
- self.zSpinner = new NumberSpinner({
- value: 0,
- smallDelta: 1,
- constraints: { places:0 },
- style: "width:60px",
- onChange: function(value){
- self.pose.z = value;
- self.updateScene();
- }
- }, self.zSpinnerElem );
+ });
self.browseButton = new Button({
label: "Browse",
onClick: function(){
self.refreshServer(self.serverBox.get("value"));
}
- }, self.browseButtonElem);
-
- // add zoom slider
- self.zoomSlide = new VerticalSlider({
- minimum: 0.001,
- showButtons: false,
- maximum: 1,
- value: 1,
- intermediateChanges: false,
- style: "height: 90%",
- onChange: function(value){
- self.pose.zoom = Math.ceil(value * 1000) / 1000;
- self.updateScene();
- }
- }, self.zoomSlideElem);
-
- // add pitch slider
- // Create the rules
- // var rulesNode = dojo.create("div", {}, self.pitchSlideElem, "first");
- // var sliderRules = new VerticalRule({
- // container: "leftDecoration",
- // count: 11,
- // style: "width: 5px;"}, rulesNode);
+ });
- // Create the labels
- // var labelsNode = dojo.create(
- // "div", {}, self.pitchSlideElem, "first");
- // var sliderLabels = new VerticalRuleLabels({
- // labels: ["Pitch", ""],
- // container: "rightDecoration",
- // labelStyle: "-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); padding-left: -3px; font-size: 0.75em"
- // }, labelsNode);
+ self.browseDropDownContent = domConst.toDom('<div />');
+ self.browseDropDownContent.appendChild(self.serverBox.domNode);
+ self.browseDropDownContent.appendChild(self.browseButton.domNode);
+ self.browseDropDownContent.appendChild(self.fileList.domNode);
- self.pitchSlide = new VerticalSlider({
- minimum: 0,
- showButtons: false,
- maximum: 2 * 3.14159,
- value: 0,
- intermediateChanges: false,
- style: "height: 90%",
- onChange: function(value){
- self.pose.pitch = Math.ceil(value * 100) / 100;
- self.updateScene();
- }
- }, self.pitchSlideElem);
+ self.browseToolTip = new TooltipDialog({ content:self.browseDropDownContent, style:"max-height:200px"});
+ self.browseDropDown = new DropDownButton({ label: "Files", dropDown: self.browseToolTip });
+ self.browseDropDownElem.appendChild(self.browseDropDown.domNode);
- // add roll slider
- self.rollSlide = new HorizontalSlider({
- minimum: 0,
- showButtons: false,
- maximum: 2 * 3.14159,
- intermediateChanges: false,
- style: "width: 90%",
- onChange: function(value){
- self.pose.roll = Math.ceil(value * 100) / 100;
- self.updateScene();
- }
- }, self.rollSlideElem);
+ self.resetButton = new Button({
+ label: "Reset",
+ onClick: function(){
+ 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;
- // add yaw slider
- self.yawSlide = new HorizontalSlider({
- minimum: 0,
- showButtons: false,
- maximum: 2 * 3.14159,
- intermediateChanges: false,
- style: "width: 90%",
- onChange: function(value){
- self.pose.yaw = Math.ceil(value * 100) / 100;
self.updateScene();
}
- }, self.yawSlideElem);
-
- })
- });
+ }, self.resetButtonElem);
- // privileged public methods
- this.updateScene = function() {
- if (self.imageURL && !self.batchChanges) {
- self.imgElem.src = self.imageURL +
- '?width=' + self.pose.width +
- '&height=' + self.pose.height +
- '&pitch=' + self.pose.pitch +
- '&roll=' + self.pose.roll +
- '&yaw=' + self.pose.yaw +
- '&x=' + self.pose.x +
- '&y=' + self.pose.y +
- '&z=' + self.pose.z +
- '&zoom=' + self.pose.zoom +
- '&autorotate=' + (self.pose.autorotate ? '1' : '0');
- }
- }
+ // do we have parameters for the initial pose?
+ if(self.params)
+ self.setPose(self.params.imageURL, self.params.pose, self.params.serverURL);
- this.refreshServer = function(server) {
- self.serverURL = server;
- self.localStorage.put("vrmlServer", self.serverURL, null);
- self.progressElem.appendChild(self.progress.domNode);
- self.progress.start();
- self.xhr.get({
- // The URL to request
- url: server,
- handleAs:"json",
- headers:{"X-Requested-With":null},
- load: function(result) {
- self.progress.stop();
- for (id in self.fileStore.query) {
- self.fileStore.remove(id);
+ var savedServerURL = self.localStorage.get("vrmlServer");
+ if (savedServerURL && !self.serverURL) {
+ self.serverURL = savedServerURL;
+ self.refreshServer(savedServerURL);
}
- (function fillstore(tree, parentId) {
- for (key in tree) {
- if ('url' in tree[key]) {
- self.fileStore.add({id:parentId+key, name:key, url:self.serverURL + tree[key].path, parent:parentId});
-// self.messageBox.innerHTML += '<pre>' + self.serverURL + tree[key].path + '</pre>';
-// self.messageBox.innerHTML += '<pre>' + tree[key].url + '?width=200&height=150</pre>' + '<img src="' + tree[key].url + '?width=200&height=150" />';
- } else {
- self.fileStore.add({id:parentId+key, name:key, parent:parentId});
- fillstore(tree[key], parentId+key);
- }
- }
- } (result.models, "root", ""));
- }
- });
- }
- this.setPose = function(imageURL, pose, serverURL) {
- if (serverURL && serverURL != self.serverURL) {
- refreshServer(serverURL);
- }
- self.imageURL = imageURL;
- self.pose = pose;
-
- self.batchChanges = true;
-// self.fileList.set('item', imageURL);
- self.xSpinner.set('value',pose.x);
- self.ySpinner.set('value',pose.y);
- self.zSpinner.set('value',pose.z);
- self.pitchSlide.attr('value',pose.pitch);
- self.rollSlide.attr('value',pose.roll);
- self.yawSlide.attr('value',pose.yaw);
- self.zoomSlide.attr('value',pose.zoom);
- self.batchChanges = false;
- updateScene();
- }
+ })
+ });
-/*
- view = "normal";
- // if (params.view == "maximized") {
- // view = "maximized";
- // }
-
- // if (this.view == "maximized") {
- // this.width = Math.min(element.clientWidth - 150, 800);
- // this.height = (this.width * 3) / 4;
- // } else {
- // this.width = Math.min(element.clientWidth - 50, 800);
- // this.height = (this.width * 3) / 4;
- // }
-*/
}
generated by cgit v0.12 at 2024-07-17 11:25:04 (GMT)