I wanted to introduce some more color to my MagicMirror so i made a animated rainbow color gradient which i used to spice up my default clock module. Here is a gif with the result:

The code

.clock-time-only-color {
	background-image: linear-gradient(to left, #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 60s linear infinite;
	background-size: 1000%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	100%	{background-position: 500% 1000%;}

If somebody has any idea of improving the image quality for the animation i’m really interested!

@mykle1 Looks very cool man! Now the flat earth believers can’t argue any more the earth is round! haha:face_with_stuck-out_tongue_closed_eyes:

@fischi87 Damn your mirror looks really sharp. which monitor and mirror did you use? and btw what is that white thing top left on top of the frame? I like the small wooden frame you used in this build! l’m Pretty curious which modules you are planning to add!

Congratulations on making your own MagicMirror!

@robiv8 If you mean the graph it’s MMM-rain-forecast It only works in the Netherlands atm. But i guess you could change the module a little so it will use a different API.

As for showing the analog clock above the other modules maybe adding a z-index to it in your custom.css file will help you to make it work.

@michmich I’n my opinion you’re doing this the right way! You are actively initiating a discussion about this topic and keeping it transparant.

Keeping donating voluntarily and optional will likely assure that people can enjoy working on there Magic Mirror as a hobby. The positive effect of accepting donations in my opinion is that it can boost the project in a good way by getting more resources available for it. Which enables more growth for the project and people involved.

The idea of companies supporting is very nice, The only potential loss for these future relationships is that it would be a nightmare if they get the ability to hijack and/or steal the project or influence it too much.

Looking forward to the reactions on this topic.:slightly_smiling_face:

Because I like the idea of people showing there Module Setup here is mine. :winking_face:

The Modules used in the setup. (list is left to right and top to bottom)
left: clock date only, default calendar and MMM-MyCommute
center: clock time only, compliments and newsfeed
right: currentweather, weatherforecast, MMM-rain-forecast and MMM-Scrobbler

I added a custom animated css color gradient to my clock to get some beautiful changing color.
Also changed the icons for currentweather and weatherforecast to add color.
Hope you guys like it! and if you have any recommendations for cool modules let me know!:smiling_face_with_open_mouth_smiling_eyes:

Will likely replace the calendar module pretty soon with something different

Heey I have installed your MMM-MyCalendar module last week and can’t make it work. Even the default config is stuck on loading… The default calendar module works fine. But i like the lay-out of this one allot more. Can you help me with fixing this?

This is my config: (copied and pasted from MMM-MyCalendar.js)

		{
			module: "MMM-MyCalendar",
			header: "Huize Achterom",
			position: "top_left",
			config: {
				maximumEntries: 10, // Total Maximum Entries
				maximumNumberOfDays: 365,
				displaySymbol: true,
				defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
				displayRepeatingCountTitle: false,
				defaultRepeatingCountTitle: "",
				maxTitleLength: 25,
				fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
				animationSpeed: 2000,
				fade: true,
				urgency: 7,
				useRelativeDates: false,
				dayOfWeekFormat: "dddd",
				dateFormat: "MMMM D",
				timeFormat: "h:mm A",
				joiningWord: "at",
				getRelative: 6,
				fadePoint: 0.25, // Start on 1/4th of the list.
				hidePrivate: false,
				colored: false,
				calendars: [
					{
					symbol: "calendar",
					url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
					},
				],
			}
		},

@taxandria
I see that there is a comma missing at line 10 in between the || needs to be a comma.

sort: "time", //'time', 'reverse', 'random'|,|

I’m also not sure about the difference between ” and " (notice the slight angle) being a problem or not.

p.s. It’s pretty hard to read the code when only half of it is properly styled.

@dazza120 You should check out the last.fm site for that and google ;)