226 lines
9.1 KiB
HTML
226 lines
9.1 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>@title@</title>
|
||
|
|
|
||
|
|
<!-- HDRHTML BEG: Put this part in the "head" section -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
/*
|
||
|
|
-----------------------------------------------
|
||
|
|
HDR HTML Viewer ver. @version@
|
||
|
|
Author: Rafal Mantiuk
|
||
|
|
URL: http://www.cs.ubc.ca/~mantiuk/hdrhtml.html
|
||
|
|
----------------------------------------------- */
|
||
|
|
|
||
|
|
function set_opacity( obj, opacity ) {
|
||
|
|
// for IE8
|
||
|
|
obj.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=" + opacity*100 + ")";
|
||
|
|
// for IE5-7
|
||
|
|
obj.style.filter = "alpha(opacity=" + opacity*100 + ")";
|
||
|
|
// for all other browsers
|
||
|
|
obj.style.opacity = opacity;
|
||
|
|
}
|
||
|
|
|
||
|
|
function update_exp_text( hdr_image, new_exp ) {
|
||
|
|
document.getElementById(hdr_image.base_name + "_exp_text").innerHTML = "EV: " + Math.round( (hdr_image.best_exp-new_exp)*10 )/10 + " f";
|
||
|
|
}
|
||
|
|
|
||
|
|
function change_exp( hdr_image, exp_change ) {
|
||
|
|
|
||
|
|
hdr_active_image = hdr_image;
|
||
|
|
hdr_image.exposure = hdr_image.exposure + exp_change;
|
||
|
|
|
||
|
|
if( hdr_image.exposure > hdr_image.f8_stops*8 ) {
|
||
|
|
hdr_image.exposure = hdr_image.f8_stops*8;
|
||
|
|
}
|
||
|
|
else if( hdr_image.exposure < 0 ) {
|
||
|
|
hdr_image.exposure = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
exp_cur = Math.floor(hdr_image.exposure / 8);
|
||
|
|
exp_shar = exp_cur + 1;
|
||
|
|
|
||
|
|
exp_blend = Math.round((hdr_image.exposure - exp_cur*8)*hdr_image.f_step_res);
|
||
|
|
|
||
|
|
var i;
|
||
|
|
for( i = 0; i < hdr_image.basis; i++ ) {
|
||
|
|
var img_obj = document.getElementById(hdr_image.base_name+"_"+i);
|
||
|
|
img_obj.src = hdr_image.image_dir + hdr_image.base_name + "_"+exp_cur+"_" + (i+1) + ".jpg";
|
||
|
|
set_opacity( img_obj, cf[exp_blend][i] );
|
||
|
|
}
|
||
|
|
|
||
|
|
for( i = 0; i < hdr_image.shared_basis; i++ ) {
|
||
|
|
var img_obj = document.getElementById(hdr_image.base_name+"_"+(i+hdr_image.basis));
|
||
|
|
img_obj.src = hdr_image.image_dir + hdr_image.base_name + "_"+exp_shar+"_" + (i+1) + ".jpg";
|
||
|
|
set_opacity( img_obj, cf[exp_blend][i+hdr_image.basis] );
|
||
|
|
}
|
||
|
|
|
||
|
|
var hist_left = (hdr_image.exposure-hdr_image.hist_start)*hdr_image.pix_per_fstop;
|
||
|
|
|
||
|
|
drw_obj = document.getElementById(hdr_image.base_name+"_dr_wind");
|
||
|
|
drw_obj.style.left = Math.round(hist_left) + "px";
|
||
|
|
drw_obj.style.width = hdr_image.pix_per_fstop*8 + "px";
|
||
|
|
set_opacity( drw_obj, 0.7 );
|
||
|
|
|
||
|
|
update_exp_text( hdr_image, hdr_image.exposure );
|
||
|
|
}
|
||
|
|
|
||
|
|
function insert_hdr_image( hdr_image ) {
|
||
|
|
|
||
|
|
for( i = 0; i < hdr_image.basis + hdr_image.shared_basis; i++ ) {
|
||
|
|
document.write("<img id=\"" + hdr_image.base_name + "_" + i +
|
||
|
|
"\" style=\"margin: 0px; padding: 0px; opacity: 1; width: " +
|
||
|
|
hdr_image.width + "px; height: " + hdr_image.height +
|
||
|
|
"px; position: absolute; top: 0px; left: 0px\"" +
|
||
|
|
" />\n");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getAbsX (obj) {
|
||
|
|
var abs_x=0;
|
||
|
|
while(obj) {
|
||
|
|
abs_x+= obj.offsetLeft;
|
||
|
|
obj= obj.offsetParent;
|
||
|
|
}
|
||
|
|
return abs_x;
|
||
|
|
}
|
||
|
|
|
||
|
|
function dr_wind_clicked( event, hdr_image ) {
|
||
|
|
|
||
|
|
var drw_obj = document.getElementById(hdr_image.base_name+"_dr_wind");
|
||
|
|
var drw_left = drw_obj.offsetLeft;
|
||
|
|
var drw_right = drw_obj.offsetLeft + drw_obj.offsetWidth;
|
||
|
|
|
||
|
|
var hist_obj = document.getElementById(hdr_image.base_name + "_hist");
|
||
|
|
var rel_x = event.clientX - getAbsX(hist_obj) - 5;
|
||
|
|
|
||
|
|
var small_step_marg = 20;
|
||
|
|
|
||
|
|
if( rel_x < drw_left ) {
|
||
|
|
change_exp( hdr_image, (drw_left-rel_x) < small_step_marg ? -1/3 : -1 );
|
||
|
|
} else if( rel_x > drw_right ) {
|
||
|
|
change_exp( hdr_image, (rel_x-drw_right) < small_step_marg ? 1/3 : 1 );
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function dr_wind_mousedown( event, hdr_image ) {
|
||
|
|
|
||
|
|
if(event.preventDefault) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
var ctrl_obj = document.getElementById(hdr_image.base_name + "_dr_ctrl");
|
||
|
|
var drw_obj = document.getElementById(hdr_image.base_name+"_dr_wind");
|
||
|
|
set_opacity( drw_obj, 0.5 );
|
||
|
|
|
||
|
|
hdr_mousedrag.hdr_image = hdr_image;
|
||
|
|
hdr_mousedrag.start_mouse_x = event.clientX;
|
||
|
|
hdr_mousedrag.start_win_x = drw_obj.offsetLeft + 2;
|
||
|
|
ctrl_obj.onmousemove = dr_wind_move;
|
||
|
|
ctrl_obj.onmouseup = dr_wind_mouseup;
|
||
|
|
}
|
||
|
|
|
||
|
|
function dr_wind_mouseup( event ) {
|
||
|
|
event = event || window.event;
|
||
|
|
|
||
|
|
hdr_image = hdr_mousedrag.hdr_image;
|
||
|
|
|
||
|
|
var ctrl_obj = document.getElementById(hdr_image.base_name + "_dr_ctrl");
|
||
|
|
var drw_obj = document.getElementById(hdr_image.base_name+"_dr_wind");
|
||
|
|
var drw_left = drw_obj.offsetLeft;
|
||
|
|
|
||
|
|
var new_exp = Math.round((drw_obj.offsetLeft/hdr_image.pix_per_fstop + hdr_image.hist_start)*3)/3;
|
||
|
|
|
||
|
|
ctrl_obj.onmousemove = null;
|
||
|
|
ctrl_obj.onmouseup = null;
|
||
|
|
hdr_mousedrag.hdr_image = null;
|
||
|
|
|
||
|
|
change_exp( hdr_image, new_exp - hdr_image.exposure );
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function dr_wind_move(event){
|
||
|
|
event = event || window.event;
|
||
|
|
|
||
|
|
hdr_image = hdr_mousedrag.hdr_image;
|
||
|
|
var drw_obj = document.getElementById(hdr_image.base_name+"_dr_wind");
|
||
|
|
|
||
|
|
var new_pos = (event.clientX-hdr_mousedrag.start_mouse_x) + hdr_mousedrag.start_win_x;
|
||
|
|
drw_obj.style.left = new_pos + "px";
|
||
|
|
|
||
|
|
var new_exp = Math.round((drw_obj.offsetLeft/hdr_image.pix_per_fstop + hdr_image.hist_start)*3)/3;
|
||
|
|
update_exp_text( hdr_image, new_exp );
|
||
|
|
}
|
||
|
|
|
||
|
|
function hdr_show_help() {
|
||
|
|
newwindow=window.open('','name','height=400,width=300');
|
||
|
|
var tmp = newwindow.document;
|
||
|
|
tmp.write('<html><head><title>HDR HTML viewer help</title>');
|
||
|
|
tmp.write('</head><body>');
|
||
|
|
tmp.write('<a href="http://pfstools.sourceforge.net/hdrhtml/" target="_blank">HDR HTML viewer</a> <div style="font-size: small">ver. @version@</div>');
|
||
|
|
tmp.write('<div style="font-size: small">(C) 2008 Rafal Mantiuk</div>');
|
||
|
|
tmp.write('<ul style="font-size: small">');
|
||
|
|
tmp.write('<li>Change exposure by scrolling the blue dynamic range window left and right.</li>');
|
||
|
|
tmp.write('<li>Click on the left or right side of the dynamic range window to change exposure by either 1 or 1/3 of an f-stop depending on how far from the window you click.</li>');
|
||
|
|
tmp.write('<li>Press "-" and "=" keys to change exposure by 1 f-stop.</li>');
|
||
|
|
tmp.write('<li>The green plot represents image histogram. Each tick represent one f-stop. EV value is given in f-stops (log<sub>2</sub> units) relative to the inital exposure.</li>');
|
||
|
|
tmp.write('</ul>');
|
||
|
|
tmp.write('</body></html>');
|
||
|
|
tmp.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
function hdr_onkeydown(e) {
|
||
|
|
var hdr_image = hdr_active_image;
|
||
|
|
var keynum;
|
||
|
|
if( hdr_image == null )
|
||
|
|
return;
|
||
|
|
|
||
|
|
if(window.event) { // IE
|
||
|
|
keynum = window.event.keyCode;
|
||
|
|
if( keynum == 189 )
|
||
|
|
change_exp( hdr_image, +1 );
|
||
|
|
if( keynum == 187 )
|
||
|
|
change_exp( hdr_image, -1 );
|
||
|
|
} else if(e.which) { // Netscape/Firefox/Opera
|
||
|
|
keynum = e.which;
|
||
|
|
if( keynum == 109 )
|
||
|
|
change_exp( hdr_image, +1 );
|
||
|
|
if( keynum == 61 )
|
||
|
|
change_exp( hdr_image, -1 );
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<!-- HDRHTML END -->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- HDRHTML BEG: Put this part at the beginning of the "body" section -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
@hdr_img_def@
|
||
|
|
@cf_array_def@
|
||
|
|
|
||
|
|
hdr_mousedrag = new Object();
|
||
|
|
hdr_mousedrag.hdr_image = null;
|
||
|
|
hdr_mousedrag.start_mouse_x = 0;
|
||
|
|
hdr_mousedrag.start_win_x = 0;
|
||
|
|
|
||
|
|
hdr_active_image = null;
|
||
|
|
document.onkeydown=hdr_onkeydown;
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<!-- HDRHTML END -->
|
||
|
|
|
||
|
|
|
||
|
|
@image_htmlcode@
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|