robotwebtools / ros2djs Goto Github PK
View Code? Open in Web Editor NEW2D Visualization Library for use with the ROS JavaScript Libraries
Home Page: https://robotwebtools.github.io/ros2djs
License: Other
2D Visualization Library for use with the ROS JavaScript Libraries
Home Page: https://robotwebtools.github.io/ros2djs
License: Other
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.
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.
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.