diff --git a/MMM-GooglePhotos.css b/MMM-GooglePhotos.css index 0a6b16f..117b670 100644 --- a/MMM-GooglePhotos.css +++ b/MMM-GooglePhotos.css @@ -1,3 +1,10 @@ +#GPHOTO_INFO { + --top: none; + --left: none; + --bottom: 0; + --right: 0; +} + @keyframes trans { from {opacity: 0} to {opacity: 1} @@ -48,8 +55,11 @@ #GPHOTO_INFO { position:absolute; - bottom: 10px; - right: 10px; + top: var(--top); + left: var(--left); + bottom: var(--bottom); + right: var(--right); + margin:10px; background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 36px; diff --git a/MMM-GooglePhotos.js b/MMM-GooglePhotos.js index a114375..ae92e1d 100644 --- a/MMM-GooglePhotos.js +++ b/MMM-GooglePhotos.js @@ -21,7 +21,8 @@ Module.register("MMM-GooglePhotos", { }, showWidth: 1080, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended. showHeight: 1920, - timeFormat: "YYYY/MM/DD HH:mm" + timeFormat: "YYYY/MM/DD HH:mm", + autoInfoPosition: false, }, getStyles: function() { @@ -38,6 +39,7 @@ Module.register("MMM-GooglePhotos", { if (this.config.updateInterval < 1000 * 10) this.config.updateInterval = 1000 * 10 this.config.condition = Object.assign({}, this.defaults.condition, this.config.condition) this.sendSocketNotification("INIT", this.config) + this.dynamicPosition = 0 }, socketNotificationReceived: function(noti, payload) { @@ -110,6 +112,28 @@ Module.register("MMM-GooglePhotos", { if (a.id == target._albumId) return true return false }) + if (this.config.autoInfoPosition) { + var op = (album, target) => { + var now = new Date() + var q = Math.floor(now.getMinutes() / 15) + var r = [ + [0, 'none', 'none', 0 ], + ['none', 'none', 0, 0 ], + ['none', 0, 0, 'none'], + [0, 0, 'none', 'none'], + ] + return r[q] + } + if (typeof this.config.autoInfoPosition == 'function') { + op = this.config.autoInfoPosition + } + let [top, left, bottom, right] = op(album, target) + console.log(top, left, bottom, right) + info.style.setProperty('--top', top) + info.style.setProperty('--left', left) + info.style.setProperty('--bottom', bottom) + info.style.setProperty('--right', right) + } info.innerHTML = "" var albumCover = document.createElement("div") albumCover.classList.add("albumCover") diff --git a/README.md b/README.md index 6dd3627..ed2c758 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,12 @@ Display your photos from album of Google Photos on MagicMirror ![](https://raw.githubusercontent.com/eouia/MMM-GooglePhotos/master/sc2.png) ## New Updates +**`[2.0.2] - 2020/04/01`** +- Added: `autoInfoPosition` - For preventing LCD burning, Photo info can be relocated by condition. + - `true` : automatically change position to each corner per 15 minutes. + - `false` : not using. + - callbackfunction (album, photo) : User can make his own position. + **`[2.0.1] - 2020/03/31`** - Fixed: 503 error from too often/many requests. (Thanks to @olafnorge) @@ -100,7 +106,7 @@ node generate_token.js ``` ## Usage -### **`albums`** +#### **`albums`** Now this module can access not only your owns but also shared. You can specify album title like this. ```js albums: ["My wedding", "family share", "Travle to Paris", "from Tom"], @@ -108,13 +114,13 @@ albums: ["My wedding", "family share", "Travle to Paris", "from Tom"], - Caution. Too many albums and photos could make long bootup delay. - Remember this. You can only show max 8640 photos in a day. Manage your album what to show, it will make better performance. -### **`updateInterval`** +#### **`updateInterval`** - Minimum `updateInterval` is 10 seconds. Too often update could makes API quota drains or network burden. -### **`sort`** +#### **`sort`** - `new`, `old`, `random` are supported. -### **`uploadAlbum`** +#### **`uploadAlbum`** - If you set this, you can upload pictures from MagicMirror to Google Photos through `GPHOTO_UPLOAD` notification. ```js this.sendNotification('GPHOTO_UPLOAD', path) @@ -125,7 +131,7 @@ node create_uploadable_album.js MyMagicMirrorAlbum ``` - At this moment, `MMM-Selfieshot` and `MMM-TelegramBot` can upload their pictures through this feature. -### **`condition`** +#### **`condition`** - You can filter photos by this object. - `fromDate` : If set, The photos which was created after this value will be loaded. (e.g: `fromDate:"2015-12-25"` or `fromDate:"6 Mar 17 21:22 UT"`) - `toDate` : If set, The photos which was created before this value will be loaded. (e.g: `toDate:"Mon 06 Mar 2017 21:22:23 z"` or `toDate:"20130208"`) @@ -142,15 +148,32 @@ condition: { } ``` -### **`showWidth`, `showHeight`** +#### **`showWidth`, `showHeight`** - Specify your real resolution to show. -### **`timeFormat`** +#### **`timeFormat`** - Specify time format for photo info. You can also use `relative` to show more humanized. -### **`debug`** +#### **`debug`** - If set, more detailed info will be logged. +#### **`autoInfoPosition`** +- For preventing LCD burning, Photo info can be relocated by condition. + - `true` : automatically change position to each corner per 15 minutes. + - `false` : not using. + - callbackfunction (album, photo) : User can make his own position. It should return `[top, left, bottom, right]` +```js +autoInfoPosition: true, // or false + +// User custom callback +autoInfoPosition: (album, photo)=> { + return ['10px', '10px', 'none', 'none'] // This will show photo info top-left corner. +} + +``` + + + ## Tip. - Not to show photo info : Add this into your `css/custom.css`. ```css