tr_webui: add servo sliders

TurtleRover · Feb 8, 2019 · ba00486 · ba00486
1 parent 44331ed
commit ba00486
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 38 deletions.
diff --git a/tr_webui/launch/webui.launch b/tr_webui/launch/webui.launch
@@ -1,13 +1,10 @@
 <launch>
-  <arg name="name" default="webui"/>
-  <arg name="webpath" default="www"/>
-  <arg name="cached" default="false"/>
+    <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" >
+        <arg name="port" value="9090"/>
+    </include>
 
-  <arg name="port" default="8085"/>
-  <arg name="start_port" default="$(arg port)" />
-  <arg name="end_port" default="$(arg port)" />
-
-  <node pkg="roswww" type="webserver.py" name="$(arg name)"
-        args="--name $(arg name) --webpath $(arg webpath) --cached $(arg cached)
-              --port $(arg port) --start_port $(arg start_port) --end_port $(arg end_port)" />
+    <include file="$(find roswww)/launch/roswww.launch">
+        <arg name="port" value="8085"/>
+        <arg name="cached" value="false"/>
+    </include>
 </launch>
diff --git a/tr_webui/www/index.html b/tr_webui/www/index.html
@@ -15,40 +15,72 @@
   </head>
   <body class="bg-light">
 
-
     <!-- SPEED -->
-    <div class="row no-gutters">
-      <div class="col-md-5"></div>
+    <div class="row my-2">
       <div class="col-md-2">
-        <label for="robot-speed">
+        <label for="lin-slider">
             <strong>Linear speed (m/s)</strong>
         </label>
         <input id="lin-slider" type="text"/>
       </div>
-      <div class="col-md-5"></div>
+      <div class="col-md-10"></div>
     </div>
 
-    <div class="row no-gutters">
-      <div class="col-md-5"></div>
+    <div class="row my-2">
       <div class="col-md-2">
-        <label for="robot-speed">
+        <label for="ang-slider">
             <strong>Angular speed (r/s)</strong>
         </label>
         <input id="ang-slider" type="text"/>
       </div>
-      <div class="col-md-5"></div>
     </div>
 
-
-    <!-- JOYSTICK -->
     <div class="row my-4">
       <div class="col">
-          <div class="d-flex justify-content-center" style="width: 210px; height: 210px;">
+          <div class="d-flex" style="width: 210px; height: 210px;">
               <div id="joystick"></div>
           </div>
       </div>
     </div>
 
+    <div class="row my-2">
+      <div class="col-md-2">
+        <div>Firmware Version: <span id="firmware-ver"></span></div>
+        <div>Battery Voltage: <span id="battery-voltage"></span></div>
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-2">
+        <label for="lin-slider">
+            <strong>Servo 1</strong>
+        </label>
+        <input id="s1-slider" type="text"/>
+      </div>
+      <div class="col-md-10"></div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-2">
+        <label for="lin-slider">
+            <strong>Servo 2</strong>
+        </label>
+        <input id="s2-slider" type="text"/>
+      </div>
+      <div class="col-md-10"></div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-2">
+        <label for="lin-slider">
+            <strong>Servo 3</strong>
+        </label>
+        <input id="s3-slider" type="text"/>
+      </div>
+      <div class="col-md-10"></div>
+    </div>
+
+
     <script src="scripts/jquery-3.3.1.slim.min.js"></script>
     <script src="scripts/bootstrap.min.js"></script>
     <script src="scripts/bootstrap-slider.min.js"></script>

diff --git a/tr_webui/www/scripts/webui.js b/tr_webui/www/scripts/webui.js
@@ -1,11 +1,34 @@
 var twist;
 var speedLinear;
 var speedAngular;
-var cmdVelPub;
 var manager;
 var ros;
+var firmwareVerClient;
+var batteryClient;
+var cmdVelPub;
+var servoPub;
+var servoAngles;
+
+function initROS() {
+
+    var robot_hostname = window.location.hostname;
+
+    ros = new ROSLIB.Ros({
+        url: "ws://" + robot_hostname + ":9090"
+    });
+
+    firmwareVerClient = new ROSLIB.Service({
+        ros: ros,
+        name: '/tr_hat_bridge/get_firmware_ver',
+        serviceType: 'tr_hat_msgs/GetFirmwareVer'
+    });
+
+    batteryClient = new ROSLIB.Service({
+        ros: ros,
+        name: '/tr_hat_bridge/get_battery',
+        serviceType: 'tr_hat_msgs/GetBattery'
+    });
 
-function initVelocityPublisher() {
     // Init message with zero values.
     twist = new ROSLIB.Message({
         linear: {
@@ -19,14 +42,22 @@ function initVelocityPublisher() {
             z: 0
         }
     });
-    // Init topic object
+
     cmdVelPub = new ROSLIB.Topic({
         ros: ros,
         name: '/cmd_vel',
         messageType: 'geometry_msgs/Twist'
     });
-    // Register publisher within ROS system
+
     cmdVelPub.advertise();
+
+    servoPub = new ROSLIB.Topic({
+        ros: ros,
+        name: '/tr_hat_bridge/servo',
+        messageType: 'tr_hat_msgs/ServoAngle'
+    });
+
+    servoPub.advertise();
 }
 
 function initTeleopKeyboard() {
@@ -93,7 +124,7 @@ function initSliders() {
     $('#lin-slider').slider({
         tooltip: 'show',
         min: 0,
-        max: 0.4,
+        max: 0.36,
         step: 0.01,
         value: 0.2
     });
@@ -105,35 +136,94 @@ function initSliders() {
     $('#ang-slider').slider({
         tooltip: 'show',
         min: 0,
-        max: 6.0,
+        max: 2.2,
         step: 0.1,
-        value: 3.0
+        value: 1.5
     });
     $('#ang-slider').on("slide", function(slideEvt) {
         speedAngular = slideEvt.value;
     });
-    speedAngular = 3.0
+    speedAngular = 1.5
+
+    servoAngles = [90,90,90];
+
+    $('#s1-slider').slider({
+        tooltip: 'show',
+        min: 0,
+        max: 180,
+        step: 1,
+        value: 90
+    });
+    $('#s1-slider').on("slide", function(slideEvt) {
+        servoAngles[0] = slideEvt.value;
+    });
+
+    $('#s2-slider').slider({
+        tooltip: 'show',
+        min: 0,
+        max: 180,
+        step: 1,
+        value: 90
+    });
+    $('#s2-slider').on("slide", function(slideEvt) {
+        servoAngles[1] = slideEvt.value;
+    });
+
+    $('#s3-slider').slider({
+        tooltip: 'show',
+        min: 0,
+        max: 180,
+        step: 1,
+        value: 90
+    });
+    $('#s3-slider').on("slide", function(slideEvt) {
+        servoAngles[2] = slideEvt.value;
+    });
 }
 
 
 function publishTwist() {
-    //console.log("twist " + twist.linear.x + " " + twist.angular.z)
     cmdVelPub.publish(twist)
 }
 
-window.onload = function () {
-    var robot_hostname = window.location.hostname;
-
-    // // Init handle for rosbridge_websocket
-    ros = new ROSLIB.Ros({
-        url: "ws://" + robot_hostname + ":9090"
+function publishServos() {
+    servoMsg = new ROSLIB.Message({
+        channel: 1,
+        angle: servoAngles[0]
     });
 
+    servoPub.publish(servoMsg);
+
+    servoMsg.channel = 2
+    servoMsg.angle = servoAngles[1]
+
+    servoPub.publish(servoMsg);
+
+    servoMsg.channel = 3
+    servoMsg.angle = servoAngles[2]
+
+    servoPub.publish(servoMsg);
+}
+
+window.onload = function () {
+
+    initROS();
     initSliders();
-    initVelocityPublisher();
     initTeleopKeyboard();
     createJoystick();
 
+    firmwareVerClient.callService(new ROSLIB.ServiceRequest(), function(result) {
+        $('#firmware-ver').text(result.firmware_ver);
+    });
+
     setInterval(() => publishTwist(), 50);
 
+    setInterval(() => publishServos(), 50);
+
+    setInterval(function() {
+        batteryClient.callService(new ROSLIB.ServiceRequest(), function(result) {
+            $('#battery-voltage').text(result.battery.toFixed(2).toString() + "V");
+        });
+    }, 1000);
+
 }
diff --git a/tr_webui/www/styles/webui.css b/tr_webui/www/styles/webui.css
@@ -2,5 +2,14 @@
 	background: #BABABA;
 }
 
+.slider.slider-horizontal {
+	width: 100%
+}
+
+.row {
+	margin-left: 0px;
+	margin-right: 0px;
+}
+
 .slider.slider-horizontal .tooltip.tooltip-main.in,
 .slider.slider-vertical .tooltip.tooltip-main.in { opacity: 1 !important; }