Question

I am looking to display a map of type nav_msgs/OccupancyGrid on a web GUI with markers overlaid on it using tools like roslibjs, ros2djs or ros3djs and vue on noetic.

Inspired by the example here, I have created an index.html and main.js file in an attempt to subscribe to my /map topic and display that in the web GUI as it grows.

index.html:

<!DOCTYPE html>
<html lang="en-GB">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/EaselJS/current/easeljs.js"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.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/ros2djs/current/ros2d.js"></script>
</head>

<body>
    <main id="vueApp">
        <button class="mt-2 btn btn-danger btn-lg my-auto" v-if="connected === false" @click="init" style="width: 100%;">Connect GUI To Robot</button>
        <div id="map"></div>
        <script type="text/javascript" src="main.js"></script>
    </main>
</body>

</html>

main.js:

new Vue({
    el: '#vueApp',

    data: {
        ros: null,
        connected: false,
        pubInterval: null,
        mapGridClient: null,
        mapViewer: null,
    },

    methods: {

        init: function () {

            // ROSBridge Connection Object
            this.ros = new ROSLIB.Ros({
                url: 'ws://' + window.location.hostname + ':9090'
            })

            // ROSBridge Connection Object Callbacks
            this.ros.on('connection', () => {
                this.connected = true
                console.log('Connection to ROSBridge established')
                this.pubInterval = setInterval(this.publish, 100)
            })
            this.ros.on('error', (error) => {
                console.log('Something went wrong when trying to connect')
                console.log(error)
            })
            this.ros.on('close', () => {
                this.connected = false
                console.log('Connection to ROSBridge was closed')
                clearInterval(this.pubInterval)
            })

            // Map Viewer
            this.mapViewer = new ROS2D.Viewer({
                divID : 'map',
                width : 400,
                height : 400
            })
            this.mapGridClient = new ROS2D.OccupancyGridClient({
                ros : this.ros,
                rootObject : this.mapViewer.scene,
                continuous : true
            })
            this.mapGridClient.on('change', function(){
                this.mapViewer.scaleToDimensions(this.mapGridClient.currentGrid.width, this.mapGridClient.currentGrid.height);
            })

        }
    }
})

This seems to be subscribing to the map and displaying it but only a small fraction of it appears as expected. See below for a comparison between the map viewed in RViz and the map view on the web GUI.

image description

Also, I need to work out how to subscribe to my /visualization_marker topic of type visualization_msgs/Markeroverlay and display these markers as they become available on top of the map.

Any ideas how to solve these issues?

Asked by Py on 2021-03-22 06:18:58 UTC

Answer 1

The code snippet I ended up to solve this is as follows. This uses ros3djs instead of ros2djs.

let viewer = new ROS3D.Viewer({
    divID : 'map',
    width : 600,
    height : 600,
    antialias : true,
    intensity : 1.0,
    cameraPose : {x : -1, y : 0, z : 20},
    displayPanAndZoomFrame : true
});

let tfClient = new ROSLIB.TFClient({
    ros : this.ros,
    angularThres : 0.01,
    transThres : 0.01,
    rate : 10.0,
    fixedFrame : '/map'
});

let mapClient = new ROS3D.OccupancyGridClient({
    ros : this.ros,
    rootObject : viewer.scene,
    continuous : true
});

Asked by Py on 2021-09-13 06:08:56 UTC

Comments

Thanks alot for your answer but I am having the same issue. When continuous : true is set it doesn't display anything in the browser.

Asked by ZainMehdi on 2021-09-14 21:32:43 UTC

How to subscribe to map and markers and display on web GUI using roslibjs?

Comments

Answers

Comments