-
Notifications
You must be signed in to change notification settings - Fork 2
/
hdr-headroom-query.html
112 lines (94 loc) · 3.55 KB
/
hdr-headroom-query.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
<html>
<head>
<script>
function imageDataFill(image_data, value) {
for (var i = 0; i < image_data.width * image_data.height; ++i) {
image_data.data[4*i+0] = value;
image_data.data[4*i+1] = value;
image_data.data[4*i+2] = value;
image_data.data[4*i+3] = 1.0;
}
}
function drawManualCanvas(redLine) {
var element = document.getElementById("Canvas2D_Manual");
var context = element.getContext('2d', {colorSpace:'srgb', pixelFormat:'float16'});
var element = document.getElementById("Canvas2D_Manual");
if (!(`configureHighDynamicRange` in element)) {
let warningsText = '';
warningsText += 'Experimental features missing: Enable "Experimental Web Platform Features" in chrome://flags<br>';
warningsText += 'Experimental HDR Canvas API not found (configureHighDyanmicRange)!<br>'
let warnings = document.getElementById('Warnings');
warnings.hidden = false;
warnings.style = 'color:#BC0000;';
warnings.innerHTML = '<strong>' + warningsText + '</strong>';
}
context.clearRect(0, 0, element.width, element.height);
var image_data = new ImageData(32, 32, {colorSpace:'srgb-linear', storageFormat:'float32'});
context.font = "10px Arial";
for (var i = 0; i <= 1024/32; ++i) {
var value = i / 2;
imageDataFill(image_data, value);
context.putImageData(image_data, i*image_data.width, 0);
context.fillStyle = 'black';
context.fillText(value.toFixed(2), i*image_data.width, 44);
}
if (redLine) {
var x = redLine * 64;
context.beginPath();
context.moveTo(x, 0);
context.lineTo(x, 50);
context.lineWidth = 4;
context.strokeStyle = 'red';
context.stroke();
context.fillStyle = 'red';
context.fillText(redLine.toFixed(2), x, 64);
}
}
let onChange = function() {
var element = document.getElementById("Canvas2D_Manual");
if (`configureHighDynamicRange` in element) {
if (RadioGamutHdr.checked) {
element.configureHighDynamicRange({ mode:'extended' });
} else {
element.configureHighDynamicRange({});
}
}
}
window.onload = function() {
drawManualCanvas(null);
async function screenDetails() {
const screens = await window.getScreenDetails();
const s = screens.currentScreen;
function updateCurrentScreenInfo(s) {
drawManualCanvas(s.highDynamicRangeHeadroom);
document.getElementById('Details').innerText =
'HDR headroom: ' + s.highDynamicRangeHeadroom.toFixed(4) + ', ' +
'Gamut: {' +
'r:[' + s.redPrimaryX.toFixed(4) + '], [' + s.redPrimaryY.toFixed(4) + '], ' +
'g:[' + s.greenPrimaryX.toFixed(4) + '], [' + s.greenPrimaryY.toFixed(4) + '], ' +
'b:[' + s.bluePrimaryX.toFixed(4) + '], [' + s.bluePrimaryY.toFixed(4) + ']}';
}
updateCurrentScreenInfo(s);
screens.addEventListener('currentscreenchange', (event) => {
updateCurrentScreenInfo(s);
});
}
DetailsButton.addEventListener('click', screenDetails);
};
</script>
</head>
<body>
<h1>Manual tone map example</h1>
<p id='Warnings' hidden=true></p>
<p>This canvas has a float16 backing, and its color space is extended-sRGB.</p>
<p>This canvas is populated by ImageData with increasing linear light values.</p>
<p>Press the button below to draw a red line at the screen's maximum brightness.</p>
</p>
<button type="button" id="DetailsButton">Query Screen Details</button>
<p id="Details">HDR headroom: ?, Gamut: {?}</p>
<input type="checkbox" onchange='onChange();' id="RadioGamutHdr">
<label for="RadioGamutHdr">Canvas is HDR</label>
<p>
<canvas id="Canvas2D_Manual" width="1056" height="256"></canvas>
</p>
</body>