-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (106 loc) · 3.25 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="http://blog.smashingkeyboards.com/wp-content/uploads/2014/05/style1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var doorbell;
var chime;
var refresh;
var password;
var connecting;
var timeout = 0;
var socket;
window.onload = function () {
chime = document.getElementById('chime');
doorbell = document.getElementById('doorbell');
submit = document.getElementById('submit');
connecting = document.getElementById('connecting');
refresh = document.getElementById('refresh');
doorbell.onmousedown = function () {play();};
doorbell.onmouseup = function () {pause();};
doorbell.onmouseout = function () {pause();};
doorbell.ontouchend = function () {pause();};
doorbell.ontouchcancel = function () {pause();};
submit.onclick = function () {connect();};
refresh.onclick = function () {location.reload();};
doorbell.style.display = 'none';
refresh.style.display = 'none';
chime.currentTime = 3;
connecting.innerHTML = "";
}
function end()
{
timeout -= 1;
if (timeout == 0)
{
chime.currentTime = 3;
chime.pause();
}
}
function play()
{
socket.emit('play', 'play');
chime.play();
}
function pause()
{
socket.emit('stop', 'stop');
chime.currentTime = 3;
chime.pause();
}
function connect()
{
connecting.innerHTML = "Thinking...thinking...";
submit.style.display = 'none';
document.getElementById('pwd').style.display = 'none';
var password = document.getElementById('pwd').value;
socket = io.connect(document.URL, {query: "userpw="+password});
socket.on('connect', function(data){
connecting.style.display = 'none';
doorbell.style.display = 'block';
})
socket.on('play', function(data){
chime.play();
})
socket.on('stop', function(data){
timeout += 1;
setTimeout(end, 2000 );
})
socket.on('error', function(data){
if (data == "handshake unauthorized")
{
connecting.innerHTML = "Catastrophic...failure...";
refresh.style.display = 'block';
}
})
}
</script>
<style>
body {padding-top: 20%; background-image:url(http://blog.smashingkeyboards.com/wp-content/uploads/2014/05/dots.png);}
#doorbell {background: none; outline: 0;}
#doorbell:focus {outline: 0; box-shadow: none;}
button {border: 1px solid #888; background-color: #FFFFFF;}
#pwd {border: 1px solid #888; resize: none;}
#connecting {color: black; font-size: 300%;}
</style>
</head>
<body>
<center>
<button id="doorbell" background="transparent">
<div id=image>
</div>
</button>
<input type="password" id=pwd></input>
<br>
<button id="submit">Connect!
</button>
<p id="connecting"></p>
<button id="refresh">Try Again</button>
</center>
<audio id="chime" src="http://blog.smashingkeyboards.com/wp-content/uploads/2014/05/softdoorbell.m4a"></audio>
</body>
</html>