-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (118 loc) · 5.29 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tricolor Cyano Type</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.min.js"></script>
<meta charset="utf-8" />
<script src="./js/image_processing.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/zip.js"></script>
<script src="./js/sketch.js"></script>
<script src="./js/handle_events.js"></script>
<script src="./js/tonecurve/ToneCurve.js"></script>
<script src="./js/tonecurve/ToneCurveUI.js"></script>
<script src="./js/tonecurve.js"></script>
</head>
<body>
<main class="editor-container">
<section class="image-preview-area">
<div id="canvas-area" class="canvas-area">
<div id="canvas" class="canvas-container">
</div>
</div>
<div id="upload-area" class="upload-container">
<div class="input-field select-process">
<select onchange="handleSelect(event)">
<option value="" disabled selected>Choose your printing process</option>
<option value="cyanotype_full">Cyanotype (color)</option>
<option value="cyanotype_mono">Cyanotype (monochrome)</option>
<option value="platinum">Platinum printing</option>
<option value="salt">Salt printing</option>
</select>
<label>1. Printing process</label>
</div>
<div class="upload-file">
<label for="target">2. Image to print</label>
<input type="file" id="target" accept="image/*" value="upload"
onchange="handleFile(event.target.files[0], 'target')">
</div>
</div>
<div id="loading" class="loading-container hidden">
<div class="three-quarter-spinner"></div>
</div>
</section>
<section class="editor">
<p class="sliders-title">Tone Editor</p>
<div class="editor-tab-container">
<div class="editor-tab-header row">
<div class="editor-tab-header-item col s6 selected" onclick="onClickTabItem(0)">Tone curve</div>
<div class="editor-tab-header-item col s6" onclick="onClickTabItem(1)">Parameters</div>
</div>
<div id="tonecurve-container" class="editor-tab-item">
<div id="tonecurve-canvas" class="tonecurve">
</div>
</div>
<div id="sliders-container" class="editor-tab-item hidden">
<div class="sliders">
<label for="hue">Hue</label>
<input disabled type="range" id="hue" onchange="updateImageBySlider()" min="0" max="360" value="0" step="1">
</div>
<div class="sliders">
<label for="saturation">Saturation</label>
<input disabled type="range" id="saturation" onchange="updateImageBySlider()" min="0" max="1" value="1.0"
step="0.01">
</div>
<div class="sliders">
<label for="lightness">Lightness</label>
<input disabled type="range" id="lightness" onchange="updateImageBySlider()" min="0" max="1" value="1.0"
step="0.01">
</div>
<div class="sliders">
<label for="contrast">Contrast</label>
<input disabled type="range" id="contrast" onchange="updateImageBySlider()" min="-255" max="255" value="0"
step="1">
</div>
<div class="sliders">
<label for="kelvin">Color temperature</label>
<input disabled type="range" id="kelvin" onchange="updateImageBySlider()" min="1000" max="12200"
value="6600" step="1">
</div>
</div>
</div>
<div class="button-container">
<button disabled id="optimization" style="display: block;" class="waves-effect waves-light btn"
onclick="showOptimizedImg()">
Optimize image
</button>
<button disabled style="display: block;" class="waves-effect waves-light btn" onclick="resetParameters()">
Reset Tone
</button>
<button disabled style="display: block;" class="waves-effect waves-light btn pink lighten-2"
onclick="downloadCurrentImg()">
Download edited image
</button>
<button disabled style="display: block;" class="waves-effect waves-light btn pink lighten-2"
onclick="downloadAll()">
Download all images
</button>
<button style="display: block;" class="waves-effect waves-light btn pink lighten-2" onclick="openHowToPrint()">
How To Print
</button>
</div>
</section>
</main>
<footer class="page-footer footer">
<a class="grey-text text-grey right" href="https://digitalnature.slis.tsukuba.ac.jp/" target="_blank">
Alternative Photographic Processes Reimagined:
The Role of Digital Technology in Revitalizing Classic Printing Techniques
</a>
<a class="grey-text text-grey right" href="https://digitalnature.slis.tsukuba.ac.jp/" target="_blank">
© 2023 University of Tsukuba, Digital Nature Group
</a>
</footer>
</body>
</html>