Skip to content

Commit 92075b4

Browse files
eemmzzeemmzz
committed
Added initial files from hack day
1 parent 482e23b commit 92075b4

9 files changed

+276
-0
lines changed

‎background.jpg

2.81 MB
Loading

‎food.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
html, body {
2+
font-family: 'Gill Sans', 'Gill Sans MT', 'Open Sans', sans-serif;
3+
height: 100%;
4+
width: 100%;
5+
padding: 0;
6+
margin: 0;
7+
overflow: hidden;
8+
}
9+
10+
h1 {
11+
margin: 0;
12+
font-weight: 600;
13+
}
14+
15+
header {
16+
background-color: #000;
17+
color: white;
18+
z-index: 1;
19+
border-bottom: solid 2px lime;
20+
padding: 12px 22px 16px 22px;
21+
}
22+
23+
#logo {
24+
width: 238px;
25+
height: 30px;
26+
float: right;
27+
border-style: none;
28+
margin-top: 8px;
29+
}
30+
31+
#recipe {
32+
float: left;
33+
}
34+
35+
.background {
36+
background-image: url('background.jpg');
37+
background-size: cover;
38+
height: 100%;
39+
padding: 0;
40+
}
41+
42+
.background::after {
43+
content: "";
44+
background-color: #000;
45+
width: 100%;
46+
height: 100%;
47+
position: relative;
48+
49+
opacity: 0.8;
50+
display: block;
51+
z-index: 0;
52+
}
53+
54+
.content {
55+
color: white;
56+
z-index: 100;
57+
position: absolute;
58+
top: 68px;
59+
}
60+
61+
#side-bar {
62+
background-image: url('navigation-map.png');
63+
height: 710px;
64+
width: 345px;
65+
float: left;
66+
position: relative;
67+
}
68+
69+
.nav-0 {
70+
background-position: 0px -20px;
71+
}
72+
73+
.nav-1 {
74+
background-position: -364px -20px;
75+
}
76+
77+
.nav-2 {
78+
background-position: -732px -20px;
79+
}
80+
81+
.page-wrapper {
82+
width: 1090px;
83+
white-space: nowrap;
84+
overflow-y: scroll;
85+
}
86+
87+
.page {
88+
font-size: 34px;
89+
line-height: 48px;
90+
display: none;
91+
}
92+
93+
.active {
94+
display: block;
95+
}

‎food.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<head>
3+
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
4+
<script src="http://js.leapmotion.com/leap-0.6.4.js"></script>
5+
<script src="http://js.leapmotion.com/leap-plugins-0.1.10.js"></script>
6+
<script src="http://js.leapmotion.com/leap.rigged-hand-0.1.3.min.js"></script>
7+
<script src="food.js"></script>
8+
9+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
10+
<link rel="stylesheet" href="food.css">
11+
12+
<title>Hack Day - Cooking Mode - Emma &amp; Guy</title>
13+
</head>
14+
15+
<body>
16+
<header>
17+
<h1 id="recipe">Chicken Pho // <span style="font-weight: 300;">Preparation Method</span></h1>
18+
<img id="logo" src="logo.png"></img>
19+
<div style="clear:both;">
20+
</header>
21+
22+
<div class="background"></div>
23+
<div class="content">
24+
<div id="side-bar" class="nav-0"></div>
25+
26+
<div class="page-wrapper">
27+
<div class="page active">
28+
<img src="step1.png" height="633"></img>
29+
</div>
30+
<div class="page">
31+
<img src="step2.png" height="633"></img>
32+
</div>
33+
<div class="page">
34+
<img src="technique.png" height="633"></img>
35+
</div>
36+
</div>
37+
<div style="clear:both;">
38+
</div>
39+
40+
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
41+
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
42+
</body>

‎food.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
window.onload = function() {
2+
var navBar = document.querySelector('#side-bar');
3+
var pageWrapper = document.querySelector('.page-wrapper');
4+
var pages = document.querySelectorAll('.page');
5+
6+
var currentPageIndex = 0;
7+
var previousPageIndex;
8+
9+
var debounceUpDownTime = 700;
10+
var debounceLeftRightTime = 300;
11+
12+
var acceptUpDownGesture = true;
13+
var acceptLeftRightGesture = true;
14+
15+
Leap.loop({
16+
hand: function (hand) {
17+
var handMesh = hand.data('riggedHand.mesh');
18+
19+
var screenPosition = handMesh.screenPosition(
20+
hand.palmPosition,
21+
riggedHandPlugin.camera
22+
);
23+
}
24+
},
25+
function(frame) {
26+
if (frame.gestures.length > 0) {
27+
for (var index = 0; index < frame.gestures.length; index++) {
28+
var gesture = frame.gestures[index];
29+
30+
switch (gesture.type) {
31+
case "swipe":
32+
// Horizontal or Vertical?
33+
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
34+
var swipeDirection = "";
35+
36+
if (isHorizontal) {
37+
if (!acceptLeftRightGesture) {
38+
break;
39+
}
40+
41+
// Debounce me bby
42+
acceptLeftRightGesture = false;
43+
setTimeout(function() {
44+
acceptLeftRightGesture = true;
45+
},
46+
debounceLeftRightTime);
47+
48+
// Direction
49+
if(gesture.direction[0] > 0){
50+
swipeDirection = "right";
51+
} else {
52+
swipeDirection = "left";
53+
}
54+
scrollPage(swipeDirection, gesture.speed);
55+
} else {
56+
if (!acceptUpDownGesture) {
57+
break;
58+
}
59+
60+
// Debounce me bby
61+
acceptUpDownGesture = false;
62+
setTimeout(function() {
63+
acceptUpDownGesture = true;
64+
},
65+
debounceUpDownTime);
66+
67+
// Direction
68+
if (gesture.direction[1] > 0) {
69+
swipeDirection = "up";
70+
} else {
71+
swipeDirection = "down";
72+
}
73+
changePage(swipeDirection);
74+
}
75+
break;
76+
}
77+
}
78+
}
79+
})
80+
.use('riggedHand')
81+
.use('handEntry');
82+
83+
riggedHandPlugin = Leap.loopController.plugins.riggedHand;
84+
85+
function scrollPage(direction, speed) {
86+
var currentPage = pages[currentPageIndex];
87+
var maximum = currentPage.querySelector('img').clientWidth;
88+
if (direction === "left") {
89+
var scrollTo = pageWrapper.scrollLeft + currentPage.clientWidth;
90+
if (scrollTo < maximum) {
91+
$(pageWrapper).stop().animate({scrollLeft: scrollTo + 'px'}, 500, 'easeInOutQuart');
92+
}
93+
} else {
94+
var scrollTo = pageWrapper.scrollLeft - currentPage.clientWidth;
95+
if (scrollTo < 0) {
96+
scrollTo = 0;
97+
}
98+
$(pageWrapper).stop().animate({scrollLeft: scrollTo + 'px'}, 500, 'easeInOutQuart');
99+
}
100+
}
101+
102+
function changePage(direction) {
103+
if (direction === "up") {
104+
// Go to the next page if available
105+
if (pages && pages[currentPageIndex + 1] !== undefined) {
106+
// Store index for page
107+
previousPageIndex = currentPageIndex;
108+
currentPageIndex = currentPageIndex + 1;
109+
}
110+
} else {
111+
// Go to the previous page if available
112+
if (pages && pages[currentPageIndex - 1] !== undefined) {
113+
// Store index for page
114+
previousPageIndex = currentPageIndex;
115+
currentPageIndex = currentPageIndex - 1;
116+
}
117+
}
118+
119+
// Get pages
120+
var previousPage = pages[previousPageIndex];
121+
var currentPage = pages[currentPageIndex];
122+
123+
// Hide previous page
124+
if (previousPage !== undefined && previousPage.classList.contains('active')) {
125+
previousPage.classList.remove('active');
126+
}
127+
128+
// Show current page
129+
if (!currentPage.classList.contains('active')) {
130+
currentPage.classList.add('active');
131+
}
132+
133+
// Update nav bar
134+
navBar.className = 'nav-' + currentPageIndex;
135+
136+
// Back to 0
137+
pageWrapper.scrollLeft = 0;
138+
}
139+
}

‎logo.png

6.63 KB
Loading

‎navigation-map.png

87.8 KB
Loading

‎step1.png

601 KB
Loading

‎step2.png

607 KB
Loading

‎technique.png

24.4 KB
Loading

0 commit comments

Comments
 (0)