From 46f9c245d2cf8ac9723df1fb1f6531f1fd9bce39 Mon Sep 17 00:00:00 2001 From: Guilherme Lawless Date: Mon, 29 Feb 2016 16:01:44 +0000 Subject: [PATCH] Fix continuous map updates -Revert Viewer shifting offsets before scaling -Added an example page to view continuous map updates --- build/ros2d.js | 17 +++++++---- build/ros2d.min.js | 2 +- examples/continuous.html | 56 +++++++++++++++++++++++++++++++++++++ src/visualization/Viewer.js | 15 ++++++---- 4 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 examples/continuous.html diff --git a/build/ros2d.js b/build/ros2d.js index 002114d..42f19a9 100644 --- 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 index f1fce44..1f9537e 100644 --- a/build/ros2d.min.js +++ b/build/ros2d.min.js @@ -1 +1 @@ -var ROS2D=ROS2D||{REVISION:"0.7.0"};createjs.Stage.prototype.globalToRos=function(a,b){var c=(a-this.x)/this.scaleX,d=(this.y-b)/this.scaleY;return new ROSLIB.Vector3({x:c,y:d})},createjs.Stage.prototype.rosToGlobal=function(a){var b=a.x*this.scaleX+this.x,c=a.y*this.scaleY+this.y;return{x:b,y:c}},createjs.Stage.prototype.rosQuaternionToGlobalTheta=function(a){var b=a.w,c=a.x,d=a.y,e=a.z;return 180*-Math.atan2(2*(b*e+c*d),1-2*(d*d+e*e))/Math.PI},ROS2D.ImageMap=function(a){a=a||{};var b=a.message,c=a.image;this.pose=new ROSLIB.Pose({position:b.origin.position,orientation:b.origin.orientation}),this.width=b.width,this.height=b.height,createjs.Bitmap.call(this,c),this.y=-this.height*b.resolution,this.scaleX=b.resolution,this.scaleY=b.resolution,this.width*=this.scaleX,this.height*=this.scaleY,this.x+=this.pose.position.x,this.y-=this.pose.position.y},ROS2D.ImageMap.prototype.__proto__=createjs.Bitmap.prototype,ROS2D.ImageMapClient=function(a){var b=this;a=a||{};var c=a.ros,d=a.topic||"/map_metadata";this.image=a.image,this.rootObject=a.rootObject||new createjs.Container,this.currentImage=new createjs.Shape;var e=new ROSLIB.Topic({ros:c,name:d,messageType:"nav_msgs/MapMetaData"});e.subscribe(function(a){e.unsubscribe(),b.currentImage=new ROS2D.ImageMap({message:a,image:b.image}),b.rootObject.addChild(b.currentImage),b.rootObject.addChild(new ROS2D.Grid({size:1})),b.emit("change")})},ROS2D.ImageMapClient.prototype.__proto__=EventEmitter2.prototype,ROS2D.OccupancyGrid=function(a){a=a||{};var b=a.message,c=document.createElement("canvas"),d=c.getContext("2d");this.pose=new ROSLIB.Pose({position:b.info.origin.position,orientation:b.info.origin.orientation}),this.width=b.info.width,this.height=b.info.height,c.width=this.width,c.height=this.height;for(var e=d.createImageData(this.width,this.height),f=0;f=f;f++)e.moveTo(-b*c,f*c),e.lineTo(b*c,f*c),e.moveTo(f*c,-b*c),e.lineTo(f*c,b*c);e.endFill(),e.endStroke(),createjs.Shape.call(this,e)},ROS2D.Grid.prototype.__proto__=createjs.Shape.prototype,ROS2D.NavigationArrow=function(a){var b=this;a=a||{};var c=a.size||10,d=a.strokeSize||3,e=a.strokeColor||createjs.Graphics.getRGB(0,0,0),f=a.fillColor||createjs.Graphics.getRGB(255,0,0),g=a.pulse,h=new createjs.Graphics;if(h.setStrokeStyle(d),h.moveTo(-c/2,-c/2),h.beginStroke(e),h.beginFill(f),h.lineTo(c,0),h.lineTo(-c/2,c/2),h.closePath(),h.endFill(),h.endStroke(),createjs.Shape.call(this,h),g){var i=0,j=!0;createjs.Ticker.addEventListener("tick",function(){j?(b.scaleX*=1.035,b.scaleY*=1.035,j=++i<10):(b.scaleX/=1.035,b.scaleY/=1.035,j=--i<0)})}},ROS2D.NavigationArrow.prototype.__proto__=createjs.Shape.prototype,ROS2D.NavigationImage=function(a){var b=this;a=a||{};var c=a.size||10,d=a.image,e=a.pulse,f=a.alpha||1,g={},h=function(){createjs.Bitmap.call(b,j);var a=i(c);if(b.alpha=f,b.scaleX=a,b.scaleY=a,b.regY=b.image.height/2,b.regX=b.image.width/2,g.rotation=b.rotation,Object.defineProperty(b,"rotation",{get:function(){return g.rotation+90},set:function(a){g.rotation=a}}),e){var d=0,h=!0,k=1.02;createjs.Ticker.addEventListener("tick",function(){h?(b.scaleX*=k,b.scaleY*=k,h=++d<10):(b.scaleX/=k,b.scaleY/=k,h=--d<0)})}},i=function(a){return a/j.width},j=new Image;j.onload=h,j.src=d},ROS2D.NavigationImage.prototype.__proto__=createjs.Bitmap.prototype,ROS2D.PathShape=function(a){a=a||{};var b=a.path;if(this.strokeSize=a.strokeSize||3,this.strokeColor=a.strokeColor||createjs.Graphics.getRGB(0,0,0),this.graphics=new createjs.Graphics,null!==b&&"undefined"!=typeof b){this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),this.graphics.moveTo(b.poses[0].pose.position.x/this.scaleX,b.poses[0].pose.position.y/-this.scaleY);for(var c=1;cc);else if(3>c){var d=this.createLineShape(this.pointContainer.getChildAt(c-2),b);this.lineContainer.addChild(d)}if(c>2&&this.editLineShape(this.lineContainer.getChildAt(c-2),this.pointContainer.getChildAt(c-2),b),c>1){var e=this.createLineShape(b,this.pointContainer.getChildAt(0));this.lineContainer.addChild(e)}this.drawFill()},ROS2D.PolygonMarker.prototype.remPoint=function(a){var b;b=a instanceof createjs.Shape?this.pointContainer.getChildIndex(a):a;var c=this.pointContainer.getNumChildren();2>c||(3>c?this.lineContainer.removeAllChildren():(this.editLineShape(this.lineContainer.getChildAt((b-1+c)%c),this.pointContainer.getChildAt((b-1+c)%c),this.pointContainer.getChildAt((b+1)%c)),this.lineContainer.removeChildAt(b))),this.pointContainer.removeChildAt(b),this.drawFill()},ROS2D.PolygonMarker.prototype.movePoint=function(a,b){var c,d;a instanceof createjs.Shape?(c=this.pointContainer.getChildIndex(a),d=a):(c=a,d=this.pointContainer.getChildAt(c)),d.x=b.x,d.y=-b.y;var e=this.pointContainer.getNumChildren();if(e>1){var f=this.lineContainer.getChildAt((c-1+e)%e);this.editLineShape(f,this.pointContainer.getChildAt((c-1+e)%e),d);var g=this.lineContainer.getChildAt(c);this.editLineShape(g,d,this.pointContainer.getChildAt((c+1)%e))}this.drawFill()},ROS2D.PolygonMarker.prototype.splitLine=function(a){var b,c;a instanceof createjs.Shape?(b=this.lineContainer.getChildIndex(a),c=a):(b=a,c=this.lineContainer.getChildAt(b));var d=this.pointContainer.getNumChildren(),e=this.pointContainer.getChildAt(b).x,f=this.pointContainer.getChildAt(b).y,g=this.pointContainer.getChildAt((b+1)%d).x,h=this.pointContainer.getChildAt((b+1)%d).y,i=(e+g)/2,j=(f+h)/2,k=new ROSLIB.Vector3({x:i,y:-j}),l=this.createPointShape(k);this.pointContainer.addChildAt(l,b+1),++d;var m=this.createLineShape(l,this.pointContainer.getChildAt((b+2)%d));this.lineContainer.addChildAt(m,b+1),this.editLineShape(c,this.pointContainer.getChildAt(b),l),this.drawFill()},ROS2D.PolygonMarker.prototype.drawFill=function(){var a=this.pointContainer.getNumChildren();if(a>2){var b=this.fillShape.graphics;b.clear(),b.setStrokeStyle(0),b.moveTo(this.pointContainer.getChildAt(0).x,this.pointContainer.getChildAt(0).y),b.beginStroke(),b.beginFill(this.fillColor);for(var c=1;a>c;++c)b.lineTo(this.pointContainer.getChildAt(c).x,this.pointContainer.getChildAt(c).y);b.closePath(),b.endFill(),b.endStroke()}else this.fillShape.graphics.clear()},ROS2D.PolygonMarker.prototype.__proto__=createjs.Container.prototype,ROS2D.TraceShape=function(a){a=a||{};var b=a.pose;this.strokeSize=a.strokeSize||3,this.strokeColor=a.strokeColor||createjs.Graphics.getRGB(0,0,0),this.maxPoses=a.maxPoses||100,this.minDist=a.minDist||.05,this.minDist=this.minDist*this.minDist,this.poses=[],this.graphics=new createjs.Graphics,this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),null!==b&&"undefined"!=typeof b&&this.poses.push(b),createjs.Shape.call(this,this.graphics)},ROS2D.TraceShape.prototype.addPose=function(a){var b=this.poses.length-1;if(0>b)this.poses.push(a),this.graphics.moveTo(a.position.x/this.scaleX,a.position.y/-this.scaleY);else{var c=this.poses[b].position.x,d=this.poses[b].position.y,e=a.position.x-c,f=a.position.y-d;e*e+f*f>this.minDist&&(this.graphics.lineTo(a.position.x/this.scaleX,a.position.y/-this.scaleY),this.poses.push(a))}this.maxPoses>0&&this.maxPoses0){this.poses.shift(),this.graphics.clear(),this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),this.graphics.lineTo(this.poses[0].position.x/this.scaleX,this.poses[0].position.y/-this.scaleY);for(var a=1;a=f;f++)e.moveTo(-b*c,f*c),e.lineTo(b*c,f*c),e.moveTo(f*c,-b*c),e.lineTo(f*c,b*c);e.endFill(),e.endStroke(),createjs.Shape.call(this,e)},ROS2D.Grid.prototype.__proto__=createjs.Shape.prototype,ROS2D.NavigationArrow=function(a){var b=this;a=a||{};var c=a.size||10,d=a.strokeSize||3,e=a.strokeColor||createjs.Graphics.getRGB(0,0,0),f=a.fillColor||createjs.Graphics.getRGB(255,0,0),g=a.pulse,h=new createjs.Graphics;if(h.setStrokeStyle(d),h.moveTo(-c/2,-c/2),h.beginStroke(e),h.beginFill(f),h.lineTo(c,0),h.lineTo(-c/2,c/2),h.closePath(),h.endFill(),h.endStroke(),createjs.Shape.call(this,h),g){var i=0,j=!0;createjs.Ticker.addEventListener("tick",function(){j?(b.scaleX*=1.035,b.scaleY*=1.035,j=++i<10):(b.scaleX/=1.035,b.scaleY/=1.035,j=--i<0)})}},ROS2D.NavigationArrow.prototype.__proto__=createjs.Shape.prototype,ROS2D.NavigationImage=function(a){var b=this;a=a||{};var c=a.size||10,d=a.image,e=a.pulse,f=a.alpha||1,g={},h=function(){createjs.Bitmap.call(b,j);var a=i(c);if(b.alpha=f,b.scaleX=a,b.scaleY=a,b.regY=b.image.height/2,b.regX=b.image.width/2,g.rotation=b.rotation,Object.defineProperty(b,"rotation",{get:function(){return g.rotation+90},set:function(a){g.rotation=a}}),e){var d=0,h=!0,k=1.02;createjs.Ticker.addEventListener("tick",function(){h?(b.scaleX*=k,b.scaleY*=k,h=++d<10):(b.scaleX/=k,b.scaleY/=k,h=--d<0)})}},i=function(a){return a/j.width},j=new Image;j.onload=h,j.src=d},ROS2D.NavigationImage.prototype.__proto__=createjs.Bitmap.prototype,ROS2D.PathShape=function(a){a=a||{};var b=a.path;if(this.strokeSize=a.strokeSize||3,this.strokeColor=a.strokeColor||createjs.Graphics.getRGB(0,0,0),this.graphics=new createjs.Graphics,null!==b&&"undefined"!=typeof b){this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),this.graphics.moveTo(b.poses[0].pose.position.x/this.scaleX,b.poses[0].pose.position.y/-this.scaleY);for(var c=1;cc);else if(3>c){var d=this.createLineShape(this.pointContainer.getChildAt(c-2),b);this.lineContainer.addChild(d)}if(c>2&&this.editLineShape(this.lineContainer.getChildAt(c-2),this.pointContainer.getChildAt(c-2),b),c>1){var e=this.createLineShape(b,this.pointContainer.getChildAt(0));this.lineContainer.addChild(e)}this.drawFill()},ROS2D.PolygonMarker.prototype.remPoint=function(a){var b;b=a instanceof createjs.Shape?this.pointContainer.getChildIndex(a):a;var c=this.pointContainer.getNumChildren();2>c||(3>c?this.lineContainer.removeAllChildren():(this.editLineShape(this.lineContainer.getChildAt((b-1+c)%c),this.pointContainer.getChildAt((b-1+c)%c),this.pointContainer.getChildAt((b+1)%c)),this.lineContainer.removeChildAt(b))),this.pointContainer.removeChildAt(b),this.drawFill()},ROS2D.PolygonMarker.prototype.movePoint=function(a,b){var c,d;a instanceof createjs.Shape?(c=this.pointContainer.getChildIndex(a),d=a):(c=a,d=this.pointContainer.getChildAt(c)),d.x=b.x,d.y=-b.y;var e=this.pointContainer.getNumChildren();if(e>1){var f=this.lineContainer.getChildAt((c-1+e)%e);this.editLineShape(f,this.pointContainer.getChildAt((c-1+e)%e),d);var g=this.lineContainer.getChildAt(c);this.editLineShape(g,d,this.pointContainer.getChildAt((c+1)%e))}this.drawFill()},ROS2D.PolygonMarker.prototype.splitLine=function(a){var b,c;a instanceof createjs.Shape?(b=this.lineContainer.getChildIndex(a),c=a):(b=a,c=this.lineContainer.getChildAt(b));var d=this.pointContainer.getNumChildren(),e=this.pointContainer.getChildAt(b).x,f=this.pointContainer.getChildAt(b).y,g=this.pointContainer.getChildAt((b+1)%d).x,h=this.pointContainer.getChildAt((b+1)%d).y,i=(e+g)/2,j=(f+h)/2,k=new ROSLIB.Vector3({x:i,y:-j}),l=this.createPointShape(k);this.pointContainer.addChildAt(l,b+1),++d;var m=this.createLineShape(l,this.pointContainer.getChildAt((b+2)%d));this.lineContainer.addChildAt(m,b+1),this.editLineShape(c,this.pointContainer.getChildAt(b),l),this.drawFill()},ROS2D.PolygonMarker.prototype.drawFill=function(){var a=this.pointContainer.getNumChildren();if(a>2){var b=this.fillShape.graphics;b.clear(),b.setStrokeStyle(0),b.moveTo(this.pointContainer.getChildAt(0).x,this.pointContainer.getChildAt(0).y),b.beginStroke(),b.beginFill(this.fillColor);for(var c=1;a>c;++c)b.lineTo(this.pointContainer.getChildAt(c).x,this.pointContainer.getChildAt(c).y);b.closePath(),b.endFill(),b.endStroke()}else this.fillShape.graphics.clear()},ROS2D.PolygonMarker.prototype.__proto__=createjs.Container.prototype,ROS2D.TraceShape=function(a){a=a||{};var b=a.pose;this.strokeSize=a.strokeSize||3,this.strokeColor=a.strokeColor||createjs.Graphics.getRGB(0,0,0),this.maxPoses=a.maxPoses||100,this.minDist=a.minDist||.05,this.minDist=this.minDist*this.minDist,this.poses=[],this.graphics=new createjs.Graphics,this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),null!==b&&"undefined"!=typeof b&&this.poses.push(b),createjs.Shape.call(this,this.graphics)},ROS2D.TraceShape.prototype.addPose=function(a){var b=this.poses.length-1;if(0>b)this.poses.push(a),this.graphics.moveTo(a.position.x/this.scaleX,a.position.y/-this.scaleY);else{var c=this.poses[b].position.x,d=this.poses[b].position.y,e=a.position.x-c,f=a.position.y-d;e*e+f*f>this.minDist&&(this.graphics.lineTo(a.position.x/this.scaleX,a.position.y/-this.scaleY),this.poses.push(a))}this.maxPoses>0&&this.maxPoses0){this.poses.shift(),this.graphics.clear(),this.graphics.setStrokeStyle(this.strokeSize),this.graphics.beginStroke(this.strokeColor),this.graphics.lineTo(this.poses[0].position.x/this.scaleX,this.poses[0].position.y/-this.scaleY);for(var a=1;a + + + + + + + + + + + + + +

Continuous Map Example

+

+ Use any method to publish continuous updates to topic /map and use this page to visualize updates. Follow these commands: +

+
    +
  1. roscore
    2. +
  2. (method of choice to publish to /map)
    3. +
  3. roslaunch rosbridge_server rosbridge_websocket.launch
    4. +
+
+ + diff --git a/src/visualization/Viewer.js b/src/visualization/Viewer.js index dcb8c29..0b66f0a 100644 --- 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); };