Skip to content

Commit

Permalink
Merge pull request RobotWebTools#88 from T045T/develop
Browse files Browse the repository at this point in the history 
Add simple indicator to examples showing the status of websocket connection
  • Loading branch information
@rctoris
rctoris committed Jun 12, 2014
2 parents ba0707f + c0d821e commit e37106c
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 2 deletions.
34 changes: 34 additions & 0 deletions examples/fibonacci.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,29 @@

// 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
// ----------------

Expand Down Expand Up @@ -56,5 +76,19 @@ <h1>Fibonacci ActionClient Example</h1>
<li><tt>rosrun actionlib_tutorials fibonacci_server</tt></li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</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>
29 changes: 29 additions & 0 deletions examples/simple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,27 @@

// 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.
Expand Down Expand Up @@ -138,5 +153,19 @@ <h1>Simple roslib Example</h1>
<li><tt>rosrun rospy_tutorials add_two_ints_server</tt></li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</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>
29 changes: 29 additions & 0 deletions examples/tf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,27 @@

// 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.
Expand Down Expand Up @@ -53,5 +68,19 @@ <h1>Simple TF Example</h1>
<li>Use your arrow keys on your keyboard to move the turtle (must have <tt>turtle_tf_demo.launch</tt>
terminal focused).</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>
43 changes: 41 additions & 2 deletions examples/urdf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
ros : ros,
name : 'robot_description'
});

param.get(function(param) {
// Setup the loader for the URDF.
var urdfModel = new ROSLIB.UrdfModel({
Expand All @@ -28,6 +29,30 @@

console.log(urdfModel);
});
// 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';
});
}
</script>
</head>
Expand All @@ -38,8 +63,22 @@ <h1>Simple URDF Parsing 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>roslaunch pr2_description upload_pr2.launch</li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</li>
<li><tt>roslaunch pr2_description upload_pr2.launch</tt></li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</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>

0 comments on commit e37106c

Please sign in to comment.