examples/fibonacci.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>roslibjs Febonacci example</title>
</head>

<body>
  <h1>Fibonacci ActionClient Example</h1>
  <p>Run the following commands in the terminal then refresh this page. Check the JavaScript
    console for the output.</p>
  <ol>
    <li><tt>roscore</tt></li>
    <li><tt>rosrun actionlib_tutorials fibonacci_server</tt></li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
  </ol>
  <div id="statusIndicator">
    <p id="connecting">
      Connecting to rosbridge...
    </p>
    <p id="connected" style="color:#00D600; display:none">
      Connected
    </p>
    <p id="error" style="color:#FF0000; display:none">
      Error in the backend!
    </p>
    <p id="closed" style="display:none">
      Connection closed.
    </p>
  </div>

  <script type="module">
    import ROSLIB from '../build/roslib.js';
    // Connecting to ROS
    // -----------------
    var ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

    // If there is an error on the backend, an 'error' emit will be emitted.
    ros.on('error', function(error) {
      document.getElementById('connecting').style.display = 'none';
      document.getElementById('connected').style.display = 'none';
      document.getElementById('closed').style.display = 'none';
      document.getElementById('error').style.display = 'inline';
      console.log(error);
    });

    // Find out exactly when we made a connection.
    ros.on('connection', function() {
      console.log('Connection made!');
      document.getElementById('connecting').style.display = 'none';
      document.getElementById('error').style.display = 'none';
      document.getElementById('closed').style.display = 'none';
      document.getElementById('connected').style.display = 'inline';
    });

    ros.on('close', function() {
      console.log('Connection closed.');
      document.getElementById('connecting').style.display = 'none';
      document.getElementById('connected').style.display = 'none';
      document.getElementById('closed').style.display = 'inline';
    });

    // The ActionClient
    // ----------------

    var fibonacciClient = new ROSLIB.ActionClient({
      ros : ros,
      serverName : '/fibonacci',
      actionName : 'actionlib_tutorials/FibonacciAction'
    });

    // Create a goal.
    var goal = new ROSLIB.Goal({
      actionClient : fibonacciClient,
      goalMessage : {
        order : 7
      }
    });

    // Print out their output into the terminal.
    goal.on('feedback', function(feedback) {
      console.log('Feedback: ' + feedback.sequence);
    });
    goal.on('result', function(result) {
      console.log('Final Result: ' + result.sequence);
    });

    // Send the goal to the action server.
    goal.send();
</script>
</body>
</html>