RobotWebTools · sea-bass · Dec 19, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/examples/fibonacci.html → examples/action_client.html b/examples/fibonacci.html → examples/action_client.html
diff --git a/examples/fibonacci_server.html → examples/action_server.html b/examples/fibonacci_server.html → examples/action_server.html
diff --git a/examples/ros2_action_client.html b/examples/ros2_action_client.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script src="../build/roslib.js"></script>
+
+<script>
+  // 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.Action({
+    ros : ros,
+    name : '/fibonacci',
+    actionType : 'action_tutorials_interfaces/Fibonacci'
+  });
+
+  // Send an action goal
+  var goal = {order: 5};
+
+  var goal_id = fibonacciClient.sendGoal(goal, 
+  function(result) {
+    console.log('Result for action goal on ' + fibonacciClient.name + ': ' + result.result.sequence);
+  },
+  function(feedback) {
+    console.log('Feedback for action on ' + fibonacciClient.name + ': ' + feedback.partial_sequence);
+  },
+  );
+</script>
+</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>ros2 launch rosbridge_server rosbridge_websocket_launch.xml</tt></li>
+    <li><tt>ros2 run action_tutorials_py fibonacci_action_server</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>
+</body>
+</html>
diff --git a/examples/ros2_action_server.html b/examples/ros2_action_server.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script src="../build/roslib.js"></script>
+
+<script>
+  // 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) {
+    console.log(error);
+  });
+
+  // The ActionServer
+  // ----------------
+
+  var fibonacciServer = new ROSLIB.Action({
+    ros : ros,
+    name : '/fibonacci',
+    actionType : 'action_tutorials_interfaces/Fibonacci'
+  });
+
+  var actionCallback = function(goal, id) {
+    console.log('Received action goal on ' + fibonacciServer.name + ', order: ' + goal.order);
+    console.log('ID: ' + id);
+    fibonacciSequence = [];
+    fibonacciSequence.push(0);
+    fibonacciSequence.push(1);
+
+    // failure case
+    if (goal.order > 47) {
+      console.log('Aborting. Value will exceed maximum signed integer value.');
+      fibonacciServer.setFailed(id);
+      return;
+    }
+
+    // publish feedback
+    for (var i = 1; i < goal.order; i++) {
+      fibonacciSequence.push( fibonacciSequence[i] + fibonacciSequence[i-1] );
+      console.log('Sending feedback: ' + fibonacciSequence);
+      fibonacciServer.sendFeedback(id, { partial_sequence : fibonacciSequence });
+    }
+
+    // send result
+    console.log('Sending result: ' + fibonacciSequence);
+    fibonacciServer.setSucceeded(id, { sequence: fibonacciSequence });
+  };
+  var cancelCallback = function(id) {
+    console.log('Canceled action with goal ID ' + id);
+  };
+
+  fibonacciServer.advertise(actionCallback, cancelCallback);
+</script>
+</head>
+
+<body>
+  <h1>Fibonacci ActionServer 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>ros2 launch rosbridge_server rosbridge_websocket_launch.xml</tt></li>
+    <li><tt>refresh this page</tt></li>
+    <li><tt>ros2 run action_tutorials_py fibonacci_action_client</tt>
+        <br>or<br>
+        <tt>ros2 action send_goal --feedback /fibonacci action_tutorials_interfaces/action/Fibonacci order:\ 20\ </tt>
+    </li>
+  </ol>
+</body>
+</html>
diff --git a/examples/ros2_simple.html b/examples/ros2_simple.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
+<script src="../build/roslib.js"></script>
+
+<script>
+  // Connecting to ROS
+  // -----------------
+  var ros = new ROSLIB.Ros();
+
+  // 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';
+  });
+
+  // Create a connection to the rosbridge WebSocket server.
+  ros.connect('ws://localhost:9090');
+
+  // Publishing a Topic
+  // ------------------
+
+  // First, we create a Topic object with details of the topic's name and message type.
+  var cmdVel = new ROSLIB.Topic({
+    ros : ros,
+    name : '/cmd_vel',
+    messageType : 'geometry_msgs/Twist'
+  });
+
+  // Then we create the payload to be published. The object we pass in to ros.Message matches the
+  // fields defined in the geometry_msgs/Twist.msg definition.
+  var twist = new ROSLIB.Message({
+    linear : {
+      x : 0.1,
+      y : 0.2,
+      z : 0.3
+    },
+    angular : {
+      x : -0.1,
+      y : -0.2,
+      z : -0.3
+    }
+  });
+
+  // And finally, publish.
+  cmdVel.publish(twist);
+
+  // Subscribing to a Topic
+  // ----------------------
+
+  // Like when publishing a topic, we first create a Topic object with details of the topic's name
+  // and message type. Note that we can call publish or subscribe on the same topic object.
+  var listener = new ROSLIB.Topic({
+    ros : ros,
+    name : '/listener',
+    messageType : 'std_msgs/String'
+  });
+
+  // Then we add a callback to be called every time a message is published on this topic.
+  listener.subscribe(function(message) {
+    console.log('Received message on ' + listener.name + ': ' + message.data);
+
+    // If desired, we can unsubscribe from the topic as well.
+    listener.unsubscribe();
+  });
+
+  // Calling a service
+  // -----------------
+
+  // First, we create a Service client with details of the service's name and service type.
+  var addTwoIntsClient = new ROSLIB.Service({
+    ros : ros,
+    name : '/add_two_ints',
+    serviceType : 'example_interfaces/AddTwoInts'
+  });
+
+  // Then we create a Service Request. The object we pass in to ROSLIB.ServiceRequest matches the
+  // fields defined in the rospy_tutorials AddTwoInts.srv file.
+  var request = new ROSLIB.ServiceRequest({
+    a : 1,
+    b : 2
+  });
+
+  // Finally, we call the /add_two_ints service and get back the results in the callback. The result
+  // is a ROSLIB.ServiceResponse object.
+  addTwoIntsClient.callService(request, function(result) {
+    console.log('Result for service call on ' + addTwoIntsClient.name + ': ' + result.sum);
+  });
+
+  // Advertising a Service
+  // ---------------------
+
+  // The Service object does double duty for both calling and advertising services
+  var setBoolServer = new ROSLIB.Service({
+    ros : ros,
+    name : '/set_bool',
+    serviceType : 'std_srvs/SetBool'
+  });
+
+  // Use the advertise() method to indicate that we want to provide this service
+  setBoolServer.advertise(function(request, response) {
+    console.log('Received service request on ' + setBoolServer.name + ': ' + request.data);
+    response['success'] = true;
+    response['message'] = 'Set successfully';
+    return true;
+  });
+
+  // Getting a param value
+  // ---------------------
+
+  // In ROS 2, params are set in the format 'node_name:param_name'
+  var favoriteColor = new ROSLIB.Param({
+    ros : ros,
+    name : '/add_two_ints_server:use_sim_time'
+  });
+
+  favoriteColor.get(function(value) {
+    console.log('The value of use_sim_time before setting is ' + value);
+  });
+  favoriteColor.set(true);
+  favoriteColor.get(function(value) {
+    console.log('The value of use_sim_time after setting is ' + value);
+  });
+</script>
+</head>
+
+<body>
+  <h1>Simple roslib 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>ros2 topic pub /listener std_msgs/msg/String "{ data: 'hello world' }" </tt></li>
+    <li><tt>ros2 topic echo /cmd_vel</tt></li>
+    <li><tt>ros2 run demo_nodes_py add_two_ints_server</tt></li>
+    <li><tt>ros2 launch rosbridge_server rosbridge_websocket_launch.xml</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>
+</body>
+</html>
diff --git a/examples/simple.html b/examples/simple.html
@@ -65,8 +65,8 @@
   // And finally, publish.
   cmdVel.publish(twist);
 
-  //Subscribing to a Topic
-  //----------------------
+  // Subscribing to a Topic
+  // ----------------------
 
   // Like when publishing a topic, we first create a Topic object with details of the topic's name
   // and message type. Note that we can call publish or subscribe on the same topic object.
@@ -138,7 +138,7 @@
     name : 'max_vel_y'
   });
 
-  //Then we set the value of the param, which is sent to the ROS Parameter Server.
+  // Then we set the value of the param, which is sent to the ROS Parameter Server.
   maxVelX.set(0.8);
   maxVelX.get(function(value) {
     console.log('MAX VAL: ' + value);