添加GUI显示框
纬度N<textarea id="latitude" rows="1" cols="10"></textarea><br>
经度E<textarea id="longitude" rows="1" cols="10"></textarea><br>
订阅/GPS侦听
//建立GPS侦听
var GPS=new ROSLIB.Topic({
ros:ros,
name:'gps',
messageType:'xrobot_serial/GPS'
});
//订阅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.在右侧显示键盘和键盘速度
2.滑轨控制速度
3. 固定侦听/odom <br>
4.提取位姿和速度量
5.将弧度和四元数转换角度</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">
位置X<textarea id="position_x" rows="1" cols="10"></textarea><br>
位置Y<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>
纬度N<textarea id="latitude" rows="1" cols="10"></textarea><br>
经度E<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'
});
// 生成滑块UI
$('#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);
}
});
// 设定初始比例90%时速度
$('#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);
});
//建立GPS侦听
var GPS=new ROSLIB.Topic({
ros:ros,
name:'gps',
messageType:'xrobot_serial/GPS'
});
//订阅GPS侦听
GPS.subscribe(
function(message)
{
document.getElementById("latitude").value=message['latitude'];
document.getElementById("longitude").value=message['longitude'];
});
}
}
</script>
</html>