function ImageViewer(w = 400, h=400){
let data = null;
let savedDiv = null;
this.name = "Show images";
this.getData = () => {return data};
let image = -1;
this.loadData = (d) => {
data = d;
if (data.images.length > 0) image = 0;
if (savedDiv != null) this.draw(savedDiv);
return this;
}
this.clearTask = () => {
if (data.images.length > 0) image = 0;
else image = -1;
}
this.draw = (div) => {
savedDiv = div;
div.innerHTML = "";
const ctx = DOM.context2d(w, h);
ctx.fillStyle = "hsl(216deg 100% 13%)";
ctx.fillRect(0, 0, w, h);
if (data == null || data.images.length == 0)
ctx.text("No images provided", w/2, h/2);
else{
ctx.drawImage(data.images[image],
w/2 - data.images[image].width/2,
h/2 - data.images[image].height/2);
}
div.appendChild(ctx.canvas);
}
function recursiveImageLoader(imageSources, index, whenDone){
if (index == imageSources.length)
whenDone();
else{
let img = new Image;
img.src = imageSources[index];
data.images.push(img);
img.onload = function(){
recursiveImageLoader(imageSources, index+1, whenDone);
};
}
}
this.setCurrentImage = (i) => {
if (i >= 0 && i < data.images.length){
image = i;
if (savedDiv != null) this.draw(savedDiv);
}
}
}