From d14602071911bf14d561292c5b870c12000ce0c3 Mon Sep 17 00:00:00 2001
From: Glen Turner <8gt6@queensu.ca>
Date: Fri, 19 Jun 2015 14:41:28 -0700
Subject: [PATCH] fixed douplicate functions for getting nodes and topics

---
 ProjectFiles/js/ros_scripts.js  | 181 --------------------------------
 ProjectFiles/js/update_guis.js  | 115 --------------------
 backend/images/D-pad.png        | Bin 0 -> 10048 bytes
 backend/images/D-pad_blank.png  | Bin 0 -> 600 bytes
 backend/images/D-pad_center.png | Bin 0 -> 5661 bytes
 backend/images/D-pad_left.png   | Bin 0 -> 3528 bytes
 backend/images/D-pad_up.png     | Bin 0 -> 3633 bytes
 backend/js/custom_nodes.js      |   1 +
 backend/js/custom_topics.js     |  55 ++++++++++
 backend/js/ros_scripts.js       | 124 ++++++++++++++++++++++
 backend/js/update_guis.js       | 161 ++++++++++++++++++++++++++++
 index.html                      |  16 +--
 robot_display.html              |  16 ++-
 13 files changed, 361 insertions(+), 308 deletions(-)
 delete mode 100644 ProjectFiles/js/ros_scripts.js
 delete mode 100644 ProjectFiles/js/update_guis.js
 create mode 100644 backend/images/D-pad.png
 create mode 100644 backend/images/D-pad_blank.png
 create mode 100644 backend/images/D-pad_center.png
 create mode 100644 backend/images/D-pad_left.png
 create mode 100644 backend/images/D-pad_up.png
 create mode 100644 backend/js/custom_nodes.js
 create mode 100644 backend/js/custom_topics.js
 create mode 100644 backend/js/ros_scripts.js
 create mode 100644 backend/js/update_guis.js

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 0000000000000000000000000000000000000000..fe3d51637343e8e00d44f692476675149fdfa4e8
GIT binary patch
literal 10048
zcmdsd<zH0Y*EcaJ-6cp#OAR$3DUy;RoilXz&<rsssFZ?)QUVgvox(7LC?MTA2ugQI
zb04nj_u}{5pU?9T+%L|YS^IqVT4(K8XYc)8ub*kFk`OWwVqsyCJXKSAj)jGdxxMg#
z0xV<H(o^6Da!}Axz`~CDB)paa1!Np+4OJzqo9Kjo6d)0Js+srzceQ^ml^-s0SXdmG
zr%DR?0W;f~W_tHkKUOlrMb&Jq-^nbPg$ZX1Xmx$hn*Ff2AJ;=svk*6xiGl^LR2d*X
zF_JsHz``b>{Kcw-t3_9@&B~!s9Y-2Y?!bYq<<CthZB5PR;xS>`wo$GqF*I*r68O-5
zarGN%w1N5o+oHtb&r<%$lWWZQ*z}G6RvAtzE>FPb6ia$R809=Wt=DV!aL((C>%v_o
z9?usG?|&h2cQXU_YSt{Py4uJui`N@o=H~Ad>;?4k4PRNmykb4w&1Rx46J?CnX``MO
zrJcHqygBSr7#6JY*;|pL?;N1JELhK0O7B;G+Q&HDYV+n0Z}FzgF`?<v^)vWx+OGg~
zg*=U$Fbns!2K**%DF9uw`#L2p;cxb<9Tw3H!Beg1Wm>fl)LAzy!?L!>Q9RVOf6se~
zYTdom$=u-YphBYSi(O^u{y~<EHd?=C49g--8CZVznx{Eh(-ROEC;;*1GIEVs1ig=3
zqy;38NSKH>ks$v=!AJcs6MyACA@6@>jwEBgXjI9{$XssU`fPqxXrs)UMlg-Xayp;-
z*Lq(G$BXUVtDYUi{t`BMe|Ra9>}nG<qwZ-(6c^@=4;tl8$NU<kgYJ!|uXO+VVNI@?
z$&U;>Ygm1Sf^xFRNCyHC`wC1)m>KmiBjK;7PucJb`Yq9@baL`+1IySjEF^D@s^@Sj
z@|%Y<ao9c)xn`;?GGTsMCTzfVb4M5u=aEG6@vjfl)w<*!Vxje?1saQ_v~3-K-y3F0
zFrtZo6>rg+^Cz7uxX9u%Dn+q(v!*?4!AqUv9;UkJrE656#^KU<3^wp1l9SO8d3{~4
zp6JX%E`u#AM~wVZt-6<ikacW(>fMrGZ--RvkAO7~QGZ?7*8at&*2$U%p~mZJ6VxK`
zyXbK(v?AAJ3_=b!Bqu&JE)I0OU}H@a83W}tas8}#a*?=Q7!K5>jLrJnJR0z16T*Uv
z<W<!0+<K!!GPnUgNto5R)%PBhx2scP)A0Pl;U_!!7XBK(iqFsD$u}CUb{nX=Y4ux-
zJ}6II06R4+_4g+ojZQ|tED)ecxiT?a@5|(<%!9tA8fOvGsi*%!!=U-3m>C5Vt52rl
z<}U0ck+7K|@~=am&jnB%g=-{^P62ozqG)rl>8>u~e4vj(p~CQeJQ6nimM9*vZRA@Y
zyM{a#Gmo-(e+OO5Mt5nE{Qh0IUhIZbBWVK<3DQaNA-#ZDNoe1N%J14GW^odY?X=)q
z!=I6p!7?qBo^M{IM76Sg6(a_qJd%FO^SIh&;i3c*#iAAMTBZLKbI~K9P2AWnFJi~R
z6SxXsyH}vRvy}JHFS$AkiaH-Q<X-9hW1J#33p%1clo@>0`_8Y7NA{KOzs2`afBLe*
z{qvUy=+VDe$z!?r>L`!iW+cD0%+0!k?x++pe%fwI(5y2MQP1FK2EA>8DcabH^8*e{
zW{K4xY-~dhFzQMa4;4rT%9xyt3Flr=@Z--Sx$8h?qCBfspVax(bs}KGQ#4<Tm^vPA
zCLLOTUNRu(2L&UCgBEvWVKrj+XF%u&mE4k{;~rVz22pil=JxBaXz>f;WYJ0ErUX*9
ze~g&NM?J6JzvRBPPZ3LNR=tJ2`q^xjk+j@6Kn%YimI=Lym|^xT#B2SLTU#$7W7{SH
zw3>~g=ay-_EGDC5Nz_#LJjICt=m<1jELWYP@tINk2jZfzC&l7gw{1R!9PW5DZWx$t
zfKq3eur%HP^Qi;IFoY^DSEe{Sl{*rdQPC2Q!B9`Uo(h-Xb}d?}y?8NxJogA#8-}pW
z;|nNLfTSd>+?@gBgQo+Gr=KU`J_S}~JWS@;Xc;tR>;zzw)~J1Yq|$+BaRH29K$3zv
z6?Y?}7s4(fc5!OthyL?&lp!bvf4qzzcC9?JB*?P}_JA+lfMWw<rEO6>zA|{|xpwle
zUIZneOlgwfXovz>s1#`Y(Ub7>4hSA&aOZC-)-<{ayv2%PO3&}T%vOdfqfYb@FgatI
zSlV&Q+LqGE@&yjMy4Ixu0}!$aX5cA>t*Qnpj2Y1-@5hTlE>B+hsSgDUpG0}|D1gaI
z2~=hXjjJ1Q29y>V%lke?DS+Mh2~>#6W|+acIEKS9Bbn3jjuEgKV~W^`yRJZ|Xm+}p
zGLWh&fP+i%;}e`%Y$P?(!VNk|faZtb+b7VV$;LJzbK_kE#&(Z`D;nMJfJA$M3FJC{
z63)v3qbcLr-Z95RmkQIwP6+8~wm)1K`}+DZ*h~|z$D@eT@vq4&=UVF;;AVprNc5Zj
z9&Q=P!tI)Y@=ofw7{7RbIIKR6z;c2TY(fwubiUxZDoWl@O@(H>`o_G+V_=)d(@KCe
zNrZY{20iA}Ju%PiR~Ar9UBp52|KOvSEz$}rkEa;<a1Vr>ey0OAb+*|tTDsH&AwRs+
z*^8>jv5)oVAOr+e&yfDX&I%Dl6fPi{frE@Y*&ny)l~{q0_ulCNzW4_R4Ck{9<DhGQ
z$RZ~l3LPYcuWWHu!0ZPru-a}C(4#b(F}Z#1yFkbz*Tl!agMNaIei05M=coQZA*z|~
zrB4clU824CnY`*T>>9bjjzaQnAy@VZm~8vVo9hez#lTss%MG=h8az7Yv*b0onV-_T
z*Vpn=4$xil%f-L)SE!eG<%sZ6kaQBV<FB^N=_7$tgHaEnAKATl<gV{JmIW%{=&&1C
zR4oH&89x3awHR|F<Mj+~1~w%@3IOYalFt|kts9PJPWo^dvAXF34|4a$5H9VBg_gV@
z*0_DXt~XrPjsvps`c>z$Av+v*`+xtsc5@5+-~V2prjL6Nx{F{ev@vzaiWDL8<{jS6
zw_}ZAw{~36@_vd7YK%wxF_`&6QwYC6%}UqnhgHx1X5hO}s@G@Gn4O5$_tbPtWMh#%
za^>&19aisuOFC;bM(>|-=U%`hYLdK<v*T&3)@Aovgm$~%mn+39mM(DQ2D6%FciH@H
zJ0;Ki<h2In9!gn@2YF6CS<b#+z0q)b*iDzqNQ^nK-nXq1N1-lfeeNnf!J<3b`kXIp
ze(Di}@rNR5<*P)}ujfHstBBs1eX{;5S_Hwe|01&O^yL?f&0ojC>?Jxb?%Ec6;PXF9
zeCZW?LRM8fP=Y#P+|;Ng>5&tez0Y4<VE*upyleJL;S3tF+3UA{9!4JwYTwv3%XfY=
zjticlP)^bxcF;hx(Fk*X(r$7223dn}TG!JGHt8JinlbEYWZfG^CRy6J@DcgcBskbJ
z4-N>FmUbr=;7Pc+d}BYmn^Gj_Q{APsXZ3Mk?E2IAvL6v`Z2i#adaw<<Y}s*g#Pftg
zv1cZWGtwe{9)EZ#H;pMukF+;&-&iroLS_d(H!U`M<r#X%(B98%z2{s(q*lnmJDo<|
zi^@vG@kI~)oGxlF$OpCL&oDBMF*~(EwRHEq!&t}jJ3x6#@N0D!E%owXGTtBJWk!GU
za%sJbVGY!4(1H_oAF9~IC6jGK1*C4sS$g@X9B=wuY|fVSysyI}L8U6LDFMz-v3&Pc
zPWrONqTyiOSFrcSjT2kGW*xKM2!$@52|T{BIpf07-LD`a%M*<!ctUZIKu(v?WVRKz
z^EW%T6O{LmoHxIf84_05CD~<SfSBo#d7Pzw;S(Hk-5ce@WFgy%K(xwQFbR+(hi3O=
zx-av3j0#BE;71apYdgf~(2m<G27gX50`%PlLIumwD}rT3ZkvpR2}%#DWr|t*-hEdK
zC~7FH&lTG?K7eM#?;B+B8s}_$V+dUIA&;dMOl8RAdki+cYL>Er>5Ez7^V-)?5Lh^t
ze#aLdH!^HufN+`2EJA|<BN`8<i40>Hc|*h>fCkOgxS>!BhcH|Hfgg^aQ8fz=mypwD
z=0n#nf{iL3*nz{5O|V+8R@2>u>H+2*r0$V+r0@d-$$V#C;86i}0;#{m8WVpL<BsbA
zV^=dKYe1wGdwlYT^JqVw&<W#oMYB;`7Z605h0lv?bNrR+yVN`szwDdcTk>bsq6>Mt
zGoJKjWtaP-mMHCgRM-IipcY%;`vzF8_m5Y8;uf^W1=P?Y2t(*=vj-4RLT?UN-qPw0
z)eEP3<YdM88g9;4cK$=UuVeYCklvXmc@tL;wMgpj)XHyc|El8{Am@*k?mbp8_xX8E
zKu~~8Js0V$>4)w;X^|r?33^~0nlxI*jBr~e5ZrU}D1bc@)%-hsO=H7N&)He?SxaS*
zwD%G(FW*nL7ZSC%Rs4eC7<}(@=zA_cX}rEj2ZZTeuFhI5l2TCKvCB6hSYUL@RU@HF
ziN(z6af6lZBGZRPEwlDu!SX%uSB*-U5ncBe?Jg%9&ix=E`WgovtqO`0NkWxDL8mi`
zp?g)UMk(w}rVma|4%0MtX-i+MGb9M7TUL&fXoC2bnv{j`&pzH64UEgfI4Z?d*wMLO
z7!X5;3{CP6xGo^OH2h>6HBLW9t+_QtfiYKZv{Co+U?6tyyWSqtPfZhv2xzxw!*z!A
z)@+6{@Frgd3+9t2_gzN$L3uB)kABq%)ij(Es3b6s;Zw5SLv7F-=GBhvr3Jnn;4)6R
zaE|2+l=pM{7=f9xZEhU?>T}Yo1vYK{q-=O`HVK}~`B~eXMkiBEl%n`^J-3JBj|=`7
z9$(FBF?{>c*P8q}P*0m79etahHR{b0B)fU4<;ew8!u$%k41@M$K?&GlbPO0J$qY5C
zZSxl08sLv3p+6Yh$`kxVMvDC0kHwbRG88K_C<^jN<Vt76EYLi1(~0G>WIOA;mdHsV
z=NMJ9<G9urwI2;7mQ#zpiL?RNvQnPLP6N<Qqu4SuQ;ov{(&KELz>tgyRXvxdU3=Lu
zT`!%0iJh+1M|7VHF&Lm@TCeApK4imc;fAuI^XhEaB}!wWM9-;a6Yb>CAFO5;T^?zU
zQkA|~wZAedtqlab$a^uM^S)4~=tnk$y-yf^%kVJ-D(n^ziavnVRB6n+ifigo0o}lG
zce6Um!5umLL~rBL)`?CWrQX-_+$CS{XIJ!Re2@dJY;n0MUl6eE`Ezj;>6<mvmNDO@
z=z00kG}8T(NF?OkQ1*1Wb>P5SRurwCRzA*Mm5(?~>3T*HYn>!;uKO4ozt^t;Hgz}5
zbE?oxw)7RAtM2#2PbV_$sI^S@YtS^69M@0=2Zh#+h{^acq8E#B8?!dB45K_-rCyk%
zd=|i8&`oc1ZtGT71b@_F3F&3Z3M7d4`x5bDhVp5l*%h0RNC;}|4W=Kw-D1m7z>6P`
zm`v0S9+(wlMy_fX;uv3n-O!!BUxvayE**DIfD-J-3e4I>d9x{rR5p$H;(mP#Osf2@
zxR*Rew!8jW^5w*u+Hu=%u_NG%oCme+!-_u@T2w@qYrH?9a~OWfnUAjV@aF7h%<%P_
zu{^WsZpRX&|5!mV?G%AZ)$YeQr{Jt<QF-)QRnW7Bccv74TAzhE8||Z}WoDW&w!?~K
zqdymaf6z)Iu)L89+x~#Ul%;<$d!Q~flrVI#cBX&ycM&!jw0Wx$HDHm>MHx$zb%w8!
zGsaW$sWz@Q>Dfb-><x$U0Dd%WXDtHFbAr%oK9R9?Bd(;4&8jc#eP2iXpq4UEPh&}M
zTgRl^Q3ieRtQj(Ygop>b0l_V_yGYi^m|)Nx<e^nKA(9254YhleR+^*c+b_7$Ne#?r
z!aN9qGkCbO940pDl5+w?p;mpu6BBm|X2cH;e!L<m%Ef3eeg^JAs_S<<<)_teov6|;
zxttKW15x}E2^vZB0Xa+*q}RN3GD9Zsh0GMmrqf6?62`}Ue(q_P7KiaHUI}%6F}@_t
zh!lOpyfbRjQOksOEFZMq{s6?&i6jOz+@DZXO0>>_=QwdO?upK=Jt(co6w+pKqsF13
z!j615-)sVD^xT*K?<1}xM>__DAZKIpc)H^WD1o$|zTu4+qJ^&+Mx^3mR63c}L}Xc{
zQ&$$5j3M=9j~uTe4MzG;6jW>x3r!(cTjGAHY;(?$S_=kf&!_HKFB_$dmwi_^WRa=k
zGfoj2XHZVqVVboFK<cUl)ISgYBN$*PyP%E`GA@)pKE*20p`4=2&`sBlS|_$MMozYg
zSZaJ}CmEChdB_@u^;+IZUemt_9$(z<DV_0vR#Fxm=SJ%vkAIX!m$c3#<ER()kOF<-
z!Zg;S?#YsUGD}hV!U^HcaTa9cMi2@iA7b&EF{B2e`SJc{Ol*VhWKC0+LVsj`=6B3X
z!(#iGiSZl?z!g4B!b+=IJB@_c=py{uy^tSts)O!J|6q`Gq0XKW*=^{u;L7<O5!+JX
znVMdyY0V*-=v6q;9-lOO`Z7MwYuWkwF*tTIG3@=5yCs9$Gt@E+q#F$fO)lRgz7sP2
z&>6jFH4}5MAV>d)(q6ks1x1#B7{lO%edn)F(3_WEcF^k@C+Q@ut`dx6>`VhQuCI>h
zCo?bZ(($@NI0m2W;*SncT%x>MJXHfM3#%>CLg-F)TSA9FGz<r&MUjMUAn!8N?ePcB
zuypgfopPHHt}7?3XaT#QQl{ygOZ%Mo<@l}79$m>eIi(UKGxG2TVat-}sA|6$ws*5R
zErt-JUIUee@7BizUdg#~I*GZuWk!9n`TP!ex|c;|_h!(e`{^XtLQ)V$XR&fd_h9P6
z5Ld{L-pBVW)1o4Gsqq|MtX4-PXD~fE+E9m=YD?V5Hw}O$Etc@D-Yh{a?m_GapU)fb
z{9VFd6pWQ8+;DN_t8pS_4@jBsb6|J4e{}FcIM^>ZGT~s3@yYo)kLkA$T8F`iTIBp@
zo*QWZ0^YOrXt#`QMJU{3PRxGv`ef-+VEGg$;I12rGzdEc-Z;<0IkC`xv&2tmB*|kn
z<2)Q0jS2i_B&kn`>R_vBd?z8JN15?hLs6x!^x^K+hK!KadV#<cZ)&Adb6mqUj$(lk
z-$;{+lT8QyXheuIncyVP{BXH$u6Y8f^a?}1XN&MhXYPKKi`x2w+AerA1i|H>_Q!|9
zlqe}?C@8~=Vy68Ad^>Qa!(r{qyg`#pnqbfh@n}f7$k%~i4;2wuP=_gRAN2Yje=>=n
zSs+JipIV*-Fnr(FKz{xedH(S)Jl1kZkloHVtuqnh*&_Gmb91_GdFnf^&ZGBEX@B6E
zdqx|+9pl91RM#J!I<-I!QLDT}OCQQ%FUJ*<X2dFp(CKLw_yZ!i>G%VsvSj6^2#$Ha
zD~X=XxEXkG%1fRKzAKNK=8+r5`t1SkfT=WDjpOABRENr03E%#guXXE)8{K%4gZkg>
z37GzwL+Wpt<F)c7k%mz?O%9`TawVb`T8A}KR@*gF#0~fKy$J`>WbZ~*4!}olz=lVL
zJ2PS^G8>Cwx!7@)-<`%ApS9+qt3+G|8%lp>k+2-eyU}HD>@n1>_gRDT#s#<iV=swA
zJ}Yj{3)*u(f_vk)xsGMEGD$8y8mHoy({7T<$b+<2$ZH2ijWa%VswTYk$7b-?bcm(j
zvSH?ML49m)Puum^EsGPk0WQfo``DCbvp;pKvV!yo>=3E7pU;mlyaA%Q^G=m0dGbs_
z_khSz2=k9Es$D)smEpXD+=Wha`Tgs!(3`H7D;fTCs@-=n=abr>t8-|i6KuI8DKd*B
zEF~v9#dOfUZ?<z!5;IUg|4djl8l*!51x0TBJQL@EI9&SI>gq)+!qE?@Yb_<4?oN*p
zl8i_}&QzereP&zm?{&Xqo%NvI*rJpfdYdI{HqFpKL(mW6lVN%&(E)cZ?lkgzP(?ll
zg_mu-hV9727Pz3YFgV#KJLLD*Ass$vLwYR<whtw%9u33B3TC6uh_v~A*KNQ<Z<-pY
zoyQ$27GgA31gew@Fjh7v{NkEZ*_bMt(*6SJILeI=eZcZ{{79muxCOkC!cJEl7n63;
zw6e%?4=I!_ELA=_ur<Ag{S7(1;mOKWV7GuwZmM<NdY1}0GS$Do<HjSdE%aUH&)~x-
z*dwMa+)gDFv=oo~*-^dj(Ov^|ML;qFvYR!$E9if*(GqQ!q$c~2%ztvT)6zS;so}@Z
z3bs@0<`Z*&#)^}#tE&zIlJ8#eS(#>Q8F|x{f@kxgLxnu$n`?s-^9*rE{$ux257pbs
zO|k^W@r;1A;DA%d;Iub+DZg5$N}bjVSZz>uV|Rx@;6sMNXm5SF2RVmvG|bBlXbYd0
zXV)F1aI{nec;8n@2E=D|o-P%Eq~d|hyUp$VPT_zmBZ3#71#sjBFdIDUS5fIuL~I|^
z$njp?;04+9hkQ!qY5`3m6lt^c<fX~bgrX|Lis6`*I^l-&kiwD9sqN!4KE?rGxbNSS
z<Kq+aHODU%M;9_Xa7LZ8j~*3=<1KoXE8A%~`$;~O8O9`x%4FC`nv^!@fm0??g#$>K
z+xnESg$PLFw^iTW%>%TSr}d#><TEr+m1k?W%g>6xb8*V)`3et2KoWDgHNo9FVD<jB
z8Yebnl7MlWPn8IJpFLAcV#UF)OgoC8QDpM;A#pzK9#!d{t1-za62wiTx>`{`ajKKq
zYj2XMop~@>Ymu4oX4nNkr8heJoxJA7yFfz24)_Kw$O@^a<luhPFp0;ZT>XCCkZ`Q-
z?_!$Osb3LqF>IYUe=nm82`g58XFm|EOr-s(tP9wyFSED0k^E<`K0P!cEpolxKiZY@
zsj4KAa!Xdn=EU`~GT|pEb*}J?{Zk>kT_Ozq!`{`+t$V_dcGaF`uwN!C)6Co?hWF-a
z(Y%s+r9R|IL!*d^^@B#^f^*SNYZAxI_KObPF6xP8pC>tT&5~?gX7qG&8ml7Js$OGq
zojaV@nC+XhBy*)R?*@%1i^_1nHlqE2FL;@D5*S+BdrFgi)pzH(Y;}r-NE6f&KcCO^
z%<A&b3%^O%d0FQ_lLkk4_|vG6Ya%^#IhjWr`MhR3v(UHr^b22_(2gT(!ti^JOM@?I
zK`o@2A$OwwvaPKbMwgx%OmuM5v8nG$Tk?mTq==(>>9140R$l!A!II0mrn1RQk2k%U
zPBAepRgH#MUevkLBOefy3G-){r`VgJNhSF<EC$M4{~QMe&b)+Z{yNlA`ipkAN3nc4
zUn?@f<Lh&6E^1t<Ts{@=+(eXtZ(N3DD^nAHJ<zCGMPUEDa%N21ZIFsb{9y(y>#m*W
zuW@0pk^2FCzGLtUv~D<zpD=V;WD)93%}O7Gly4gNC6KLzi>#6y`t>mg3TLkbPP6W3
zdbP^2HB%S^=<D;Dx~ukH=3E=#TrA|&aklQNpc^<%N&>{p@pBc5uU8u!-ykm>A6NR4
zBF>zpc>^wf|6tFZwZ2F0`hh(xxT%bAA=H=Dr{d{-)~N?~<s7e^%;>&e9d=Uf((S~&
zxr<-_L}BS7TlPFqS|A|!;y7slb-6U}zu-rYlB#wQ?Q%jAC0we*S+@UV-W*1wGO~lq
zUXSB>c%TBW4tiMb_l!_D5Xn_@G)JEtEcZ=%5SKZj2UemRG6hbzS(N_1C19lo5#fQT
zaF7a>&mM!>{*Q>939v2-^8Pn-$jJg`Pa9_vkm!R#AjqLR<A_S|K{afD@l`}g64QyE
zcM>Bh`d@`4m3rWWfbO<MJf#&qAc&7@mAMS+1P=6LLxA8NNUC5eg?jTCEP7BLIqEdE
zoFA`xn6BN<nug8wGT!WW@lx?lXfNF8OK6{mLQW(n7g8d6Tx`oNRrSk*1{X5s1z;U4
z%x56Ctsh;9GAmGTfHJjb>HzCf>QU3$tSCOA(WBs|=Q{1rV(eqi>?5<H28l-xr9-&P
zaPFXq!8EZWPLfahJUBALDe&!MUT$|Jla^tW1W5c{IIH86L9wuJ#?xe3U-S_Aq(l4C
zpSWQD^O`uInr|afH{0PUQJrF!QFWmEjhR^J{wj_DMLzZ5S)R{JYUwAHdv^drffMbR
zpJd4}LFKthh=bm$^5Y`Xn#@Pm>MLhN-7OyD9@lcXig^sS<7aM;S)BOB<is#RSt;!)
zorQ(IUl~*^qV6D`VTr8@uqJm6@$wAHc(hUgd;GrT4*))-Z#8!q-dgV?33fKxT??;Q
zHI~oZ^uR{HM@yc{<<R6ay3yrFGXjj6QaK72G<rvI@6X$4ev(asDbZR2WMIVMMz8a;
zS;n0z?nc#FT+(u`$6%q#1uc=0%Cgp_J{278aF{!$H3XttkZ;9UvQ(K8-p57Bn#N*`
z)Ex_D(B{VQ;Gi$tLlAJzBAVRFQO^WJLZb4OU^#$1+POfF))f~PlV>fy{TM!9H%dU>
zPqjtY?lC>X2ssJ&;Cu`=s>JgkE^(TQPKsjRmJ`P&^9YBv0h_ZvQwG6K9(DgzCxU?K
zt#yECJ@tow`eHiQYK0(c^y@uZ0*WAlR<CtnJ0y(3?NnYh4!68plO4Czt2zmQ<snni
zVgdL|8&$CB@SBkd!%l!CBK!{%R~B47lqb~}-1&{!bDo_~=MMUPl|O}Ph&i8nHbAv4
z)tC|l&52=0!tP9cU3VA#Op_nU<s?ZtraqLT#W#qDuB{4AUQ%zV6D#G$oX}__+?F7W
z?4(Fmq1Zsf&H#L)+ZI$MNEFs4QM!wL*WEOP2cQbw&^%I(AEV+xGW2!l`sAATF4*Y>
z8q&8(HiO%@?KvIE`-u}Tatoagc5h3>^-@>}09N(E6py+@yzQa%h+`9o1o=VX0lk}}
z(^RSei7Il2c@J~v8~ZJ%T7IOep-`ro%t`XsvAY~YIY0%Jes7x&XC7C7Gy-&6zA4{7
zCOQ(lyFAY4O^kpRnc7A<$=>?;Hq_USJy=)D0=dv0bRX!uFEBgtQo4LmKT_2=%G%#F
zV0?SregC8(#WEg?%mqefrlJY;Au_M*I{-C(ZB=?2*S>SxHIkmVe7E|ZogSFLA8T|n
zHDgExu*uR`I&jdjIr~m6$&fPJ@sjiHaYA#qiIZ>zutrfx%QGm6QQ=9{G05D-i;Nyr
z^WqKW)L4Z9Lb*rpemg@y0WK4-DLa`=Xbj=f|Ko*JcB--lFi1Anhb<MIJ9!l%VfI7k
zp?iwr`^|h0$HENdYmeyx^2!vsygWlAHKQz(q77h9fRn0;y4+erq-Dby@cf>0c7SS(
z+qY=a{CedU9bnqza7jimPdG;9Gt5zn;oIMlMfW-z&oZ9OngD)5o>6B^HD;)HX7vRG
z1JQ|743DqGiuXgfTN&UA;|YFNod<UW^O*YcZQMj|nLB7WkgTxMhLBcgXk*4VZ^#T!
z(o6~ePr}05Q&(c*DV_GG5B|+qpfjK%Y418*RSJ`_Gyws*31*&4J;DzZUvym?W8I3C
zn^W@wUZD*;%)Ylt4;1D{cxaBaw81cJ<a)Jg<z{EPkkUFr*l!LGkc~W-xc&SI)f9-r
z1VQNc(|l9DYb&B`QNyD;WKBS@smAxC$u_4Z&xhWw5{N*fT<NgMoUnVU8LJ~^udC!)
z;1RG5TbeDYJv5!ajTfi0_diJ>A)%My0GPW4W>*K_$}9f9vUUINziR_W-4nlX*b{F8
zL;F$XZqDeYXV1;`(@JPq)85V@GqLfxR-*lt`1%LsffSU`5Tn|T%dZ!Cx2Y-XNa(dC
zAYLxz|3|!0#csm$qrUu&y8VJ`16eeAZ_RO~2?uWy{zWu6EK&&wv#9=)D05%v^tdpW
z^UrdHcEZpA@NLIPHr+K0IaRw&u?azYn5uu*s$BBi{7(js2TCgN?HnEvuv$=uFQ(Oy
zfjm$$fl9S~uJ_N<M<?5#o<w4{jaI97$6v3s-z}4Wy+g;hMTDM}mzUYUj=<@8FGEO3
zdjD!OFI)NV8_ttx%=UJ6LAw0;PqTQQAnLZ`bosjet(c{fy&LSnvfy>0uzXG+>4_7r
zYz()xg4;>ic-sLtED^A<xBwU;AS|gb0-R_GOM$_BU@-9O&GcOJ|Eb{SVe4cc`2Vkf
z`*>pysGxOg!N<cM?r-I7hxOFW%E3;{%E8ITg%u(wDfmc0l2un2!Wtk6fkMPs0qbG{
z!e9Ym306lq+*3+O$lu>z(CM}kZ~>JBJ-i)0;b)uxis^3^>pS|oSxZSNdD!^6*}21|
zq@Dp#A1vX*n--z}h55&{l$4sClY=813jziQEwt7F7`p$`^B;_nlP%ow7P2n1y#_$;
z{TD>b$;}QP=xK-b&szz3x;w~M8*2YAJzDwz3QJf_R16{k7J+~rvLtWYg6zNa=s5-1
zVS%4Kd7mq{1w4ZO*CT`HPqFNsT<rk&h2U<ULVivT?sjmvosf%@yMwKVo1>kTH{1v6
z;qBz$<Zk5(6%iM=5|OaA60o+nlMoOC+d>4a#O;7?w1tS+*xCu(K9Yb40x$Zw`xvl<
Oh4oZfTdDjB4EaBLgtd79

literal 0
HcmV?d00001

diff --git a/backend/images/D-pad_blank.png b/backend/images/D-pad_blank.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e465455103943881cc32cea58871b1ffa330c8
GIT binary patch
literal 600
zcmeAS@N?(olHy`uVBq!ia0vp^3qY8I4M=vMPuB%fY)RhkE)4%caKYZ?lNlJ8cs*Sl
zLn`LHy>7TlBv8QN;_^SfJO5ubIrJehq3XrFmqy0I%m=xv{Gvod3Lbvkcjk;vM$P}I
z_yhla8<wzmctMDiG`EJ5d+)b1WS%)=)#uz$BG=yzVprMCXIk=*Q|-C1lOK|DgvL=8
zGz6&@5U(DWa~p47_d4o%<+|&yw*nc)pUv|g%a_GozxBPgcFop(f3sfNoG;yf|N6Gv
s?AzN)ci+9X@4bEc2lc+kKmIVf2?oa;dG%-|FsU$jy85}Sb4q9e0FpB4H~;_u

literal 0
HcmV?d00001

diff --git a/backend/images/D-pad_center.png b/backend/images/D-pad_center.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c1d35225c2f979c096761c10ef1498ebfcac99b
GIT binary patch
literal 5661
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
Wt{cNYln4D@8f~<`243AZ@_ztSU(P%L

literal 0
HcmV?d00001

diff --git a/backend/images/D-pad_left.png b/backend/images/D-pad_left.png
new file mode 100644
index 0000000000000000000000000000000000000000..f601748634fcf9b77f1cb5a3b00bf8b6393b8025
GIT binary patch
literal 3528
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
aKm3Dy8L*yO=R)w;46r@zfT3IZB>f*%!GJ*k

literal 0
HcmV?d00001

diff --git a/backend/images/D-pad_up.png b/backend/images/D-pad_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..a78b4a3b4417b567fa367d20f6c384ed60012165
GIT binary patch
literal 3633
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

literal 0
HcmV?d00001

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>