How to view laser scan on navigation grid?

How to view laser scan data on top of map grid on ROS web interface?
I can view using ROS3djs but i want to view it on ROS2djs. is it possible?

Thanks in advance

Hi @mohamedSaleh77,

Do you have any errors in the console?
That would help me to understand if it’s something related to the code you implemented or the library itself.

I’m checking their official repo (GitHub - RobotWebTools/ros2djs: 2D Visualization Library for use with the ROS JavaScript Libraries), but I didn’t find any reference to laser scan data, which makes me wonder if they provide such tool that is supposedly not working properly.
I think it does not provide such tool. Did you find any working example?


Thanks for your reply,

I don’t face any console errors. i’m trying to implement it myself.

the official repo for ros2djs doesn’t include the laser scan, but its implemented in ros3djs.
The idea is to convert the laser data to points and get the scale from the original map in meters to pixels to be viewed in the canvas.

EX: if we have a scan point at position (10m,3.5m,1m)… note that the 1m (z) is always that value because it is the height so we dnt even need to consider z for 2d visualization. we just need x and y… like graph plotting. where 0.0 is the point where mapping starts.

so 10m, 3.5m we scale it according to the scale of the map… e.g. 1 to 100… so becomes 10m100 = 1000 pixels and 3.5m100 = 350 pixels…

so (1000px,350px) relative to (0,0) >> do so with all laser scan points and update after a few millisecs.
i haven’t finished it yet and its gonna be high browser operation. so i was wondering if there is a better way.


Hi @mohamedSaleh77 ,

I think that’s the way, I don’t see a better one to do the task.
I created a browser widget once for displaying 2D laser scan data over the web browser, but it was using HTML elements instead of using a graphical lib (like three.js), so the performance was not so good.

I’m not suggesting to use that one because it’s quite old and not being maintained, but worth it to take a look, it may give you some ideas.

That time I managed to input the frequency so I could change it whenever the browser got slow. I don’t think you’d fall into this problem by using the ros2d.js because it goes with a good graphical library.