From ad75ed68b80a32c1d9554eccc58e3db00dd657ac Mon Sep 17 00:00:00 2001 From: Stefan Radomski Date: Fri, 31 Jan 2014 15:37:58 +0100 Subject: Enable pose publishing via websockets --- apps/samples/vrml/viewer-webgl.js | 82 ++++++++++++++++++++++++++++++++++++- apps/samples/vrml/viewer.html | 52 ++++++++++++----------- apps/samples/vrml/vrml-server.scxml | 7 ++++ 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, '&').replace(//g, '>'); + 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 '' + match + ''; + }); + } + // 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 = "
SEND" + syntaxHighlight(roundMatrix) + "
"; + // self.poseWebSocket.send(foo); + // self.messageBox.innerHTML = "
SEND" + foo + "
"; + if (self.enablePosePublishing) { + setTimeout(publishPose, 200); + } + } + self.messageBox.innerHTML = "
Starting
"; + publishPose(); + }; + self.poseWebSocket.onclose = function(evt) { + }; + self.poseWebSocket.onmessage = function(evt) { + var result = JSON.parse(evt.data); + self.messageBox.innerHTML = "
RCVD" + syntaxHighlight(JSON.parse(result.data.content)) + "
"; + }; + 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" + // }); }); 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 @@ + + + + + + + -- cgit v0.12