-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (85 loc) · 2.9 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenCV JS</title>
<script async src="js/opencv.js" onload="openCvReady();"></script>
<script src="js/utils.js"></script>
<script src="js/opencvready.js" type="text/JavaScript"></script>
<link rel="stylesheet" href="css/styling.css" />
</head>
<body onload="openCvReady()">
<center>
<h1>Image Processing using OpenCV.js</h1>
<h3>By: Whitten Oswald</h3>
<!-- display video outputs -->
<div>
<span style="display: inline-block">
<h1>Before</h1>
<video id="cam_input" height="480" width="640"></video>
</span>
<span style="display: inline-block">
<h1>After</h1>
<canvas id="canvas_output"></canvas>
</span>
</div>
<!-- display controls -->
<h2>Control Panel</h2>
<div>
<div>
<label for="preset-select">Presets:</label>
<select id="preset-select">
<option value="default">Default</option>
<option value="ghost1">Ghost-1</option>
<option value="ghost2">Ghost-2</option>
<option value="sketch">Sketch</option>
<option value="dark1">Dark-1</option>
<option value="dark2">Dark-2</option>
<option value="rorschach">Rorschach</option>
</select>
</div>
<br />
<span style="display: inline-block">
<div>
<label for="slider_constant">Constant: </label>
<input
type="range"
id="slider_constant"
min="-5"
max="30"
value="6"
title="Constant value subtracted from the mean or weighted mean. Normally, it is positive but may be zero or negative as well."
/>
<span id="constant_output">6</span>
</div>
<div>
<label for="slider_block_size">Block Size: </label>
<input
type="range"
id="slider_block_size"
min="3"
max="105"
value="15"
step="2"
title=" Size of a pixel neighborhood that is used to calculate a threshold value for the pixel: 3, 5, 7, and so on."
/>
<span id="block_size_output">15</span>
</div>
<div>
<label for="toggle-switch">Invert? </label>
<label class="toggle-switch">
<input type="checkbox" id="inverter" />
<span class="toggle-slider"></span>
</label>
</div>
</span>
<span style="display: inline-block">
<button id="screenshot" onclick="takeScreenshot()">
Take Screenshot!
</button>
<span>(downloads)</span>
</span>
</div>
</center>
</body>
</html>