Revision 0ab53102c02cd5c97fc58c71489748c2546cd368 (click the page title to view the current version)
<html>
<head>
<script>
function loadMetadata(shot,callback){
// var xobj = new XMLHttpRequest();
// xobj.overrideMimeType("application/json");
// xobj.open('GET','./'+shot+'_meta.json',true);
// xobj.onreadystatechange = function(){
// if(xobj.readyState==4 && xobj.status=="200"){
// callback(JSON.parse(xobj.responseText););
// }
// else alert("cannot load metadata");
// }
// xobj.send(null);
callback(JSON.parse('{"shift": -36, "list": [90, 132, 174, 194, 236, 278, 298, 318, 382, 402, 422, 464, 506, 526, 568, 609, 629, 649, 690, 731, 751, 792, 833, 853, 873, 914, 955, 975, 1016]}'));
}
function getCounter(count,callback){
if(count<=0)callback();
return function(){
if(count>0)count--;
if(count==0)callback();
}
}
function getImages(shot,list){
images = [];
var counter = getCounter(list.length,startVideo);
for(var i in list){
images[list[i]] = new Image();
images[list[i]].addEventListener("load",counter);
images[list[i]].addEventListener("error",counter);
images[list[i]].src = "./"+shot+"_"+i+".png";
}
return images;
}
var frame = 0;
function draw(){
document.querySelector("#tomo").src = images[list[frame]].src;
document.querySelector("#seeker").style.left = Math.round(list[frame]*150/336+299)+"px";
}
var interval = -1;
function startVideo(){
interval = setInterval(function(){
if(frame>=0)draw();
frame+=1;
if(frame>=list.length)frame=-1;
},1000);
}
function stopVideo(){
clearInterval(interval);
}
function seek(ev){
if(!ev)ev=window.event;
stopVideo();
time = (ev.clientX+document.body.scrollLeft-299)*336/150;
frame = 0;
for(var i=1; i<list.length; i++){
if(Math.abs(list[i]-time)<Math.abs(list[frame]-time)){
frame = i;
}
}
draw();
}
var list;
addEventListener("load",function(){
var shot = 18731;
loadMetadata(shot,function(metadata){
list = metadata["list"];
var shift = parseInt(metadata["shift"]);
images = getImages(shot,list);
var proj_top = document.querySelector("#proj_top");
var proj_side = document.querySelector("#proj_side");
proj_top.src = "http://golem.fjfi.cvut.cz/shots/"+shot+"/diagnostics/Radiation/0211FastCamera.ON/1/plasma_all.png";
proj_side.src = "http://golem.fjfi.cvut.cz/shots/"+shot+"/diagnostics/Radiation/0211FastCamera.ON/2/plasma_all.png";
proj_top.style.left = (shift<0)? 300 : Math.round(300+shift/336*150);
proj_side.style.left = (shift>0)? 300 : Math.round(300-shift/336*150);
proj_top.addEventListener("click",seek);
proj_side.addEventListener("click",seek);
});
});
</script>
</head>
<body>
<div style="position:absolute; left:0px; top:0px; padding:0px">
<img id=tomo src="#" width=300 height=300 style="float:left" />
<div style="padding:0px; height:336px">
<img id=proj_top src="#" style="position:absolute; left:300px; top:0px" height=150/>
<img id=proj_side src="#" style="position:absolute; left:300px; top:150px" height=150 />
<div id=seeker style="position:absolute; left:299px; top:0px; width:2px; height:300px; background-color:#FF0"></div>
</div>
</div>
</body>
</html>
