A Pen by imran

Thumbnail
This awesome code was written by imran2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright imran2 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  imran</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
<link rel="stylesheet" type="text/css" href="./css/home.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
<script src="//js.leapmotion.com/leap-0.6.4.min.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.6.1.js"></script>
<script src="//js.leapmotion.com/leap.rigged-hand-0.1.3.min.js"></script>
    <nav>
      <ul>
        <img class="logo2" src="https://i.imgur.com/Ra5sVdL.png" />
        <li><a href="index.html" data-hover="Home">Home</a></li>
        <li><a href="values.html" data-hover="Values">Values</a></li>
        <li><a href="test.html" data-hover="Test">Test</a></li>
        <li><a href="control.html" data-hover="Control">Control</a></li>
        <li><a href="info.html" data-hover="Info">Info</a></li>
      </ul>

      <div class="checkbox_div">
         <div class="switch">
    	    <input type="checkbox" name="toggle">
    	   <label for="toggle"><i></i></label>
    	   <span></span>
      </div>

    </nav>
</head>
<body onload="say('Welcome to Air Leap')">
<div id="labels"></div>
 <section id="cover" class="cover">
    <h1>
<img src="https://i.imgur.com/LO1hxCP.png"></img>
    </h1>
    <p>Scroll</p>
 </section>

 <div id="box" class="content">
  <div>
      <h2>Testing Page</h2>
  </div>
 </div>

<div class="buttons">
  <button type="button" class="button-secondary" onclick="alert('Hello world!')">Clicking Test</button>
<br>
  <br>
  
  
  <br>
 
 <div class="scrollbox"> <select size="20"> <option value="1">Please scroll up and down the list using the leap motion gesture</option>
   <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">Scroll </option>
  <option value="2">End</option>
  </select>
 </div>
  
  

  <br>
  
  
  <br>
  <ul class="container2">
    <li class="container3"><img src="http://www.extremetech.com/wp-content/uploads/2013/04/Leap-Motion-device-held-in-the-hand-showing-its-small-size-640x353.jpg" width="100" height="100" alt="" /></li>
    <li><img src="http://www.robotshop.com/media/files/images2/leap-motion-3d-motion-gesture-controller-10-large.jpg" width="100" height="100" alt="" /></li>
    <li><img src="https://cdn.shopify.com/s/files/1/0404/3649/products/Packaging-front_3_4-web_large.png" width="100" height="100" alt="" /></li>
    <li><img src="https://i2.cdn.turner.com/cnnnext/dam/assets/130722023535-leap-motion-controller-setup-story-top.jpg" width="100" height="100" alt="" /></li>
    <li><img src="http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/Leap-Motion-Amazing-Revolutionary-Useles_EB5D/image_a81b3421-93ec-4e02-8dfb-16827b8a39f6.png" width="100" height="100" alt="" /></li>
</ul>
  <Br>
  
  <button onclick="dimLights();">Dim</button>
<div id="dimmer"></div> 
  
  <br>
  
  <button onclick="lightsUp();">Brighten</button>
<div id="brighter"></div> 
  
    <br>
  
  <button onclick="toggleZoomScreen();">zoom</button>
<div id="zommer"></div> 
  
      <br>
 
  
  <button onclick="zoomDefault();">zoom out</button>
<div id="zoomOut"></div> 
  
  
 
  <br>
  
 <div class="zooming">
  <p>You must be zoomed in to be read this amazingly small text.</p>
  </div>


 

 </div>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/imran2/a-pen-by-imran-BNEWeY */
@import "compass";
$color-active: rgba( 255, 55, 71, 1);
$color-white: rgba( 245, 250, 255, 1);
$color-black: rgba( 5, 15, 30, 1);
$color-main: rgba( 56, 38, 51, 1);
$sans: 'Titillium Web',
sans-serif;
body {
  background-color: #ffffff;
}

#cursor {
      width: 25px;
      height: 25px;
      position: fixed;
      //margin-left: -50px;
      //margin-top: -50px;
      z-index: 910;
      opacity: 0.9;


      background: black;
      border-radius: 100%;
      background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
      background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
      background: radial-gradient(100px 100px, circle, #5cabff, #000);
    }

label {
  position: fixed;
  white-space: nowrap;
  z-index: 5;
}

nav {
  background:#231F20;
  top: 10px;
  position: fixed;
  width: 75%;
  z-index: 5;
  height: 107.531px;
  border-radius: 8px;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/
  /* box-shadow: 0px 10px 35px 0px     rgba(0,0,0,.5);*/
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);

                        /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
}

nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.17em;
  letter-spacing: 0.002rem;
}

nav ul li a {
  display: inline-block;
  padding: 1em;
  color: #00A69C;
  text-decoration: none;
  font-size:1.5vw;
  transition: transform 0.3s ease 0s;
  transform-origin: 50% 0px 0px;
  transform-style: preserve-3d;
}

nav ul li a:hover {
  background: #231F20;
  color: #000000;
  transform: rotateX(90deg) translateY(-22px);
}

nav ul li a::before {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 80px;
  background: none repeat scroll 0% 0% #00A69C;
  color: #000000;
  content: attr(data-hover);
  transition: #6363CE 0.3s ease 0s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0px 0px;
}

.logo2{
  position:fixed;
  left: 5%;
  top:0;
}

.checkbox_div {
  top: 10px;
  background:#231F20;
  position: fixed;
  width: 10%;
  z-index: 5;
  right: 8px;
  padding: 2.33rem;
  border-radius: 8px;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */
}

.switch input {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch {
  width: 80px;
  height: 33px;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.switch label {
  display: block;
  width: 90%;
  height: 100%;
  position: relative;
  background: #29AAE2;
  border-radius: 30px 30px 30px 30px;
  box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch input ~ label i {
  display: block;
  height: 31.2px;
  width: 31.2px;
  position: relative;
  left: 0.5px;
  top: 1px;
  z-index: 5;
  border-radius: inherit;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(0, 0, 0, 0.4);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 11px;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(185, 231, 253, 0), inset 0 0 8px rgba(0, 0, 0, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3), inset 0 -5px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
/* Toggle */

.switch input:checked ~ label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 10px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
  background: #00A69C ;
  background: gradient-gradient(#ffffff, #77a1b9);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(100, 231, 253, 1), inset 0 0 8px rgba( 61, 157, 247, 0.8), inset 0 -2px 4px rgba(185, 231, 253, 0.3), inset 0 -3px 8px rgba(185, 231, 253, 0.5);
}

.switch input:checked ~ label i {
  left: auto;
  left: 60%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 7px rgba(0, 0, 0, 0.3), 0 8px 8px rgba(0, 0, 0, 0.3), inset -1px 0 1px #b9f3fe;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cover {
  height: 100vh;
  box-sizing: border-box;
  background-color: #382633;
  z-index: 6;
}

.cover h1 {
  transform: translate(-50%, -50%);
  padding: 5vw;
  background-color: #382633;
  line-height: 75%;
  color: #ff3747;
  display: inline-block;
  position: relative;
  left: 50.5%;
  top: 50%;
}

.cover p {
  padding: 2vw;
  bottom: 2vw;
  color: #00A69C;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.cover p:before {
  content: "";
  bottom: 1vw;
  position: absolute;
  left: 50%;
  border-top: 6.5px solid #29AAE2;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  margin-left: -6.5px;
}

section {
  
  padding-top: 5vw;
  position: relative;
  display: block;

}

@media screen and (max-width: 300px) {
  section {
    padding-top: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section {
    padding-top: 60px;
  }
}
section:last-of-type {
  padding-bottom: 5vw;
}

@media screen and (max-width: 300px) {
  section:last-of-type {
    padding-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section:last-of-type {
    padding-bottom: 60px;
  }
}

#box {
  background:#0000FF;
	margin: 30px auto;
	width: 80%;
  height: auto;
	border-radius: 8px;
  box-sizing: border-box;
  z-index: 4;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
}

#box:after {
    padding-top: 0%;
    content: '';
    display: block;
}

.content {
  
  z-index: 1;
  text-align: center;
}
.content div {
  background-color: #00A69C;
  padding-top: 2vw;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 300px) {
  .content div {
    padding-top: 2px;
  }
}
@media screen and (min-width: 1200px) {
  .content div {
    padding-top: 2px;
  }
}
.content div h2, .content div img, .content div p, .content div hr {
  margin-bottom: 2vw;
  
}

@media screen and (max-width: 300px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 60px;
  }
}
.content div img:last-child {
  margin-bottom: 0 !important;
}
.content div h2, .content div p {
  padding-right: 5vw;
  
  padding-left: 5vw;
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-right: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-right: 60px;
  }
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-left: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-left: 60px;
  }
}
.content div img {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.95;
  width: 100%;
  height: auto;
}
.content div img:hover {
  opacity: 1;
}

h1,
h2,
h3,
p {
  
  letter-spacing: 0.05em;
  line-height: 100%;
  font-family: "Titillium Web", sans-serif;
  position: relative;
  margin-top: 0.5%;
}

h1,
h3 {
  text-transform: uppercase;
}

h1 {
  font-size: 12vw;
  color: #231F20;
}

h2 {
  font-size: 2vw;
  font-family: "Titillium Web", sans-serif;
  text-align: center;
  color: #231F20;
}

p {
  font-size: 1.17em;
}

button {
    margin:0 auto;
    display:block;
}

 .button-secondary {
    color: white;
    border-radius: 4px;
    font-size: 125%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background:#5bc0be;
}

.scrollbox{
 width:400px;
 margin:0 auto;
 display:block;
}

.zooming{
 font-size:6px;
 width:400px;
 margin:0 auto;
 display:block;
 color:black;
}

.container2 {
    overflow:hidden;
    list-style:none;
  text-align:center;
}

.container2 li {
    float:left;
    text-align:center;
}

.container2 img {
    display:block;
}


/*Downloaded from https://www.codeseek.co/imran2/a-pen-by-imran-BNEWeY */
var riggedHandPlugin;
// Leap Motion Settings
var last_frame;
var scene;
var action = null;
var last_action = null;
var start_action = 0;
var intent = false;
var delay_between_actions = 1;
var timeout = null;

// Track Leap Motion Connection
var now, last_poll = new Date().getTime() / 1000;
var connection;
var connection_lost_after = 5;

// Settings for Scroll Events
var width = window.innerWidth;
var height = window.innerHeight;
var scroll_speed = 20;
var scroll_smoothing = 4;

// Size for Finger Rendering in Pixels
var finger_size = 32;

// Colors for Fingers
var rainbow = new Array('#F80C12', '#FF3311', '#FF6644', '#FEAE2D', '#D0C310', '#69D025', '#12BDB9', '#4444DD', '#3B0CBD', '#442299');
var leap = '#9AC847';
var dark = '#000000';
var light = '#FFFFFF';

// Setup Default Settings for Leap Motion
var leap_motion_settings = {
	'fingers': 'yes',
	'color': 'rainbow',
	'scrolling': 'enabled',
	'history': 'enabled',
	'zoom': 'disabled',
	'rotation': 'disabled'
};

function click_page(){
}

// Two Finger Page Scrolling
function scroll_page(pointables)
{
	var finger = pointables[0];
	var last_finger = last_frame.pointables[0];


	var horizontal_translation = 0;
	var horizontal_delta = finger.tipPosition.x - last_finger.tipPosition.x;

	var vertical_translation = 0;
	var vertical_delta = finger.tipPosition.y - last_finger.tipPosition.y;

	if (horizontal_delta > 10)
	{
		horizontal_translation = scroll_speed;
	}
	else if (horizontal_delta < 10)
	{
		horizontal_translation = -scroll_speed;
	}

	if (vertical_delta > scroll_smoothing)
	{
		vertical_translation = scroll_speed;
	}
	else if (vertical_delta < -scroll_smoothing)
	{
		vertical_translation = -scroll_speed;
	}

	window.scrollBy(horizontal_translation, vertical_translation);
}

// Look for Hand Gestures to Navigate History
function navigate_history(gesture)
{
	if (gesture.type === 'swipe' && gesture.state === 'stop')
	{
		if (gesture.direction.x > 0)
		{
			history.forward();
			console.log('Next Page');
		}
		else
		{
			history.back();
			console.log('Previous Page');
		}
	}
}

var hand;
var index
var controllerOptions = {enableGestures: true};
Leap.loop(controllerOptions,{frame:function(frame){
	last_poll = new Date().getTime() / 1000;
	// Try to detect User Intent to reduce firing events not intended ( less jumpy page is good )
	var now = new Date().getTime() / 1000;

	if(start_action === 0)
	{
		start_action = new Date().getTime() / 1000;
	}

	var offset = now - start_action;

	// If nothing is happening, reset interaction
	if (frame.pointables === undefined)
	{
		action = null;
		clearTimeout(timeout);
		return;
	}

	// Look for Swipe Gesture
	if (frame.valid && frame.gestures.length > 2)
	{
    			frame.gestures.forEach(function(gesture)
			{
				if (gesture.type)
				{	
							action = 'gesture';
				}
				
				// Use for testing only; Display gesture type on browser console
				//console.log(gesture.type);
			});
	}
	// Look for Scrolling Gesture
	else if (frame.pointables.length === 2)
	{
		action = 'scroll';
	}
	// Look for Page Transform Gesture
	else if (frame.pointables.length > 2)
	{
		action = 'transform';
	}
  else if (frame.pointables.length === 1){
            console.log('click');
    action = 'click';
  }
	// Nothing is happening, reset actions
	else
	{
		action = null;
		clearTimeout(timeout);
	}


	if(action === last_action && offset >= delay_between_actions)
	{
		intent = true;
	}
	else if(action !== last_action && offset >= delay_between_actions)
	{
		intent = false;
		start_action = 0;
		clearTimeout(timeout);
	}

	if(intent)
	{
		switch(action)
		{
			case 'gesture':
				timeout = setTimeout(function(){ navigate_history(frame.gestures[0]); }, 250);
        console.log('gesture');
				break;

			case 'scroll':
				timeout = setTimeout(function(){ scroll_page(frame.pointables); }, 250);
        console.log('scroll');
				break;
        
      case 'click':
				timeout = setTimeout(function(){ scroll_page(frame.pointables); }, 250);
              hand = frame.hands[0];
      index = hand.indexFinger.direction;
      console.log(index);
        console.log('click');
				break;

/*			case 'transform':
				timeout = setTimeout(function(){ page_transform(frame.hands); }, 250);
				break;*/
		}
	}

	if (frame !== undefined && frame.pointables !== undefined && frame.pointables.length > 0)
	{
		last_frame = frame;
		last_action = action;
	}
}},{hand: function(hand){
        var handMesh = hand.data('riggedHand.mesh');
        var screenPosition = handMesh.screenPosition(
          hand.palmPosition,
          riggedHandPlugin.camera
        );
      }
    })
  .use('riggedHand')
  .use('handEntry')
   riggedHandPlugin = Leap.loopController.plugins.riggedHand;

//--Speech and sythesis

function say(text){
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10];
  msg.voiceURI = 'native';
  msg.volume = 1; // 0 to 1
  msg.rate = 0.8; // 0.1 to 10
  msg.pitch = 0; //0 to 2
  msg.text = text;
  msg.lang = 'en-US';
  speechSynthesis.speak(msg);
}

    var restoreColor;

    function dimLights() {
      restoreColor = document.body.style.backgroundColor ;
      var theBody = document.body ;
     theBody.style.backgroundColor = "black" ;
     
      var theRest = document.getElementById("restofpage") ;
      theRest.style.opacity = 0.2 ;
    }

 

    function lightsUp() {
      var theBody = document.body ;
      theBody.style.backgroundColor = restoreColor ;
      var theRest = document.getElementById("restofpage") ;
      theRest.style.opacity = 1;
    }


function toggleZoomScreen() {
document.body.style.zoom="250%"
} 

function zoomDefault() {
document.body.style.zoom="100%"
}

Comments