forked from MerAARIZOU/optimal_ros_lib_3d
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapExample.html
91 lines (81 loc) · 2.51 KB
/
mapExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="three.min.js"></script>
<script src="ColladaLoader.min.js"></script>
<script src="ColladaLoader2.min.js"></script>
<script src="STLLoader.min.js"></script>
<script src="eventemitter2.min.js"></script>
<script src="roslib.js"></script>
<script src="ros3d.js"></script>
<script>
/**
* Setup all visualization elements when the page is loaded.
*/
// Connect to ROS.
var ros = new ROSLIB.Ros({
groovyCompatibility : false,
url : 'ws://localhost:9090'
});
var tfClient = new ROSLIB.TFClient({
ros : ros,
angularThres : 0.01,
transThres : 0.01,
rate : 10.0,
fixedFrame : 'map'
});
function init() {
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID : 'map',
width : 800,
height : 600,
antialias : true
});
var urdfClient = new ROS3D.UrdfClient({
ros : ros,
tfClient : tfClient,
path : 'http://localhost/',
frameID : 'base_link',
rootObject : viewer.scene,
loader : ROS3D.COLLADA_LOADER_2
});
// Setup the map client.
var gridClient = new ROS3D.OccupancyGridClient({
ros : ros,
rootObject : viewer.scene
});
}
function mover(linearX, linearY, linearZ, angularX, angularY, angularZ, speed){
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
var twist = new ROSLIB.Message({
linear : {
x : linearX,
y : linearY,
z : linearZ
},
angular : {
x : angularX,
y : angularY,
z : angularZ
}
});
cmdVel.publish(twist);
}
</script>
</head>
<body onload="init()">
<h1>Simple Map Example</h1>
<div id="map"></div>
<div id="urdf"></div>
<button id="forward" onmousedown="mover(0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0)" onmouseup="mover(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1)">Forward</button>
<button id="backward" onmousedown="mover(-0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0)" onmouseup="mover(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1)">backward</button>
<button id="left" onmousedown="mover(0., 0.0, 0.0, 0.0, 0.0, 0.1, 1.0)" onmouseup="mover(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1)">left</button>
<button id="right" onmousedown="mover(0.0, 0.0, 0.0, 0.0, 0.0, -0.1, 1.0)" onmouseup="mover(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1)">right</button>
</body>
</html>