node-robot-joystick/index.html at master · jlyon/node-robot-joystick · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
  <head>

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="/virtualjoystick.js/virtualjoystick.js"></script>

    <script>
      var url = document.URL;
      var socket = io.connect(url);

      // on connection to server
      socket.on('connect', function(){
      });

      // listener, whenever the server emits 'updatechat', this updates the chat body
      socket.on('ping', function (data) {
        console.log(data);
      });

      // on load of page
      $(function(){
        $('body').css('background-image', 'url('+ url.replace('3000', '3001') +')');

        console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
        var joystick  = new VirtualJoystick({
          container : document.getElementById('container'),
          mouseSupport  : true
        });
        var data = false;

        setInterval(function(){
          console.log(data);
          // Grab the latest camera image
          //var random = Math.floor(Math.random() * Math.pow(2, 31));
          //var image_url = url + 'camera?' + random;
          //$('#camera').attr('src', image_url);
          //$('body').css('background-image', 'url('+ image_url +')');

          // Socket emit an updated joystick position
          var message =
            ' dx:'+joystick.deltaX()
            + ' dy:'+joystick.deltaY();
            new_data = {'dx': joystick.deltaX(), 'dy': joystick.deltaY()};
            if (new_data.dx != data.dx || new_data.dy != data.dy) {
              data = new_data;
              socket.emit('update', data);
              console.log(data);
              //$('#result').html('<b>Result:</b> ' . message);
            }

        }, 1/10 * 1000);


      });

    </script>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
    body {
      overflow  : hidden;
      padding   : 0;
      margin    : 0;
      background-color: #BBB;
      /*background-size: 100%;*/
      background: center no-repeat;
    }
    #info {
      position  : absolute;
      top   : 0px;
      width   : 100%;
      padding   : 5px;
      text-align  : center;
    }
    #info a {
      color   : #66F;
      text-decoration : none;
    }
    #info a:hover {
      text-decoration : underline;
    }
    #container {
      width   : 100%;
      height    : 100%;
      overflow  : hidden;
      padding   : 0;
      margin    : 0;
      -webkit-user-select : none;
      -moz-user-select  : none;
    }
    </style>
  </head>

  <body>
    <img id="camera" />
    <div id="container"></div>
    <div id="info">
      <span id="result"></span>
    </div>
  </body>
</html>