countdown-slideshow/slideshow.js

function makeCache(list,size){
 let cache = [];
 var size = size ||10;
 function fillCache(){
  while (cache.length < size && list.length>0){
   let file = list.shift();//pop first
   console.log("caching file:"+file.name)
   let reader = new FileReader();  
   reader.readAsDataURL(file);
   
   reader.domelem = undefined;
   reader.name = file.name;
   /*reader.onload=function(e){
    console.log("created img tag for:"+reader.name)
    reader.domelem = document.createElement("img");
    reader.domelem.setAttribute('src', reader.result);
    reader.domelem.setAttribute('id', "mainImage");
    reader.domelem.setAttribute('style', "display:block");
   }*/
   cache.push(reader);
  }
 }
 function next(){
  fillCache();
  let reader = cache.shift()
  if (reader === undefined){
   return undefined;
  }
  if(reader.readyState === FileReader.DONE){
   return reader;
  }
  else{
   console.log("warning: file not loaded");
   cache.unshift(reader);
   return null;
  }
 }
 function test(){
  console.log(list);
  console.log(size);
  console.log(cache);
 }
 fillCache()//initialize cache
 return {"next":next,"test":test};
};


function displayImage(cache,domelem,delay){
 let reader = cache.next();
 if(reader === undefined){
  console.log("done");
  domelem.style.display="none";
  document.getElementById("config").style.display="block";
 }
 else{
  if(reader){//if cache ready 
   //domelem.replaceWith(reader.domelem);
   //setTimeout(displayImage,delay,cache,reader.domelem,delay);
   domelem.src=reader.result;
   setTimeout(displayImage,delay,cache,domelem,delay);
  }
  else{
   console.log("waiting")
   setTimeout(displayImage,delay,cache,domelem,delay);
  }
  
 }
}

Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

//set current date
document.getElementById('datePicker').defaultValue = (new Date).addHours(1).toISOString().slice(0,-5);

document.getElementById("filePicker").onchange=function(){
 let files=Array.from(this.files);
 let names= files.map(file => file.name);
 document.getElementById("fileNames").innerText = "filenames:\n"+names.join("\n");
 console.log(names);

};

//demo mode:
if (document.location.hash === "#demo"){
document.getElementById("mainImage").style.display="block";
document.getElementById("mainImage").src="testimages/IMG_20150912_10_59_42_NX2000.jpg"
document.getElementById("config").style.display="none";
}

document.getElementById("startButton").onclick=function(){
console.log("starting");
let dateInput = document.getElementById("datePicker");
console.log("date valid:"+dateInput.checkValidity());
console.log(dateInput.value);

document.getElementById("mainImage").style.display="block";
document.getElementById("config").style.display="none";

let files = Array.from(document.getElementById("filePicker").files);
let img = document.getElementById("mainImage");
let delay = document.getElementById("delayPicker").value;
let cache = makeCache(files,10);

setTimeout(displayImage,delay,cache,img,delay);

};

/*snippets
reader = new FileReader();
reader.readAsDataURL(Array.from(document.getElementById("filePicker").files)[0]);

files=Array.from(document.getElementById("filePicker").files);
files.forEach((file)=>{console.log(file.name)})



c=makeCache(Array.from(document.getElementById("filePicker").files),10)
c.next()


tag= document.createElement("img");
tag.setAttribute('id', "mainImage");
tag.setAttribute('src', "testimages/1.jpg");
tag.setAttribute('style', "display:block");
document.getElementById("mainImage").replaceWith(tag)
*/