Initial commit
This commit is contained in:
61
.gitignore
vendored
Normal file
61
.gitignore
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# package lock
|
||||
package-lock.json
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
90
MMM-Unsplash.js
Normal file
90
MMM-Unsplash.js
Normal file
@ -0,0 +1,90 @@
|
||||
Module.register('MMM-Unsplash', {
|
||||
defaults: {
|
||||
opacity: 0.3,
|
||||
collections: '',
|
||||
width: 1080,
|
||||
height: 1920,
|
||||
orientation: 'portrait',
|
||||
apiKey: '',
|
||||
updateInterval: 1800,
|
||||
},
|
||||
|
||||
start: function() {
|
||||
this.load()
|
||||
},
|
||||
|
||||
load: function() {
|
||||
var self = this
|
||||
|
||||
var req = new XMLHttpRequest()
|
||||
var params = {
|
||||
collections: self.config.collections,
|
||||
w: self.config.width,
|
||||
h: self.config.height,
|
||||
orientation: self.config.orientation,
|
||||
}
|
||||
|
||||
req.addEventListener('load', function() {
|
||||
if (this.status == 200) {
|
||||
var obj = JSON.parse(this.responseText)
|
||||
var img1 = document.getElementById('mmm-unsplash-placeholder1')
|
||||
var img2 = document.getElementById('mmm-unsplash-placeholder2')
|
||||
|
||||
img1.addEventListener('load', function() {
|
||||
fade(img1, self.config.opacity, function() {
|
||||
img1.id = 'mmm-unsplash-placeholder2'
|
||||
})
|
||||
|
||||
fade(img2, 0, function() {
|
||||
img2.id = 'mmm-unsplash-placeholder1'
|
||||
})
|
||||
})
|
||||
|
||||
img1.src = obj.urls.custom
|
||||
}
|
||||
})
|
||||
|
||||
req.open('GET', 'https://api.unsplash.com/photos/random' + formatParams(params))
|
||||
req.setRequestHeader('Accept-Version', 'v1')
|
||||
req.setRequestHeader('Authorization', 'Client-ID ' + this.config.apiKey)
|
||||
req.send()
|
||||
|
||||
setTimeout(function() {
|
||||
self.load();
|
||||
}, (self.config.updateInterval * 1000));
|
||||
},
|
||||
|
||||
getDom: function() {
|
||||
var wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = '<img id="mmm-unsplash-placeholder1" style="opacity: 0; position: absolute; top: 0" /><img id="mmm-unsplash-placeholder2" style="opacity: 0; position: absolute; top: 0" />'
|
||||
return wrapper
|
||||
}
|
||||
})
|
||||
|
||||
function formatParams( params ){
|
||||
return "?" + Object
|
||||
.keys(params)
|
||||
.map(function(key){
|
||||
return key+"="+encodeURIComponent(params[key])
|
||||
})
|
||||
.join("&")
|
||||
}
|
||||
|
||||
function fade(elem, target, done) {
|
||||
var opacity = parseFloat(elem.style.opacity)
|
||||
var out = opacity > target
|
||||
if (opacity > target) {
|
||||
opacity -= 0.05
|
||||
} else if (opacity < target) {
|
||||
opacity += 0.05
|
||||
}
|
||||
|
||||
elem.style.opacity = opacity
|
||||
|
||||
if ((!out && opacity < target) || (out && opacity > target)) {
|
||||
setTimeout(function() { fade(elem, target, done) }, 60)
|
||||
} else {
|
||||
elem.style.opacity = target
|
||||
done()
|
||||
}
|
||||
}
|
||||
38
README.md
Normal file
38
README.md
Normal file
@ -0,0 +1,38 @@
|
||||
# MMM-Unsplash
|
||||
A <a href="https://github.com/MichMich/MagicMirror">MagicMirror²</a> module used to pull a random photo from one or more Unsplash collections. Like <a href="https://github.com/diego-vieira/MMM-RandomPhoto">MMM-RandomPhoto</a>, but for specific collections. Tested with MagicMirror² v2.2.2, v2.3.1 servers, Chrome 65 on Windows 10 and Midori 0.4.3 on a Raspberry Pi Zero W with Raspbian Jessie.
|
||||
|
||||
## Installation
|
||||
1. Navigate into your MagicMirror's `modules` folder and execute `git clone https://github.com/parnic/MMM-Unsplash.git`.
|
||||
2. Add the module inside `config.js` placing it where you prefer.
|
||||
|
||||
## Config
|
||||
|Option|Type|Description|Default|
|
||||
|---|---|---|---|
|
||||
|`opacity`|double|The opacity of the image.|0.3|
|
||||
|`collections`|string|(REQUIRED) Comma-delimited list of collections to pull from.|`''`|
|
||||
|`width`|int|Desired image width.|`1080`|
|
||||
|`height`|int|Desired image height.|`1920`|
|
||||
|`orientation`|string|Orientation of the image. Valid values: `landscape`, `portrait`, `squarish`|`'portrait'`|
|
||||
|`apiKey`|string|(REQUIRED) Your Unsplash API key.|`''`|
|
||||
|`updateInterval`|int|Number of seconds between image updates. Note that your API key is rate-limited, so if, for example, your rate limit was 50/hr, this should be no less than 72.|`1800` (30mins)|
|
||||
|
||||
Here is an example of an entry in config.js
|
||||
```
|
||||
{
|
||||
module: 'MMM-Unsplash',
|
||||
position: 'fullscreen_below',
|
||||
config: {
|
||||
collections: '369966,1240111,1136512,629911,150672,920773',
|
||||
apiKey: 'your_api_key'
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## Notes
|
||||
Pull requests are very welcome! If you'd like to see any additional functionality, don't hesitate to let me know.
|
||||
|
||||
## Dependencies
|
||||
None!
|
||||
|
||||
## Special Thanks
|
||||
<a href="https://github.com/diego-vieira/MMM-RandomPhoto">MMM-RandomPhoto</a> for the inspiration. The core image update functionality is cribbed from this module.
|
||||
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "magic-mirror-module-unsplash",
|
||||
"version": "1.0.0",
|
||||
"description": "Display images from Unsplash collections",
|
||||
"main": "MMM-Unsplash.js",
|
||||
"author": "Chris Pickett",
|
||||
"repository": "https://github.com/parnic/MMM-Unsplash.git",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user