ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | ros @ Robotics Stack Exchange
Ask Your Question

Rosbridge: How to read value in from rostopic and set javascript variable

asked 2012-03-19 06:55:07 -0600

Scott gravatar image

updated 2012-03-19 07:18:10 -0600

Hi, I am trying to figure out how to fetch the values coming back from a ros topic over the rosbridge. Below is the output of the topic when I echo it. I want to grab the width and height of the image output and assign them to javascript variables that I can later use to set a canvas width and height dynamically. Thanks in advance for help. -Scott

Here is the line I am using to try to subscribe to the topic over rosbridge connection.callService('/rosjs/subscribe', {data: ['/camera/rgb/camera_info', 2000]});

topic name: /camera/rgb/camera_info

Topic output on echo:

header: seq: 377284 stamp: secs: 1332175927 nsecs: 249637808 frame_id: /openni_rgb_optical_frame height: 480 width: 640 distortion_model: plumb_bob D: [0.0, 0.0, 0.0, 0.0, 0.0] K: [525.0, 0.0, 319.5, 0.0, 525.0, 239.5, 0.0, 0.0, 1.0] R: [1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0] P: [525.0, 0.0, 319.5, 0.0, 0.0, 525.0, 239.5, 0.0, 0.0, 0.0, 1.0, 0.0] binning_x: 0 binning_y: 0 roi: x_offset: 0 y_offset: 0 height: 0 width: 0

do_rectify: False

edit retag flag offensive close merge delete

2 Answers

Sort by ยป oldest newest most voted

answered 2012-03-20 08:40:34 -0600

Scott gravatar image

updated 2012-03-20 08:42:19 -0600

Thanks for all the suggestions. I was able to get it working with the following. What looks like was happening was, it was unsubscribing before having a chance to fire on the event. So I embedded the unsubscribe bit inside the eventHandler, so it will basically always fires at least once, gets the values (which I only need once as they don't change as you noted) and then disconnect the listener. IT's pretty cool because I then dynamically size the html5 canvas's I am using, along with the location of the buttons beneath the image. I have been working with Patrick Goebel to create an html5 gui front end to the Pi Face Tracker, which we will be releasing soon now that this last bit is working. Here is the final working version of the code block. Thanks again for all your help. Hope others find this useful.

First with the HTML (to be released soon), I initialize the canvas and buttons

Then on init() for page load, I declare the width and height to a default value and call the method that dynamically adjust size and location of canvas and buttons with method call

// set variables for adjusting canvas and video resolution settings var width = "320" //default width var height = "240" //default height javascript:console.log("default width = " + width); javascript:console.log("default height = " + height);

//get kinect video stream width and height values from rostopic via rosbridge

Full Method:

function dynamically_set_video_resolution() { javascript:console.log('console initialized');

    javascript:console.log('creating ROSProxy connection object...');
    var connection = null;
    try {
        connection = new ros.Connection("ws://");
    } catch (err) {
        javascript:console.log('Problem creating proxy connection object!');
    javascript:console.log('connecting to' + '...');

    connection.setOnClose(function (e) {
        javascript:console.log('connection closed');
    connection.setOnError(function (e) {
        javascript:console.log('network error!');
    connection.setOnOpen(function (e) {
        javascript:console.log('initializing ROSProxy...');
        try {
            connection.callService('/rosjs/topics', '[]', nop);
        } catch (error) {
            javascript:console.log('Problem initializing ROSProxy!');
        javascript:console.log('trying to create topic Handler and read data back from topic');
        connection.addHandler('/camera/rgb/camera_info',function(msg) {
    width = msg.width;
    height = msg.height;

    javascript:console.log("dynamically adjusted width = " + width);
    javascript:console.log("dynamically adjusted height = " + height);

document.getElementById("button_location").setAttribute("style","position: absolute; left: 0; top: " + height + ";")

    connection.callService('/rosjs/unsubscribe','["/camera/rgb/camera_info",0]',function(rsp) {
    javascript:console.log('unsubscribed to /camera/rgb/camera_info');

connection.callService('/rosjs/subscribe','["/camera/rgb/camera_info",0]',function(rsp) {
    javascript:console.log('subscribed to /camera/rgb/camera_info');

edit flag offensive delete link more

answered 2012-03-19 10:10:09 -0600

tjay gravatar image

I'm assuming /camera/rgb/camera_info is of the sensor_msgs/CameraInfo type. If that's the case, storing the width and height should be possible with code like the following:

var con = new ros.Connection('ws://localhost:9090');

var width = null;
var height = null;

con.setOnOpen(function() {
  con.addHandler('/camera/rgb/camera_info',function(msg) {
    width = msg.width;
    height = msg.height;
    //do something with width and height?
    con.callService('/rosjs/unsubscribe',['/camera/rgb/camera_info'],function() {});
  con.callService('/rosjs/subscribe',['/camera/rgb/camera_info',0,'sensor_msgs/CameraInfo'],function() {});

Note that I'm also assuming that the width and height don't change over time.

edit flag offensive delete link more


Thanks for the reply. I was able to add the code you gave from above, however, the event handler appears to not ever get fired as the logging I added inside the addHandler never logs, even though when I run rostopic echo /camera/rgb/camera_info in a is updating constantly. Suggestions?

Scott gravatar image Scott  ( 2012-03-20 05:49:03 -0600 )edit

Make sure I've guessed the type right by running rostopic type /camera/rgb/camera_info at the command line. If it's something different than sensor_msgs/CameraInfo then substitute the actual type in the call to /rosjs/subscribe. If I have guessed right, let me know and we'll figure what else is up.

tjay gravatar image tjay  ( 2012-03-20 08:08:39 -0600 )edit

Question Tools


Asked: 2012-03-19 06:55:07 -0600

Seen: 1,928 times

Last updated: Mar 20 '12