CHAPTER 12: WEB Application: No Preview (webtools not working??) #15

ghost · 2018-09-05T08:59:48Z

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.

ghost · 2018-09-05T13:07:21Z

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>

qboticslabs · 2018-09-06T04:09:46Z

I think it will be better to try to save the .js file locally from the

http://robotwebtools.org/index.html
and use.

Regards

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CHAPTER 12: WEB Application: No Preview (webtools not working??) #15

CHAPTER 12: WEB Application: No Preview (webtools not working??) #15

ghost commented Sep 5, 2018 •

edited by ghost

Loading

ghost commented Sep 5, 2018 •

edited by ghost

Loading

qboticslabs commented Sep 6, 2018

CHAPTER 12: WEB Application: No Preview (webtools not working??) #15

CHAPTER 12: WEB Application: No Preview (webtools not working??) #15

Comments

ghost commented Sep 5, 2018 • edited by ghost Loading

ghost commented Sep 5, 2018 • edited by ghost Loading

qboticslabs commented Sep 6, 2018

ghost commented Sep 5, 2018 •

edited by ghost

Loading

ghost commented Sep 5, 2018 •

edited by ghost

Loading