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

edit

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
dynamically_set_video_resolution();

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://127.0.0.1:9090");
    } catch (err) {
        javascript:console.log('Problem creating proxy connection object!');
        return;
    }
    javascript:console.log('created');
    javascript:console.log('connecting to 127.0.0.1:9090' + '...');

    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('connected');
        javascript:console.log('initializing ROSProxy...');
        try {
            connection.callService('/rosjs/topics', '[]', nop);
        } catch (error) {
            javascript:console.log('Problem initializing ROSProxy!');
            return;
        }
        javascript:console.log('initialized');       
        javascript:console.log('running');  
        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("video_canvas").setAttribute("width",width)   
document.getElementById("video_canvas").setAttribute("height",height)
document.getElementById("drawing_canvas").setAttribute("width",width)
document.getElementById("drawing_canvas").setAttribute("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');
});     

    });
}