search

GT-RAIL / keyboardteleopjs

Keyboard Teleoperation via Twist Messages
http://robotwebtools.org/
Other
20 stars 16 forks source link

support imgae click #17

Closed k-okada closed 8 years ago

k-okada commented 8 years ago

this reques following html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script type="text/javascript" src="http://cdn.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.min.js"></script>

    <script type="text/javascript">
      /**
      * Setup all GUI elements when the page is loaded.
      */
      function init() {
      // Connecting to ROS.
      var ros = new ROSLIB.Ros({
      url : 'ws://127.0.0.1:9090'
      });

      // Initialize the teleop.
      this.teleop = new KEYBOARDTELEOP.Teleop({ /* make it global */
      ros : ros,
      topic : '/tetris/cmd_vel'
      });

      // Create a UI slider using JQuery UI.
      $('#speed-slider').slider({
      range : 'min',
      min : 0,
      max : 100,
      value : 90,
      slide : function(event, ui) {
      // Change the speed label.
      $('#speed-label').html('Speed: ' + ui.value + '%');
      // Scale the speed.
      teleop.scale = (ui.value / 100.0);
      }
      });

      // Set the initial speed .
      $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
      teleop.scale = ($('#speed-slider').slider('value') / 100.0);
      }

    </script>
  </head>

  <body onload="init()">
    <div id="speed-label"></div>
    <div id="speed-slider"></div>
    <img src="http://wiki.ros.org/keyboardteleopjs?action=AttachFile&do=get&target=example.png" />
    <script>
      $(document).ready(function() {
        $('img').click(function(e) {
          var offset = $(this).offset();
          var x = e.pageX - offset.left;
          var y = e.pageY - offset.top;
          if ( x < 115 & y < 110 ) {
             window.teleop.handleKey(89, true);
          }
          if ( x > 215 & y < 110 ) {
             window.teleop.handleKey(69, true);
          }
          if ( 115 < x & x < 215 & y < 110 ) {
             window.teleop.handleKey(87, true);
          }
          if ( x < 130 & y > 110 ) {
             window.teleop.handleKey(65, true);
          }
          if ( x > 230 & y > 110 ) {
             window.teleop.handleKey(68, true);
          }
          if ( 130 < x & x < 230 & y > 110 ) {
             window.teleop.handleKey(83, true);
          }
        });
      });
    </script>
  </body>
</html>