Started with xpath datamodel tests

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);