CopterExpress/clover
1
0
Fork 0
mirror of https://github.com/CopterExpress/clover.git synced 2026-05-30 14:59:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add page for 3D visualization of markers map

Browse Source
This commit is contained in:
Oleg Kalachev
2019-03-15 21:46:51 +03:00
parent 05791bb0bf
commit ad0f952f74
4 changed files with 92 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
clever/www/aruco_map.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/eventemitter2.js"></script>
<script type="text/javascript" src="js/roslib.js"></script>
<script type="text/javascript" src="js/ros3d.js"></script>
<title>Aruco Map visualization</title>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript" src="js/viz.js"></script>
<script>
setScene('aruco_map');
addArucoMap();
addAxes();
</script>
</body>
</html>

1
clever/www/index.html
View File

@@ -5,6 +5,7 @@
<li><a href="" id="wvs">View image topics</a> (<code>web_video_server</code>)</li>
<li><a href="" id="butterfly">Open web terminal</a> (<code>Butterfly</code>)</li>
<li><a href="viz.html">View 3D visualization</a> (<code>ros3djs</code>)</li>
<li><a href="aruco_map.html">3D visualization for markers map</a> (<code>ros3djs</code>)</li>
</ul>
<script type="text/javascript">

107
clever/www/js/viz.js
View File

@@ -20,50 +20,75 @@ ros.on('close', function() {
titleEl.innerText = 'Disconnected';
});
var viewer = new ROS3D.Viewer({
divID: 'viz',
width: 1000,
height: 600,
antialias: true
});
var viewer, tfClient;
var tfClient = new ROSLIB.TFClient({
ros: ros,
angularThres: 0.01,
transThres: 0.01,
rate: 10.0,
fixedFrame : 'map'
});
function setScene(fixedFrame) {
viewer = new ROS3D.Viewer({
divID: 'viz',
width: 1000,
height: 600,
antialias: true
});
// vehicle markers
var vehicleMarkers = new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/vehicle_marker',
rootObject: viewer.scene
});
tfClient = new ROSLIB.TFClient({
ros: ros,
angularThres: 0.01,
transThres: 0.01,
rate: 10.0,
fixedFrame : fixedFrame
});
// camera markers
var cameraMarkers = new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/main_camera/camera_markers',
rootObject: viewer.scene
});
var map = new ROS3D.Grid({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene
});
// detected aruco markers
var cameraMarkers = new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/aruco_detect/visualization',
rootObject: viewer.scene
});
viewer.scene.add(map);
}
var map = new ROS3D.Grid({
ros: ros,
tfClient: tfClient,
// frameID: 'map',
rootObject: viewer.scene
});
function addAxes() {
var axes = new ROS3D.Axes({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene
});
viewer.scene.add(axes);
}
viewer.scene.add(map);
function addVehicle() {
new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/vehicle_marker',
rootObject: viewer.scene
});
}
function addCamera() {
new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/main_camera/camera_markers',
rootObject: viewer.scene
});
}
function addAruco() {
new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/aruco_detect/visualization',
rootObject: viewer.scene
});
}
function addArucoMap() {
new ROS3D.MarkerArrayClient({
ros: ros,
tfClient: tfClient,
topic: '/aruco_map/visualization',
rootObject: viewer.scene
});
}

6
clever/www/viz.html
View File

@@ -10,5 +10,11 @@
<body>
<div id="viz"></div>
<script type="text/javascript" src="js/viz.js"></script>
<script>
setScene('map');
addVehicle();
addCamera();
addAruco();
</script>
</body>
</html>