Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    1. Home
    2. earlman
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.
    E
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 16
    • Best 2
    • Groups 0

    earlman

    @earlman

    5
    Reputation
    659
    Profile views
    16
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    earlman Follow

    Best posts made by earlman

    • Magic Mirror Redesign WIP :D

      This is how it currently looks

      0_1558561855468_v0.1.0.PNG

      This is what I’m planning for the eventual v1.0.0 release:

      0_1558561881000_v1.0.0-preview.png

      If you’re interested in how I did this, let me know. I dove pretty deep into the development. Here’s some not-so-apparent features I’ve added:

      • Refactored the Layout in main.css to use CSS Grid
        • This allows for a more flexible layout that’s easier to work with
      • Modified MMM-Wallpaper to load images from Pexels
      • Using two instances of MMM-Todoist to load my “Daily Highlight” for the day
      • After 6:00pm, changes the Daily Highlight to tomorrow’s highlight
      posted in Showcase
      E
      earlman
    • Thread on Documentation

      @MichMich
      I think it would be a good idea to put a little more visibility on documentation in the forums so that we could get an idea what would be the most helpful for the community. I have some energy to work on this (sent a couple PRs earlier).

      Would it be possible to get “Documentation” as category or subcategory? It could probably work as a thread but it seems like I don’t have any posting permissions in the categories where it’s relevant

      posted in General Discussion
      E
      earlman

    Latest posts made by earlman

    • RE: Magic Mirror Redesign WIP :D

      @bravooscar
      try this:

      :root {
        /**** COLOR ****/
        --color-text: #fff;
        --color-background: black;
      
        /**** TYPOGRAPHY ****/
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
        --base: 20px;
        --text-scale: 1.5;
        --text-xs: calc(var(--base) / var(--text-scale));
        --text-sm: var(--base);
        --text-md: calc(var(--text-sm) * var(--text-scale));
        --text-lg: calc(var(--text-md) * var(--text-scale));
        --text-xl: calc(var(--text-lg) * var(--text-scale));
        --text-2xl: calc(var(--text-xl) * var(--text-scale));
        --text-3xl: calc(var(--text-2xl) * var(--text-scale));
      
        /**** SPACING ****/
        --grid-gap: 1rem;
        --outside-margin: 4rem;
      }
      
      html {
        cursor: none;
        overflow: hidden;
        background: var(--color-background);
        user-select: none;
        font-size: var(--base);
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        background: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: var(--color-text);
        opacity: 0.4;
      }
      
      .normal {
        color: var(--color-text);
        opacity: 0.7;
      }
      
      .bright {
        color: var(--color-text);
        opacity: 1;
      }
      
      .xsmall {
        font-size: var(--text-xs);
        line-height: 1.4;
      }
      
      .small {
        font-size: var(--text-sm);
        line-height: 1.4;
      }
      
      .medium {
        font-size: calc(var(--text-md));
        line-height: 1.4;
      }
      
      .large {
        font-size: calc(var(--text-lg));
        line-height: 1;
      }
      
      .xlarge {
        font-size: calc(var(--text-xl));
        line-height: 1;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: var(--font-secondary), sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: var(--font-primary), sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: var(--font-primary), sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: 1rem;
        font-family: var(--font-primary), Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: 30px;
      }
      
      .region.bottom .module {
        margin-top: 30px;
        margin-bottom: 0;
      }
      
      .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .pre-line {
        white-space: pre-line;
      }
      
      /**
       *
       * LAYOUT STUFF
       *
       */
      .region {
        width: 100%;
      }
      
      .region.fullscreen {
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
      }
      .region.fullscreen * {
        pointer-events: auto;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      
      body {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-rows: repeat(5, minmax(0, max-content));
        padding: var(--outside-margin);
        place-items: stretch;
        height: 100vh;
      }
      
      .top.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .top.bar > .container {
        grid-column: 1 / -1;
      }
      
      .bottom.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .bottom.bar > .container {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      
      .bottom.bar > .bottom {
          grid-row: 1;
      }
      
      .left {
        grid-column: 1 / 2;
      }
      
      .right {
        grid-column: -1 / -2;
      }
      
      /* for testing */
      
      .region {
        /* border: 1px solid white; */
      }
      
      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      @bravooscar

      thanks for the screenshot. try using this css for your main.css

      :root {
          /**** COLOR ****/
          --color-text: #fff;
          --color-background: black;
      
          /**** TYPOGRAPHY ****/
          --font-primary: "Roboto Condensed";
          --font-secondary: "Roboto";
          --base: 20px;
          --text-scale: 1.5;
          --text-xs: calc(var(--base) / var(--text-scale));
          --text-sm: var(--base);
          --text-md: calc(var(--text-sm) * var(--text-scale));
          --text-lg: calc(var(--text-md) * var(--text-scale));
          --text-xl: calc(var(--text-lg) * var(--text-scale));
          --text-2xl: calc(var(--text-xl) * var(--text-scale));
          --text-3xl: calc(var(--text-2xl) * var(--text-scale));
      
          /**** SPACING ****/
          --grid-gap: 1rem;
          --outside-margin: 4rem;
      }
      
      html {
        cursor: none;
        overflow: hidden;
        background: var(--color-background);
        user-select: none;
        font-size: var(--base);
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        background: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: var(--color-text);
        opacity: 0.4;
      }
      
      .normal {
        color: var(--color-text);
        opacity: 0.7;
      }
      
      .bright {
        color: var(--color-text);
        opacity: 1;
      }
      
      .xsmall {
        font-size: var(--text-xs);
        line-height: 1.4;
      }
      
      .small {
        font-size: var(--text-sm);
        line-height: 1.4;
      }
      
      .medium {
        font-size: calc(var(--text-md));
        line-height: 1.4;
      }
      
      .large {
        font-size: calc(var(--text-lg));
        line-height: 1;
      }
      
      .xlarge {
        font-size: calc(var(--text-xl));
        line-height: 1;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: var(--font-secondary), sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: var(--font-primary), sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: var(--font-primary), sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: 1rem;
        font-family: var(--font-primary), Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: 30px;
      }
      
      .region.bottom .module {
        margin-top: 30px;
        margin-bottom: 0;
      }
      
      .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .pre-line {
        white-space: pre-line;
      }
      
      /**
       *
       * LAYOUT STUFF
       *
       */
      .region {
        width: 100%;
      }
      
      .region.fullscreen {
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
      }
      .region.fullscreen * {
        pointer-events: auto;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      
      body {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-rows: repeat(5, minmax(0, max-content));
        padding: var(--outside-margin);
        place-items: stretch;
        height: 100vh;
      }
      
      .top.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .top.bar > .container {
        grid-column: 1 / -1;
      }
      
      .bottom.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .bottom.bar > .container {
        grid-column: 1 / -1;
      }
      
      .left {
        grid-column: 1 / 2;
      }
      
      .right {
        grid-column: -1 / -2;
      }
      
      .region {
        /* for testing */
        /* border: 1px solid white;  */
      }
      
      
      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      @aarish could you post some screenshots?

      I’ve updated the main.css file here:
      https://github.com/foundations-design/WhiteLight/blob/master/css/main.css

      I think the part that’s relevant to your issue is from “Layout Stuff” down (line 144 in the main.css file)

      posted in Showcase
      E
      earlman
    • Thread on Documentation

      @MichMich
      I think it would be a good idea to put a little more visibility on documentation in the forums so that we could get an idea what would be the most helpful for the community. I have some energy to work on this (sent a couple PRs earlier).

      Would it be possible to get “Documentation” as category or subcategory? It could probably work as a thread but it seems like I don’t have any posting permissions in the categories where it’s relevant

      posted in General Discussion
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      @dbinott @jcmd13 @RuKeBo @Mykle1

      Add

      .top.bar > .container {
          grid-column: 1 / -1;
      }
      

      to your main.css.

      I think that’ll do the trick. I don’t have any modules with notifications installed atm, so if somebody could post a screenshot of how that looks (after adding the above CSS), it would be a big help

      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      HI GUYS,

      Sorry I’ve been MIA. Recently moved to a new condo, so I’ve been busy with that. Finally have some time to take a look at this, so expect some updates in the near future.

      Thank you all for the interest ☺

      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

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

      0_1567482018586_3CCED9E8-17AE-40BA-9496-BB176E0D3196.jpeg

      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      @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

      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

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

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

      posted in Showcase
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      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.

      posted in Showcase
      E
      earlman