5 changed files with 115 additions and 0 deletions
@ -1 +1,5 @@ |
|||||||
local html page, that shows a slideshow of local files with a counter overlay |
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 |
||||||
@ -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; |
||||||
|
} |
||||||
@ -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> |
||||||
@ -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) |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in new issue