Git Product home page Git Product logo

mmm-snow's Introduction

Module: MMM-Snow

Inspired by NHubbard's Snow Plugin I created a little more realistic snow plugin to improve your winter experience!

The module supports themes. Current themes are winter and love. The first one let's it snow while the latter conjurs hearts on your mirror.

Screenshot theme "winter"

Screenshot theme "love"

Screenshot theme "water"

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/MichMich/MMM-Snow.git

Configure the module in your config.js file.

Note: After starting the Mirror, it will take a few seconds before the snow begins to fall ...

Using the module

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

modules: [
	{
		module: 'MMM-Snow',
		position: 'fullscreen_above',
		config: { // See 'Configuration options' for more information.
			flakeCount: 100,
			theme: "winter"			
		}
	}
]

Configuration options

The following property can be configured:

Option Description
flakeCount The number of snow flakes. More flakes are havier for the cpu, so don't go wild.
Default value: 100
theme Defines the type of "flakes". Possible values are winter, love, and water.
Default value: winter

Defineing new themes

Certainly, there are many opportunities for new themes. To extend this module with new themes takes three simple development steps.

Add image files

Add your "flake" images to folder ./images in MMM-Snowdirectory. The image has to be a PNG with transparent background color. Make size of the file similar to existing files (50x50). The file names have to have a prefix followed by a number, e.g. foo1.png, foo2.png, foo3.png.

Reference images in CSS classes

Create new CSS classes in MMM-Snow.css, which reference your images. Class name and file name n´have to be identical.

.MMM-Snow .foo1 {background-image: url('images/foo1.png');}
.MMM-Snow .foo2 {background-image: url('images/foo2.png');}

Define theme

Extend the themes map in the file MMM-Snow.js. Just add another entry

"bar"   : { 
	"flakePrefix" : "foo",    
	"imagesCount"  : 3,         // number of images in this theme, here:  foo1, foo2, foo3
	"downwards"    : false,     // flakes move upwards from bottom to top
	"sizeFactor"   : 2}         // adapt size of flakes to your liking, <1 smaller, =1 original, >1 larger 

The named index bar is the externally visible theme name, which has to be used in config.js. Setting flakePrefix tells how the image files and CSS classes are called; in our example it should be foo. imagesCount defines how many image files / css classes are there. If you have three images, put 3 which makes the module using foo1, foo2, and foo3 respectively. The boolean setting downwards defines the direction of flakes' movements; true means downwards and true means upwards. Setting sizeFactor makes the flake images larger or smaller; values between 0 and 1 makes the flake smaller, while values larger than 1 enlarges them.

Configure new theme

To use the new theme, change the theme parameter for the MMM-Snow module in the config/config.js file:

modules: [
	{
		module: 'MMM-Snow',
		position: 'fullscreen_above',
		config: {
			theme: "bar"
		}
	}
]

After restarting the mirror the new MMM-Snow theme should be displayed.

mmm-snow's People

Contributors

michmich avatar pinsdorf avatar henrikra 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.