Magic Mirror Redesign WIP :D

  • @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

  • Module Developer

    Looks so nice. I want to try yours.

  • 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.

  • Project Sponsor

    @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!!

  • @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
    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"



  • @smackenzie5 said in Magic Mirror Redesign WIP 😃:

    exels_key: [my API key was here],

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

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

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


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

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

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

  • @lavolp3 Yup, no problem 😃 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