basic slideshow working

8 years ago · 743bf754a5
5 changed files with 115 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+/testimages
--- a/README.md
+++ b/README.md
@ -1 +1,5 @@
 local html page, that shows a slideshow of local files with a counter overlay
+
+
+## comments
+image rotation based on exif data only works in firefox
--- a/slideshow.css
+++ b/slideshow.css
@ -0,0 +1,22 @@
+body, html {
+    height: 100%;
+ background-color: black;
+}
+
+#mainImage{
+    position: fixed;
+    display: none;
+    margin-left: auto;
+    margin-right: auto;
+    max-width:100%;
+    max-height:100%; 
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    image-orientation: from-image;
+}
+#config{
+ display:block;
+  background-color: white;
+}
--- a/slideshow.html
+++ b/slideshow.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>countdown slideshow</title>
+    <link href="slideshow.css" type="text/css" rel="stylesheet">
+
+</head>
+<body>
+
+<div id="config">
+<h1>countdown slideshow Config:</h1>
+<!-- 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="startButton" type="button" value="Start!">
+
+
+<div id="fileNames">
+</div>
+
+</div>
+
+<img id="mainImage" src=""/>
+
+<script src="slideshow.js" ></script>
+</body>
+</html>
--- a/slideshow.js
+++ b/slideshow.js
@ -0,0 +1,60 @@
+function displayImage(list,domelem,delay){
+console.log("next image:")
+ let file = list.splice(0,1)[0]//pop first
+
+ if(file === undefined){
+  console.log("done")
+ document.getElementById("mainImage").style.display="none"
+ document.getElementById("config").style.display="block"
+ }
+ else{ 
+  console.log(file)
+  let reader = new FileReader();  
+  reader.onload = function(event) {
+    domelem.src=event.target.result
+    setTimeout(displayImage,delay,list,domelem,delay)
+  }
+  reader.readAsDataURL(file);
+
+  
+ }
+
+}
+
+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(){
+ //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)
+ document.getElementById("fileNames").innerText = "filenames:\n"+names.join("\n")
+ console.log(names)
+
+};
+
+
+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 list = Array.from(document.getElementById("filePicker").files)
+let img = document.getElementById("mainImage")
+let delay = document.getElementById("delayPicker").value
+setTimeout(displayImage,100,list,img,delay)
+
+};
+
+