-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcie.html
81 lines (79 loc) · 3.63 KB
/
cie.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
<html>
<head>
<meta name="copyright" content="Copyright © 2017/06/10- [email protected] . All Rights Reserved.">
<meta charset="utf-8">
<title> CIE Color Diagram & Matching Function </title>
<link rel="stylesheet" href="index.css">
<style>
#dstCanvas { background-color:black; }
</style>
</head>
<body>
<div id="container">
<div id="controlPanel" style="float:left">
<div>
Color Matching Function: <br />
<select id="cie" size="3">
<option value="ciexyz31" selected> CIEXYZ 31 (2-degree) </option>
<option value="ciexyz64" > CIEXYZ 64 (10-degree) </option>
<option value="ciexyzjv" > CIEXYZ 31 Judd & Vos </option>
</select>
</div>
<div>
Chromaticity: <br />
<select id="chromaticity" size="4">
<option value="ciexy" selected> CIE xy (CIE1931) </option>
<option value="ucsuv_judd" > UCS uv (Judd) </option>
<option value="ucsuv" > UCS uv (CIE1960) </option>
<option value="ucsuava" > UCS u'v' (CIE1976) </option>
</select>
</div>
<div>
maxWidthHeight: <br />
<input id="maxWidthHeight" type="range" min="16" max="2048" step="1" value="640">:<input type="text" id="maxWidthHeightText" size="5">
</div>
</div> <!-- controlPanel -->
<div>
<canvas id="graphCanvas" class="borderGreen" width="450" height="150"> graph </canvas>
</div>
<div style="float:left">
<div style="float:left">
<input id="tristimulus" type="checkbox" checked="checked" />:
<select id="colorspace" size="5" multiple>
<option value="ntsc-j" > NTSC-J (1987) </option>
<option value="srgb" selected> sRGB </option>
<option value="dcip3" > DCI-P3 </option>
<option value="adobe" > Adobe RGB </option>
<option value="ntsc-fcc" > NTSC-FCC (1953) </option>
<option value="bt2020" > BT.2020 </option>
<option value="prophoto" > ProPhoto (ROMM) </option>
</select>
</div>
<div style="float:left">
guide:<input id="guide" type="checkbox" checked="checked" />
</div>
<div style="float:left">
graphAlpha:<input id="graphAlpha" type="range" min="0.0" max="1.0" step="0.05" value="0.65">:<input type="text" id="graphAlphaText" size="5">
<br />
pointSize:<input id="pointSize" type="range" min="1" max="16" step="1" value="1">:<input type="text" id="pointSizeText" size="5">
<br />
pointDensity:<input id="pointDensity" type="range" min="0.05" max="1" step="0.05" value="1">:<input type="text" id="pointDensityText" size="5">
</div>
</div> <!-- controlPanel 2 -->
<div style="clear:both"> </div>
<div>
<canvas id="diagramBaseCanvas" class="borderBlue" width="512" height="512" style="display:none"> diagram base </canvas>
<canvas id="dstCanvas" class="borderBlue" width="512" height="512"> diagram </canvas>
<canvas id="srcCanvas" class="borderRed" width="320" height="240"> srcImage </canvas>
</div>
</div> <!-- container -->
<script type="text/javascript" src="lib/drop.js"> </script>
<script type="text/javascript" src="lib/bind.js"> </script>
<script type="text/javascript" src="lib/color.js"> </script>
<script type="text/javascript" src="lib/canvas.js"> </script>
<script type="text/javascript" src="lib/utils.js"> </script>
<script type="text/javascript" src="lib/cie.js"> </script>
<script type="text/javascript" src="lib/loading.js"> </script>
<script type="text/javascript" src="lib/worker.js"> </script>
<script type="text/javascript" src="cie.js"> </script>
</body>