Merge pull request #30 from guilhermelawless/develop

Fix continuous map updates
RobotWebTools · Feb 29, 2016 · 3029145 · 3029145
2 parents 861eec1 + 46f9c24
commit 3029145
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 12 deletions.
diff --git a/build/ros2d.js b/build/ros2d.js
@@ -3,7 +3,7 @@
  */
 
 var ROS2D = ROS2D || {
-  REVISION : '0.7.0'
+  REVISION : '0.8.0-SNAPSHOT'
 };
 
 // convert the given global Stage coordinates to ROS coordinates
@@ -1103,13 +1103,13 @@ ROS2D.Viewer.prototype.addObject = function(object) {
  * @param height - the height to scale to in meters
  */
 ROS2D.Viewer.prototype.scaleToDimensions = function(width, height) {
-  // store the actual offset in the ROS coordinate system
-  var tmpY = this.height - (this.scene.y * this.scene.scaleY);
+  // restore to values before shifting, if ocurred
+  this.scene.x = typeof this.scene.x_prev_shit !== 'undefined' ? this.scene.x_prev_shit : this.scene.x;
+  this.scene.y = typeof this.scene.y_prev_shift !== 'undefined' ? this.scene.y_prev_shift : this.scene.y;
+
+  // save scene scaling
   this.scene.scaleX = this.width / width;
   this.scene.scaleY = this.height / height;
-  // reset the offset
-  this.scene.x = (this.scene.x * this.scene.scaleX);
-  this.scene.y -= (tmpY * this.scene.scaleY) - tmpY;
 };
 
 /**
@@ -1120,6 +1120,11 @@ ROS2D.Viewer.prototype.scaleToDimensions = function(width, height) {
  * @param y - the amount to shift by in the y direction in meters
  */
 ROS2D.Viewer.prototype.shift = function(x, y) {
+  // save current offset
+  this.scene.x_prev_shit = this.scene.x;
+  this.scene.y_prev_shift = this.scene.y;
+
+  // shift scene by scaling the desired offset
   this.scene.x -= (x * this.scene.scaleX);
   this.scene.y += (y * this.scene.scaleY);
 };

diff --git a/build/ros2d.min.js b/build/ros2d.min.js
diff --git a/examples/continuous.html b/examples/continuous.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+
+<script src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.js"></script>
+<script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
+<script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
+<script src="../build/ros2d.js"></script>
+
+<script>
+  /**
+   * Setup all visualization elements when the page is loaded. 
+   */
+  function init() {
+    // Connect to ROS.
+    var ros = new ROSLIB.Ros({
+      url : 'ws://localhost:9090'
+    });
+
+    // Create the main viewer.
+    var viewer = new ROS2D.Viewer({
+      divID : 'map',
+      width : 308,
+      height : 250
+    });
+
+    // Setup the map client.
+    var gridClient = new ROS2D.OccupancyGridClient({
+      ros : ros,
+      rootObject : viewer.scene,
+      // Use this property in case of continuous updates			
+      continuous: true
+    });
+    // Scale the canvas to fit to the map
+    gridClient.on('change', function() {
+      viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
+      viewer.shift(gridClient.currentGrid.pose.position.x, gridClient.currentGrid.pose.position.y);
+    });
+  }
+</script>
+</head>
+
+<body onload="init()">
+  <h1>Continuous Map Example</h1>
+  <p>
+    Use any method to publish continuous updates to topic /map and use this page to visualize updates. Follow these commands:
+  </p>
+  <ol>
+    <li><tt>roscore</tt></li>
+    <li><tt>(method of choice to publish to /map)</tt></li>
+    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
+  </ol>
+  <div id="map"></div>
+</body>
+</html>
diff --git a/src/visualization/Viewer.js b/src/visualization/Viewer.js
@@ -56,13 +56,13 @@ ROS2D.Viewer.prototype.addObject = function(object) {
  * @param height - the height to scale to in meters
  */
 ROS2D.Viewer.prototype.scaleToDimensions = function(width, height) {
-  // store the actual offset in the ROS coordinate system
-  var tmpY = this.height - (this.scene.y * this.scene.scaleY);
+  // restore to values before shifting, if ocurred
+  this.scene.x = typeof this.scene.x_prev_shit !== 'undefined' ? this.scene.x_prev_shit : this.scene.x;
+  this.scene.y = typeof this.scene.y_prev_shift !== 'undefined' ? this.scene.y_prev_shift : this.scene.y;
+
+  // save scene scaling
   this.scene.scaleX = this.width / width;
   this.scene.scaleY = this.height / height;
-  // reset the offset
-  this.scene.x = (this.scene.x * this.scene.scaleX);
-  this.scene.y -= (tmpY * this.scene.scaleY) - tmpY;
 };
 
 /**
@@ -73,6 +73,11 @@ ROS2D.Viewer.prototype.scaleToDimensions = function(width, height) {
  * @param y - the amount to shift by in the y direction in meters
  */
 ROS2D.Viewer.prototype.shift = function(x, y) {
+  // save current offset
+  this.scene.x_prev_shit = this.scene.x;
+  this.scene.y_prev_shift = this.scene.y;
+
+  // shift scene by scaling the desired offset
   this.scene.x -= (x * this.scene.scaleX);
   this.scene.y += (y * this.scene.scaleY);
 };