Moved files around. ROS Display panel html is now back in the index file

ProjectFiles/js/ros_scripts.js

@@ -1,8 +1,11 @@
 var ros = new ROSLIB.Ros();
 
+ros.topics = [];
+ros.nodes = [];
+
 ros.connectioninfo = ['ws://', '192', '168', '0', '100', '9090'];
 //             ros.connectionName = 'ws://localhost:9090';
-    ros.connectionName = 'ws://192.168.0.100:9090';
+ros.connectionName = 'ws://192.168.0.100:9090';
 // If there is an error on the backend, an 'error' emit will be emitted.
 ros.on('error', function(error) {
     document.getElementById("ConnectionIPForm").className = "form-group has-warning has-feedback";
@@ -10,6 +13,7 @@ ros.on('error', function(error) {
     document.getElementById("ConnectionIPLabel").innerHTML = 'No connection';
     document.getElementById("ConnectionButton").className = "btn btn-warning"
     document.getElementById("rosbridgeconnection_badge").innerHTML = 'No connection';
+    document.getElementById("ROSNodes").innerHTML = "";
 
     rosbridgeconnection_badge
     console.log(error);192
@@ -24,10 +28,20 @@ ros.on('connection', function() {
     document.getElementById("ConnectionButton").className = "btn btn-success"
     
 
+    ros.nodes = [];
+    ros.topics = [];
+    
 });
 
 ros.on('close', function() {
     console.log('Connection closed.');
+
+    document.getElementById("ConnectionIPForm").className = "form-group has-warning has-feedback";
+    document.getElementById("ConnectionIPLabel").innerHTML = 'Connection closed';
+    document.getElementById("ConnectionButton").className = "btn btn-warning"
+    document.getElementById("rosbridgeconnection_badge").innerHTML = 'Connection closed';
+    ros.nodes = [];
+    ros.topics = [];
 });
 // Create a connection to the rosbridge WebSocket server.
 ros.connect(ros.connectionName);
@@ -59,11 +73,12 @@ function getTopics() {
 
     var request = new ROSLIB.ServiceRequest();
 
+    // ros.topics = [];
     topicsClient.callService(request, function(result) {
         ros.topics = result.topics;
     });
 
-    return ros.topics
+    return ros.topics;
 };
 
 function getNodes() {
@@ -76,11 +91,12 @@ function getNodes() {
 
     var request = new ROSLIB.ServiceRequest();
 
+    // ros.nodes = [];
     topicsClient.callService(request, function(result) {
         ros.nodes = result.nodes;
     });
 
-    return ros.nodes
+    return ros.nodes;
 };
 
 function getTime() {

README.md

@@ -4,7 +4,6 @@ The purpose of this project is an example of how to write a web page that can be
 
 ### Quick Start Guide
 
-This guide is for after you have completed the setup requirements
 
 If you are connecting to a remote computer that is running the roscore, you need to run the following lines in the terminal:
 
@@ -20,10 +19,10 @@ Then run the bash file in the working directory by running the following in the
 
 Feel free to clone this project and use it as a base for your own GUI.
 
-There is a file called "RobotDisplyPanel.html" that is pasted into the "Robot Display Panel" on the web page. This is where you should put in all your HTML for what you want to display.
+You can easily customise the "Robot Display" pannel by changing the HTML "index.html" file. 
 
-All ROS related Javascript should go in the "/include/js/ros_scripts.js" file.
-All functions that are used to update the GUI should go in the "update_guis.js" file
+All ROS related Javascript should go in the "ProjectFiles/js/ros_scripts.js" file.
+All functions that are used to update the GUI should go in the "ProjectFiles/js/update_guis.js" file
 
 
 

index.html

@@ -17,12 +17,6 @@
     <script src="include/js/jquery.min.js"></script>
     <script src="include/js/bootstrap.min.js"></script>
 
-    <script> 
-    $(function(){
-      $("#RobotInfo").load("ProjectFiles/HTML/RobotDisplayPanel.html"); 
-  });
-    </script> 
-
 
     <script src="include/js/roslib.js"></script>
     <script type="text/javascript" src="include/js/roslib.min.js"></script>
@@ -35,15 +29,18 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="import" href="ProjectFiles/HTML/RobotDisplayPanel.html">
-
+    <!--<script> 
+    $(function(){
+      $("#RobotInfo").load("ProjectFiles/HTML/RobotDisplayPanel.html");});
+    </script> 
 
+    <link rel="import" href="ProjectFiles/HTML/RobotDisplayPanel.html"> -->
 
 
 </head>
 <body>
     <div class="container">
-        <div class="jumbotron">
+        <div id="jumbotronTitle" class="jumbotron">
             <h1>Example GUI</h1>
         </div>
 
@@ -64,12 +61,59 @@
 
                 <div class="tab-pane active" id="RobotInfo">
 
-                    <!-- !!!!!!!!!!!!!!!!!!!!!VERY IMPORTANT !!!!!!!!!!!!!!!!! -->
-                    <!-- The contents of RobotDisplayPannel are goint to be pasted here -->
+                    <link rel="stylesheet" href="../../include/css/bootstrap.min.css">
+                    <script src="../../include/js/jquery.min.js"></script>
+                    <script src="../../include/js/bootstrap.min.js"></script>
 
+
+<!-- ##################################### ROS BAG PANEL ######################################### -->
+                    <!--  ROS Bag Panel -->
+                    <div class="panel panel-default">
+
+                        <div class="panel-heading">
+                            ROS Bag
+                        </div>
+                        <div class="panel-body">
+                            <div class="row">
+                                <button id="ConnectionButton" type="button" >
+                                    Connect
+                                </button>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="panel panel-default">
+
+                        <div class="panel-heading">
+                            Example Pannel Heading
+                        </div>
+
+
+                        <div class="panel-body">
+                            <div class="row">
+                                <label class="col-sm-2"> Bar Title </label>
+                                <div class="progress">
+                                    <div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar"
+                                    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%" >
+                                    No data recieved yet. </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <label class="col-sm-2"> Up Time (s): </label>
+                            <div class="col-sm-1" id="UpTime">
+                                N/A
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
 
+<!-- ##################################### END ROS BAG PANEL ######################################### -->
+
+
                 <div class="tab-pane" id="rosbridgeconnection">
 
 
@@ -129,6 +173,5 @@
         </div>
     </div>
 
-
 </body>
 </html>

launch.bash~

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+trap 'killall' INT
+
+killall() {
+    trap '' INT TERM     # ignore INT and TERM while shutting down
+    echo "**** Shutting down... ****"     # added double quotes
+    kill -TERM 0         # fixed order, send TERM not INT
+#    wait
+    echo DONE
+}
+roslaunch rosbridge_GUI_example all.launch &
+python -m SimpleHTTPServer 8000 
+

launch/all.launch

@@ -1,4 +1,4 @@
 <launch>
 	<include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" />
-<!--  <include file="$(find rosbridge_GUI_example)/launch/bagger.launch" /> -->
+    <include file="$(find rosbridge_GUI_example)/launch/bagger.launch" />
 </launch>

launch/bagger.launch

@@ -1,3 +1,3 @@
 <launch>
-#   <node name="bagger" pkg="rosbridge_GUI_example" type="bagger.py" /> 
+   <node name="bagger" pkg="rosbridge_GUI_example" type="bagger.py" /> 
 </launch>