www: Add mouse cmd_vel div

diff --git a/config/cmd_vel_mux.yaml b/config/cmd_vel_mux.yaml
index 6ed42cb07c5ccc6283bed847975a47cbb2f1eede..7e9f0ba52223667e8ff0870f18d5fd9e248b39dd 100644 (file)
--- 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"
     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
   - name:        "Wii Teleop"
     topic:       "/turtlebot_teleop_joystick/cmd_vel"
     timeout:     0.1

diff --git a/www/index.html b/www/index.html
index a3b7c4229a49d1146c9f8f879bc83728d202e431..4e6b5650bc3225ea157c69a65d88365f7f2cce3e 100644 (file)
--- 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;}
                .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">
                </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 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();
 
                        poseTopic.subscribe(function(message) {
                                var now = new Date();


@@ -123,7 +131,7 @@
                        // Initialize the teleop.
                        teleop = new KEYBOARDTELEOP.Teleop({
                                ros : ros,
                        // Initialize the teleop.
                        teleop = new KEYBOARDTELEOP.Teleop({
                                ros : ros,

-                               topic : '/cmd_vel'
+                               topic : '/teleop/cmd_vel'

                        });
 
                        // Create a UI slider using JQuery UI.
                        });
 
                        // Create a UI slider using JQuery UI.


@@ -166,6 +174,51 @@
                                        ledStripeTopic.publish(msg);
                                }
                        });
                                        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>
                }
                </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="#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">
                                </ul>
                        </nav>
                        <div class="tab-content">


@@ -320,6 +376,9 @@
                                                </div>
                                        </div>
                                </div>
                                                </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>
                        </div>
                </div>
                <script src="assets/javascripts/jquery-3.3.1.min.js"></script>