added file cache

README.md

@@ -1,3 +1,5 @@
+# slidedown
+
 local html page, that shows a slideshow of local files with a counter overlay
 
 

slideshow.css

@@ -3,7 +3,7 @@ body, html {
  background-color: black;
 }
 
-#mainImage{
+img{
     position: fixed;
     display: none;
     margin-left: auto;

slideshow.html

@@ -12,7 +12,7 @@
 <!-- with input that accepts multiple files, notice the multiple attribute-->
 <input id="filePicker" type="file" multiple>
 <input id="datePicker" type="datetime-local" name="targetDate">
-<input id="delayPicker" type="number" name="delay" value=200>
+<input id="delayPicker" type="number" name="delay" value=1000>
 <input id="startButton" type="button" value="Start!">
 
 
@@ -22,6 +22,7 @@
 </div>
 
 <img id="mainImage" src=""/>
+<img id="nextImage" src=""/>
 
 <script src="slideshow.js" ></script>
 </body>

slideshow.js

@@ -1,25 +1,71 @@
-function displayImage(list,domelem,delay){
+function makeCache(list,size){
-console.log("next image:")
+ let cache = [];
- let file = list.splice(0,1)[0]//pop first
+ 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);
    
- if(file === undefined){
+   reader.domelem = undefined;
-  console.log("done")
+   reader.name = file.name;
- document.getElementById("mainImage").style.display="none"
+   /*reader.onload=function(e){
- document.getElementById("config").style.display="block"
+    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(file)
+   console.log("warning: file not loaded");
-  let reader = new FileReader();  
+   cache.unshift(reader);
-  reader.onload = function(event) {
+   return null;
-    domelem.src=event.target.result
-    setTimeout(displayImage,delay,list,domelem,delay)
   }
-  reader.readAsDataURL(file);
+ }
+ 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);
@@ -30,31 +76,48 @@ Date.prototype.addHours= function(h){
 document.getElementById('datePicker').defaultValue = (new Date).addHours(1).toISOString().slice(0,-5);
 
 document.getElementById("filePicker").onchange=function(){
- //files = Array.from(document.getElementById("fileInput").files)
- //fl.forEach((file)=>{console.log(file.name)})
-
  let files=Array.from(this.files);
- let names= files.map(file => file.name)
+ let names= files.map(file => file.name);
- document.getElementById("fileNames").innerText = "filenames:\n"+names.join("\n")
+ document.getElementById("fileNames").innerText = "filenames:\n"+names.join("\n");
- console.log(names)
+ console.log(names);
 
 };
 
 
 document.getElementById("startButton").onclick=function(){
-console.log("starting")
+console.log("starting");
-let dateInput = document.getElementById("datePicker")
+let dateInput = document.getElementById("datePicker");
-console.log("date valid:"+dateInput.checkValidity())
+console.log("date valid:"+dateInput.checkValidity());
-console.log(dateInput.value)
+console.log(dateInput.value);
+
+document.getElementById("mainImage").style.display="block";
+document.getElementById("config").style.display="none";
 
-document.getElementById("mainImage").style.display="block"
+let files = Array.from(document.getElementById("filePicker").files);
-document.getElementById("config").style.display="none"
+let img = document.getElementById("mainImage");
+let delay = document.getElementById("delayPicker").value;
+let cache = makeCache(files,10);
 
-let list = Array.from(document.getElementById("filePicker").files)
+setTimeout(displayImage,delay,cache,img,delay);
-let img = document.getElementById("mainImage")
-let delay = document.getElementById("delayPicker").value
-setTimeout(displayImage,100,list,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)
+*/