From c0d821eb0f6ad3b777d0b510072fc40959547553 Mon Sep 17 00:00:00 2001
From: Nils Berg <berg.nils@gmail.com>
Date: Thu, 12 Jun 2014 14:48:39 +0200
Subject: [PATCH] add connection status indicator to roslibjs examples

Related issue: https://github.com/RobotWebTools/roslibjs/issues/67
---
 examples/fibonacci.html | 34 ++++++++++++++++++++++++++++++++
 examples/simple.html    | 29 +++++++++++++++++++++++++++
 examples/tf.html        | 29 +++++++++++++++++++++++++++
 examples/urdf.html      | 43 +++++++++++++++++++++++++++++++++++++++--
 4 files changed, 133 insertions(+), 2 deletions(-)

diff --git a/examples/fibonacci.html b/examples/fibonacci.html
index 12dc76a1..2aa7c414 100644
--- a/examples/fibonacci.html
+++ b/examples/fibonacci.html
@@ -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
   // ----------------
 
@@ -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>
diff --git a/examples/simple.html b/examples/simple.html
index 1d24a6e5..f054a15a 100644
--- a/examples/simple.html
+++ b/examples/simple.html
@@ -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.
@@ -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>
diff --git a/examples/tf.html b/examples/tf.html
index 8254e059..ebdf5b92 100644
--- a/examples/tf.html
+++ b/examples/tf.html
@@ -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.
@@ -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>
diff --git a/examples/urdf.html b/examples/urdf.html
index 05881dde..73112fa0 100644
--- a/examples/urdf.html
+++ b/examples/urdf.html
@@ -20,6 +20,7 @@
       ros : ros,
       name : 'robot_description'
     });
+  
     param.get(function(param) {
       // Setup the loader for the URDF.
       var urdfModel = new ROSLIB.UrdfModel({
@@ -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>
@@ -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>