jbamford/mmm-penplotter

Module: PenPlotter

Render mesmerizing line animations on your mirror!

Addapted for SVG support from https://github.com/AdamMoses-GitHub/MMM-ImageSlideshow

The MMM-PenPlotter module is designed to display SVG animations. The SVG files are animated using CSS styling. The animation progressively draws a white line on a black background until it completes the entire SVG path. This creates the illusion that the line is magically rendered on the mirrored glass.

This module includes 12 ready-to-go animations. See a few examples below.

IMG_9183.1.1.mp4

IMG_9191.1.mp4

IMG_9188.1.mp4

IMG_9189.1.1.mp4

IMG_9190.1.1.mp4

Build Your own Animations

https://jbamford.github.io/Animate-SVG-Files-Breakdown/ Accpeting pull requests with new animations to add to the example_svg folder

Inspiration

Sisyphus, PenPlotters, and https://www.youtube.com/watch?v=7i78DSaMhls

Additional documention comming on how to generate your own SVG animations.

Dependencies / Requirements

This module requires no special dependencies. The only requirement is that the image directories you path to are fixed paths accessible to the Magic Mirror instance.

Operation

This module will take in a list of directory paths, one or more, containing the SVG files. The module will display those images in either alphabetical or random order, across either each path one at time or across all the paths at once. Once all the images have been shown, it will loop back and start again.

Using the module

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

modules: [
	{
		module: 'MMM-PenPlotter',
		position: 'middle_center',
		config: {
			imagePaths: ['modules/MMM-PenPlotter/example_svg']
		}
	}	
]

Configuration options

The following properties can be configured:

Option	Description
imagePaths	Array value containing strings. Each string should be a path to a directory where image files can be found. Example: ['modules/MMM-ImageSlideshow/example1'] This value is REQUIRED
slideshowSpeed	Integer value, the length of time to show one image before switching to the next, in milliseconds. Make sure all the SVG animations are the same duration as the slideshowSpeed Example: 6000 Default value: 65000 This value is OPTIONAL
delayUntilRestart	Integer value, the length of time to restart the slideshow after the last image has been shown, in milliseconds. The module will go blank will waits to restart. This value defaults to zero, meaning no delay until restarting. Example: 6000 Default value: 0 This value is OPTIONAL
fixedImageWidth	Integer value, sets a fixed pixel width for all the images to be shown. If set to 0, the image's actual width is used. Example: 250 Default value: 0 This value is OPTIONAL
fixedImageHeight	Integer value, sets a fixed pixel height for all the images to be shown. If set to 0, the image's actual height is used. Example: 300 Default value: 0 This value is OPTIONAL
randomizeImageOrder	Boolean value, if true will randomize the order of the images, if false will use an alphabetical sorting by filename. Example: true Default value: false This value is OPTIONAL
treatAllPathsAsOne	Boolean value, if true will treat all the paths specified in imagePaths as one path. Otherwise, if false, images will only be shown from one path at a time in the order of imagePaths, until all the images in that path are exhausted, before continuing to the next path. Example: true Default value: false This value is OPTIONAL

mmm-penplotter's Issues

It cuts off other modules.

How can I fix the pen plotter covering up my other modules?

Bug: SVGs always rendered full-size

The parameters for setting a fixed size for width and height seem to be useless at the moment. Images still get rendered full-size. I couldn't find a place in the code where the parameters are used.