-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathoverview.html
65 lines (55 loc) · 1.85 KB
/
overview.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-colormaps: Overview</title>
<style>
.left { text-align: left; }
.right { text-align: right; }
body { font-family: monospace; font-size: 16px; }
canvas { width: 256px; height: 32px; border: 1px solid black; }
table { margin: auto; }
td { padding: 5px; vertical-align: middle; }
</style>
<script src="js-colormaps.js"></script>
</head>
<body>
<!-- Instantiate overview table -->
<table id="colormaps"></table>
<!-- Define function to plot a colormap -->
<script>
function plot_colormap(canvas_id, name, reverse) {
let canvas = document.getElementById(canvas_id);
let ctx = canvas.getContext("2d");
for (let x = 0; x <= 256; x++) {
let color = evaluate_cmap(x / 256, name, reverse);
let r = color[0];
let g = color[1];
let b = color[2];
ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
ctx.fillRect(x * canvas.width / 256, 0, canvas.width / 256, canvas.height);
}
}
</script>
<!-- Plot colormaps -->
<script>
// First, add rows and canvases for all colormaps
for (const key in data) {
document.getElementById('colormaps').innerHTML += `
<tr>
<td class="right">${key}</td>
<td><canvas id="${key}" width="1024" height="50"></canvas></td>
<td>⟺</td>
<td><canvas id="${key}_r" width="1024" height="50"></canvas></td>
<td class="left">${key}_r</td
</tr>
`;
}
// Once this has finished (i.e., the canvases exist), plot the colormaps
for (const key in data) {
plot_colormap(key, key, false);
plot_colormap(key + '_r', key, true);
}
</script>
</body>
</html>