Skip to content

Commit

Permalink
New filmstrip
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tevemadar
Tevemadar committed Feb 5, 2025
1 parent b80fba2 commit 9308bcf
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 223 deletions.
213 changes: 5 additions & 208 deletions filmstrip.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,15 @@
var filmstrip = {};
(function () {
var cache = new LRUCache(20);

var canvaswidth = 0;
var canvasheight = 0;
this.setwidth = function (width) {
canvaswidth = width;
redraw();
return width;
};
this.setheight = function (height) {
canvasheight = height;
redraw();
return height;
};

var volumeready = false;
this.start = async function () {
initvol(await loaders.AtlasVolumeLoader(args.atlas), volumeReady);
};
// async function volumeReady(event){
// cover();
// volumeready=true;
// var xhr=new XMLHttpRequest();
// xhr.open("GET",locators.SeriesLocator(args.series));
// xhr.responseType="json";
// xhr.onload=seriesReady;
// xhr.send();
//
// }

var arry = [];
this.getmeta = function () {
return arry;
};
var metahack;
// async function seriesReady(event){
async function volumeReady(event) {
cover();
volumeready = true;
Expand Down Expand Up @@ -74,68 +48,23 @@ var filmstrip = {};
idx = arry.findIndex(section => section.id.includes(args.section));
if (idx < 0)
idx = Math.floor(arry.length / 2);
pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
// dispatchOuv(arry[idx]);

redraw();
// loadloop=0;
// load();
});
}
;
this.prev = function () {
if (active && active.previousSibling)
activate({target: active.previousSibling.firstElementChild});
/*
if (idx > 0) {
idx--;
pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
dispatchOuv(arry[idx]);
redraw();
}
*/
};
this.next = function () {
if (active && active.nextSibling)
activate({target: active.nextSibling.firstElementChild});
/*
if (idx < arry.length - 1) {
idx++;
pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
dispatchOuv(arry[idx]);
redraw();
}
*/
};
// var loadloop;
// function load(){
// if(loadloop<arry.length){
// var img=document.createElement("img");
// arry[loadloop].img=img;
// img.onload=function(){
// if((loadloop>=start)&&(loadloop<=end))
// redraw();
// loadloop++;
// load();
// };
// img.src=locators.ThumbLocator(arry[loadloop].id);
// }
// }
var pos = 0;
var start = 0;
var end = -1;
var alpha = 0.3;
this.setalpha = function (newalpha) {
alpha = newalpha;
};
var idx;
const observer = new IntersectionObserver(loader);
const iconmap = new Map;
function redraw() {
if (!volumeready)
return;

const scroller = document.getElementById("stripscroller");
const opacity = document.getElementById("fs_alpha").valueAsNumber / 100;

for (const item of arry) {
const div = document.createElement("div");
Expand All @@ -146,116 +75,20 @@ var filmstrip = {};
const icon = document.createElement("canvas");
const overlay = document.createElement("canvas");
overlay.onclick = activate;
overlay.style.opacity = 0.3; //!!
/*icon.className=*/overlay.className = "icnv";
overlay.style.opacity = opacity;
overlay.className = "icnv";
const w = icon.width = overlay.width = 128;
const h = icon.height = overlay.height = 128 * item.h / item.w;
div.appendChild(icon);
div.appendChild(overlay);
scroller.appendChild(div);
const ovly = slice(item);
// const cnv=overlay;
for (const cnv of [icon, overlay]) {
const ctx = cnv.getContext("2d");
ctx.drawImage(ovly, 0, 0, w, h);
}
}
activate({target: arry[idx].key.firstElementChild});

return;

start = Math.floor((pos - 128) / 160);
if (start < 0)
start = 0;
end = Math.floor((pos + (canvaswidth - 20)) / 160);
if (end >= arry.length)
end = arry.length - 1;
var ctx = document.getElementById("scroller").getContext("2d");
ctx.globalAlpha = 1;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvaswidth, canvasheight);
for (var x = start; x <= end; x++) {
let item = arry[x];
var id = item.id;
var ovly = cache.get(id);
if (!ovly)
ovly = slice(item);
cache.put(id, ovly);
ctx.globalAlpha = 1;
if (idx === x) {
ctx.fillStyle = "#00FF00";
ctx.fillRect(x * 160 - pos + 20 - 10, 20, 128 + 10 + 10, 128);
}
if (item.icon === null) {
item.icon = loaders.DZILoader(item.id).then(async dzi => {
// item.icon=new XMLHttpRequest();
// item.icon.open("GET",locators.DZILocator(item.id));
// item.icon.onload=function(event){
// var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement;
var doc = new DOMParser().parseFromString(dzi, "text/xml").documentElement;
var tilesize = parseInt(doc.getAttribute("TileSize"));
var size = doc.getElementsByTagName("Size").item(0);
var width = parseInt(size.getAttribute("Width"));
var height = parseInt(size.getAttribute("Height"));
var w = width, h = height, maxlevel = 0;
while (w > 1 || h > 1) {
w = (w + 1) >> 1;
h = (h + 1) >> 1;
maxlevel++;
}
// console.log(tilesize,width,height,item.id);
var level = 0;
while (width >= tilesize || height >= tilesize) {
level++;
width = (width + 1) >> 1;
height = (height + 1) >> 1;
}
item.icon = await loaders.TileLoader(item.id, maxlevel - level, 0, 0, doc.getAttribute("Format"));
redraw();
// var img=document.createElement("img");
// img.onload=function(event){
// item.icon=img;
// redraw();
//// console.log(""+item.icon);
// };
// img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format"));
});
// item.icon.send();
}
if (item.icon instanceof HTMLImageElement) {
if (item.icon.width >= item.icon.height) {
ctx.drawImage(item.icon, x * 160 - pos + 20, 20, 128, 128 * item.icon.height / item.icon.width);
ctx.globalAlpha = alpha;
ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128, 128 * item.icon.height / item.icon.width);
} else {
ctx.drawImage(item.icon, x * 160 - pos + 20, 20, 128 * item.icon.width / item.icon.height, 128);
ctx.globalAlpha = alpha;
ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128 * item.icon.width / item.icon.height, 128);
}
} else {
if (ovly.width >= ovly.height)
ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128, 128 * ovly.height / ovly.width);
else
ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128 * ovly.width / ovly.height, 128);
}
// var img=item.img;
// if(img){
// ctx.drawImage(img,x*160-pos+20,20);
// ctx.globalAlpha=alpha;
// ctx.drawImage(ovly,x*160-pos+20,20,img.width,img.height);
// }
// else
// ctx.drawImage(ovly,x*160-pos+20,20,128,128);
}
ctx.clearRect(0, 0, 20, 128 + 20);
ctx.lineStyle = "black";
ctx.fillStyle = "#0000FF";
ctx.globalAlpha = 1;
ctx.strokeRect(0, Math.round(20 + 118 * alpha) + 0.5, 20, 10);
ctx.clearRect(0, 0, canvaswidth, 20);
ctx.strokeRect(20, 0, canvaswidth - 20, 20);
var len = arry.length * 160 - 34;
ctx.fillRect(20 + pos * (canvaswidth - 20) / len, 0, (canvaswidth - 20) * (canvaswidth - 20) / len, 20);
}

let active;
Expand All @@ -271,38 +104,6 @@ var filmstrip = {};
dispatchOuv(iconmap.get(target));
}

this.mwheel = function (event) {
if (event.offsetX < 20) {
alpha += event.deltaY > 0 ? 0.05 : -0.05;
alpha = Math.max(0, Math.min(1, alpha));
} else {
pos += event.deltaY < 0 ? 100 : -100;
pos = Math.max(0, Math.min(pos, arry.length * 160 - canvaswidth - 34 + 20));
}
redraw();
};
this.mclick = function (event) {
if (event.offsetX < 20) {
if (event.offsetY < 20) {
alpha = alpha === 0 ? 1 : 0;
} else {
alpha = (event.offsetY - 20) / 118;
}
redraw();
return;
}
if (event.offsetY < 20) {
var len = arry.length * 160 - 34;
pos = (event.offsetX - 20 - (canvaswidth - 20) * (canvaswidth - 20) / len / 2) * len / (canvaswidth - 20);
pos = Math.max(0, Math.min(pos, arry.length * 160 - canvaswidth - 34 + 20));
redraw();
return;
}
idx = Math.floor((pos + event.offsetX - 20 + (160 - 128) / 2) / 160);
dispatchOuv(arry[idx]);
redraw();
};

this.fs_ovly = function (event) {
const opacity = event.target.valueAsNumber / 100;
for (const cnv of document.getElementsByClassName("icnv")) {
Expand All @@ -317,10 +118,6 @@ var filmstrip = {};
observer.unobserve(div);
const image = iconmap.get(div);
loaders.DZILoader(image.id).then(async dzi => {
// item.icon=new XMLHttpRequest();
// item.icon.open("GET",locators.DZILocator(item.id));
// item.icon.onload=function(event){
// var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement;
var doc = new DOMParser().parseFromString(dzi, "text/xml").documentElement;
var tilesize = parseInt(doc.getAttribute("TileSize"));
var size = doc.getElementsByTagName("Size").item(0);
Expand All @@ -332,7 +129,6 @@ var filmstrip = {};
h = (h + 1) >> 1;
maxlevel++;
}
// console.log(tilesize,width,height,item.id);
var level = 0;
while (width >= tilesize || height >= tilesize) {
level++;
Expand All @@ -341,8 +137,9 @@ var filmstrip = {};
}
const icon = await loaders.TileLoader(image.id, maxlevel - level, 0, 0, doc.getAttribute("Format"));
div.firstElementChild.getContext("2d").drawImage(icon, 0, 0, 128, height * 128 / width);
// debugger;
});
}
}

this.resize = () => active && active.scrollIntoView({block: "center"});
}).apply(filmstrip);
21 changes: 6 additions & 15 deletions filmstripzoom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
#coords{
display: inline-block;
width: 500px;
/*padding-right: 5px;*/
}
#outline{
height: 18px;
Expand All @@ -39,7 +38,7 @@
position: relative;
flex: auto;
display:flex;
background-color: red;
/*background-color: red;*/
overflow: hidden;
}
#scrollsep{
Expand All @@ -48,7 +47,7 @@
}
#main{
position: relative;
background: orange;
/*background: orange;*/
flex: 1 1 auto;
margin: 0;
padding: 0;
Expand Down Expand Up @@ -97,11 +96,6 @@
cursor: crosshair;
outline: none;
}
/* canvas#scroller{
cursor: pointer;
}*/
/* #bright{float:right;height: 15px;width: 100px;}
#brightdesc{float:right;padding-right: 5px;}*/
#tools{
background: #F0F0F0;
height: 20px;
Expand Down Expand Up @@ -188,17 +182,15 @@
<script>
function fullscreen() {
var zc = document.getElementById("zoomcanvas");
var sc = document.getElementById("scroller");
sc.addEventListener("wheel", filmstrip.mwheel, true);

const main = document.getElementById("main");
// var help=document.getElementById("help");
// document.getElementById("metadata").style.top=help.style.top=zc.offsetTop+"px";
// help.style.left=window.innerWidth-520+"px";

filmstrip.setwidth(zc.width = sc.width = canvaswidth = main.offsetWidth/*window.innerWidth*/);
filmstrip.setheight(sc.height = 128 + 20);
zc.height = canvasheight = /*window.innerHeight*/main.offsetHeight - zc.offsetTop - 128 - 20;
zc.width = main.offsetWidth;
zc.height = main.offsetHeight;
filmstrip.resize();
if (zoomer)
zoomer.home();
}
Expand All @@ -215,7 +207,7 @@
// args[pair[0]]=pair[1] || true;
// });
if (args.view) {
filmstrip.setalpha(0);
document.getElementById("fs_alpha").value = 0;
}
args.view = !args.tools;
args.prev = true;
Expand Down Expand Up @@ -1322,7 +1314,6 @@
</div>-->
</div>
<canvas id="zoomcanvas" tabindex="1" onmouseover="event.target.focus()"></canvas>
<canvas id="scroller" onclick="filmstrip.mclick(event)"></canvas>
<div id="metadata"></div>
</div>
<div id="scrollsep"></div>
Expand Down

0 comments on commit 9308bcf

Please sign in to comment.