Calango_e_scratch_na_escola/controle.html at master · O2br/Calango_e_scratch_na_escola · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NodeMCU Motor Driver</title>
  <link rel="stylesheet" href="/materialize.css">
  <link rel="manifest" href="/manifest.json">
  <script src="/nipplejs.js"></script>
  <script src="/materialize.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
  <div class="container">
    <h2 id="title" class="light center">NodeMCU Robot</h2>
  </div>
  <div>
    <div id="static" style="position: absolute; width:100%; height:100%"></div>
  </div>
  <script>
    var xhttp = new XMLHttpRequest();
    var joystick = nipplejs.create({
      zone: document.getElementById('static'),
      mode: 'static',
      position: {
        left: '50%',
        top: '50%'
      },
      color: '#34629C',
      size: 200
    });
    joystick.on('move', function (evt, data) {
        //console.log(evt);
        //console.log(data);

        console.log(data.direction.angle);
        console.log(data.distance);
        /*
        var url = "{[host]}/api/jsdata";
        xhttp.open("POST", url);
        xhttp.send(JSON.stringify(data));
        */

    }).on('end', function (evt, data) {

        console.log(evt.type);
        //console.log(data);
        /*
         var url = "{[host]}/api/jsdata";
         xhttp.open("POST", url);
         xhttp.send(JSON.stringify(evt));
         */
    });
  </script>
</body>
</html>