Skip to content
A Magic Mirror module to display a slide show using pictures from a local PLEX media server
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 7 commits ahead, 4 commits behind darickc:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Updated module to pull images from PLEX server Aug 26, 2019
LICENSE initial commit Aug 1, 2018
MMM-PlexSlideshow.js Removed old files, Renamed to PlexSlideShow Sep 3, 2019
PlexSlideshow.css
README.md
node_helper.js
package-lock.json Updated module to pull images from PLEX server Aug 26, 2019
package.json Updated module to pull images from PLEX server Aug 26, 2019

README.md

Module: Plex Favorites Slideshow

Show a slideshow of images in the background. Great for a photo frame from instead of a mirror, using photos marked as 'favorite' from your PLEX Server.

The MMM-PlexSlideshow module is designed to display images fullscreen, one at a time on a fixed interval, from your PLEX server. These images can be shown in order or at random. The images can transition from one to the other and be shown with no edge (cover) or the enter image(contain).

Based on MMM-ImageSlideshow.

Dependencies / Requirements

This module requires that you have an accessable PLEX media server where your photos are stored, and that you have marked some of these photoes as favourites (The Heart icon).

Operation

This module will log into the specified PLEX Media Server and locate the Favorites Photo Album and display the images. The module will display those images in either alphabetical or random order. Once all the images have been shown, it will loop back and start again.

Extra configurations include setting the amount of time an image is shown for, the transition speed from one image to another, the background sizing, whether or not to animate the transition from one to the other, the gradient used to make the text more readable, and the gradient opacity.

Installing the module

To install this module, from a SSH terminal

cd ~/MagicMirror/modules
git clone https://github.com/PJTewkesbury/MMM-PlexSlideshow.git
cd MMM-PlexSlideshow
npm install

To update

cd ~/MagicMirror/modules/MMM-PlexSlideShow
git pull
npm install

Configuration

To configure the module, add the module to the modules array in the config/config.js file:

modules: [
  {
    module: 'MMM-PlexSlideshow',
	position: 'fullscreen_below',
    config: {
	  plex: {
		  hostname:"PlexServerName Or IP",
		  port:32400,
		  username:"",
		  password:"",
		},
		transitionImages: true,
    }
  }
];

Notification options

The following notifications can be used:

Notifications Description
BACKGROUNDSLIDESHOW_NEXT Change to the next image, restart the timer for image changes only if already running
BACKGROUNDSLIDESHOW_PAUSE Pause the timer for image changes
BACKGROUNDSLIDESHOW_PLAY Change to the next image and start the timer for image changes

Configuration options

The following properties can be configured:

Option Description
plex The connection details for your PLEX server. This is a require value. This is a array of values. See below.
plex.hostname The IP address or hostname of your PLEX server. This is a required value
plex.port This is the port number that your PLEX server runs on. This is required and it's value is normally 32400
plex.username The username of an account that can access the PLEX server. This is a required value
plex.password The password for the username of an account that can access the PLEX server. This is a required value
slideshowSpeed Integer value, the length of time to show one image before switching to the next, in milliseconds.
Default value: 10000 (Which is 10 seconds).
This value is OPTIONAL
transitionSpeed Transition speed from one image to the other, transitionImages must be true. Must be a valid css transition duration.
Example: '2s'.
This value is OPTIONAL
backgroundSize The sizing of the background image. Values can be:
  • cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
  • contain: Resize the background image to make sure the image is fully visible.
Default value:'cover'. This value is OPTIONAL_
transitionImages Transition from one image to the other (may be a bit choppy on slower devices, or if the images are too big).
Example: true
Default value:false
This value is OPTIONAL
gradient The vertical gradient to make the text more visible. Enter gradient stops as an array.

Example: [
"rgba(0, 0, 0, 0.75) 0%",
"rgba(0, 0, 0, 0) 40%"
]

Default value:__[
"rgba(0, 0, 0, 0.75) 0%",
"rgba(0, 0, 0, 0) 40%",
"rgba(0, 0, 0, 0) 80%",
"rgba(0, 0, 0, 0.75) 100%"
]
This value is OPTIONAL
horizontalGradient The horizontal gradient to make the text more visible. Enter gradient stops as an array.

Example:["rgba(0, 0, 0, 0.75) 0%",
"rgba(0, 0, 0, 0) 40%"
]
Default value:___[
"rgba(0, 0, 0, 0.75) 0%",
"rgba(0, 0, 0, 0) 40%",
"rgba(0, 0, 0, 0) 80%",
"rgba(0, 0, 0, 0.75) 100%"
]
This value is OPTIONAL
gradientDirection The direction of the gradient
Possible values: 'vertical', 'horizontal', 'both'

Default value:'vertical'
This value is OPTIONAL
You can’t perform that action at this time.