ar-experiments/client.html at master · davidyxu/ar-experiments · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<meta name="viewport" content="user-scalable=no" />


<style>
  html, body, #bg-marker {
    position: fixed;
    margin: 0;
    width: 100%;
    height:100%;
  }
  #bg-marker {
    background-image:url('./assets/img/image-marker-265.png');
    background-position: center top;
    background-repeat:no-repeat;
    z-index:-1;
  }
  .control {
    position: fixed;
    bottom: 0;
    width: 50%;
    height: 200px;
  }
  #release {
    right: 0;
    background-color: red;
  }
  #insert {
    left: 0;
    background-color: green;
  }
</style>

<body>
  <div id="bg-marker"></div>
  <div class="control" id="insert"></div>
  <div class="control" id="release"></div>
</body>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  var markerId = 265;
  var activeTouches = {};
  var socket = io('http://Davids-MBP:5000');

  function handleStart(e) {
    socket.emit('log', 'handleStart');

    for (var i = 0; i < e.changedTouches.length; i++) {
      var touch = e.changedTouches[i];
      activeTouches[touch.identifier] = { target: touch.target.id, first: touch.pageY, last: touch.pageY };
      if (touch.target.id === 'release')
        socket.emit('select', markerId);
      if (touch.target.id === 'release' || touch.target.id === 'insert')
        document.getElementById(touch.target.id).style.border = '5px solid blue';

      socket.emit('log', activeTouches[touch.identifier]);
    }
  }

  function handleMove(e) {
    for (var i = 0; i < e.changedTouches.length; i++) {
      var touch = e.changedTouches[i];
      var history = activeTouches[touch.identifier];
      var delta = history.last - touch.pageY;
      socket.emit('log', [delta, history.last, touch.pageY].join(" "));

      if (history.target && history.target !== touch.target.id) {
        document.getElementById(touch.target.id).style.border = 'initial';
        history.target = null;
      }

      if (delta !== 0) {
        history.last = touch.pageY;
        socket.emit('distance', delta);
      }
    };
  }

  function handleEnd(e) {
    socket.emit('log', 'handleEnd');

    for (var i = 0; i < e.changedTouches.length; i++) {
      var touch = e.changedTouches[i];
      var history = activeTouches[touch.identifier];
      var totalDelta = history.first - touch.pageY;

      delete activeTouches[touch.identifier];

      document.getElementById(touch.target.id).style.border = 'initial';

      if (history.target === 'release')
        socket.emit('release', markerId);
      if (history.target === 'insert')
        socket.emit('insert', markerId);

      socket.emit('log', "TOTAL DELTA: " + totalDelta);
    };
  }

  function handleCancel(e) {
    socket.emit('log', 'handleCancel');

    for (var i = 0; i < e.changedTouches.length; i++) {
      var touch = e.changedTouches[i];
      var cancelledDelta = activeTouches[touch].last - activeTouches[touch].first;
      delete activeTouches[touch.identifier];

      if (delta !== 0)
        socket.emit('distance', cancelledDelta);
    };
  }

  window.addEventListener('load', function() {
    document.body.addEventListener("touchstart", handleStart, false);
    document.body.addEventListener("touchend", handleEnd, false);
    document.body.addEventListener("touchcancel", handleCancel, false);
    document.body.addEventListener("touchmove", handleMove, false);
    window.addEventListener('deviceorientation', function(e) {
      socket.emit('orientation', [e.beta, -e.gamma, e.alpha - 180]);
    });
  });

</script>