diff --git a/ProjectFiles/js/ros_scripts.js b/ProjectFiles/js/ros_scripts.js
deleted file mode 100644
index 0532e98..0000000
--- a/ProjectFiles/js/ros_scripts.js
+++ /dev/null
@@ -1,181 +0,0 @@
-var ros = new ROSLIB.Ros();
-
-ros.topics = [];
-ros.nodes = [];
-
-ros.recording = false;
-
-
-ros.connectionName = 'ws://192.168.1.105: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";
-    document.getElementById("ConnectionIPInput").value = ros.connectionName;
-    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
-});
-// Find out exactly when we made a connection.
-ros.on('connection', function() {
-    console.log('Connection made!');
-    document.getElementById("ConnectionIPForm").className = "form-group has-success has-feedback";
-    document.getElementById("ConnectionIPInput").value = ros.connectionName;
-    document.getElementById("ConnectionIPLabel").innerHTML = 'Connection made at:';
-    document.getElementById("rosbridgeconnection_badge").innerHTML = 'Connected';
-    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);
-
-
-///////////////////////////////////////////////////////////////////////////////////
-// Publishers
-///////////////////////////////////////////////////////////////////////////////////
-
-function publishBagMessage(bagFilename)
-{
-    var bagMessage = new ROSLIB.Message({
-        data : bagFilename
-    })
-    bagPublisher.publish(bagMessage)
-}
-
-////////////////////////////////////////////////////////////////
-// Topics
-////////////////////////////////////////////////////////////////
-
-var bagPublisher = new ROSLIB.Topic({
-    ros : ros,
-    name : 'bag_publisher',
-    messageType : 'std_msgs/String'
-});
-
-var bagNotifier = new ROSLIB.Topic({
-    ros : ros,
-    name : 'bag_notifier',
-    messageType : 'std_msgs/String'
-});
-
-////////////////////////////////////////////////////////////////
-// Subscribers
-////////////////////////////////////////////////////////////////
-
-
-bagNotifier.subscribe(function(message) {
-    if (message.data === "STARTED") {
-        document.getElementById("recordButtonText").innerHTML = "Stop"
-        document.getElementById("recordButton").className = "btn btn-danger"
-    } else {
-        document.getElementById("recordButtonText").innerHTML = "Start"
-        document.getElementById("recordButton").className = "btn btn-primary"
-    }
-});
-
-
-///////////////////////////////////////////////////////////////////////////////////
-// Functions
-///////////////////////////////////////////////////////////////////////////////////
-
-
-
-// attept to connect to the ros master from the IP given orgrab it from the form
-ros.attemptConnection = function(ipAddress)
-{
-    if( typeof ipAddress !== "undefined")
-    {
-        ros.connectionName = ipAddress;
-    }
-    else
-    {
-        ros.connectionName = document.getElementById("ConnectionIPInput").value
-    }
-    console.log('Connection = ' + ros.connectionName);
-    ros.connect(ros.connectionName);
-}
-
-
-function getTopics() {
-
-    var topicsClient = new ROSLIB.Service({
-    ros : ros,
-    name : '/rosapi/topics',
-    serviceType : '/rosapi/Topics'
-    });
-
-    var request = new ROSLIB.ServiceRequest();
-
-    // ros.topics = [];
-    topicsClient.callService(request, function(result) {
-        ros.topics = result.topics;
-    });
-
-    return ros.topics;
-};
-
-function getNodes() {
-
-    var topicsClient = new ROSLIB.Service({
-    ros : ros,
-    name : '/rosapi/nodes',
-    serviceType : '/rosapi/nodes'
-    });
-
-    var request = new ROSLIB.ServiceRequest();
-
-    // ros.nodes = [];
-    topicsClient.callService(request, function(result) {
-        ros.nodes = result.nodes;
-    });
-
-    return ros.nodes;
-};
-
-function getTime() {
-
-    var topicsClient = new ROSLIB.Service({
-    ros : ros,
-    name : '/rosapi/get_time',
-    serviceType : '/rosapi/GetTime'
-    });
-
-    var request = new ROSLIB.ServiceRequest({});
-
-    topicsClient.callService(request, function(result) {
-        console.log("Getting Time...");
-        console.log(result.time.secs);
-    });
-};
-
-function toggleRecording()
-{
-    document.getElementById("recordButtonText").innerHTML = "Wait"
-    document.getElementById("recordButton").className = "btn btn-warning"
-    if (!ros.recording) {
-        ros.recording = true
-        publishBagMessage(document.getElementById("recordText").value)
-    } else {
-        ros.recording = false
-        publishBagMessage("STOP")
-    }
-}
diff --git a/ProjectFiles/js/update_guis.js b/ProjectFiles/js/update_guis.js
deleted file mode 100644
index f75ab30..0000000
--- a/ProjectFiles/js/update_guis.js
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-function updateVoltage(voltage)
-{
-
-    var voltage_min = 9.5;
-    var voltage_max = 12.5;
-    var voltage_range = voltage_max - voltage_min;
-
-    var voltage_percentage = (voltage - voltage_min) / voltage_range * 100;
-
-    var voltage_string = "";
-    voltage_string = voltage_string.concat(voltage_percentage);
-    voltage_string = voltage_string.substring(0,4);
-    voltage_string = voltage_string.concat('%');
-
-    document.getElementById("VoltageDisplay").style.width = voltage_string;
-    document.getElementById("VoltageDisplay").innerHTML = voltage_string;
-
-    if (voltage_percentage < 50 && voltage_percentage > 25 ) {
-        document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-warning"
-    }
-    else if ( voltage_percentage <= 25)
-    {
-        document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-danger"
-        var sound = document.getElementById("audio");
-        sound.play()
-        console.log("Pay Sound")
-    }
-    else
-    {
-        document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-success"
-    }
-};
-
-function updateTopicsGUI()
-{
-
-    topics = getTopics()
-    topics.sort();
-    if(topics != null){
-        var innerHTML = "";
-        for (var i = 0; i < topics.length; i++ )
-        {
-            innerHTML = innerHTML.concat(topics[i]);
-            innerHTML = innerHTML.concat("<br>");
-        }
-        document.getElementById("ROSTopics").innerHTML = innerHTML;
-    }
-
-};
-
-function updateNodesGUI()
-{
-
-    nodes = getNodes()
-    nodes.sort()
-    if(nodes != null){
-        var innerHTML = "";
-        for (var i = 0; i < nodes.length; i++ )
-        {
-            innerHTML = innerHTML.concat(nodes[i]);
-            innerHTML = innerHTML.concat("<br>");
-        }
-        document.getElementById("ROSNodes").innerHTML = innerHTML;
-    }
-
-};
-
-window.setInterval(function(){
-  updateTopicsGUI()
-  updateNodesGUI()
-}, 500);
-
-function validateForm()
-{
-    ros.attemptConnection();
-    return false;
-};
-
-function addInputsForConnection()
-{
-
-    var innerHTML = "";
-
-    for (var i = 0; i < ros.connectioninfo.length; i ++)
-    {
-
-        console.log(ros.connectioninfo[i])
-        el = document.getElementById("ConnectionInformation")
-
-        innerHTML = innerHTML.concat("<span class=\"col-sm-1\">");
-        innerHTML = innerHTML.concat("<input type=\"text\" class=\"form-control\" value=\"");
-        innerHTML = innerHTML.concat(ros.connectioninfo[i])
-        innerHTML = innerHTML.concat("\"/>")
-        innerHTML = innerHTML.concat("</span>")
-        if(i >0 && i < 4)
-        {
-            innerHTML = innerHTML.concat("<span class=\"col-sxm-1\">.</span>")
-        }
-
-
-    }
-    el.innerHTML = innerHTML;
-
-    console.log(innerHTML)
-
-
-}
-
-
-
-
-
diff --git a/backend/images/D-pad.png b/backend/images/D-pad.png
new file mode 100644
index 0000000..fe3d516
Binary files /dev/null and b/backend/images/D-pad.png differ
diff --git a/backend/images/D-pad_blank.png b/backend/images/D-pad_blank.png
new file mode 100644
index 0000000..72e4654
Binary files /dev/null and b/backend/images/D-pad_blank.png differ
diff --git a/backend/images/D-pad_center.png b/backend/images/D-pad_center.png
new file mode 100644
index 0000000..5c1d352
Binary files /dev/null and b/backend/images/D-pad_center.png differ
diff --git a/backend/images/D-pad_left.png b/backend/images/D-pad_left.png
new file mode 100644
index 0000000..f601748
Binary files /dev/null and b/backend/images/D-pad_left.png differ
diff --git a/backend/images/D-pad_up.png b/backend/images/D-pad_up.png
new file mode 100644
index 0000000..a78b4a3
Binary files /dev/null and b/backend/images/D-pad_up.png differ
diff --git a/backend/js/custom_nodes.js b/backend/js/custom_nodes.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/backend/js/custom_nodes.js
@@ -0,0 +1 @@
+
diff --git a/backend/js/custom_topics.js b/backend/js/custom_topics.js
new file mode 100644
index 0000000..f1eb1cc
--- /dev/null
+++ b/backend/js/custom_topics.js
@@ -0,0 +1,55 @@
+function Topic(name, type)
+{
+  this.name = name;
+  this.type = type;
+
+  this.includeInBag = false;
+
+  this.equals = function (otherTopic)
+  {
+    if( this.name == otherTopic.name && this.type == otherTopic.type)
+    {
+      return true;
+    }
+    return false;
+  };
+
+};
+
+function containsTopic(obj, list) {
+    var x;
+    for (x in list) {
+        if (obj.equals(list[x])) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function testToics()
+{
+  var topics = [new Topic("a","a_t"), new Topic("b","b_t"), new Topic("c","c_t")];
+
+  console.log("Testing Topic");
+
+  if (containsTopic(new Topic("a","a_t"),topics) == true)
+  {
+    console.log("pass")
+  }
+  else
+  {
+    console.log(" contains true fail")
+  }
+
+  if (containsTopic(new Topic("d","d_t"),topics) == false)
+  {
+    console.log("pass")
+  }
+  else
+  {
+    console.log(" contains d fail")
+  }
+}
+
+testToics();
\ No newline at end of file
diff --git a/backend/js/ros_scripts.js b/backend/js/ros_scripts.js
new file mode 100644
index 0000000..93b818c
--- /dev/null
+++ b/backend/js/ros_scripts.js
@@ -0,0 +1,124 @@
+var ros = new ROSLIB.Ros();
+
+ros.recording = false;
+
+// ros.connectionName = 'ws://192.168.1.105:9090';
+ros.connectionName = 'ws://localhost: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";
+  document.getElementById("ConnectionIPInput").value = ros.connectionName;
+  document.getElementById("ConnectionIPLabel").innerHTML = 'No connection';
+  document.getElementById("ConnectionButton").className = "btn btn-warning"
+  document.getElementById("rosbridgeconnection_badge").innerHTML = 'No connection';
+  document.getElementById("ROSNodes").innerHTML = "No Nodes Detected";
+
+  rosbridgeconnection_badge
+  console.log(error);192
+});
+// Find out exactly when we made a connection.
+ros.on('connection', function() {
+  console.log('Connection made!');
+  document.getElementById("ConnectionIPForm").className = "form-group has-success has-feedback";
+  document.getElementById("ConnectionIPInput").value = ros.connectionName;
+  document.getElementById("ConnectionIPLabel").innerHTML = 'Connection made at:';
+  document.getElementById("rosbridgeconnection_badge").innerHTML = 'Connected';
+  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);
+
+
+///////////////////////////////////////////////////////////////////////////////////
+// Publishers
+///////////////////////////////////////////////////////////////////////////////////
+
+function publishBagMessage(bagFilename)
+{
+  var bagMessage = new ROSLIB.Message({
+    data : bagFilename
+  })
+  bagPublisher.publish(bagMessage)
+}
+
+////////////////////////////////////////////////////////////////
+// Topics
+////////////////////////////////////////////////////////////////
+
+var bagPublisher = new ROSLIB.Topic({
+  ros : ros,
+  name : 'bag_publisher',
+  messageType : 'std_msgs/String'
+});
+
+var bagNotifier = new ROSLIB.Topic({
+  ros : ros,
+  name : 'bag_notifier',
+  messageType : 'std_msgs/String'
+});
+
+////////////////////////////////////////////////////////////////
+// Subscribers
+////////////////////////////////////////////////////////////////
+
+
+bagNotifier.subscribe(function(message) {
+  if (message.data === "STARTED") {
+    document.getElementById("recordButtonText").innerHTML = "Stop"
+    document.getElementById("recordButton").className = "btn btn-danger"
+  } else {
+    document.getElementById("recordButtonText").innerHTML = "Start"
+    document.getElementById("recordButton").className = "btn btn-primary"
+  }
+});
+
+
+///////////////////////////////////////////////////////////////////////////////////
+// Functions
+///////////////////////////////////////////////////////////////////////////////////
+
+
+
+// attept to connect to the ros master from the IP given orgrab it from the form
+ros.attemptConnection = function(ipAddress)
+{
+  if( typeof ipAddress !== "undefined")
+  {
+    ros.connectionName = ipAddress;
+  }
+  else
+  {
+    ros.connectionName = document.getElementById("ConnectionIPInput").value
+  }
+  console.log('Connection = ' + ros.connectionName);
+  ros.connect(ros.connectionName);
+}
+
+function toggleRecording()
+{
+  document.getElementById("recordButtonText").innerHTML = "Wait"
+  document.getElementById("recordButton").className = "btn btn-warning"
+  if (!ros.recording) {
+    ros.recording = true
+    publishBagMessage(document.getElementById("recordText").value)
+  } else {
+    ros.recording = false
+    publishBagMessage("STOP")
+  }
+}
diff --git a/backend/js/update_guis.js b/backend/js/update_guis.js
new file mode 100644
index 0000000..5a60a11
--- /dev/null
+++ b/backend/js/update_guis.js
@@ -0,0 +1,161 @@
+
+ros.topics = [];
+ros.nodes = [];
+
+$("#myImage").click ( function (evt) {
+
+  var jThis               = $(this);
+  var offsetFromParent    = jThis.position ();
+  var topThickness        = (jThis.outerHeight(true) - jThis.height() ) / 2;
+  var leftThickness       = (jThis.outerWidth (true) - jThis.width () ) / 2;
+
+  //--- (x,y) coordinates of the mouse click relative to the image.
+  var x                   = evt.pageX - offsetFromParent.left - leftThickness;
+  var y                   = evt.pageY - offsetFromParent.top  - topThickness;
+
+  ReportDims ();
+  $('#rez').append ('<p>User clicked at: ' + x + ', ' + y + ' (x,y).</p>')
+} );
+
+
+function ReportDims () {
+  w   = $("#myImage").width  ();
+  h   = $("#myImage").height ();
+  $('#rez').text ('The image is ' + w + ' by ' + h + ' (w by h).');
+}
+
+ReportDims ();
+
+function updateVoltage(voltage)
+{
+
+  var voltage_min = 9.5;
+  var voltage_max = 12.5;
+  var voltage_range = voltage_max - voltage_min;
+
+  var voltage_percentage = (voltage - voltage_min) / voltage_range * 100;
+
+  var voltage_string = "";
+  voltage_string = voltage_string.concat(voltage_percentage);
+  voltage_string = voltage_string.substring(0,4);
+  voltage_string = voltage_string.concat('%');
+
+  document.getElementById("VoltageDisplay").style.width = voltage_string;
+  document.getElementById("VoltageDisplay").innerHTML = voltage_string;
+
+  if (voltage_percentage < 50 && voltage_percentage > 25 ) {
+    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-warning"
+  }
+  else if ( voltage_percentage <= 25)
+  {
+    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-danger"
+    var sound = document.getElementById("audio");
+    sound.play()
+    console.log("Pay Sound")
+  }
+  else
+  {
+    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-success"
+  }
+};
+
+function updateTopicsGUI()
+{
+
+  ros.getTopics(function(result)
+                {
+                  ros.topics = result;
+                }
+               );
+
+  var topics = ros.topics;
+
+  topics.sort();
+  if(topics != null){
+    var innerHTML = "";
+    for (var i = 0; i < topics.length; i++ )
+    {
+      innerHTML = innerHTML.concat(generateCheckbox(topics[i]));
+    }
+    document.getElementById("ROSTopics").innerHTML = innerHTML;
+  }
+
+};
+
+function generateCheckbox(name)
+{
+  var str = "<div class=\"checkbox\"> <label><input type=\"checkbox\" value=\"\">";
+  str = str.concat(name);
+  str = str.concat("</label></div>");
+  return str;
+};
+
+function updateNodesGUI()
+{
+
+  ros.getNodes(function(result)
+               {
+                 ros.nodes = result;
+               });
+
+  var nodes = ros.nodes;
+  nodes.sort()
+
+  if(nodes != null){
+    var innerHTML = "";
+    for (var i = 0; i < nodes.length; i++ )
+    {
+      innerHTML = innerHTML.concat(nodes[i]);
+      innerHTML = innerHTML.concat("<br>");
+
+    }
+    document.getElementById("ROSNodes").innerHTML = innerHTML;
+  }
+
+};
+
+window.setInterval(function(){
+  updateTopicsGUI()
+  updateNodesGUI()
+}, 500);
+
+function validateForm()
+{
+  ros.attemptConnection();
+  return false;
+};
+
+function addInputsForConnection()
+{
+
+  var innerHTML = "";
+
+  for (var i = 0; i < ros.connectioninfo.length; i ++)
+  {
+
+    console.log(ros.connectioninfo[i])
+    el = document.getElementById("ConnectionInformation")
+
+    innerHTML = innerHTML.concat("<span class=\"col-sm-1\">");
+    innerHTML = innerHTML.concat("<input type=\"text\" class=\"form-control\" value=\"");
+    innerHTML = innerHTML.concat(ros.connectioninfo[i])
+    innerHTML = innerHTML.concat("\"/>")
+    innerHTML = innerHTML.concat("</span>")
+    if(i >0 && i < 4)
+    {
+      innerHTML = innerHTML.concat("<span class=\"col-sxm-1\">.</span>")
+    }
+
+
+  }
+  el.innerHTML = innerHTML;
+
+  console.log(innerHTML)
+
+
+}
+
+
+
+
+
diff --git a/index.html b/index.html
index c8898ed..feec01f 100644
--- a/index.html
+++ b/index.html
@@ -19,10 +19,12 @@ Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
 
 
         <script src="include/js/roslib.js"></script>
-        <script type="text/javascript" src="include/js/roslib.min.js"></script>
+        <script type="text/javascript" src="include/js/roslib.js"></script>
 
-        <script type="text/javascript" src="ProjectFiles/js/ros_scripts.js"></script>
-        <script type="text/javascript" src="ProjectFiles/js/update_guis.js"></script>
+        <script type="text/javascript" src="backend/js/custom_topics.js"></script>
+
+        <script type="text/javascript" src="backend/js/ros_scripts.js"></script>
+        <script type="text/javascript" src="backend/js/update_guis.js"></script>
 
 
         <audio id="audio" src="audio/beep-04.mp3" autostart="false" ></audio>
@@ -88,9 +90,9 @@ Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
                     </div>
                     <!-- ##################################### END ROS BAG PANEL ######################################### -->
 
-                    <!-- ##################################### ROBOT DISPLAT PANEL ######################################### -->
+                    <!-- ##################################### ROBOT DISPLAY PANEL ######################################### -->
                     <div id="includedContent"></div>
-                    <!-- ##################################### END ROS BAG PANEL ######################################### -->
+                    <!-- ##################################### END DISPLAY PANEL ######################################### -->
 
 
 
@@ -114,7 +116,7 @@ Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
 
                                     <span>
                                         <div class="input-group">
-                                            <input type="text" id="ConnectionIPInput" class="form-control" placeholder="bag_filename" placeholder="No IP Address yet">
+                                            <input type="text" id="ConnectionIPInput" class="form-control" placeholder="ROS Bridge Master IP" placeholder="No IP Address yet">
                                             <span class="input-group-btn">
                                                 <button id="ConnectionButton" type="button" onclick="ros.attemptConnection()" class="btn btn-warning">
                                                     Connect
@@ -137,7 +139,7 @@ Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
                         </div>
                         <div class="panel-body">
 
-                            <div class="col-sm-1" id="ROSTopics">
+                            <div id="ROSTopics">
                                 N/A
                             </div>
                         </div>
diff --git a/robot_display.html b/robot_display.html
index 984088c..8967f9d 100644
--- a/robot_display.html
+++ b/robot_display.html
@@ -1,3 +1,14 @@
+<!-- ##################################### D-PAD ######################################### -->
+
+
+<p>Click in the actual image.  Relative coordinates will be displayed.</p>
+<p id="rez"></p>
+<div>
+<img id="myImage" src="http://animalia-life.com/data_images/dog/dog4.jpg">
+
+<!-- ##################################### END D-PAD ######################################### -->
+
+
 <!-- ##################################### Example Progress Bar ######################################### -->
 
 <div class="panel panel-default">
@@ -43,11 +54,6 @@
         Camera Image
     </div>
     <div class="panel-body">
-        <div class="row" >
-            <div class="col-lg-4">
-                <img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image">
-            </img>
-        </div>
         <div class="col-lg-4">
             <img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image"></img>
         </div>