Magic Mirror Redesign WIP :D

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