Magic Mirror Redesign WIP :D

[earlman]

@skibro That’s actually just a mockup I made in Figma (a design tool). I haven’t built that into my mirror yet, by since you’re interested, I’ll move that up the priority list. I’ll post back here when I have something up on github.

[bachoo786]

@earlman this looks proper nice do you mind sharing the whole lot i.e. your css, the wallpapers etc?

Thanks.

[earlman]

@bachoo786 @skibro What modules are you guys currently using? I’m doing some prep work for release and wanna make sure it works with your current setups

[A Former User]

Is it possible to use horizontal layout instead vertical?

[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