-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontrolpanel.html
More file actions
170 lines (151 loc) · 7.32 KB
/
controlpanel.html
File metadata and controls
170 lines (151 loc) · 7.32 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<!--
Built by Carl Oscar Aaro <carloscar@agigen.se>, @kalaspuffaaro at Twitter
Design by Tobias Ahlin, @tobiasahlin
KavajuchanLazerEyes(tm), code name "CrabSloth". A web based software for displaying Cosplayers during a show.
The presentation software was created by UppCon and Agigen.
This web application should be run in Chrome in Presentation Mode and uses a virtual green screen for your
image mixing software / hardware.
This is provided as is and were written during an evening before UppCon, use at own risk. :)
-->
<head>
<meta charset="utf-8">
<title>Crabsloth - Kavajuchan Lazer Eyes - Controlpanel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="format-detection" content="telephone=no">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body style="padding: 10px;background: #444;color: white;">
<h1 style="margin-bottom: 20px;">CrabSloth kontrollpanel</h1>
<h2 style="font-size: 14px;line-height: 18px;margin-bottom: 20px;">
» Skriv in cosplaynummer <span style="color: #8f8;">och tryck enter</span> för att visa cosplayinfo.<br/>
» Slå på demo-mode genom att trycka D två gånger i rad.<br/>
» Slå av demo-mode genom att trycka D när demo-mode är aktivt.<br/>
» Tryck på P för att dölja allt snabbt om du skrivit fel. (PANIK! KATASTROF!)<br/>
» Dölj cosplayinfo genom att trycka nedpil.
</h2>
<input type="text" value="" placeholder="Cosplaynummer" style="width: 150px;height: 20px;padding: 10px;text-align: center;" id="cosplay-input">
<br/><br/>
<input type="submit" value="Slå av demo-mode" style="width: 172px;height: 40px;padding: 10px;line-height: 20px;background: #ddd;" id="demo-mode-off">
<input type="submit" value="PANIK" style="width: 172px;height: 40px;padding: 10px;line-height: 20px;" id="panic">
<p id="demo-info" style="display: none;color: #faa;">
När Demo-mode är påslaget fungerar inga andra actions.<br/><strong>Stäng av demo-mode genom att trycka på "D".</strong>
</p>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script>
var parentWindow = null;
var demoMode = 0;
function demoModeOff()
{
parentWindow.postMessage('stopDemoLoop();', '*');
demoMode = 0;
$('#demo-mode-off').css('background', '#dddddd');
$('#demo-info').fadeOut();
$('#cosplay-input').select();
}
function panic()
{
parentWindow.postMessage('panicMode();', '*');
demoMode = 0;
$('#cosplay-input').select();
}
$(document).ready(function () {
if (typeof(window.opener) != 'undefined' && window.opener)
parentWindow = window.opener;
if (!parentWindow)
alert('Öppna CrabSloths index.html-fil istället och följ instruktionerna');
$('#cosplay-input').focus();
$('#demo-mode-off').bind('click', function () {
demoModeOff();
});
$('#panic').bind('click', function () {
panic();
});
window.addEventListener("keydown", function(e) {
if (e.shiftKey || e.altKey || e.metaKey)
return true;
if (e.keyCode == 68 && demoMode >= 2) {
demoModeOff();
e.preventDefault();
return false;
} else if (e.keyCode == 68) {
if (++demoMode >= 2) {
parentWindow.postMessage('startDemoLoop();', '*');
$('#demo-mode-off').css('background', '#ff8888');
$('#demo-info').fadeIn();
}
$('#cosplay-input').select();
e.preventDefault();
return false;
} else if (e.keyCode != 68 && demoMode < 2) {
demoMode = 0;
}
if (e.keyCode >= 48 && e.keyCode <= 57) {
return true;
}
if (e.keyCode == 8) {
return true;
}
if (e.keyCode == 46) {
return true;
}
if (e.keyCode == 37) {
if (!$('#cosplay-input').val()) {
e.preventDefault();
return false;
}
var num = parseInt($('#cosplay-input').val()) - 1;
$('#cosplay-input').val(num);
parentWindow.postMessage('showCosplay("' + num + '");', '*');
$('#cosplay-input').select();
e.preventDefault();
return false;
}
if (e.keyCode == 39) {
var num = 0;
if (!$('#cosplay-input').val())
num = 1;
else
num = parseInt($('#cosplay-input').val()) + 1;
$('#cosplay-input').val(num);
parentWindow.postMessage('showCosplay("' + num + '");', '*');
$('#cosplay-input').select();
e.preventDefault();
return false;
}
if (e.keyCode == 38) {
parentWindow.postMessage('showCosplay("' + $('#cosplay-input').val() + '");', '*');
$('#cosplay-input').select();
e.preventDefault();
return false;
}
if (e.keyCode == 40) {
parentWindow.postMessage('hideCosplay();', '*');
$('#cosplay-input').select();
e.preventDefault();
return false;
}
if (e.keyCode == 13) {
parentWindow.postMessage('showCosplay("' + $('#cosplay-input').val() + '");', '*');
$('#cosplay-input').select();
e.preventDefault();
return false;
}
if (e.keyCode == 80) {
panic();
e.preventDefault();
return false;
}
e.preventDefault();
return false;
}, false);
});
</script>
</body>
</html>