javascript/v2/pinch-strength/index.html at 52b84a23eff0437bcbec661e8dc068352b0be0f0 · leapmotion/javascript · 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
<html>
  <head>
    <title>Pinch Strength Demo</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.js"></script>
    <script src="//js.leapmotion.com/leap-0.6.0-beta2.min.js"></script>
    <script src="//js.leapmotion.com/leap-plugins-0.1.4.1.min.js"></script>
    <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap.playback-0.2.0.js"></script>
    <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap.rigged-hand-0.1.0_3.js"></script>

    <style class="codepen">
      body{
        font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      }
      #output{
        font-size: 66px;
        color: #005d98;
        text-align: left;
        position: fixed;
        bottom: 18px;
      }

      #progress {
        background: #005d98;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 16px;
        width: 0%;
      }
      img#connect-leap{
        /* this can be removed with leapjs-plugins 0.1.4.1 */
        max-width: 100%;
      }
    </style>

  </head>

  <body>
    <div id=output></div>
    <div id=progress></div>
  </body>

  <script type="text/javascript" class="codepen">
    var output = document.getElementById('output'),
        progress = document.getElementById('progress');

    // Set up the controller:
    Leap.loop({useAllPlugins: false}, function(frame){

      if (frame.hands[0]){
        output.innerHTML = frame.hands[0].pinchStrength.toPrecision(2);
        progress.style.width = frame.hands[0].pinchStrength * 100 + '%';
      }

    });


    // Adds the rigged hand and playback plugins
    // to a given controller, providing a cool demo.
    visualizeHand = function(controller){
      // The leap-plugin file included above gives us a number of plugins out of the box
      // To use a plugins, we call `.use` on the controller with options for the plugin.
      // See js.leapmotion.com/plugins for more info

      controller.use('playback', {
          // This is a compressed JSON file of preprecorded frame data
          recording: '//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/pinch-half-res.json.lz',
          // How long, in ms, between repeating the recording.
          timeBetweenLoops: 1000,
          pauseOnHand: true
        });
      var overlay = controller.plugins.playback.player.overlay;
      overlay.style.right = 0;
      overlay.style.left = 'auto';
      overlay.style.top = 'auto';
      overlay.style.padding = 0;
      overlay.style.bottom = '13px';
      overlay.style.width = '180px';


      controller.use('riggedHand', {
        scale: 1.5,
        boneColors: function (boneMesh, leapHand){
          if ((boneMesh.name.indexOf('Finger_0') == 0) || (boneMesh.name.indexOf('Finger_1') == 0)) {
            return {
              hue: 0.564,
              saturation: leapHand.pinchStrength,
              lightness: 0.6
            }
          }
        }
      });
    }
    visualizeHand(Leap.loopController);
  </script>
</html>