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
https://jbamford.github.io/Animate-SVG-Files-Breakdown/ Accpeting pull requests with new animations to add to the example_svg folder
Sisyphus, PenPlotters, and https://www.youtube.com/watch?v=7i78DSaMhls
Additional documention comming on how to generate your own SVG animations.
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.
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.
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']
}
}
]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 |