-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
640 lines (545 loc) · 20.5 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebGL Volume Viewer</title>
<script type="text/javascript" src="sharevol.js"></script>
<script id="volume-vs" type="x-shader/x-vertex">
precision highp float;
//Volume vertex shader
precision highp float;
attribute vec3 aVertexPosition;
void main(void)
{
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="volume-fs" type="x-shader/x-fragment">
precision highp float;
//Volume fragment shader
/*
* Copyright (c) 2014, Monash University. All rights reserved.
* Author: Owen Kaluza - owen.kaluza ( at ) monash.edu
*
* Licensed under the GNU Lesser General Public License
* https://www.gnu.org/licenses/lgpl.html
*/
precision highp float;
//Defined dynamically before compile...
//const vec2 slices = vec2(16.0,16.0);
//const int maxSamples = 256;
uniform sampler2D uVolume;
uniform sampler2D uTransferFunction;
uniform vec3 uBBMin;
uniform vec3 uBBMax;
uniform vec3 uResolution;
uniform bool uEnableColour;
uniform float uBrightness;
uniform float uContrast;
uniform float uSaturation;
uniform float uPower;
uniform mat4 uPMatrix;
uniform mat4 uInvPMatrix;
uniform mat4 uMVMatrix;
uniform mat4 uNMatrix;
uniform vec4 uViewport;
uniform int uSamples;
uniform float uDensityFactor;
uniform float uIsoValue;
uniform vec4 uIsoColour;
uniform float uIsoSmooth;
uniform int uIsoWalls;
uniform int uFilter;
uniform vec2 uRange;
uniform vec2 uDenMinMax;
//#define tex3D(pos) interpolate_tricubic_fast(pos)
//#define tex3D(pos) texture3Dfrom2D(pos).x
vec2 islices = vec2(1.0 / slices.x, 1.0 / slices.y);
vec4 texture3Dfrom2D(vec3 pos)
{
//Get z slice index and position between two slices
float Z = pos.z * slices.x * slices.y;
int slice = int(Z); //Index of first slice
//X & Y coords of sample scaled to slice size
vec2 sampleOffset = pos.xy * islices;
//Offsets in 2D texture of given slice indices
//(add offsets to scaled position within slice to get sample positions)
float A = float(slice) * islices.x;
float B = float(slice+1) * islices.x;
vec2 z1offset = vec2(fract(A), floor(A) / slices.y) + sampleOffset;
vec2 z2offset = vec2(fract(B), floor(B) / slices.y) + sampleOffset;
//Interpolate the final value by position between slices [0,1]
return mix(texture2D(uVolume, z1offset), texture2D(uVolume, z2offset), fract(Z));
}
float interpolate_tricubic_fast(vec3 coord);
float tex3D(vec3 pos)
{
if (uFilter > 0)
return interpolate_tricubic_fast(pos);
return texture3Dfrom2D(pos).x;
}
// It seems WebGL has no transpose
mat4 transpose(in mat4 m)
{
return mat4(
vec4(m[0].x, m[1].x, m[2].x, m[3].x),
vec4(m[0].y, m[1].y, m[2].y, m[3].y),
vec4(m[0].z, m[1].z, m[2].z, m[3].z),
vec4(m[0].w, m[1].w, m[2].w, m[3].w)
);
}
//Light moves with camera
const vec3 lightPos = vec3(0.5, 0.5, 5.0);
const float ambient = 0.2;
const float diffuse = 0.8;
const vec3 diffColour = vec3(1.0, 1.0, 1.0); //Colour of diffuse light
const vec3 ambColour = vec3(0.2, 0.2, 0.2); //Colour of ambient light
void lighting(in vec3 pos, in vec3 normal, inout vec3 colour)
{
vec4 vertPos = uMVMatrix * vec4(pos, 1.0);
vec3 lightDir = normalize(lightPos - vertPos.xyz);
vec3 lightWeighting = ambColour + diffColour * diffuse * clamp(abs(dot(normal, lightDir)), 0.1, 1.0);
colour *= lightWeighting;
}
vec3 isoNormal(in vec3 pos, in vec3 shift, in float density)
{
vec3 shiftpos = vec3(pos.x + shift.x, pos.y + shift.y, pos.z + shift.z);
vec3 shiftx = vec3(shiftpos.x, pos.y, pos.z);
vec3 shifty = vec3(pos.x, shiftpos.y, pos.z);
vec3 shiftz = vec3(pos.x, pos.y, shiftpos.z);
//Detect bounding box hit (walls)
if (uIsoWalls > 0)
{
if (pos.x <= uBBMin.x) return vec3(-1.0, 0.0, 0.0);
if (pos.x >= uBBMax.x) return vec3(1.0, 0.0, 0.0);
if (pos.y <= uBBMin.y) return vec3(0.0, -1.0, 0.0);
if (pos.y >= uBBMax.y) return vec3(0.0, 1.0, 0.0);
if (pos.z <= uBBMin.z) return vec3(0.0, 0.0, -1.0);
if (pos.z >= uBBMax.z) return vec3(0.0, 0.0, 1.0);
}
//Calculate normal
return vec3(density) - vec3(tex3D(shiftx), tex3D(shifty), tex3D(shiftz));
}
vec2 rayIntersectBox(vec3 rayDirection, vec3 rayOrigin)
{
//Intersect ray with bounding box
vec3 rayInvDirection = 1.0 / rayDirection;
vec3 bbMinDiff = (uBBMin - rayOrigin) * rayInvDirection;
vec3 bbMaxDiff = (uBBMax - rayOrigin) * rayInvDirection;
vec3 imax = max(bbMaxDiff, bbMinDiff);
vec3 imin = min(bbMaxDiff, bbMinDiff);
float back = min(imax.x, min(imax.y, imax.z));
float front = max(max(imin.x, 0.0), max(imin.y, imin.z));
return vec2(back, front);
}
void main()
{
//Compute eye space coord from window space to get the ray direction
mat4 invMVMatrix = transpose(uMVMatrix);
//ObjectSpace *[MV] = EyeSpace *[P] = Clip /w = Normalised device coords ->VP-> Window
//Window ->[VP^]-> NDC ->[/w]-> Clip ->[P^]-> EyeSpace ->[MV^]-> ObjectSpace
vec4 ndcPos;
ndcPos.xy = ((2.0 * gl_FragCoord.xy) - (2.0 * uViewport.xy)) / (uViewport.zw) - 1.0;
ndcPos.z = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) /
(gl_DepthRange.far - gl_DepthRange.near);
ndcPos.w = 1.0;
vec4 clipPos = ndcPos / gl_FragCoord.w;
//vec4 eyeSpacePos = uInvPMatrix * clipPos;
vec3 rayDirection = normalize((invMVMatrix * uInvPMatrix * clipPos).xyz);
//Ray origin from the camera position
vec4 camPos = -vec4(uMVMatrix[3]); //4th column of modelview
vec3 rayOrigin = (invMVMatrix * camPos).xyz;
//Calc step
float stepSize = 1.732 / float(uSamples); //diagonal of [0,1] normalised coord cube = sqrt(3)
//Intersect ray with bounding box
vec2 intersection = rayIntersectBox(rayDirection, rayOrigin);
//Subtract small increment to avoid errors on front boundary
intersection.y -= 0.000001;
//Discard points outside the box (no intersection)
if (intersection.x <= intersection.y) discard;
vec3 rayStart = rayOrigin + rayDirection * intersection.y;
vec3 rayStop = rayOrigin + rayDirection * intersection.x;
vec3 step = normalize(rayStop-rayStart) * stepSize;
vec3 pos = rayStart;
float T = 1.0;
vec3 colour = vec3(0.0);
bool inside = false;
vec3 shift = uIsoSmooth / uResolution;
//Number of samples to take along this ray before we pass out back of volume...
float travel = distance(rayStop, rayStart) / stepSize;
int samples = int(ceil(travel));
float range = uRange.y - uRange.x;
if (range <= 0.0) range = 1.0;
//Scale isoValue
float isoValue = uRange.x + uIsoValue * range;
//Raymarch, front to back
for (int i=0; i < maxSamples; ++i)
{
//Render samples until we pass out back of cube or fully opaque
#ifndef IE11
if (i == samples || T < 0.01) break;
#else
//This is slower but allows IE 11 to render, break on non-uniform condition causes it to fail
if (i == uSamples) break;
if (all(greaterThanEqual(pos, uBBMin)) && all(lessThanEqual(pos, uBBMax)))
#endif
{
//Get density
float density = tex3D(pos);
#define ISOSURFACE
#ifdef ISOSURFACE
//Passed through isosurface?
if (isoValue > uRange.x && ((!inside && density >= isoValue) || (inside && density < isoValue)))
{
inside = !inside;
//Find closer to exact position by iteration
//http://sizecoding.blogspot.com.au/2008/08/isosurfaces-in-glsl.html
float exact;
float a = intersection.y + (float(i)*stepSize);
float b = a - stepSize;
for (int j = 0; j < 5; j++)
{
exact = (b + a) * 0.5;
pos = rayDirection * exact + rayOrigin;
density = tex3D(pos);
if (density - isoValue < 0.0)
b = exact;
else
a = exact;
}
//Skip edges unless flagged to draw
if (uIsoWalls > 0 || all(greaterThanEqual(pos, uBBMin)) && all(lessThanEqual(pos, uBBMax)))
{
vec4 value = vec4(uIsoColour.rgb, 1.0);
//normal = normalize(normal);
//if (length(normal) < 1.0) normal = vec3(0.0, 1.0, 0.0);
vec3 normal = normalize(mat3(uNMatrix) * isoNormal(pos, shift, density));
vec3 light = value.rgb;
lighting(pos, normal, light);
//Front-to-back blend equation
colour += T * uIsoColour.a * light;
T *= (1.0 - uIsoColour.a);
}
}
#endif
if (uDensityFactor > 0.0)
{
//Normalise the density over provided range
density = (density - uRange.x) / range;
density = clamp(density, 0.0, 1.0);
if (density < uDenMinMax[0] || density > uDenMinMax[1])
{
//Skip to next sample...
pos += step;
continue;
}
density = pow(density, uPower); //Apply power
vec4 value;
if (uEnableColour)
value = texture2D(uTransferFunction, vec2(density, 0.5));
else
value = vec4(density);
value *= uDensityFactor * stepSize;
//Color
colour += T * value.rgb;
//Alpha
T *= 1.0 - value.a;
}
}
//Next sample...
pos += step;
}
//Apply brightness, saturation & contrast
colour += uBrightness;
const vec3 LumCoeff = vec3(0.2125, 0.7154, 0.0721);
vec3 AvgLumin = vec3(0.5, 0.5, 0.5);
vec3 intensity = vec3(dot(colour, LumCoeff));
colour = mix(intensity, colour, uSaturation);
colour = mix(AvgLumin, colour, uContrast);
if (T > 0.95) discard;
gl_FragColor = vec4(colour, 1.0 - T);
#ifdef WRITE_DEPTH
/* Write the depth !Not supported in WebGL without extension */
vec4 clip_space_pos = uPMatrix * uMVMatrix * vec4(rayStart, 1.0);
float ndc_depth = clip_space_pos.z / clip_space_pos.w;
float depth = (((gl_DepthRange.far - gl_DepthRange.near) * ndc_depth) +
gl_DepthRange.near + gl_DepthRange.far) / 2.0;
gl_FragDepth = depth;
#endif
}
float interpolate_tricubic_fast(vec3 coord)
{
/* License applicable to this function:
Copyright (c) 2008-2013, Danny Ruijters. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the copyright holders nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
The views and conclusions contained in the software and documentation are
those of the authors and should not be interpreted as representing official
policies, either expressed or implied.
When using this code in a scientific project, please cite one or all of the
following papers:
* Daniel Ruijters and Philippe Thévenaz,
GPU Prefilter for Accurate Cubic B-Spline Interpolation,
The Computer Journal, vol. 55, no. 1, pp. 15-20, January 2012.
* Daniel Ruijters, Bart M. ter Haar Romeny, and Paul Suetens,
Efficient GPU-Based Texture Interpolation using Uniform B-Splines,
Journal of Graphics Tools, vol. 13, no. 4, pp. 61-69, 2008.
*/
// shift the coordinate from [0,1] to [-0.5, nrOfVoxels-0.5]
vec3 nrOfVoxels = uResolution; //textureSize3D(tex, 0));
vec3 coord_grid = coord * nrOfVoxels - 0.5;
vec3 index = floor(coord_grid);
vec3 fraction = coord_grid - index;
vec3 one_frac = 1.0 - fraction;
vec3 w0 = 1.0/6.0 * one_frac*one_frac*one_frac;
vec3 w1 = 2.0/3.0 - 0.5 * fraction*fraction*(2.0-fraction);
vec3 w2 = 2.0/3.0 - 0.5 * one_frac*one_frac*(2.0-one_frac);
vec3 w3 = 1.0/6.0 * fraction*fraction*fraction;
vec3 g0 = w0 + w1;
vec3 g1 = w2 + w3;
vec3 mult = 1.0 / nrOfVoxels;
vec3 h0 = mult * ((w1 / g0) - 0.5 + index); //h0 = w1/g0 - 1, move from [-0.5, nrOfVoxels-0.5] to [0,1]
vec3 h1 = mult * ((w3 / g1) + 1.5 + index); //h1 = w3/g1 + 1, move from [-0.5, nrOfVoxels-0.5] to [0,1]
// fetch the eight linear interpolations
// weighting and fetching is interleaved for performance and stability reasons
float tex000 = texture3Dfrom2D(h0).r;
float tex100 = texture3Dfrom2D(vec3(h1.x, h0.y, h0.z)).r;
tex000 = mix(tex100, tex000, g0.x); //weigh along the x-direction
float tex010 = texture3Dfrom2D(vec3(h0.x, h1.y, h0.z)).r;
float tex110 = texture3Dfrom2D(vec3(h1.x, h1.y, h0.z)).r;
tex010 = mix(tex110, tex010, g0.x); //weigh along the x-direction
tex000 = mix(tex010, tex000, g0.y); //weigh along the y-direction
float tex001 = texture3Dfrom2D(vec3(h0.x, h0.y, h1.z)).r;
float tex101 = texture3Dfrom2D(vec3(h1.x, h0.y, h1.z)).r;
tex001 = mix(tex101, tex001, g0.x); //weigh along the x-direction
float tex011 = texture3Dfrom2D(vec3(h0.x, h1.y, h1.z)).r;
float tex111 = texture3Dfrom2D(h1).r;
tex011 = mix(tex111, tex011, g0.x); //weigh along the x-direction
tex001 = mix(tex011, tex001, g0.y); //weigh along the y-direction
return mix(tex001, tex000, g0.z); //weigh along the z-direction
}
</script>
<script id="texture-vs" type="x-shader/x-vertex">
precision highp float;
//Texture vertex shader
//A simple vertex shader for 2d image processing
//Pass the vertex coords to fragment shader in vCoord
precision highp float;
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
varying vec2 vCoord;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
//Apply translation, rotation & scaling matrix to vertices to get coords
vec4 coords = uMVMatrix * vec4(aVertexPosition.xy, 0.0, 1.0);
vCoord = coords.xy;
}
</script>
<script id="texture-fs" type="x-shader/x-fragment">
precision highp float;
//Texture fragment shader
//Texture fragment shader
precision mediump float;
#define rgba vec4
//Palette lookup mu = [0,1]
#define gradient(mu) texture2D(palette, vec2(mu, 0.0))
//Uniform data
uniform sampler2D palette;
uniform sampler2D texture;
uniform int colourmap;
uniform float bright;
uniform float cont;
uniform float power;
uniform int axis;
uniform vec3 slice;
uniform ivec3 res;
uniform vec2 dim;
uniform ivec2 select;
//Current coordinate
varying vec2 vCoord;
void main()
{
bool invert = false;
vec2 coord;
float z;
if (int(gl_FragCoord.x) == select.x) invert = true;
if (int(gl_FragCoord.y) == select.y) invert = true;
if (axis==0)
{
//x-axis slice
//slice offset coords from vCoord.x, inside coords from (slice,vCoord.y)
z = vCoord.x * float(res.z);
coord = vec2(clamp(slice.x, 0.0, 0.999), vCoord.y);
}
else if (axis==1)
{
//y-axis slice
//slice offset coords from vCoord.y, inside coords from (vCoord.x,slice)
z = vCoord.y * float(res.z);
coord = vec2(vCoord.x, clamp(slice.y, 0.0, 0.999));
}
else if (axis==2)
{
//z-axis slice
//slice offset coords from slice.z, inside coords unchanged (vCoord.xy)
z = slice.z * float(res.z);
coord = vCoord;
}
//Get offsets to selected slice
float xy = z/dim.x;
int row = int(xy);
//mod() function doesn't work properly on safari, use fract() instead
//int col = int(fract(xy) * dim.x);
int col = int(fract(xy) * dim.x);
coord += vec2(float(col), float(row));
//Rescale to texture coords [0,1]
coord /= dim;
//Get texture value at coord and calculate final colour
vec4 tex = texture2D(texture, coord);
float lum = tex.r; //0.3 * tex.r + 0.59 * tex.g + 0.11 * tex.b;
lum = pow(lum, power);
vec4 pixelColor;
if (colourmap == 1)
{
pixelColor = gradient(lum);
}
else
{
pixelColor = vec4(lum, lum, lum, 1.0);
}
pixelColor.rgb = ((pixelColor.rgb - 0.5) * max(cont, 0.0)) + 0.5;
pixelColor.rgb += bright;
if (invert)
{
pixelColor.rgb = vec3(1.0) - pixelColor.rgb;
pixelColor.a = 1.0;
}
gl_FragColor = pixelColor;
}
</script>
<script id="line-vs" type="x-shader/x-vertex">
precision highp float;
//Line vertex shader
precision highp float;
attribute vec3 aVertexPosition;
attribute vec4 aVertexColour;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform vec4 uColour;
uniform float uAlpha;
varying vec4 vColour;
void main(void)
{
vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * mvPosition;
vec4 colour = aVertexColour;
float alpha = 1.0;
if (uColour.a > 0.01) colour = uColour;
if (uAlpha > 0.01) alpha = uAlpha;
vColour = vec4(colour.rgb, colour.a * alpha);
}
</script>
<script id="line-fs" type="x-shader/x-fragment">
precision highp float;
//Line fragment shader
precision highp float;
varying vec4 vColour;
void main(void)
{
gl_FragColor = vColour;
}
</script>
<style>
html {
font-family: "Lucida Grande",sans-serif;
font-size: 11pt;
background: #ffe;
}
html, body {
padding: 0; margin: 0;
border: none;
width: 100%;
height: 100%;
}
.palette {
z-index: 0; margin: 0; padding:0;
border:1px solid #000;
}
.checkerboard {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4jWP4TwAcOHAAL2YYNWBYGEBIASEwasCwMAAALvidroqDalkAAAAASUVORK5CYII=");}
/* Background colour */
#backgroundBG { float: left; margin: 0px 2px 0px 0px; width: 24px; height: 24px;}
#backgroundCUR { float: left; width: 24px; height: 24px;}
/* Colour select */
.colourbg { margin:1px; width: 100px; height: 20px; border: solid 1px;}
.toolbox {
visibility: hidden; z-index: 20;
background: #bba;
color: #000;
padding: 7px 10px 11px 10px;
position: absolute;
border: 1px solid #444;
min-width: 300px;
max-height: 400px;
}
.scroll {
overflow-y: auto;
max-height: 330px;
}
.toolclose {float: right; color: #333; margin: 0px; font-weight: bold;
border: none; padding: 0px 4px; font-size: 14pt; line-height: 16px;}
.toolbox h3 {
font-size: 10pt;
font-weight: bold;
margin: 2px 0px; padding: 0;
display: inline;
}
</style>
</head>
<body onload="initPage();" oncontextmenu="return false;">
<div id="hidden" style="display: none">
<canvas id="gradient" width="2048" height="1"></canvas>
</div>
<div class="toolbox" id="info"><div>
<h3 id="status">Loading...</h3>
</div></div>
<div class="toolbox" id="colourmap"><div>
<div class="toolclose" onclick="window.colourmaps.hide();">×</div>
<h3>Colourmaps:</h3>
<hr>
<select id="colourmaps" onchange="colours.read(this.value); updateColourmap();">
<option value="" selected>None</option>
<option value="#000000;#ffffff">Black-White</option>
<option value="#ffffff;#000000">White-Black</option>
<option value="0.0=rgba(59,76,192,1.0);0.117647=rgba(95,127,232,1.0);0.235294=rgba(135,171,253,1.0);0.352941=rgba(176,203,252,1.0);0.5=rgba(220,220,220,1.0);0.529412=rgba(228,217,211,1.0);0.647059=rgba(246,191,165,1.0);0.764706=rgba(243,149,118,1.0);0.882353=rgba(221,94,75,1.0);1.0=rgba(181,11,39,1.0)">Cool-Warm</option>
<option value="0.0=rgba(0,0,0,1.0);0.5=rgba(255,0,0,1.0);0.75=rgba(255,127,0,1.0);1.000000=rgba(255,255,255,1.0)">Hot iron</option>
<option value="rgba(0,0,0,1.0);rgba(85,0,170,1.0);rgba(5,0,90,1.0);rgba(0,0,159,1.0);rgba(0,0,239,1.0);rgba(0,63,255,1.0);rgba(0,143,196,1.0);rgba(0,223,170,1.0);rgba(0,255,74,1.0);rgba(42,255,42,1.0);rgba(159,255,47,1.0);rgba(255,223,0,1.0);rgba(255,143,0,1.0);rgba(255,71,0,1.0);rgba(255,22,0,1.0);rgba(237,0,0,1.0);rgba(203,0,0,1.0);rgba(0,0,0,1.0)">NIH</option>
<option value="#ff00ff;#0000ff;#00ffff;#00ff00;#ffff00;#ff0000">Spectrum</option>
</select>
<br>
<canvas id="palette" width="512" height="24" class="palette checkerboard"></canvas>
<div id="backgroundBG" class="colourbg checkerboard">
<div id="backgroundCUR" class="colour" onmousedown="colours.editBackground($('backgroundCUR'));"></div>
</div>
</div></div>
</body>
</html>