Hi everybody,
I'd like to show my robot simulation on a web application (using Flask) and I followed the instructions of the next tutorial: https://wiki.ros.org/ros3djs/Tutorials/VisualizingAURDF.
The 2D map visualization works fine (https://wiki.ros.org/ros3djs/Tutorials/VisualizingAMap) while the URDF visualization gives me an error when i run:
rosrun tf2_web_republisher tf2_web_republisher
The console error is:
"base_link" passed to lookupTransform argument target_frame does not exist.
The browser console gives me the error:
error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, loaded: 0, total: 0, srcElement: XMLHttpRequest, currentTarget: XMLHttpRequest, eventPhase: 2, bubbles: false, cancelable: false, … }
ros3d.min.js:5:117115
onError https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5
load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:1
(Async: EventListener.handleEvent)
load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:1
load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5
dae https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5
Bs https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5
_c https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:12
UrdfClient https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:12
get https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
callService https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
o https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
emit https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
s https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
o https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
onmessage https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
(Async: EventHandlerNonNull)
connect https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
l https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1
init http://127.0.0.1:8000/urdf:22
onload http://127.0.0.1:8000/urdf:1
The complete browser console message is:
Connection to websocket server closed. [map:72:15](http://127.0.0.1:8000/map)
GET
http://127.0.0.1:8000/home/dario/catkin_ws/src/ros3d.js
[HTTP/1.1 404 NOT FOUND 83ms]
The script from “https://robotwebtools.github.io/ros3djs/” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
[map](http://127.0.0.1:8000/map)
GET
http://127.0.0.1:8000/js/ColladaLoader.js
[HTTP/1.1 404 NOT FOUND 22ms]
A resource is blocked by OpaqueResponseBlocking, please check browser console for details. [ros3djs](https://robotwebtools.github.io/ros3djs/)
Source map error: NetworkError when attempting to fetch resource.
Resource URL: https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js
Source Map URL: eventemitter3.umd.min.js.map
GET
http://127.0.0.1:8000/home/dario/catkin_ws/src/ros3d.js
[HTTP/1.1 404 NOT FOUND 19ms]
Loading failed for the <script> with source “http://127.0.0.1:8000/home/dario/catkin_ws/src/ros3d.js”. [map:50:50](http://127.0.0.1:8000/map)
GET
http://127.0.0.1:8000/js/ColladaLoader.js
[HTTP/1.1 404 NOT FOUND 12ms]
Loading failed for the <script> with source “http://127.0.0.1:8000/js/ColladaLoader.js”. [map:51:35](http://127.0.0.1:8000/map)
THREE.WebGLRenderer 89 2 [ros3d.min.js:1:291584](https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js)
Connected to websocket server. [map:64:15](http://127.0.0.1:8000/map)
THREE.Loader: .extractUrlBase() has been deprecated. Use THREE.LoaderUtils.extractUrlBase() instead. 10 [ros3d.min.js:5:28543](https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js)
error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, loaded: 0, total: 0, srcElement: XMLHttpRequest, currentTarget: XMLHttpRequest, eventPhase: 2, bubbles: false, cancelable: false, … }
And my html file is:
% extends 'base.html' %}
{% block header %}
<h2>{% block title %}Map{% endblock title %}</h2>
{% endblock header %}
{% block content %}
<body onload="init()"
<div id="map"></div>
<div id="urdf"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/lib/eventemitter2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js"></script>
<script src="https://robotwebtools.github.io/ros3djs/"></script>
<script src="https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4/lib/eventemitter2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>
<script src="/home/dario/catkin_ws/src/ros3d.js"></script>
<script src="js/ColladaLoader.js"></script>
<script type="text/javascript">
function init(){
var ros = new ROSLIB.Ros({
url : 'ws://localhost:9090'
});
ros.on('connection', function() {
console.log('Connected to websocket server.');
});
ros.on('error', function(error) {
console.log('Error connecting to websocket server: ', error);
});
ros.on('close', function() {
console.log('Connection to websocket server closed.');
});
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID : 'map',
width : 800,
height : 600,
antialias : true
});
// Setup the map client.
var gridClient = new ROS3D.OccupancyGridClient({
ros : ros,
rootObject : viewer.scene
});
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID : 'urdf',
width : 800,
height : 600,
antialias : true
});
// Add a grid.
viewer.addObject(new ROS3D.Grid());
// Setup a client to listen to TFs.
var tfClient = new ROSLIB.TFClient({
ros : ros,
angularThres : 0.01,
transThres : 0.01,
rate : 10.0
});
// Setup the URDF client.
var urdfClient = new ROS3D.UrdfClient({
ros : ros,
tfClient : tfClient,
path : 'localhost:8000/dsr_description/meshes/m1013/MF1013_0_0.dae',
rootObject : viewer.scene,
loader : ROS3D.COLLADA_LOADER_2
});
}
</script>
{% endblock content %}
Do you have any idea of where the error could be?
Thank you very much.
I'm using:
Hi everybody,
I'd like to show my robot simulation on a web application (using Flask) and I followed the instructions of the next tutorial: https://wiki.ros.org/ros3djs/Tutorials/VisualizingAURDF.
The 2D map visualization works fine (https://wiki.ros.org/ros3djs/Tutorials/VisualizingAMap) while the URDF visualization gives me an error when i run:
The console error is:
The browser console gives me the error:
error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, loaded: 0, total: 0, srcElement: XMLHttpRequest, currentTarget: XMLHttpRequest, eventPhase: 2, bubbles: false, cancelable: false, … } ros3d.min.js:5:117115 onError https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5 load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:1 (Async: EventListener.handleEvent) load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:1 load https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5 dae https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5 Bs https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:5 _c https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:12 UrdfClient https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js:12 get https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 callService https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 o https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 emit https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 s https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 o https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 onmessage https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 (Async: EventHandlerNonNull) connect https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 l https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js:1 init http://127.0.0.1:8000/urdf:22 onload http://127.0.0.1:8000/urdf:1The complete browser console message is:
And my html file is:
% extends 'base.html' %} {% block header %} <h2>{% block title %}Map{% endblock title %}</h2> {% endblock header %} {% block content %} <body onload="init()" <div id="map"></div> <div id="urdf"></div> </body> <script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/lib/eventemitter2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ros3d@1.1/build/ros3d.min.js"></script> <script src="https://robotwebtools.github.io/ros3djs/"></script> <script src="https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4/lib/eventemitter2.js"></script> <script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script> <script src="/home/dario/catkin_ws/src/ros3d.js"></script> <script src="js/ColladaLoader.js"></script> <script type="text/javascript"> function init(){ var ros = new ROSLIB.Ros({ url : 'ws://localhost:9090' }); ros.on('connection', function() { console.log('Connected to websocket server.'); }); ros.on('error', function(error) { console.log('Error connecting to websocket server: ', error); }); ros.on('close', function() { console.log('Connection to websocket server closed.'); }); // Create the main viewer. var viewer = new ROS3D.Viewer({ divID : 'map', width : 800, height : 600, antialias : true }); // Setup the map client. var gridClient = new ROS3D.OccupancyGridClient({ ros : ros, rootObject : viewer.scene }); // Create the main viewer. var viewer = new ROS3D.Viewer({ divID : 'urdf', width : 800, height : 600, antialias : true }); // Add a grid. viewer.addObject(new ROS3D.Grid()); // Setup a client to listen to TFs. var tfClient = new ROSLIB.TFClient({ ros : ros, angularThres : 0.01, transThres : 0.01, rate : 10.0 }); // Setup the URDF client. var urdfClient = new ROS3D.UrdfClient({ ros : ros, tfClient : tfClient, path : 'localhost:8000/dsr_description/meshes/m1013/MF1013_0_0.dae', rootObject : viewer.scene, loader : ROS3D.COLLADA_LOADER_2 }); } </script> {% endblock content %}Do you have any idea of where the error could be?
Thank you very much.
I'm using: