diff options
author | Stefan Radomski <radomski@tk.informatik.tu-darmstadt.de> | 2013-04-19 22:28:19 (GMT) |
---|---|---|
committer | Stefan Radomski <radomski@tk.informatik.tu-darmstadt.de> | 2013-04-19 22:28:19 (GMT) |
commit | 26609f8b8097b21e952835e7064bc938c8542d93 (patch) | |
tree | 7c46a7329b3a9be8a02bf7f7c53ede098b853751 /apps | |
parent | 8101d4c77c6babf125dbe8d4a40f1b2a72a70376 (diff) | |
download | uscxml-26609f8b8097b21e952835e7064bc938c8542d93.zip uscxml-26609f8b8097b21e952835e7064bc938c8542d93.tar.gz uscxml-26609f8b8097b21e952835e7064bc938c8542d93.tar.bz2 |
Started with xpath datamodel tests
Diffstat (limited to 'apps')
-rw-r--r-- | apps/samples/vrml/viewer.css | 157 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.html | 5 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.js | 63 |
3 files changed, 202 insertions, 23 deletions
diff --git a/apps/samples/vrml/viewer.css b/apps/samples/vrml/viewer.css new file mode 100644 index 0000000..089d29a --- /dev/null +++ b/apps/samples/vrml/viewer.css @@ -0,0 +1,157 @@ +/* Progress Indicator */ +.mblProgressIndicator { + position: relative; + top: 0px; +} +.mblHeading .mblProgressIndicator { + margin: 5px; + float: left; +} +.mblProgContainer { + position: absolute; + width: 100%; + height: 100%; +} +.mblProgressIndicatorCenter { + position: absolute; + top: 180px; + left: 50%; +} +.mblProgressIndicatorCenter .mblProgContainer { + left: -50%; + -webkit-transform-origin: 50% 0; + -moz-transform-origin: 50% 0; +} +.mblProg { + position: absolute; + left: 2px; + top: 0px; + width: 11px; + font-size: 1px; + height: 4px; + overflow: hidden; + -webkit-transform-origin: 0 2px; + -moz-transform-origin: 0 2px; + background-color: #c0c0c0; + border-radius: 2px; +} +.mblProg0 { + -webkit-transform: translate(18px, 10px) rotate(-90.1deg); + -moz-transform: translate(18px, 10px) rotate(-90.1deg); +} +.mblProg1 { + -webkit-transform: translate(22px, 11px) rotate(-60deg); + -moz-transform: translate(22px, 11px) rotate(-60deg); +} +.mblProg2 { + -webkit-transform: translate(25px, 14px) rotate(-30deg); + -moz-transform: translate(25px, 14px) rotate(-30deg); +} +.mblProg3 { + -webkit-transform: translate(26px, 18px) rotate(0deg); + -moz-transform: translate(26px, 18px) rotate(0deg); +} +.mblProg4 { + -webkit-transform: translate(25px, 22px) rotate(30deg); + -moz-transform: translate(25px, 22px) rotate(30deg); +} +.mblProg5 { + -webkit-transform: translate(22px, 25px) rotate(60deg); + -moz-transform: translate(22px, 25px) rotate(60deg); +} +.mblProg6 { + -webkit-transform: translate(18px, 26px) rotate(90.1deg); + -moz-transform: translate(18px, 26px) rotate(90.1deg); +} +.mblProg7 { + -webkit-transform: translate(14px, 25px) rotate(120deg); + -moz-transform: translate(14px, 25px) rotate(120deg); +} +.mblProg8 { + -webkit-transform: translate(11px, 22px) rotate(150deg); + -moz-transform: translate(11px, 22px) rotate(150deg); +} +.mblProg9 { + -webkit-transform: translate(10px, 18px) rotate(180deg); + -moz-transform: translate(10px, 18px) rotate(180deg); +} +.mblProg10 { + -webkit-transform: translate(11px, 14px) rotate(210deg); + -moz-transform: translate(11px, 14px) rotate(210deg); +} +.mblProg11 { + -webkit-transform: translate(14px, 11px) rotate(240deg); + -moz-transform: translate(14px, 11px) rotate(240deg); +} +.mblProg0Color { + background-color: #c0c0c0; +} +.mblProg1Color { + background-color: #c0c0c0; +} +.mblProg2Color { + background-color: #c0c0c0; +} +.mblProg3Color { + background-color: #c0c0c0; +} +.mblProg4Color { + background-color: #c0c0c0; +} +.mblProg5Color { + background-color: #c0c0c0; +} +.mblProg6Color { + background-color: #b8b9b8; +} +.mblProg7Color { + background-color: #aeafae; +} +.mblProg8Color { + background-color: #a4a5a4; +} +.mblProg9Color { + background-color: #9a9a9a; +} +.mblProg10Color { + background-color: #8e8e8e; +} +.mblProg11Color { + background-color: #838383; +} +.mblProgWhite .mblProg0Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg1Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg2Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg3Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg4Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg5Color { + background-color: #adb9c9; +} +.mblProgWhite .mblProg6Color { + background-color: #acb9cb; +} +.mblProgWhite .mblProg7Color { + background-color: #b7c2d2; +} +.mblProgWhite .mblProg8Color { + background-color: #c4cdda; +} +.mblProgWhite .mblProg9Color { + background-color: #d1d8e2; +} +.mblProgWhite .mblProg10Color { + background-color: #dee3ea; +} +.mblProgWhite .mblProg11Color { + background-color: #eceff3; +} diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html index 977eeeb..52b0f66 100644 --- a/apps/samples/vrml/viewer.html +++ b/apps/samples/vrml/viewer.html @@ -5,12 +5,13 @@ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/FloatingPane.css"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/ResizeHandle.css"> + <link rel="stylesheet" href="viewer.css"> <style type="text/css"> .alternateDock { position:absolute; - background-color:#ededed; - right:0px; top:0px; + background-color:#ededed; + right:0px; top:0px; border-left:1px solid #ccc; height:100%; diff --git a/apps/samples/vrml/viewer.js b/apps/samples/vrml/viewer.js index dedeb44..c897917 100644 --- a/apps/samples/vrml/viewer.js +++ b/apps/samples/vrml/viewer.js @@ -41,6 +41,7 @@ function VRMLViewer(element, params) { "dijit/form/VerticalRuleLabels", "dijit/form/VerticalRule", "dijit/form/HorizontalSlider", + "dojox/mobile/ProgressIndicator", "dojo/ready"], function(domConst, xhr, @@ -58,19 +59,23 @@ function VRMLViewer(element, params) { VerticalRuleLabels, VerticalRule, HorizontalSlider, + ProgressIndicator, ready) { + ready(function() { if (typeof(element) === 'string') { element = dom.byId(element); } + self.element = element; self.xhr = xhr; + self.progress = new ProgressIndicator({size:40, center:false}); self.localStorage = dojox.storage.manager.getProvider(); self.localStorage.initialize(); // establish our dom element.appendChild(domConst.toDom('\ - <div id="floatPane">\ + <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>\ @@ -79,6 +84,9 @@ function VRMLViewer(element, params) { <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>\ + <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>\ @@ -127,13 +135,15 @@ function VRMLViewer(element, params) { 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.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", - }, dojo.byId("floatPane")); + }, self.floatPaneElem); self.floatPane.startup(); // setup fileStore for tree list @@ -206,7 +216,9 @@ function VRMLViewer(element, params) { self.yawSlide.attr('value',0); self.zoomSlide.attr('value',1); - self.floatPane.startup(); + self.floatPane.domNode.style.top = "10px"; + self.floatPane.domNode.style.left = "10px"; +// self.floatPane.startup(); self.floatPane.show(); } }, self.resetButtonElem); @@ -344,32 +356,41 @@ function VRMLViewer(element, params) { 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) { - (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}); + // 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}); // 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", "")); - } + } else { + self.fileStore.add({id:parentId+key, name:key, parent:parentId}); + fillstore(tree[key], parentId+key); + } + } + } (result.models, "root", "")); + } }); } - this.setPose = function(imageURL, pose) { + 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); |