From: <rob...@us...> - 2009-09-04 20:22:52
|
Revision: 23862 http://personalrobots.svn.sourceforge.net/personalrobots/?rev=23862&view=rev Author: rob_wheeler Date: 2009-09-04 20:22:44 +0000 (Fri, 04 Sep 2009) Log Message: ----------- Add functionality to the map toolbar buttons. Modified Paths: -------------- pkg/trunk/sandbox/web/navigation_application/src/navigation_application/jslib/map_viewer.js Added Paths: ----------- pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_disable.png pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_enable.png Added: pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_disable.png =================================================================== (Binary files differ) Property changes on: pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_disable.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_enable.png =================================================================== (Binary files differ) Property changes on: pkg/trunk/sandbox/web/navigation_application/src/navigation_application/images/pose_enable.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Modified: pkg/trunk/sandbox/web/navigation_application/src/navigation_application/jslib/map_viewer.js =================================================================== --- pkg/trunk/sandbox/web/navigation_application/src/navigation_application/jslib/map_viewer.js 2009-09-04 20:19:06 UTC (rev 23861) +++ pkg/trunk/sandbox/web/navigation_application/src/navigation_application/jslib/map_viewer.js 2009-09-04 20:22:44 UTC (rev 23862) @@ -41,7 +41,6 @@ }, }); - var MapViewer = Class.create({ initialize: function(domobj) { this.viewer = domobj; @@ -60,9 +59,32 @@ ], addButton: function(b) { - this.buttonbar.insert('<img title="'+b.desc+'" style="margin:1;border:1px solid" src="' + window.location.pathname + '/images/'+b.name+'_disable.png"><br>'); + this.buttonbar.insert('<img id="' + b.name + '_button" title="'+b.desc+'" style="margin:1;border:1px solid" src="' + window.location.pathname + '/images/'+b.name+'_disable.png"><br>'); + $(b.name + '_button').observe('click', this.handleClick.bind(this)); + $(b.name + '_button').observe('mousedown', function(e) {e.stop()}); }, + mode : {'PAN' : 0, 'GOAL' : 1, 'POSE': 2}, + + handleClick : function(e) { + var button = e.element(); + if (button.id == "zoomin_button") { + this.zoom(-0.25, this.dim.width/2, this.dim.height/2); + } else if (button.id == "zoomout_button") { + this.zoom(0.25, this.dim.width/2, this.dim.height/2); + } else if (button.id == "pan_button") { + this.currentMode = this.mode.PAN; + button.src = window.location.pathname + '/images/pan_enable.png' + } else if (button.id == "goal_button") { + this.currentMode = this.mode.GOAL; + } else if (button.id == "pose_button") { + this.currentMode = this.mode.POSE; + } else if (button.id == "pin_button") { + this.follow = !this.follow; + } + return false; + }, + init: function() { // Overlay a canvas the same size as this div this.canvas = new Element('canvas', {'id': 'map_canvas', 'width': this.viewer.getWidth(), 'height': this.viewer.getHeight(), 'style': 'z-index:1;position:absolute'}); @@ -102,10 +124,10 @@ Event.observe(document, 'mouseup', this.handleMouseUp.bind(this)); Event.observe(document, 'mousemove', this.handleMouseMove.bind(this)); Event.observe(document, 'keypress', this.handleKeyPress.bind(this)); - this.panning = false; - this.settingGoal = false; - this.settingPose = false; + this.currentMode = this.mode.PAN; + this.follow = false; + this.robot_img = new Image(); this.robot_img.src = window.location.pathname + '/images/pr2_small.png'; }, @@ -120,29 +142,22 @@ }, handleMouseDown : function(e) { - this.mark = [Event.pointerX(e), Event.pointerY(e)]; if (Event.isLeftClick(e)) { - this.panning = true; - } else if (Event.isMiddleClick(e)) { - if (e.ctrlKey) - this.settingPose = true; - else - this.settingGoal = true; + this.mark = [Event.pointerX(e), Event.pointerY(e)]; } }, handleMouseUp : function(e) { if (Event.isLeftClick(e)) { - this.panning = false; - } else if (Event.isMiddleClick(e)) { - if (this.settingGoal || this.settingPose) { + if (this.currentMode == this.mode.GOAL || + this.currentMode == this.mode.POSE) { var dx = Event.pointerX(e) - this.mark[0]; var dy = Event.pointerY(e) - this.mark[1]; var angle = Math.atan2(-dy, dx); var off = this.viewer.cumulativeOffset(); var pos = this.pixelToMap([this.mark[0]-off.left, this.mark[1]-off.top]); var url = 'http://' + window.location.hostname + ':8080'; - url += this.settingGoal ? '/map/set_goal' : '/map/set_pose'; + url += this.currentMode == this.mode.GOAL ? '/map/set_goal' : '/map/set_pose'; url += '?x=' + pos.x; url += '&y=' + pos.y; url += '&angle=' + angle; @@ -152,23 +167,27 @@ delete this.robot_est; delete this.plan; } + delete this.mark; } }, handleMouseMove : function(e) { - if (this.panning) { - var old_mark = this.mark; - this.mark = [Event.pointerX(e), Event.pointerY(e)]; - this.panMap(this.mark[0] - old_mark[0], - this.mark[1] - old_mark[1]); - } else if (this.settingGoal || this.settingPose) { - var off = this.viewer.cumulativeOffset(); - var pos = this.pixelToMap([this.mark[0]-off.left, this.mark[1]-off.top]); - var dx = Event.pointerX(e) - this.mark[0]; - var dy = Event.pointerY(e) - this.mark[1]; - var angle = Math.atan2(dy, dx); - this.robot_est = {'x': pos.x, 'y': pos.y, 'angle': angle}; - this.updateCanvas(); + if (this.mark) { + if (this.currentMode == this.mode.PAN) { + var old_mark = this.mark; + this.mark = [Event.pointerX(e), Event.pointerY(e)]; + this.panMap(this.mark[0] - old_mark[0], + this.mark[1] - old_mark[1]); + } else if (this.currentMode == this.mode.GOAL || + this.currentMode == this.mode.POSE) { + var off = this.viewer.cumulativeOffset(); + var pos = this.pixelToMap([this.mark[0]-off.left, this.mark[1]-off.top]); + var dx = Event.pointerX(e) - this.mark[0]; + var dy = Event.pointerY(e) - this.mark[1]; + var angle = Math.atan2(dy, dx); + this.robot_est = {'x': pos.x, 'y': pos.y, 'angle': angle}; + this.updateCanvas(); + } } }, @@ -341,7 +360,8 @@ var coords = this.mapToPixel(msg.pose.position); coords[0] -= this.panner.left; coords[1] -= this.panner.top; - //this.panMap(this.dim.width/2-coords[0], this.dim.height/2-coords[1], false); + if (this.follow) + this.panMap(this.dim.width/2-coords[0], this.dim.height/2-coords[1], false); this.robot = {'x': msg.pose.position.x, 'y': msg.pose.position.y, 'angle': angle}; This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |