Skip to content

Instantly share code, notes, and snippets.

@oxyflour
Created September 18, 2016 11:20
Show Gist options
  • Select an option

  • Save oxyflour/1da83c32e5b08f5077a4786c777b0242 to your computer and use it in GitHub Desktop.

Select an option

Save oxyflour/1da83c32e5b08f5077a4786c777b0242 to your computer and use it in GitHub Desktop.
display random images in folder
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body, .slide {
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.slide {
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slide.hide {
opacity: 0;
}
</style>
</head>
<body>
<div class="slide"></div>
<div class="slide hide"></div>
</body>
<script>
const { ipcRenderer } = require('electron')
ipcRenderer.on('update-slide', (evt, path) => {
console.log(path)
const currentSlide = document.querySelector('.slide:not(.hide)'),
hiddenSlide = document.querySelector('.slide.hide')
hiddenSlide.style.backgroundImage = `url(file://${encodeURI(path.replace(/\\/g, '/'))})`
hiddenSlide.classList.remove('hide')
currentSlide.classList.add('hide')
})
</script>
</html>
const electron = require('electron'),
fs = require('fs'),
path = require('path'),
{ app, ipcMain, BrowserWindow } = electron
function selectImage() {
const dir = path.join(__dirname, 'assets'),
files = fs.readdirSync(dir).filter(file => file !== selectImage.last),
file = files[Math.floor(Math.random() * files.length)] || selectImage.last
win.webContents.send('update-slide', path.join(dir, selectImage.last = file))
}
app.on('ready', _ => {
win = new BrowserWindow({
autoHideMenuBar: true
})
win.loadURL(`file://${__dirname}/index.html`)
win.show()
setInterval(selectImage, 2000)
})
app.once('window-all-closed', _ => {
app.quit()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment