Code Monkey home page Code Monkey logo

Comments (6)

MatthijsBurgh avatar MatthijsBurgh commented on June 26, 2024

Could please provide the library version?

Also it would be really helpful if you could create a simple example based on https://github.com/RobotWebTools/roslibjs/blob/develop/examples/simple.html.

Then we are sure the issue is not in code we assume we share, but we don't.

I will test it with a rosbridge server node according to the following parameters:

    <node name="rosbridge_websocket" pkg="rosbridge_server" type="rosbridge_websocket">
        <param name="authenticate" value="false" />
        <param name="port" value="9090"/>
        <param name="address" value=""/>
    </node>

from roslibjs.

mier2 avatar mier2 commented on June 26, 2024

Hi,
Thank you so much for the response. I believe my library version is 1.3.0. Here is the example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="../build/roslib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6/lib/eventemitter2.min.js"></script>
<script>
var ros = new ROSLIB.Ros({
    url : 'ws://localhost:9090'
  });

  ros.on('connection', function() {
    document.getElementById("status").innerHTML = "Connected";
  });

  ros.on('error', function(error) {
    document.getElementById("status").innerHTML = "Error";
  });

  ros.on('close', function() {
    document.getElementById("status").innerHTML = "Closed";
  });

 var txt_listener = new ROSLIB.Topic({
    ros : ros,
    name : 'topic_1',
    messageType : 'res_msgs/ResDimension'
  });

  txt_listener.subscribe(function(m) {
    document.getElementById("msg").innerHTML = m.file_name;
    document.getElementById("v").innerHTML = m.vm[0];
    document.getElementById("m").innerHTML = m.vm[1];
    document.getElementById("t").innerHTML = m.res_time;
  });


  var test = new ROSLIB.Topic({
    ros : ros,
    name : '/topic_2',
    messageType : 'std_msgs/String'
  });

 var twist = new ROSLIB.Message({
    data: "published"
  });
  test.publish(twist);


</script>


</head>

<body>
  <h1>Simple ROS User Interface</h1>
  <p>Messages from c++ node</p>
  <p>Connection status: <span id="status"></span></p>
  <p>Last file name received: <span id="msg"></span></p>
  <p>Last valence received: <span id="v"></span></p>
  <p>Last emotion received: <span id="m"></span></p>
  <p>Last time received: <span id="t"></span></p>
  <p>Message from javascript node</p>
  <p>Last file name received: <span id="msg1"></span></p>
  <p>Last valence received: <span id="v1"></span></p>
  <p>Last emotion received: <span id="m1"></span></p>
  <p>Last time received: <span id="t1"></span></p>
  


</body>

</html>

from roslibjs.

MatthijsBurgh avatar MatthijsBurgh commented on June 26, 2024

I have tested your example with both the current HEAD of the develop branch and the 1.3.0 tag. I don't experience any issues with the publishing.

I tested it the follwing:

  1. roslaunch rosbridge_server (like the code snippet above)
  2. rostopic echo /topic_2
  3. Open example.html in browser.
  4. Check output of the rostopic echo

from roslibjs.

RafaaZahra avatar RafaaZahra commented on June 26, 2024

this is other example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Rosbridge demo</h1>

    <p>To see this page update:</p>
    <ul>
      <li>Run a Rosbridge connection at <code>ws://localhost:9090</code></li>
      <li>Start publishing ROS messages to <code>/my_topic</code></li>
    </ul>

    <p>View the full tutorial at <a href="https://foxglove.dev/blog/using-rosbridge-with-ros1" target="_blank">Using Rosbridge with ROS 1</a> or <a href="https://foxglove.dev/blog/using-rosbridge-with-ros2" target="_blank">Using Rosbridge with ROS 2</a>.</p>

    <hr/>

    <p>Connection: <span id="status" style="font-weight: bold;">N/A</span></p>
    <p><code>/my_topic</code> messages received: <ul id="messages" style="font-weight: bold;"></ul></p>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@foxglove/[email protected]/build/roslib.min.js"></script>
    <script src="roslib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6/lib/eventemitter2.min.js"></script>
    <script type="text/javascript">
        // Our JavaScript code will go here
        // Create ros object to communicate over your Rosbridge connection
const ros = new ROSLIB.Ros({ url: "ws://192.168.100.30:9090" });

// When the Rosbridge server connects, fill the span with id "status" with "successful"
ros.on("connection", () => {
  document.getElementById("status").innerHTML = "successful";
});

// When the Rosbridge server experiences an error, fill the "status" span with the returned error
ros.on("error", (error) => {
  document.getElementById("status").innerHTML = `errored out (${error})`;
});

// When the Rosbridge server shuts down, fill the "status" span with "closed"
ros.on("close", () => {
  document.getElementById("status").innerHTML = "closed";
});

// Create a listener for /my_topic
const my_topic_listener = new ROSLIB.Topic({
  ros,
  name: "/my_topic",
  messageType: "std_msgs/String",
});

// When we receive a message on /my_topic, add its data as a list item to the "messages" ul
my_topic_listener.subscribe((message) => {
  const ul = document.getElementById("messages");
  const newMessage = document.createElement("li");
  newMessage.appendChild(document.createTextNode(message.data));
  ul.appendChild(newMessage);
});
    </script>
  </body>
</html>

from roslibjs.

MatthijsBurgh avatar MatthijsBurgh commented on June 26, 2024

@RafaaZahra you are using roslibjs from Foxglove, https://github.com/foxglove/roslibjs. You need to ask them for support.

from roslibjs.

MatthijsBurgh avatar MatthijsBurgh commented on June 26, 2024

As @mier2 didn't respond to my responds. I am closing this issue.

from roslibjs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.