-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
324 lines (318 loc) · 20.5 KB
/
index.htm
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <title>FilterShoppe</title> -->
<title>+gamma+</title>
<link rel="stylesheet" href="./style.css">
<script id='simpleImageCode' type="application/javascript" src="./SimpleImage.js" charset="utf-8"></script>
</head>
<div id='pageHead'>
<!-- <h1 id='pageTitle'>FilterShoppe</h1> -->
<h1 id='pageTitle'>+gamma+</h1>
<p style='text-align:center; font-style:oblique'>A digital lomography workstation</p>
<div id='navDivider' class='separator'>
<nav id='navigationTabs'>
<a href='#1' onclick='togglePage("consoleElements", "aboutElements")'>Main</a> |
<a href='#2' onclick='togglePage("aboutElements", "consoleElements")'>About</a> |
<a href='https://github.com/kendfss' target="_blank">GitHub</a>
</nav>
</div>
</div>
<div id='mainPage'>
<body id='mainBody'>
<div id='consoleElements'>
<div id='canviiEssentials' class='separator'>
<div id='canvii' class='container'>
<br>
<!-- <canvas class='imageCanvas' id='originalImageCanvas'></canvas> -->
<canvas class='imageCanvas' id='originalImageCanvas' style='display: none;'></canvas>
<!-- <canvas class='imageCanvas' id='originalImageCanvas'></canvas> -->
<canvas class='imageCanvas' id='editingImageCanvas'></canvas>
<canvas class='imageCanvas' id='swappingImageCanvas' style='display: none;'></canvas>
</div>
<div id='canviiStagingButtons' class='button'>
<label for='originalImage' class='button'>
Upload
<input style='display:none;' id='originalImage' class='button' type='file' multiple='false' accept='image/*' value='Upload' onchange='uploadOriginalImage()'>
</label> |
<label for='revertImageButton' class='button' onclick='revertImage()'>
Revert
<input style='display:none;' id='revertImageButton' class='button' type='button' value='Reset'>
</label> |
<label for='cacheImageButton' class='button'>
Commit
<input style='display:none;' id='cacheImageButton' class='button' type='button' value='Commit' onclick='commitImage()'>
</label> |
<label for='cacheImageButton' class='button'>
Swap
<input style='display:none;' id='cacheImageButton' class='button' type='button' value='Swap' onclick='swapCanvii()'>
</label>
</div>
<div id='canviiZoomControls' class='controllers'>
<br/>
<!-- <input class="slider" id="originalZoomer" type="range" min=1 max=2.5 value="1" step="0.001" oninput="zoom('originalImageCanvas', 'originalZoomer')"> -->
<!-- <input class="slider" id="editingZoomer" type="range" min=1 max=2.5 value="1" step="0.001" oninput="zoom('editingImageCanvas', 'editingZoomer')"> -->
<input class="slider" id="editingZoomer" type="range" min=1 max=2.5 value="1" step="0.001" oninput="zoom('editingImageCanvas', 'editingZoomer'); zoom('originalImageCanvas', 'editingZoomer')">
<br/>
<label for='resetZoomButton' class='button' onclick='resetZoom()'>
Reset Zoom
<input style='display:none;' class='button' type='button' value='Reset Zoom?'>
</label>
<br/>
<br/>
<br/>
</div>
<!-- <div style='box-align: center;' class='container'> -->
<!-- <div style='align: center;' class='container'> -->
<div style='text-align: center;' class='container'>
<img id='loadGif' src='./loading.gif'>
</div>
<div id='canviiOrientationHandles'>
<select id='flipSelector' onchange='filterImageToggle()'>
<option class='selectorDefault' value='none'>Flip Axis</option>
<option id='horizontalFlip' onclick='flipHorizontal(editingImage)' value='h'>Horizontal Flip</option>
<option id='verticalFlip' onclick='flipVertical(editingImage)' value='v'>Vertical Flip</option>
</select>
<br>
<br>
<label for='rotateImageButton' class='button' onclick='flipToggler()'>
Flip
<input style='display:none;' class='button' type='button' value='Apply Rotation' onclick='flipToggler()'>
<br>
<br>
<br>
</label>
</div>
</div>
<div id='controlPanel' class='wrapper'>
<select id="primaryOptionSelector" value='Editing Modes' onchange='primaryOptionToggler()'>
<option class='selectorDefault' value='none' onclick='primaryOptionToggler()'>Edit Modes</option>
<!-- <option class='primaryOption' value='border'>Add Border</option> -->
<option class='primaryOption' value='comb' onclick='primaryOptionToggler()'>Combine</option>
<!-- <option class='primaryOption' value='text'>Apply Text</option> -->
<option class='primaryOption' value='filter' onclick='primaryOptionToggler()'>Filter</option>
</select>
<br/>
<br/>
<div id='secondaryOptions' style='display:none;'>
<div id='borderControls' class='secondaryOptionPanel' style='display:none;'>
<input class='slider' id='borderThickness' type='range' min='0' max='90' step='1' value='0' onchange='setBorderThickness()'>
<input id="borderColourPicker" type="color" value="#111159" onchange="setBorderColour()">
</div>
<div id='combinatorialControls' class='secondaryOptionPanel'>
<select id='combinatorialModeSelector' onchange='combinatorialToggler()'>
<option class='selectorDefault' value='none' onclick='combinatorialToggler()'>Combinatorial Modes</option>
<option class='combination' value='greenScreen' onclick='combinatorialToggler()'>Green Screen</option>
<option class='combination' value='blend' onclick='combinatorialToggler()'>Blend</option>
</select></br>
<div id='combinatorialModePanels' style='display:none;'>
<div id='greenScreenControls' class='combinatorialModePanel'>
<label class='button' for='greenScreenBackgroundImage'>
Upload Background
<input style='display:none;' class='button' type='file' multiple='false' accept='image/*' id='greenScreenBackgroundImage' onchange='uploadGreenScreenBackground()'>
</label>
<input class='slider' id='criticalGreenSetter' type='range' value='250' min='0' max='255' step='1' onchange='setCriticalGreen()'>
</div>
<div id='blendControls' class='combinatorialModePanel'>
</br>
<label for='blendUpload' class='button' onchange='uploadBlendLayer()'>
Upload Blending Layer
<input style='display:none;' id='blendUpload' class='button' type='file' multiple='false' accept='image/*' onchange='uploadBlendLayer() '>
</label><br/>Please note that the uploaded image will be treated as background for all blends<br/>Remember to choose a new background <i>before</i> changing the mode if you would like to use a different mode on a new image<br/>
<select id='blendModeSelector' onchange='toggleCustomBlend()'>
<option class='selectorDefault'>Blend Modes</option>
<option class='blendModes' onclick='applyPlusLighter(editingImage, blendingImage)'>Plus Lighter</option>
<option class='blendModes' onclick='applyPlusDarker(editingImage, blendingImage)'>Plus Darker</option>
<!-- <option class='blendModes' onclick='applyMinusDarker(editingImage, blendingImage)'>Minus Lighter</option> -->
<!-- <option class='blendModes' onclick='applyMinusDarker(editingImage, blendingImage)'>Minus Darker</option> -->
<option class='blendModes' onclick='applyDifference(editingImage, blendingImage)'>Difference</option>
<option class='blendModes' onclick='applySubtract(editingImage, blendingImage)'>Subtract</option>
<option class='blendModes' onclick='applyDarkenOnly(editingImage, blendingImage)'>Darken Only</option>
<option class='blendModes' onclick='applyLightenOnly(editingImage, blendingImage)'>Lighten Only</option>
<option class='blendModes' onclick='applyDarkenRedOnly(editingImage, blendingImage)'>Darken Red Only</option>
<option class='blendModes' onclick='applyLightenRedOnly(editingImage, blendingImage)'>Lighten Red Only</option>
<option class='blendModes' onclick='applyDarkenGreenOnly(editingImage, blendingImage)'>Darken Green Only</option>
<option class='blendModes' onclick='applyLightenGreenOnly(editingImage, blendingImage)'>Lighten Green Only</option>
<option class='blendModes' onclick='applyDarkenBlueOnly(editingImage, blendingImage)'>Darken Blue Only</option>
<option class='blendModes' onclick='applyLightenBlueOnly(editingImage, blendingImage)'>Lighten Blue Only</option>
<option class='blendModes' onclick='applyDarkenRedGreenOnly(editingImage, blendingImage)'>Darken Red Green Only</option>
<option class='blendModes' onclick='applyLightenRedGreenOnly(editingImage, blendingImage)'>Lighten Red Green Only</option>
<option class='blendModes' onclick='applyDarkenRedBlueOnly(editingImage, blendingImage)'>Darken Red Blue Only</option>
<option class='blendModes' onclick='applyLightenRedBlueOnly(editingImage, blendingImage)'>Lighten Red Blue Only</option>
<option class='blendModes' onclick='applyDarkenGreenBlueOnly(editingImage, blendingImage)'>Darken Green Blue Only</option>
<option class='blendModes' onclick='applyLightenGreenBlueOnly(editingImage, blendingImage)'>Lighten Green Blue Only</option>
<option class='blendModes' onclick='applyW3CSoftlight(editingImage, blendingImage)'>Softlight (W3C)</option>
<option class='blendModes' onclick='applyIllusionsHUSoftlight(editingImage, blendingImage)'>Softlight (IllusionsHU)</option>
<option class='blendModes' onclick='applyPhotoShopSoftlight(editingImage, blendingImage)'>Softlight (Photoshop)</option>
<option class='blendModes' onclick='applyPegtopSoftlight(editingImage, blendingImage)'>Softlight (Pegtop)</option>
<option class='blendModes' onclick='applyOverlay(editingImage, blendingImage)'>Overlay</option>
<option class='blendModes' onclick='applyMultiply(editingImage, blendingImage)'>Multiply</option>
<option class='blendModes' onclick='applyDivide(editingImage, blendingImage)'>Divide</option>
<option class='blendModes' onclick='applyScreen(editingImage, blendingImage)'>Screen</option>
<option class='blendModes' onclick='applyPegtopHappyAccident1(editingImage, blendingImage)'>Happy Accident #1</option>
<option class='blendModes' value='custom'>Custom</option>
</select>
<!-- <div id='customFilterPanel' class='customPanel' style='display:none;'></div> -->
<div id='customBlendPanel' class='customPanel' style='display:none;'>
<!-- <label for='originalImage' class='button' onchange='uploadOriginalImage()'> -->
<!-- Upload -->
<!-- <input style='display:none;' id='originalImage' class='button' type='file' multiple='false' accept='image/*' value='Upload' onchange='uploadOriginalImage()'> -->
<!-- </label></br> -->
<input id='customBlendNameBox' placeholder='nameOfYourMainFunction'></br>
<!-- <button id='customBlendFunctionCompile' onclick='compileCustomEffect()'>Compile</button> -->
<button id='customBlendFunctionTrigger' onclick='executeCustomBlend()'>Execute</button>
<input type='button' id='customBlendExampleButton' value='Hide Example' onclick='exampleToggle("customBlendExampleButton", "customBlendExample")'></br>
<!-- <button id='customBlendTestingButton'><a href='http://www.dukelearntoprogram.com/course1/example/index.php' style='text-decoration:none;'>Testing Station</a></button></br> -->
<textarea readonly id='customBlendExample' style='height:150px;width:800px;background-color:#008080;' wrap='off'>
// Example
// Remember to enter the name of your function otherwise we won't know what to execute!
// Also remember to use the 'editingImageCanvas' canvas as shown below!
function dimensions(img) {
return [img.getWidth(),img.getHeight()];
}
function applyLightenOnly(fore,back) {
back.setSize(dimensions(fore)[0],dimensions(fore)[1]);
var other = new SimpleImage(dimensions(fore)[0],dimensions(fore)[1]);
for (var px of fore.values()) {
x = px.getX();
y = px.getY();
bpx = back.getPixel(x,y);
opx = other.getPixel(x,y);
opx.setRed(Math.max(px.getRed(),bpx.getRed()));
opx.setBlue(Math.max(px.getBlue(),bpx.getBlue()));
opx.setGreen(Math.max(px.getGreen(),bpx.getGreen()));
}
// return other;
editingImage = other;
var canny = document.getElementById("editingImageCanvas");
other.drawTo(canny);
}
</textarea>
<br>
<textarea id='customBlendText' style='height:350px;width:800px;' wrap='off'></textarea>
<script id='customFilterTarget'></script>
</div>
<!-- <input id='overlayBalance' type='range' value='0' min='-100' max='100' step='1' onchange='setOverlayBlend()'> -->
</div>
</div>
</div>
<div id='textControls' class='secondaryOptionPanel' style='display:none;'>
<select id=''>
<option class='selectorDefault' onchange='updateFont()'>Select Font</option>
<option class='fontName' id='impact'>Impact</option>
<option class='fontName' id='helvetica'>Helvetica</option>
<option class='fontName' id='baskerville'>Baskerville</option>
<option class='fontName' id='times'>Times</option>
<option class='fontName' id='gotham'>Gotham</option>
<option class='fontName' id='akzidenz'>Akzidenz Grotesk</option>
</select>
<input id="textColour" type="color" value="#111159" onchange="updateTextColour()">
<input class='slider' id='fontSize' type='range' value='10' min='7' max='50' step='.5' onchange='updateTextSize()'>
<!-- <input id='textBox' spellcheck='true' type='message-box' value='Enter your text here' onchange='updateTextContent()'> -->
<br>
<textarea contenteditable='true' id='textBox' spellcheck='true' type='message-box' value='' onchange='updateTextContent()'>Enter your text here</textarea>
</div>
<div id='filterControls' class='secondaryOptionPanel'>
<p id='filterWarning'>WARNING: Filters are applied automatically. Remember to commit the image before you advance with any unfamiliar filter</p>
<select id='filterSelector' onchange='toggleCustomFilter()'>
<option class='selectorDefault'>Filter Modes</option>
<option class='filterOption' onclick='applySepia(editingImage)'>Sepia</option>
<option class='filterOption' onclick='applyGreyScale(editingImage)'>Grey-Scale</option>
<option class='filterOption' onclick='applyNegative(editingImage)'>Negative</option>
<option class='filterOption' onclick='applyRouge(editingImage)'>Rouge</option>
<option class='filterOption' onclick='applyAqua(editingImage)'>Aqua</option>
<option class='filterOption' onclick='applyLime(editingImage)'>Lime</option>
<option class='filterOption' onclick='applyGhostburn(editingImage)'>Ghostburn</option>
<option class='filterOption' onclick='applyLuckyShuffle(editingImage)'>Lucky Shuffle</option>
<option class='filterOption' onclick='applyBlur(editingImage)'>Blur</option>
<option class='filterOption' onclick='applyVerticalRainbow(editingImage)'>Vertical Rainbow</option>
<option class='filterOption' onclick='applyHorizontalRainbow(editingImage)'>Horizontal Rainbow</option>
<option class='filterOption' onclick='applyTricolor(editingImage)'>Tricolor</option>
<option class='filterOption' onclick='applyBackwardDistribute(editingImage)'>Backward Distribute</option>
<option class='filterOption' onclick='applyForwardDistribute(editingImage)'>Forward Distribute</option>
<option class='filterOption' onclick='applyStochasm(editingImage)'>Stochasm</option>
<option class='filterOption' onclick='applyRGInversion(editingImage)'>RGInversion</option>
<option class='filterOption' onclick='applyRBInversion(editingImage)'>RBInversion</option>
<option class='filterOption' onclick='applyGBInversion(editingImage)'>BGInversion</option>
<option class='filterOption' onclick='applyBRG(editingImage)'>RGB to BRG</option>
<option class='filterOption' onclick='applyGBR(editingImage)'>RGB to GBR</option>
<option class='filterOption' value='custom'>Custom</option>
</select>
<div id='customFilterPanel' class='customPanel' style='display:none;'>
<input id='customFilterNameBox' placeholder='nameOfYourMainFunction'>
<br>
<button id='customFilterFunctionTrigger' onclick='executeCustomFilter()'>Execute</button>
<input type='button' id='customFilterExampleButton' value='Hide Example' onclick='exampleToggle("customFilterExampleButton", "customFilterExample")'></br>
<a id='customFilterTestingButton' href='http://www.dukelearntoprogram.com/course1/example/index.php' style='text-decoration:none;'>Testing Station</a></br>
<textarea readonly id='customFilterExample' style='height:150px;width:800px;background-color:#008080;' wrap='off'>
// Example
// Remember to enter the name of your function otherwise we won't know what to execute!
// Also remember to use the 'editingImageCanvas' canvas as shown below!
function average(pixel) {
return (pixel.getRed() + pixel.getGreen() + pixel.getRed())/3
}
function applyGreyScale(img) {
for (let px of img.values()) {
var avg = average(px);
px.setBlue(avg);
px.setGreen(avg);
px.setRed(avg);
}
// return img;
var canny = document.getElementById("editingImageCanvas");
img.drawTo(canny);
}
</textarea>
<br>
<textarea id='customFilterText' style='height:350px;width:800px;' wrap='off'></textarea>
<script id='customFilterTarget'></script>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<div id='footer' class='separator' >
<p id='saveNote'>
The swap button allows you to change the fore/back-ground for combinatorial modes<br>
Hover over the canvas to see the cached state. Commit to update it.<br>
Right-click the image on the right if you'd like to download your work.<br>
Use the slider to zoom.<br>
<i>Caching</i> enables you to save your progress and return to an earlier step in the process if need be.<br>
<i>Reverting</i> enables you to go back to the last cached version.<br><br>
<small>
Note: All processing will be done by your web browser. This application will not store any of your images or data. <br><br>
</small>
</p>
</div>
</footer>
</div>
<div id='aboutElements' style='display:none;'>
<body id='aboutBody'>
<!-- <img id='aboutImage' src=''> -->
<p id='aboutText'>
</br></br></br></br></br></br>
This app was arranged by Kenneth Elisandro.<br>
Though the course was never completed, the app itself is an extension of some assignments from Duke University's Java Team's course on the foundations of web development with JavaScript, CSS, and html, and uses their SimpleImage Library extensively.<br>
The following links direct to pages whose information was used in the development process:</br></br>
(* For codepen users: control/command-click on the links below)
</p>
<div id='aboutURLs' style='text-align:center;'>
<a style='text-align:center;' href='http://www.dukelearntoprogram.com/course1'>Course Resources</a></br>
<a style='text-align:center;' href='https://en.wikipedia.org/wiki/Blend_modes'>Blend Modes</a></br>
<a id='customFilterTestingButton' href='http://www.dukelearntoprogram.com/course1/example/index.php'>Testing Station</a>
<a style='text-align:center;' href='https://processing.org/tutorials/pixels/'>Processing.org</a><br />
<a style='text-align:center;' href='https://en.wikipedia.org/wiki/Kernel_(image_processing)'>Kernels.wiki</a><br />
<a style='text-align:center;' href='https://www.dyclassroom.com/image-processing-project/how-to-convert-a-color-image-into-sepia-image'>DYClassroom</a>
</div>
</body>
<footer id='aboutFooter'>
<script id='filterShoppeCode' type="application/javascript" src="./script.js" charset="utf-8"></script>
<p>Thanks for stopping by. Hope your time was well spent!</p>
</footer>
</div>
</html>