robotwebtools / ros2djs Goto Github PK

Can anyone help me with how to use this function considering I am able to pass proper parameters but I'm not able to see anything happening to my 2d viewer?

path = new ROSLIB.Topic({
        ros: ros,
        name: '/move_base/NavfnROS/plan',
        messageType: 'nav_msgs/Path'
    });
    path.subscribe(function (message) {
        //alert('Received message on ' + path.name + ': ' + JSON.stringify(message));
        targetPath = new ROS2D.PathShape({
            ros: ros,
            path: message
        });
        targetPath.setPath(message);
        //path.unsubscribe();
    });

please correct me if I'm doing anything wrong and also do share some working code for PathShape func.

Thanks.

Some kind of 2D scene graph library is needed to manage objects within the canvas. three.js takes care of this for us in ros3djs.

Hi everyone,

I'm developing a project using React. I added the ros2d to my project by running:
$ yarn add ros2d

The output shows that the dependency was added:

yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "admin-lte > [email protected]" has incorrect peer dependency "bootstrap@^3.1.1".
warning "admin-lte > [email protected]" has unmet peer dependency "moment-timezone@^0.5.31".
warning "admin-lte > [email protected]" has unmet peer dependency "[email protected]".
warning " > [email protected]" has unmet peer dependency "chart.js@>= 2.5.0 < 3".
warning " > [email protected]" has unmet peer dependency "chart.js@^2.3".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 4.71s.

When I run yarn build, I get this error:

yarn run v1.22.11
$ craco build
craco: *** Cannot find ESLint loader (eslint-loader). ***
Creating an optimized production build...
Failed to compile.

./src/pages/current_amr_map/CurrentAmrMap.js
Cannot find module: 'ros2d'. Make sure this package is installed.

You can install this package by running: yarn add ros2d.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I could install and use roslib without any problems with yarn add. Also I tried to install the eventemitter2 and easeljs and ran yarn build again, but I'm still getting the same error

Could someone help me?

I followed these steps in your project:

npm install

and in the project

import ROS2D from 'ros2d'

did not solve the issue

Module not found: Can't resolve 'ros2d' in

My Program Environment is Node.js + Vue.js.
I installed ros2d by npm install ros2d

Build Problem:

ERROR Failed to compile with 1 errors
This dependency was not found:
`* ros2d in ./node_modules/cache-loader/dist/cjs.js??ref--12-0~./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0~./node_modules/cache-loader/dist/djs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dashboard/Dashboard.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ros2d

So, I play npm install ros2d again, but can't resolve this problem.
Please help me.

Environment:
Ubuntu: 16.04
nodejs: v12.16.2
npm: v6.14.4
vue/cli: v4.3.1
ros2d: v0.9.0

Is anyone else experiencing that the map is rotated 90 degrees in JS compared with Gazebo?

I know I disagreed with including jQuery originally, but it would allow us to clean up our DOM code and jQuery is an acceptable dependency in many other frameworks these days. If we do support it, I'd say v1.9+. Also, we shouldn't allow it in regular roslibjs.

Hi,
I am beginner in the web server application . when i try to load the 2D map ino the web page the map not fitting how to solve this issue?
thanks

Description
If you want to develop this package with tools like a SPA ( react, angular, vue ). When you include it via NPM by default, 3rd party javascript libraries will probably cause problems in the raw ros2dj.js file
Do not worry! I fixed the problem! :)
I will share this soon! pull request.

• Library Version: 0.10.0
• ROS Version: all ros version
• Platform / OS: Windows / Ubuntu / OS

Hi, I'm wondering if you could include the latest version of easeljs, since i seem to miss some functionality that is listed in the current api (like getBounds() for a container).

In my project I use vue and npm to build my UI. When I install this lib from npm I can't import it in my project. If I import it, it simply doesn't find the lib for some reason. I noticed that the dependencies aren't specified in package,json so I installed them manually. Unfortunately it still doesn't work.

Hello,

I am having trouble with visualizing the map. The problem is that most of the space occupied by the canvas in the browser is unknown space. I have tried to play with scaleToDimensions function but it is not helping at all.

• Map is not updating in real time. A bigger map can be seen in rviz but the browser dont seems to update.

Below is an example image. More bigger maps produce more bad preview.

so we can do bower install ros2djs

I made a pull request for this, but the CI build failed due to one of your npm modules (https://travis-ci.org/RobotWebTools/ros2djs/jobs/568488362). I don't want to make any changes to your package.json, so I'm including this issue.

Here's the overview:
To set maxPoses to Infinity, you have to pass a 0 to TraceShape, but when setting this.maxPoses in the TraceShape function, it does this: this.maxPoses = options.maxPoses || 100. If I set maxPoses to 0 (meaning I want it to be infinity) the line of code evaluates it to be a falsy value and sets maxPoses to 100 instead. My code just checks to see if it's defined OR it equals 0.

ROS2D namespacing needed on current libraries.

Convert docstrings according to https://stackoverflow.com/a/14820610/12135039

Build script needed to create one final ros2d.js

Hello Dear Friends. Today, together with SPA technologies (react, vue, angular, etc..), we develop applications with ROS

By default, after downloading "ros2djs" with npm or a similar package manager, you will most likely get a "createjs" error. (This problem is present in all SPA applications)

If you are importing ros2djs mandatory packages in an html page with cdn link. It will work flawlessly. However, if you want to make a web application with a SPA technology, you will need to make a solution in this way.

PROBLEM SOLUTION STEPS

First, you download the required packages.

package managers may vary npm, yarn, nuget etc.. not problem.

npm install roslib 
npm install ros2djs

The "createjs" module should be included after all downloads are complete. "createjs" is required for graphics and map operations

BUT
When downloading, "createjs-module" package should be downloaded, not "createjs".

After the download of the packages is complete, we have one last step to fix the import error.

Go to ros2djs/src/Ros2D.js file and top line add

import * as createjs from "createjs-module

and

Go to ros2djs/build/ros2d.js file and top line add

import * as createjs from "createjs-module

After performing these operations, you can now start using the ROS2D library.

FINALLY

After doing these operations to the class you will import ros2d You need to add as follows.

import * as ROS2D from "ros2d

BONUS
If you don't want to deal with all these processes, I did it for you. You can start using it after downloading it directly from my repo address.

my repo : https://github.com/smhylc/ros2djs

npm -i https://github.com/smhylc/ros2djs

After downloading with the command, you can use the package without any problems.

Thank you.

• Library Version:All Version
• ROS Version: All ROS Version
• Platform / OS: All OS

Can someone point me to an example to display the current robot position on top of the viewer?
I used the example/continuous.html and add the listener to listen to /cmd_vel, but i am not sure how to draw the robot position on top of the viewer.

var ros = new ROSLIB.Ros({
      url : 'ws://<ip_address>:9090'
    });

    // Create the main viewer.
    var viewer = new ROS2D.Viewer({
      divID : 'map',
      width : 800,
      height : 550
    });

// Setup the map client.
    var gridClient = new ROS2D.OccupancyGridClient({
      ros : ros,
      rootObject : viewer.scene,
      // Use this property in case of continuous updates			
      continuous: true
    });
    let startTime ;

    // Scale the canvas to fit to the map
    gridClient.on('change', function() {
      startTime = new Date()
      viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
      viewer.shift(gridClient.currentGrid.pose.position.x, gridClient.currentGrid.pose.position.y);
    });

  var vel_listener = new ROSLIB.Topic({
			ros: ros,
			name: '/cmd_vel',
			messageType: 'geometry_msgs/Twist'
		})

 vel_listener.subscribe(function(vel){
      let endTime = new Date();
      let dt = (endTime - startTime) / 5000;
      let vx = vel.linear.x;
      let az = vel.angular.z;
     //how to add the robot position marker on the viewer?
});

mouse wheel/scroll event ?
I could utilize the pan view. However, the zoom is not working as I am not able to capture the mouse wheel event. both 'wheel' and 'mousewheel' event name tried with stage and canvas. I am able to capture other mouse events.

zoom ?
In case the mouse wheel/scroll event is captured, how can I implement the startzoom(...) and zoom(...) methods. Any example.

ruler or grid ?
After which I will need a ruler/grid alongside/on stage for scale realization as per zoom level.

map modify ? (to study about)
On top of these, I will have to modify/annotate the static/dynamic map.

However, I am getting the mouse wheel event with the direct event adding to the document element.
document.getElementById('map').addEventListener('wheel', ...);

Any implementation care so that pan and zoom do not interfere with each other.

Any direction towards these will help me achieve the mentioned goal.

I want to edit and save the map through the draw.html sample.
How can you implement it?

Thank You..

Building a map using SLAM and asking for continuous map updates through ROS2D.OccupancyGridClient puts a high load on the system as the updates are frequent.

Depending on the way the map is updated, could it be set to update only the differences from the last /map update?

If not, maybe a max update rate is the solution?

I have found there's no module.export in this library, so I am afraid that I cannot add a typing for it. But I still need it in my Angular project, is there any alternative libraries I can use?

Hello,

I am using a viewer to get a map in my page web I add also the pan and zoom tools following this example (https://github.com/RobotWebTools/ros2djs/pull/20/files) it works well in the desktop version with the mouse events.

But i cannot figure it out how to use the touch events , i tried with ontouchstart and touchstart and neither works

    viewer.scene.addEventListener('ontouchstart', function (event) {
        event.preventDefault();
        panView.startPan(event.touches[0].clientX, eevent.touches[0].clientY);
        mouseDown = true;
        console.log("touch");
    });

Thank you for your help

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

i have multiple robots i establish the connection throw vpn .. i wanna make this dynamic so i installed my vpn server on my vps and its configuration . so the connection with rosbridge should happen from the server not from the client (front end).

i wrote a node js server like this

but i got this response

{....
        "idCounter": 0,
        "isConnected": false,
        "transportLibrary": "websocket",
        "transportOptions": {},
        "groovyCompatibility": true,
        "_maxListeners": 0,
        "_conf": {
            "maxListeners": 0
        }
...}

ps : rosbridge on my terminal record that a client establish a connection

i ask for a help or debate to resolve it thanks community