From 17c670f1932371d1b1ba431eb0f331507445023e Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Sun, 8 Jul 2018 10:31:20 +0200
Subject: [PATCH] www: Add mouse cmd_vel div

---
 config/cmd_vel_mux.yaml |  4 +++
 www/index.html          | 61 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/config/cmd_vel_mux.yaml b/config/cmd_vel_mux.yaml
index 6ed42cb..7e9f0ba 100644
--- a/config/cmd_vel_mux.yaml
+++ b/config/cmd_vel_mux.yaml
@@ -9,6 +9,10 @@ subscribers:
     timeout:     0.5
     priority:    1
     short_desc:  "Navigation stack controller"
+  - name:        "Default Teleop"
+    topic:       "/teleop/cmd_vel"
+    timeout:     0.1
+    priority:    9
   - name:        "Wii Teleop"
     topic:       "/turtlebot_teleop_joystick/cmd_vel"
     timeout:     0.1
diff --git a/www/index.html b/www/index.html
index a3b7c42..4e6b565 100644
--- a/www/index.html
+++ b/www/index.html
@@ -12,6 +12,13 @@
 		.bottom-leds > .minicolors-theme-default.minicolors { margin: 5px 0; }
 		.top-leds > .minicolors-theme-default.minicolors { margin-top: 70px; }
 		.wt-icon {background: url('assets/images/wt_top.png'); background-size: cover; background-size: 100%; background-repeat: no-repeat; background-position: center; height: 260px;}
+		.cmd_vel_circle {
+			height: 250px;
+			width: 250px;
+			background-color: #bbb;
+			border-radius: 50%;
+			display: inline-block;
+		}
 		</style>
 
 		<script type="text/javascript">
@@ -56,6 +63,7 @@
 			var sensorTopic = new ROSLIB.Topic({ros: ros, name: '/sensors', messageType: 'wild_thumper/Sensor'});
 			var batteryTopic = new ROSLIB.Topic({ros: ros, name: '/battery', messageType: 'sensor_msgs/BatteryState'});
 			var ledStripeTopic = new ROSLIB.Topic({ros: ros, name: '/led_stripe', messageType: 'wild_thumper/LedStripe'});
+			var cmdVelTopic = new ROSLIB.Topic({ros: ros, name: '/teleop/cmd_vel', messageType: 'geometry_msgs/Twist'});
 
 			poseTopic.subscribe(function(message) {
 				var now = new Date();
@@ -123,7 +131,7 @@
 			// Initialize the teleop.
 			teleop = new KEYBOARDTELEOP.Teleop({
 				ros : ros,
-				topic : '/cmd_vel'
+				topic : '/teleop/cmd_vel'
 			});
 
 			// Create a UI slider using JQuery UI.
@@ -166,6 +174,51 @@
 					ledStripeTopic.publish(msg);
 				}
 			});
+
+			function setSpeed(trans, rot) {
+				var msg = new ROSLIB.Message({
+					linear: {
+						x : trans,
+						y : 0,
+						z : 0
+					},
+					angular: {
+						x : 0,
+						y : 0,
+						z : rot
+					},
+				});
+				cmdVelTopic.publish(msg);
+			}
+
+			$('.cmd_vel_circle')
+			.bind('mousedown touchstart', function(e) {
+				isDragging = true;
+			})
+			.bind('mouseup touchend mouseleave', function(e) {
+				isDragging = false;
+				setSpeed(0, 0);
+			})
+			.bind('mousemove touchmove', function(e) {
+				if (isDragging) {
+					// absolute click position
+					var X,Y;
+					if (e.originalEvent.touches) {
+						X = e.originalEvent.touches[0].pageX;
+						Y = e.originalEvent.touches[0].pageY;
+					} else {
+						X = e.pageX;
+						Y = e.pageY;
+					}
+					// relative click position
+					var Xrel = X - this.offsetLeft - $(this).width()/2; 
+					var Yrel = Y - this.offsetTop - $(this).height()/2; 
+					// scale to -1..+1
+					var trans = -Yrel / ($(this).height()/2);
+					var rot = -Xrel / ($(this).width()/2);
+					setSpeed(trans, rot*3);
+				}
+			});
 		}
 		</script>
 		<title>Wild Thumper control</title>
@@ -187,6 +240,9 @@
 					<li class="nav-item">
 						<a class="nav-link" href="#lights" data-toggle="tab" role="tab">Lights</a>
 					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#drive" data-toggle="tab" role="tab">Drive</a>
+					</li>
 				</ul>
 			</nav>
 			<div class="tab-content">
@@ -320,6 +376,9 @@
 						</div>
 					</div>
 				</div>
+				<div id="drive" class="tab-pane" role="tabpanel">
+					<div class="cmd_vel_circle"></div>
+				</div>
 			</div>
 		</div>
 		<script src="assets/javascripts/jquery-3.3.1.min.js"></script>
-- 
2.39.5