ROS_web显示接收到的ＧＰＳ和odom车体消息，添加按键控制

最新推荐文章于 2024-04-15 09:34:23 发布

静守己心

最新推荐文章于 2024-04-15 09:34:23 发布

阅读量1.1k

点赞数 1

分类专栏： ROS

本文链接：https://blog.csdn.net/weixin_37954144/article/details/88887571

版权

ROS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

添加ＧＵＩ显示框

纬度Ｎ<textarea id="latitude" rows="1" cols="10"></textarea><br>	
经度Ｅ<textarea id="longitude" rows="1" cols="10"></textarea><br>

订阅/GPS侦听

//建立ＧＰＳ侦听
var GPS=new ROSLIB.Topic({
ros:ros,
name:'gps',
messageType:'xrobot_serial/GPS'
});

//订阅ＧＰＳ侦听
GPS.subscribe(
function(message)
{
	document.getElementById("latitude").value=message['latitude'];//将侦听的消息写入该id文本框中
	document.getElementById("longitude").value=message['longitude'];
});

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css"> 
 	#mykeyboard
	{ 
		margin-top: -225px;
		margin-left: 400px;
	} 
	#mycmd_vel
	{ 
		margin-top: -50px;
		margin-left: 350px;
	}
	#mypose
	{
		margin-top: 35px;
		margin-left: 50px;
	}
	#myip
	{
		margin-top: 0px;
		margin-left: 170px;
	}
	#speed-label
	{
		margin-top: 0px;
		margin-left: 100px;
	}
	#speed-slider
 	{
		margin-top: 0px;
		margin-left: 150px;
	}
</style> 

<link rel="stylesheet" href="jqueryui/style.css">
<style>
	
	#speed-slider {
	width: 400px;
	height: 20px;
    }

</style>

<title>ROS-Web通信</title>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script type="text/javascript" src="https://static.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.min.js"></script>
<script type="text/javascript">
	/*
	 *初始化全局变量值
	 */
	var ip_number='192.168.43.77';
	var init_flag = false;
	/*
	 *函数功能：将文本框内的变量值提交保存
	 */
	function submit_values()
	{
		ip_number = document.getElementById("ip_number").value;
		init_flag = true;
		init();
	}


</script>		
</head>

<body>
	<h1>接收ROS发布小车状态并键盘控制小车</h1>
  	<p>本次修改：
  	1.在右侧显示键盘和键盘速度　
  	２．滑轨控制速度
  	3.　固定侦听/odom　<br>
  	４．提取位姿和速度量　
  	５．将弧度和四元数转换角度</p>
  	
	<form id="myform" method="post">
		<div id="myip">
		IP
		<input type="text" name="IP" id='ip_number' value='192.168.43.23'>	
		<input type="button" "submit_values()" value="Listen"><br>
		</div><br>
		
		<div id="mypose">	
		位置Ｘ<textarea id="position_x" rows="1" cols="10"></textarea><br>
		位置Ｙ<textarea id="position_y" rows="1" cols="10"></textarea><br>
		偏行角<textarea id="yaw" rows="1" cols="10"></textarea><br>
		线速度<textarea id="odom_linear_x" rows="1" cols="10"></textarea><br>
		角速度<textarea id="odom_angular_z" rows="1" cols="10"></textarea><br>
		纬度Ｎ<textarea id="latitude" rows="1" cols="10"></textarea><br>	
		经度Ｅ<textarea id="longitude" rows="1" cols="10"></textarea><br>			
	 	</div><br>
	 	
	 	<div id="mykeyboard">
	  	<img src="../ROS-Web-GUI搭建/素材/keyboardteleop.png" width=300 height=200 >
	  	</div><br>
	  	
  		<div id="mycmd_vel">
	  	线速度 <textarea id="linear_x" rows="1" cols="10"></textarea> 
	  	角速度 <textarea id="angular_z" rows="1" cols="10"></textarea><br> 
  		</div><br>
  		
		<div id="speed-label"></div>
		<div id="speed-slider"></div>
		
	</form><br>
	<br>
	<ol>
		<li><tt>输入ip(本机为localhost,其他查ip)</tt></li>
		<li><tt>topic(rostopic list查看所有topic,rostopic echo查看内容)</tt></li>
		<li><tt>message(rostopic type查看topic的消息类型)</tt></li>
		<li><tt>ROS端需启动roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
		<li><tt>ROS端需启动topic对应的节点</tt></li>
	  </ol>

</body>

<script type="text/javascript">	
	function init() 
	{

		if(init_flag == true)//当按键按下执行
		{	
				//连接ROS		
				var ros = new ROSLIB.Ros(
				{
					url : 'ws://'+ip_number+':9090'//当修改完ip框后点击listen就可以
				});
				
				//返回ROS连接状态
				ros.on('connection', function() {
				console.log('Connected to websocket server.');
				});

				ros.on('error', function(error) {
				console.log('Error connecting to websocket server: ', error);
				});

				ros.on('close', function() {
				console.log('Connection to websocket server closed.');
				});

				//建立odom侦听对象
				var Odom = new ROSLIB.Topic({
				ros : ros,
				name : 'odom',//有默认的topic,当submit后listen改成新的
				messageType : 'nav_msgs/Odometry'
				});
				
				//订阅odom侦听
				Odom.subscribe(function(message) 
				{
					var w=message['pose']['pose']['orientation']['w'];
					var z=message['pose']['pose']['orientation']['z'];
					document.getElementById("position_x").value=(message['pose']['pose']['position']['x']).toFixed(2);
					document.getElementById("position_y").value=(message['pose']['pose']['position']['y']).toFixed(2);
					document.getElementById("yaw").value=(Math.atan(2*w*z/(1-z*z))*180/Math.PI).toFixed(2);
					document.getElementById("odom_linear_x").value=message['twist']['twist']['linear']['x'].toFixed(2);
					document.getElementById("odom_angular_z").value=(message['twist']['twist']['angular']['z']*180/Math.PI).toFixed(2);
					
				});	
				
			    // 建立按键对象
				var teleop = new KEYBOARDTELEOP.Teleop({
				  ros : ros,
				  topic : '/cmd_vel'
				});

				// 生成滑块ＵＩ
				$('#speed-slider').slider({
				  range : 'min',
				  min : 0,
				  max : 100,
				  value : 90,
				  slide : function(event, ui) {
					// Change the speed label.
					$('#speed-label').html('Speed: ' + ui.value + '%');
					// Scale the speed.
					teleop.scale = (ui.value / 100.0);
				  }
				});

				// 设定初始比例９０%时速度
				$('#speed-label').html('Speed(0.5): ' + ($('#speed-slider').slider('value')) + '%');
				teleop.scale = ($('#speed-slider').slider('value') / 100.0);

				//建立cmd_vel侦听对象
				var Cmd_vel = new ROSLIB.Topic({
				ros : ros,
				name : 'cmd_vel',//有默认的topic,当submit后listen改成新的
				messageType : 'geometry_msgs/Twist'
				});
				
				//订阅/cmd_vels侦听
				Cmd_vel.subscribe(
				function(message) 
				{		
					document.getElementById("linear_x").value=message['linear']['x'];
					document.getElementById("angular_z").value=(message['angular']['z']*180/3.14).toFixed(2);		
				});	
				
				//建立ＧＰＳ侦听
				var GPS=new ROSLIB.Topic({
				ros:ros,
				name:'gps',
				messageType:'xrobot_serial/GPS'
				});
				
				//订阅ＧＰＳ侦听
				GPS.subscribe(
				function(message)
				{
					document.getElementById("latitude").value=message['latitude'];
					document.getElementById("longitude").value=message['longitude'];
				});

		}
	}		

</script>

</html>

静守己心

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ROS_web显示接收到的ＧＰＳ和odom车体消息，添加按键控制

添加ＧＵＩ显示框纬度Ｎ<textarea id="latitude" rows="1" cols="10"></textarea><br> 经度Ｅ<textarea id="longitude" rows="1" cols="10"></textarea><br>订阅/GPS侦听//建立ＧＰＳ侦听var GPS=n...
复制链接

扫一扫