Enable pose publishing via websockets

3 files changed, 114 insertions, 27 deletions

diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js
index 10dbd72..33359b1 100644
--- a/apps/samples/vrml/viewer-webgl.js
+++ b/apps/samples/vrml/viewer-webgl.js
@@ -35,11 +35,13 @@ function VRMLViewer(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 = "";
@@ -59,6 +61,13 @@ function VRMLViewer(element, params) {
     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 {
@@ -78,13 +87,37 @@ function VRMLViewer(element, params) {
     }
     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;
   }
   
+  // 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 /
@@ -937,6 +970,51 @@ function VRMLViewer(element, params) {
           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 ====================
          */
diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html
index 50a2fef..7a1bdb5 100644
--- a/apps/samples/vrml/viewer.html
+++ b/apps/samples/vrml/viewer.html
@@ -78,38 +78,40 @@
          enableWebGL: true,
          enableSceneshots: false,
          enableDraggables: false,
+         enablePosePublishing: true,
          listNavigationStyle: true,
          treeNavigationStyle: true,
          listDirectory: "/hard_mp",
          imagePath: "/hard_mp/HARD_MP_VAL_000",
          imageFormat: "png",
          serverURL: "http://localhost:8082/vrml",
+         webSocketURL: "ws://localhost:8083/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: true,
-					enableDND: false,
-					enableWebGL: false,
-					enableSceneshots: true,
-					enableDraggables: true,
-					listNavigationStyle: true,
-					treeNavigationStyle: true,
-					listDirectory: "/hard_mp",
-					imagePath: "/hard_mp/HARD_MP_VAL_000",
-					imageFormat: "png",
-					serverURL: "http://localhost:8082/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: true,
+				// 	enableDND: false,
+				// 	enableWebGL: false,
+				// 	enableSceneshots: true,
+				// 	enableDraggables: true,
+				// 	listNavigationStyle: true,
+				// 	treeNavigationStyle: true,
+				// 	listDirectory: "/hard_mp",
+				// 	imagePath: "/hard_mp/HARD_MP_VAL_000",
+				// 	imageFormat: "png",
+				// 	serverURL: "http://localhost:8082/vrml"
+				// });
 			});
 		</script>
 	</head>
diff --git a/apps/samples/vrml/vrml-server.scxml b/apps/samples/vrml/vrml-server.scxml
index c71f066..f6dc9dc 100644
--- a/apps/samples/vrml/vrml-server.scxml
+++ b/apps/samples/vrml/vrml-server.scxml
@@ -311,6 +311,13 @@
 				</respond>
 			</transition>
 
+			<transition event="ws.*" target="idle">
+				<script>dump(_event);</script>
+			  <send targetexpr="_event.origin" type="websocket">
+          <content expr="_event" /> <!-- reply with event -->
+			  </send>
+			</transition>
+
 			<transition event="render.done" target="idle">
 				<script>//dump(_event);</script>
 				<respond status="200" to="_event.data.context">