ros_robotics_projects
ros_robotics_projects copied to clipboard
Published
20 hours ago •
qboticslabs
qboticslabs
CHAPTER 12: WEB Application: No Preview (webtools not working??)
Hello,
I am having problem with implementation of chapter 12. No models are being displayed once the submit button is clicked.
I have tried to debug the problem and found that none of the webtools api is working:
"http://cdn.robotwebtools.org/" It is not working. hence all js files are failed to load.
Is there a way across it??
Many Thanks.
okey, so the problem has been found.
All the web resources has been moved from http://cdn.robotwebtools.org/ to http://static.robotwebtools.org/.
However, it is not able to show the robot model now. Very strange.
In case if it may help; here is the changed file with working urls:
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://static.robotwebtools.org/threejs/current/three.js"></script>
<script src="http://static.robotwebtools.org/threejs/current/ColladaLoader.js"></script>
<script src="http://static.robotwebtools.org/threejs/current/STLLoader.js"></script>
<script src="http://static.robotwebtools.org/ColladaAnimationCompress/current/ColladaLoader2.js"></script>
<script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script src="http://static.robotwebtools.org/ros3djs/current/ros3d.min.js"></script>
<script src="http://static.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.js"></script>
<script>
/**
* Setup all GUI elements when the page is loaded.
*/
var teleop_topic = '/cmd_vel_mux/input/teleop'
var base_frame = 'odom';
var init_flag = false
function submit_values(){
teleop_topic = document.getElementById("tele_topic").value;
base_frame = document.getElementById("base_frame_name").value;
init_flag = true;
init();
}
function init() {
if(init_flag == true)
{
// Connecting to ROS.
var ros = new ROSLIB.Ros({
url : 'ws://localhost:9090'
});
// Initialize the teleop.
var teleop = new KEYBOARDTELEOP.Teleop({
ros : ros,
topic : teleop_topic
});
////////////////////////////////////////////////////////////////////////////////////////////////////////
var viewer = new ROS3D.Viewer({
background : 000,
divID : 'urdf',
width : 1280,
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,
fixedFrame : base_frame,
angularThres : 0.01,
transThres : 0.01,
rate : 10.0
});
// Setup the URDF client.
var urdfClient = new ROS3D.UrdfClient({
ros : ros,
tfClient : tfClient,
path : 'http://resources.robotwebtools.org/',
rootObject : viewer.scene,
loader : ROS3D.COLLADA_LOADER
});
///////////////////////////////////////////////////////////////////////////////////////////////////
// Create a UI slider using JQuery UI.
$('#speed-slider').slider({
range : 'min',
min : 0,
max : 100,
value : 90,
slide : function(event, ui) {
// Change the speed label.
$('#speed-label').html('Speed: ' + ui.value + '%');
// Scale the speed.
teleop.scale = (ui.value / 100.0);
}
});
// Set the initial speed .
$('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
teleop.scale = ($('#speed-slider').slider('value') / 100.0);
init_flag = false;
}
}
</script>
</head>
<body onload="init()">
<h1>Web-browser keyboard teleoperation</h1>
<form >
Teleop topic:<br>
<input type="text" name="Teleop Topic" id='tele_topic' value="/cmd_vel_mux/input/teleop">
<br>
Base frame:<br>
<input type="text" name="Base frame" id='base_frame_name' value="/odom">
<br>
<input type="button" onmousedown="submit_values()" value="Submit">
</form>
<p>Run the following commands in the terminal then refresh this page. Check the JavaScript
console for the output.</p>
<ol>
<li><tt>roslaunch turtlebot_gazebo turtlebot_world.launch </tt></li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
<li>Use your arrow keys on your keyboard to move the robot (must have this browser window
focused).</li>
</ol>
<div id="speed-label"></div>
<div id="speed-slider"></div>
<div id="urdf"></div>
</body>
</html>
I think it will be better to try to save the .js file locally from the
http://robotwebtools.org/index.html and use.
Regards
