GithubHelp home page GithubHelp logo

zerojarvis / mmm-googledriveslideshow Goto Github PK

View Code? Open in Web Editor NEW

This project forked from clegallic/mmm-googledriveslideshow

0.0 0.0 0.0 4.78 MB

Magic Mirror² Google Drive Photos Slideshow Module

License: MIT License

JavaScript 96.20% CSS 3.80%

mmm-googledriveslideshow's Introduction

MMM-GoogleDriveSlideShow

Display your photos from files stored in Google Drive

Inspired by MMM-GooglePhotos and MMM-GoogleBirthdaysProvider

Screenshot

White Frame Theme Screenshot

Regular installation

  1. Install Module
cd modules
git clone https://github.com/clegallic/MMM-GoogleDriveSlideShow.git
cd MMM-GoogleDriveSlideShow
npm install

Get Auth and FolderId

  1. Go to Google API Console
  2. From the menu bar, select a project or create a new project.
  3. To open the Google API Library, from the Navigation menu, select APIs & Services > Library. Don't forget to enable the Google API Services.
  4. Search for Google Drive API. Select the correct result and click Enable.
  5. Then, from the menu, select APIs & Services > Credentials.
  6. On the Credentials page, click Create Credentials > OAuth client ID.
  7. Select your Application type as Other and submit. (Before or After that, you might be asked for making consent screen. do that.)
  8. Then, you can download your credential json file from list. Downloaded file name would be client_secret_xxxx...xxx.json. rename it as credentials.json and save it to your MMM-GoogleDriveSlideShow/secrets directory.
  9. Now, open your terminal(not via SSH, directly in your RPI).
cd ~/MagicMirror/modules/MMM-GoogleDriveSlideShow
npm run token:generate
  1. At first execution, It will display a link that will ask you to login google account and to consent your allowance.
  2. After consent, some code (4/ABCD1234xxxx...) will be appeared. copy it and return to your terminal. paste it for answer of prompt in console.
  3. Now set your config.js (next chapter)

Using this module

To use this module, add it to the modules array in the config/config.js file:

var config = {
    modules: [
		{
			module: "MMM-GoogleDriveSlideShow",
			position: "bottom_bar",
			config: {
				rootFolderId: null,
				maxFolders: 10, 
				maxResults: 100,
				playMode: "AUTO",
				nextOnNotification: null,
				stopOnNotification: null,
				startOnNotification: null,
				refreshDriveDelayInSeconds: 24 * 3600, 
				refreshSlideShowIntervalInSeconds: 10,
				maxWidth: "800",
				maxHeight: "600",
				theme: "whiteFrame",
				opacity: 1,
				debug: false
			}
		}
	]
};

Configuration options

Option Description
rootFolderId Google Drive root folder id, or null for root folder

Type: string
Default value: null
maxFolders Maximum number of sub-folders to scan if rootFolderId != root

Type: integer
Default value: 10
maxResults Maximum of images to load from Google Drive

Type: integer
Default value: 100
playMode Slideshow play mode : AUTO (automatic) or NOTIFICATION (only on the notification configured with nextOnNotification)

Type: string
Default value: AUTO
nextOnNotification Change image only when this notification is received. Automatic refresh otherwise if null

Type: string
Default value: null
stopOnNotification Stop slideshow when this notification is received

Type: string
Default value: null
startOnNotification Stop slideshow when this notification is received

Type: string
Default value: null
refreshDriveDelayInSeconds How often Google Drive cache is refresh (fetch new photos, update existings)

Type: integer (seconds)
Default value: 24 * 3600
refreshSlideShowIntervalInSeconds How often the image on the slideshow is refreshed

Type: integer (seconds)
Default value: 10
maxWidth Maximum width of the image displayed

Type: integer (pixels)
Default value: 800
maxHeight Maximum height of the image displayed

Type: integer (pixels)
Default value: 600
theme Name of CSS class to use for theme : none, insetShadow or whiteFrame. See below for examples of these themes

Type: string
Default value: whiteFrame
opacity Resulting image opacity. Consider reducing this value if you are using this module as a background picture frame

Type: float (below one)
Default value: 1
mode "cover" or "contain"

Type: string
Default value: contain
debug Display debug informations in Electron and NodeJS consoles / logs

Type: boolean
Default value: false

Last Tested;

  • MagicMirror : v2.10.1
  • node.js : 8.16.2 & 10.17.0

Themes

White Frame (default)

White Frame Theme Screenshot

None

None Theme Screenshot

Inset Shadow

Inset Shadow Theme Screenshot

Updates

  • 2020-03-16 : Handle suspend() and resume() functions

TODO

  • Add rootFolderId in cache to compare any change and reset if any
  • Display a message on the Mirror while reloading the cache
  • Explain who to get the folderId in Google Drive
  • Add option to display filename, date and parent folder name
  • Add option to choose mimetype of files to search
  • Detect and correct photo orientation when portait is displayed as landscape
  • Allow multiple root folders Ids
  • Allow memory only cache for read-only MM

mmm-googledriveslideshow's People

Contributors

clegallic avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.