Magic Mirror Redesign WIP :D

[earlman]

@Sean yup! The reason I messed around with the CSS so much was to make it much more flexible with different screen sizes. I’ll post a screenshot once I get back to my computer

[earlman]

@Sean i like keeping it pretty minimal right now, but here’s what it looks like in landscape

[smackenzie5]

@earlman
I’m using the default clock, calendar, current weather, and weather forecast. I’m also using google-route. I’d be interested in anything you could do to make the Google map look better in the route module. I assume you don’t care about the modules that run in the background and don’t show on the screen. Thanks

[A Former User]

@earlman
Looks so nice. I want to try yours.

[earlman]

Project Update (& Installation Instructions)

@skibro @bachoo786 @Sean @smackenzie5
Alrighty y’all! Got some great news for those who wanna try this setup out. Heads up though—might take a bit of time to set up,
so don’t expect to get it looking right in a couple clicks.

First, I’ve added Pexels support to MMM-Wallpaper (thanks @kolbyjack for the quick response).

As for everything else, all the instructions for setting it up can be found here

Though I’ve been doing development work for a while, this is one of my first open-source projects, so I’ll definitely do my best to help you guys out if you need it.

[lavolp3]

@earlman I have to say I really love the grid concept. I have a monitor sitting in the lower right corner of the mirror and a grid design would look much better.
Can you share your main.css or is it on GitHub?
Sorry just saw the latest reply with all the information I needed. Thanks man!!

[smackenzie5]

@earlman
Thanks for putting this together.
Finally had some time to work on this today but got the following error message when running it for the first time:

pi@raspberrypi:~ $ cd MagicMirror
pi@raspberrypi:~/MagicMirror $ sudo npm start

> magicmirror@2.7.1 start /home/pi/MagicMirror
> sh run-start.sh

Starting MagicMirror: v2.7.1
Loading config ...
WARNING! Could not validate config file. Starting with default configuration. Please correct syntax errors at or above this line: /home/pi/MagicMirror/config/config.js:116
    				pexels_key: [my API key was here],
    				             ^^^^^^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:678:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
    at Function.Module._load (internal/modules/cjs/loader.js:551:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:20:18)
Loading module helpers ...
Initializing new module helper ...
Module helper loaded: updatenotification
No helper found for module: helloworld.
All module helpers loaded.
Starting server on port 8080 ... 
Server started ...
Connecting socket for: updatenotification
Sockets connected & modules started ...
Launching application.

Here’s my config.js:

{
			module: "MMM-Wallpaper",
			position: "fullscreen_below",
			config: { // See "Configuration options" for more information.
				source: "pexels",
    				slideInterval: 60 * 1000, // Change slides every minute
    				orientation: "vertical",
    				pexels_key: [my API key was here],
    				pexels_search: "beach"
				}
  		},

Thoughts?

Thanks,
Scott

[sdetweil]

@smackenzie5 said in Magic Mirror Redesign WIP :D:

exels_key: [my API key was here],

you need to get a pexels api key and put in where the text says

[smackenzie5]

@sdetweil
Yeah, I have the Pexels API key.
Replaced it with those words just for the forum post.

@earlman
BTW - getting the Pexels API key was immediate, no wait

Thanks,
Scott

[sdetweil]

@smackenzie5 did you put quotes around the key value? If not, that would explain the config error message

[earlman]

@smackenzie5 nice good news, glad it was quick to get.

What sdetweil said, did ya put quotes around the key?

[earlman]

@lavolp3 Yup, no problem :D hope it works out, if you’re having layout troubles feel free to post a screenshot. Haven’t tested this on a more filled out layout so I’d be curious how it looks

[smackenzie5]

@earlman @sdetweil
Yeah, that would be the problem…
Works now - thanks.

Two pictures, before and after:

Obviously, have some work to do on the After but it’s too late tonight to get started with that.

Thanks,
Scott

[nobita]

@earlman
I have question
how to add emoji or Icon on Header Text
Thanks for hint

[earlman]

@nobita You can put them straight into the “header” field on your config file. If you’re using Windows, press [WINDOWSKEY + .] Not sure how to insert emojis on a mac, though. Hope that helps.

[nobita]

@earlman I See, Thanks for quick hint answer

[ramac21]

Hi, it’s really pretty! Can these templates be downloaded for my mirror? or is it a private job?

[dbinott]

Hey…

So I am trying to make this a dashboard instead of behind a mirror so I wanting to completely change the look. This looks like a great start. Thanks. I am on a 32" monitor and it doesn’t look correct. Is the code for portrait only?

This is with the default config, so clock and calendar should be top left.

[jcmd13]

I am having the exact same issue. Is this thread still open? @earlman

[RuKeBo]

I have this same problem as well. I am no CSS expert and don’t have a solution yet but it appears that the “updatenotification” module is taking up that spot on the left. You can comment it out and test this. I think he said this would work with existing configurations but I don’t see how it will. It uses a grid layout, which again, I don’t know exactly how it is works, but this does not seem to allow the same layout. It also pushes stuff off the bottom, in your picture I would imagine the Weather module is “top_right” but it gets pushed down because of the grid layout and the length of the calendar. So if yours is like mine the clock & calendar are top_left and the weather is top_right. There’s probably other information (modules) in your layout it is not even showing, the “compliments” perhaps, which might be lower_third.

If you just want the look, you could just use the original main.css file and add the first line from his main.css file to load the Quicksand font, then change all the references in the file from “Roboto Condensed” to “Quicksand”. You can also add the “custom.css” information as he explained which will changes the clock and wallpaper, if you use that module. Still trying to see if there is a way to get this to work.