X-Git-Url: https://defiant.homedns.org/gitweb/?p=ros_wild_thumper.git;a=blobdiff_plain;f=www%2Findex.html;h=4e6b5650bc3225ea157c69a65d88365f7f2cce3e;hp=a3b7c4229a49d1146c9f8f879bc83728d202e431;hb=17c670f1932371d1b1ba431eb0f331507445023e;hpb=8c55192936dc754d715b18e96aae19cf5a22c8c4

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>