commit b6f1622ec31f45695397930498fbdce0c9af15f8 Author: tanshu Date: Mon Feb 27 09:31:24 2017 +0530 Memory leaks fixed. Need to make it use getDom() for updates now. Also, add video support. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..29d6828 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +npm-debug.log + diff --git a/MMM-RandomPhoto.js b/MMM-RandomPhoto.js new file mode 100644 index 0000000..1ccf368 --- /dev/null +++ b/MMM-RandomPhoto.js @@ -0,0 +1,58 @@ +/* global Module */ + +/* Magic Mirror + * Module: MMM-RandomPhoto + * + * By Diego Vieira + * ICS Licensed. + */ + +Module.register("MMM-RandomPhoto",{ + defaults: { + opacity: 0.3, + animationSpeed: 500, + updateInterval: 60, + url: 'https://unsplash.it/1920/1080/?random' + }, + + start: function() { + var self = this; + self.tag = $(''); + self.tag.on('load', function() { + $('#mmm-photos-placeholder1').attr('src', self.tag.attr('src')).animate({ + opacity: self.config.opacity + }, self.config.animationSpeed, function() { + $(this).attr('id', 'mmm-photos-placeholder2'); + }); + + $('#mmm-photos-placeholder2').animate({ + opacity: 0 + }, self.config.animationSpeed, function() { + $(this).attr('id', 'mmm-photos-placeholder1'); + }); + }); + self.load(); + }, + + load: function() { + var self = this; + var url = self.config.url + (self.config.url.indexOf('?') > -1 ? '&' : '?') + (new Date().getTime()); + self.tag.attr('src', url); + setTimeout(function() { + self.load(); + }, (self.config.updateInterval * 1000)); + + }, + + getDom: function() { + var wrapper = document.createElement("div"); + wrapper.style = "position:absolute; width:100%; height:100%" + wrapper.innerHTML = ''; + return wrapper; + }, + getScripts: function() { + return [ + this.file('node_modules/jquery/dist/jquery.min.js') + ] + } +}); diff --git a/README.md b/README.md new file mode 100644 index 0000000..773c39b --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# MMM-RandomPhoto +This a module for the [MagicMirror](https://github.com/MichMich/MagicMirror). It will show a random photo from an url. + +## Installation +1. Navigate into your MagicMirror's `modules` folder and execute `git clone https://github.com/diego-vieira/MMM-RandomPhoto.git`. +2. cd `cd MMM-RandomPhoto` +3. Execute `npm install` to install the node dependencies. + +## Config +The entry in `config.js` can include the following options: + + +|Option|Description| +|---|---| +|`opacity`|The opacity of the image.

**Type:** `double`
Default 0.3| +|`animationSpeed`|How long the fade out and fade in of photos should take.

**Type:** `int`
Default 500| +|`updateInterval`|How long before getting a new image.

**Type:** `int`
Default 60 seconds| +|`url`|URL to pull a new image from.

**Type:** `string`
Default https://unsplash.it/1920/1080/?random| + +Here is an example of an entry in `config.js` +``` +{ + module: 'MMM-RandomPhoto', + position: 'fullscreen_below', + config: { + opacity: 0.3, + animationSpeed: 500, + updateInterval: 60, + url: 'https://unsplash.it/1920/1080/?random' + } +}, +``` + +## Dependencies +- [jquery](https://www.npmjs.com/package/jquery) (installed via `npm install`) + +## Special Thanks +- [Michael Teeuw](https://github.com/MichMich) for creating the awesome [MagicMirror2](https://github.com/MichMich/MagicMirror) project that made this module possible. diff --git a/package.json b/package.json new file mode 100644 index 0000000..ce8a646 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "magic-mirror-module-random-photo", + "version": "1.0.0", + "description": "Show a random photo from an url", + "main": "MMM-RandomPhoto.js", + "author": "Diego Vieira", + "license": "ISC", + "dependencies": { + "jquery": "^3.1.0" + } +}