This repository has been archived by the owner on Dec 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (92 loc) · 3.95 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
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" />
<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: Copyright 2024 Sam Blenny -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TFT Gamma Cal</title>
<style>
:root{--F: #ffdcec; --B: #3d3d3d; --H: #25c3c0; --L: #459cda; --O: #444; }
html{ background: var(--B); -webkit-text-size-adjust: none; }
body{ background: var(--B); color: var(--F); min-height: 100vh;
width: 100%; font-family: sans-serif; font-size: 17px; }
html,body,h1,h2,main,input{ margin: 0; padding: 0; box-sizing: border-box; }
canvas{ margin: 0; padding: 0; box-sizing: content-box; }
p,li,label{ line-height: 1.23em; }
label{ display: inline-block; min-height: 20px; }
h1{ margin: 50px 0 40px 0px; font-size: 24px; color: var(--H); }
p{ margin: 11px 0; }
.dim{ color: var(--H); }
table{ border-collapse: collapse; }
td{ padding: 5px; border: 1px solid var(--H);}
main{ margin: 0 auto; padding: 2px 25px 115px 25px;
max-width: 630px; }
canvas{ display: inline-block; width: 134px; height: 240px;
background: var(--O); image-rendering: pixelated; }
input[type=range]{ width: 350px; }
#sliders{ display: inline-block; line-height: 34px; padding: 3px 12px 0; }
#status, label{ font-family: monospace; font-size: 11pt;}
select{ background: var(--B); color: var(--F); }
</style>
</head>
<body>
<main>
<h1>TFT Gamma Cal</h1>
<div style="float: left">
<canvas id="canvas">
</div>
<div id="sliders">
<label for="gray1_2">1/2 </label>
<input type="range" id="gray1_2" name="gray1_2" min="1" max="254" value="171" step="1" />
<br>
<label for="gray1_4">1/4 </label>
<input type="range" id="gray1_4" name="gray1_4" min="1" max="254" value="127" step="1" />
<br>
<label for="gray1_8">1/8 </label>
<input type="range" id="gray1_8" name="gray1_8" min="1" max="254" value="97" step="1" />
<br>
<label for="gray1_16">1/16 </label>
<input type="range" id="gray1_16" name="gray1_16" min="1" max="254" value="74" step="1" />
<br>
<label for="gray1_32">1/32 </label>
<input type="range" id="gray1_32" name="gray1_32" min="1" max="254" value="56" step="1" />
<br>
<label for="gray1_64">1/64 </label>
<input type="range" id="gray1_64" name="gray1_64" min="1" max="254" value="41" step="1" />
<br>
<label for="gray1_128">1/128</label>
<input type="range" id="gray1_128" name="gray1_128" min="1" max="254" value="30" step="1" />
<br>
</div>
<p style="clear: both; margin-top: 20px;">
<span id="status"></status>
</p>
<!-- mid-2010's CIE1976 82% (sRGB-ish) display: 171 127 97 74 56 41 30 -->
<!-- average of mid-2010's tablet/laptop displays: 184 131 94 68 50 36 28 -->
<!-- average of 2020's P3 wide gamut displays: 185 135 97 71 51 36 27 -->
<div>
<label for="curve">preset:</label>
<select name="curve" id="curve">
<option value="sRGB-ish">sRGB-ish CIE1976 82% monitor</option>
<option value="2010s-LED">2010's LED backlit laptop/tablet</option>
<option value="2020s-P3">2020's P3 wide gamut</option>
<option value="custom">-- custom --</option>
</select>
</div>
<p class="dim" style="padding-top: 100px;">
The default curve above was calibrated on an LED backlit Dell monitor that I
attempted to configure for displaying colors as sRGB. The monitor specs say it
has a CIE1976 82% gamut, which, as best I can tell, is approximately the full
sRGB gamut. The table below shows how I configured macOS and the monitor in my
attempt to turn off features that would skew color reproduction away from sRGB.
</p>
<table class="dim">
<tr><td>macOS</td><td>Displays > Color profile</td><td>sRGB IEC61966-2.1</td></tr>
<tr><td>monitor</td><td>Brightness</td><td>20%</td></tr>
<tr><td></td><td>Contrast</td><td>100%</td></tr>
<tr><td></td><td>Display Settings > Sharpness</td><td>50%</td></tr>
<tr><td></td><td>Color Settings > Image Enhance</td><td>Off</td></tr>
<tr><td></td><td>Color Settings > Preset Modes</td><td>Standard</td></tr>
</table>
<script src="main.js"></script>
</main>
</body>
</html>