From 743bf754a54ba9bad36011c04b9ba95e5ee0c017 Mon Sep 17 00:00:00 2001 From: csrichter Date: Tue, 5 Jun 2018 00:23:58 +0200 Subject: [PATCH] basic slideshow working --- .gitignore | 1 + README.md | 4 ++++ slideshow.css | 22 ++++++++++++++++++ slideshow.html | 28 +++++++++++++++++++++++ slideshow.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 115 insertions(+) create mode 100644 .gitignore create mode 100644 slideshow.css create mode 100644 slideshow.html create mode 100644 slideshow.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..26e3d3a --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/testimages \ No newline at end of file diff --git a/README.md b/README.md index 3c57dab..268a4bc 100644 --- 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 \ No newline at end of file diff --git a/slideshow.css b/slideshow.css new file mode 100644 index 0000000..49fa7c9 --- /dev/null +++ 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; +} diff --git a/slideshow.html b/slideshow.html new file mode 100644 index 0000000..91af4a0 --- /dev/null +++ b/slideshow.html @@ -0,0 +1,28 @@ + + + + countdown slideshow + + + + + +
+

countdown slideshow Config:

+ + + + + + + +
+
+ +
+ + + + + + diff --git a/slideshow.js b/slideshow.js new file mode 100644 index 0000000..9d0136c --- /dev/null +++ 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) + +}; + +