@dazza120 MMM-Scrobbler would do that if you connect your iTunes to last.fm

@thestigh Would you like to have the module running but not showing in your Magic Mirror? I guess you can do this by not assigning a position for the module.

example for the clock module

modules: [
	{
		module: "clock",
		position: "",	// leave this blank
		config: {
			// The config property is optional.
			// See 'Configuration options' for more information.
		}
	}
]

@justjim1220. Yeah it shows every color atm before the minute updates and the loop starts again.

@justjim1220 I changed the update interval to 60 sec and that makes it work allot better. I kept the background size at 500% so the color gradient won’t repeat.

.clock-time-only-color {
	background-image: linear-gradient(to left, red,orange,yellow,green,blue,purple);
	-webkit-background-clip:  text;
	-webkit-animation: animate 60s linear infinite;
	background-size: 500%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	100%	{background-position: 500% 0%;}

The result

Thanks for your help!

@justjim1220 Good tip man! I will change the update interval and look at the difference.

@seann yeah i tried increasing the number to like 20 sec up to 6000. But the problem i get then is that it shows me only the first 2 colors in the gradient. Dunno but will try and work on it tomorrow

@seann I took a different approach to this, mainly because I only wanted to have it for only one module. I have changed my custom.css and one line in the clock.js, so it grabs a different style.
My code makes a gradient background which I clip to the text. Then to make it move across the text i use webkit-animation. I’m not totally satisfied with the result of the animation yet but i will keep tweaking that.

the animation moves way too fast now and when I make the animation duration longer it doesn’t feature all the colors of the gradient.
the only line i needed to change in the clock.js file

timeWrapper.className = "time clock-time-only-color large light";

Custom.css (lines i added)

.clock-time-only-color {
	background-image: linear-gradient(to right, #ff0000,#ff4000,#ff8000,#ffbf00,#ffff00,#bfff00,#80ff00,#40ff00,#00ff00,#00ff40,#00ff80,#00ffbf,#00ffff,#00bfff,#0080ff,#0040ff,#0000ff,#4000ff,#8000ff,#bf00ff,#ff00ff,#ff00bf,#ff0080,#ff0040,#ff0000);
	-webkit-background-clip:  text;
	-webkit-animation: animate 3s linear infinite;
	background-size: 500%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	50%	{background-position: 100% 0%;}
	100%    {background-position: 0% 100%;}
	}

Do you have any idea on how I can make the animation duration way longer like 10 min and still show all the colors in the gradient?

Thank you for the initial idea and for inspiring me!

I really like the idea of this module, I’m searching for the possibility to make only my clock have this effect and maybe a gradient kind of color shift. Can you help me with this idea?

I have some trouble with the MMM-Calendar issue.

As you can see “Werken Femke” is twice in 7 days. But these two events are on two different days. I believe this only happens when its after midnight but i’m not sure. How can i fix this issue and make the in * amount of days logic again.

Thank you in advance for reading and helping me.

@egnos As @sdetweil already stated the comma’s are for showing the code that there is more to run after the line. It is no problem to have a extra comma at the end. But if you don’t put a comma the code doesn’t run further and gives you a syntax error. The {} are for making a object in JS, if you don’t close the object with a } you will also get a syntax error.