robotology / yarp.js

JavaScript bindings for YARP!
GNU Lesser General Public License v3.0
10 stars 8 forks source link

Minor tutorial improvements #20

Closed nunoguedelha closed 3 years ago

nunoguedelha commented 3 years ago

This PR implements minor improvements of the "Simple Example" which consists in creating a simple server for sending and receiving messages with yarp.js.

Display the data received through a Yarp port

Whenever a message is written from the yarp network to /yarpjs/simple_example:i, the message is printed on screen.

This feature wasn't actually working in the original implementation, the message content received through the Yarp port (msg.content) was not actually displayed or was overwritten by the body text:

// whenever a message is read, print it on screen
yarpjs_read_port.onRead(function(msg){
  (msg.content);
});

One of the proper and safest ways of inserting the value of a variable embedded in the body text or appending it to the body text is to use the innerHTML property of a pre-defined section of the body:

<body>
  ...
  <div class='cont main'>
    <div id="description">
      <h1> yarp.js Simple Example </h1>

      <p>
        ...
      </p>
    </div>
  </div>
</body>
...
<script>
  ...
  // whenever a message is read, print it on screen
  yarpjs_read_port.onRead(function(msg){
    theDescription = document.getElementById('description');
    theDescription.innerHTML = theDescription.innerHTML + (msg.content);
  });
  ...
</script>

Cleanup

Removed some extra blank or commented code lines.

nunoguedelha commented 3 years ago

Thanks @traversaro !