From ff942ca956283cbb6ee41b76fa47934e0854f7d1 Mon Sep 17 00:00:00 2001 From: Parnic Date: Sat, 21 Apr 2018 11:40:52 -0500 Subject: [PATCH] Initial commit --- .gitignore | 61 +++++++++++++++++++++++++++++++++ LICENSE | 21 ++++++++++++ MMM-Unsplash.js | 90 +++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 38 +++++++++++++++++++++ package.json | 11 ++++++ 5 files changed, 221 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 MMM-Unsplash.js create mode 100644 README.md create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c245cd3 --- /dev/null +++ b/.gitignore @@ -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 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b442934 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/MMM-Unsplash.js b/MMM-Unsplash.js new file mode 100644 index 0000000..6b0cb36 --- /dev/null +++ b/MMM-Unsplash.js @@ -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 = '' + 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() + } +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..d4cd287 --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# MMM-Unsplash +A MagicMirror² module used to pull a random photo from one or more Unsplash collections. Like MMM-RandomPhoto, 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 +MMM-RandomPhoto for the inspiration. The core image update functionality is cribbed from this module. diff --git a/package.json b/package.json new file mode 100644 index 0000000..aa214a4 --- /dev/null +++ b/package.json @@ -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": { + } +}