MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    My First Magic Mirror

    Scheduled Pinned Locked Moved Show your Mirror
    18 Posts 8 Posters 18.8k Views 11 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L Offline
      Labzz
      last edited by

      It looks great! is it still running on a raspberry pi ?

      How did get the cpu load low while running all the different modules in the background ?!
      Hope to hear you soon!

      slametpsS 1 Reply Last reply Reply Quote 0
      • slametpsS Offline
        slametps @Labzz
        last edited by

        @Labzz yap, raspi 3 model B. set the update interval in minutes for modules that not required instant updates such as calendar (5 minutes), rss feed (15-30 minutes). The only module takes so much cpu is facial-recognition (run every 2 seconds).

        regards,

        Slamet PS

        Mykle1M 1 Reply Last reply Reply Quote 1
        • slametpsS Offline
          slametps @jseutens
          last edited by

          @jseutens I have no idea. I bought the mirror on local mirror store. It is the only type it sold.

          regards,

          Slamet PS

          1 Reply Last reply Reply Quote 0
          • slametpsS Offline
            slametps @Snille
            last edited by

            @Snille said in My First Magic Mirror:

            Looks great! Good reflection and see-through.
            If you want to share… :)
            What modules are you using and what customisation have you done?
            I can see the colours on the calendar appointments, how did you manage that?

            I will post more detail in picture later. I’m still on mobile :)

            regards,

            Slamet PS

            slametpsS M 2 Replies Last reply Reply Quote 0
            • slametpsS Offline
              slametps @slametps
              last edited by

              @slametps said in My First Magic Mirror:

              @Snille said in My First Magic Mirror:

              Looks great! Good reflection and see-through.
              If you want to share… :)
              What modules are you using and what customisation have you done?
              I can see the colours on the calendar appointments, how did you manage that?

              I will post more detail in picture later. I’m still on mobile :)

              0_1486652205674_DSC_0010-mod.jpg

              modifying custom.css (copy-paste from various forum posts) as following:

              html {
                cursor: none;
                overflow: hidden;
              }
              
              ::-webkit-scrollbar {
                display: none;
              }
              
              body {
                margin: 5px;
                position: absolute;
                height: calc(100% - 10px);
                width: calc(100% - 10px);
                background: #000;
                color: #fff;
                font-family: "Roboto Condensed", sans-serif;
                font-weight: 400;
                font-size: 2em;
                line-height: 1.5em;
                -webkit-font-smoothing: antialiased;
              }
              
              /**
               * Default styles.
               */
              
              .dimmed {
                color: #666;
              }
              
              .normal {
                color: #fff;
              }
              
              .bright {
                color: #fff;
              }
              
              .xsmall {
                font-size: 10px;
                line-height: 15px;
              }
              
              .small {
                font-size: 15px;
                line-height: 20px;
              }
              
              .medium {
                font-size: 25px;
                line-height: 30px;
              }
              
              .large {
                font-size: 60px;
                line-height: 60px;
              }
              
              .xlarge {
                font-size: 70px;
                line-height: 70px;
                letter-spacing: -3px;
              }
              
              .thin {
                font-family: Roboto, sans-serif;
                font-weight: 100;
              }
              
              .light {
                font-family: "Roboto Condensed", sans-serif;
                font-weight: 300;
              }
              
              .regular {
                font-family: "Roboto Condensed", sans-serif;
                font-weight: 400;
              }
              
              .bold {
                font-family: "Roboto Condensed", sans-serif;
                font-weight: 700;
              }
              
              .align-right {
                text-align: right;
              }
              
              .align-left {
                text-align: left;
              }
              
              header {
                text-transform: uppercase;
                font-size: 15px;
                font-family: "Roboto Condensed";
                font-weight: 400;
                border-bottom: 1px solid #666;
                line-height: 10px;
                padding-bottom: 5px;
                margin-bottom: 10px;
                color: #999;
              }
              
              sup {
                font-size: 50%;
                line-height: 50%;
              }
              
              /**
               * Module styles.
               */
              
              .module {
                margin-bottom: 20px;
              }
              
              .region.bottom .module {
                margin-top: 20px;
                margin-bottom: 0;
              }
              
              /**
               * Region Definitions.
               */
              
              .region {
                position: absolute;
              }
              
              .region.fullscreen {
                position: absolute;
                top: -50px;
                left: -50px;
                right: -50px;
                bottom: -50px;
              }
              
              .region.right {
                right: 0;
              }
              
              .region.top {
                top: 0;
              }
              
              .region.top .container {
                margin-bottom: 15px;
              }
              
              .region.top .container:empty {
                margin-bottom: 0;
              }
              
              .region.top.center,
              .region.bottom.center {
                left: 50%;
                -moz-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%);
              }
              
              .region.top.right,
              .region.top.left,
              .region.top.center {
                top: 100%;
              }
              
              .region.bottom {
                bottom: 0;
              }
              
              .region.bottom .container {
                margin-top: 15px;
              }
              
              .region.bottom .container:empty {
                margin-top: 0;
              }
              
              .region.bottom.right,
              .region.bottom.center,
              .region.bottom.left {
                bottom: 100%;
              }
              
              .region.bar {
                width: 100%;
                text-align: center;
              }
              
              .region.third,
              .region.middle.center {
                width: 100%;
                text-align: center;
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
              }
              
              .region.upper.third {
                top: 33%;
              }
              
              .region.middle.center {
                top: 50%;
              }
              
              .region.lower.third {
                top: 66%;
              }
              
              .region.left {
                text-align: left;
              }
              
              .region.right {
                text-align: right;
              }
              
              .region table {
                width: 100%;
                border-spacing: 0;
                border-collapse: separate;
              }
              
              /*
               * CALENDAR SPECIFIC
               */
              
              .fa.fa-calendar {
                color: #ff0000; /* Red */
              }
              .fa.fa-birthday-cake {
                color: #ff0000; /* Red */
              }
              .fa.fa-calendar-check-o {
                color: #ffff00; /* Yellow */
              }
              
              /*
               * WUFORECAST SPECIFIC
               */
              
              .wuforecast .max-temp {
                font-size: 15px;
                line-height: 15px;
                color: #f66;
              }
              
              .wuforecast .min-temp {
                font-size: 15px;
                line-height: 15px;
                color: #0ff;
              }
              
              .wuforecast .weather-icon {
                font-size: 15px;
                line-height: 15px;
                color: #f93;
              }
              
              .wuforecast .day {
                font-size: 15px;
                line-height: 15px;
                color: #6f6;
              }
              
              /*
               * FORECAST
               */
              
              .brightb {
              color: #55acee;
              }
              .currentweather .wi-sunrise {
              color: #ffd700;
              }
              .currentweather .wi-sunset {
              color: #ffa500;
              }
              .currentweather .wi-day-sunny {
              color: #ffff00;
              }
              .currentweather .wi-night-showers {
              color: #55acee;
              }
              .currentweather .wi-degrees {
              color: #415;
              }
              .currentweather .wi-rain {
              color: #55acee;
              }
              .currentweather .wi-showers {
              color: #55acee;
              }
              .currentweather .wi-night-showers {
              color: #55acee;
              }
              .currentweather .wi-night-alt-cloudy-windy {
              color: #aaa;
              }
              .currentweather .wi-night-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy {
              color: #aaa;
              }
              .currentweather .wi-day-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy-windy {
              color: #aaa;
              }
              .currentweather .wi-showers {
              color: #55acee;
              }
              .currentweather .wi-thunderstorm {
              color: #ff00ff;
              }
              .currentweather .wi-snow {
              color: #fff;
              }
              .currentweather .wi-fog {
              color: #999;
              }
              .currentweather .wi-night-clear {
              color: #fff;
              }
              .currentweather .wi-night-rain {
              color: #55acee;
              }
              .currentweather .wi-night-thunderstorm {
              color: #ff00ff;
              }
              .currentweather .wi-night-snow {
              color: #fff;
              }
              
              .weatherforecast .wi-sunrise {
              color: #ffd700;
              }
              .weatherforecast .wi-sunset {
              color: #ffa500;
              }
              .weatherforecast .wi-day-sunny {
              color: #ffff00;
              }
              .weatherforecast .wi-night-showers {
              color: #55acee;
              }
              .weatherforecast .wi-degrees {
              color: #415;
              }
              .weatherforecast .wi-rain {
              color: #55acee;
              }
              .weatherforecast .wi-showers {
              color: #55acee;
              }
              .weatherforecast .wi-night-showers {
              color: #55acee;
              }
              .weatherforecast .wi-night-alt-cloudy-windy {
              color: #aaa;
              }
              .weatherforecast .wi-night-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-day-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy-windy {
              color: #aaa;
              }
              .weatherforecast .wi-showers {
              color: #55acee;
              }
              .weatherforecast .wi-thunderstorm {
              color: #ff00ff;
              }
              .weatherforecast .wi-snow {
              color: #fff;
              }
              .weatherforecast .wi-fog {
              color: #999;
              }
              .weatherforecast .wi-night-clear {
              color: #fff;
              }
              .weatherforecast .wi-night-rain {
              color: #55acee;
              }
              .weatherforecast .wi-night-thunderstorm {
              color: #ff00ff;
              }
              .currentweather .wi-night-snow {
              color: #fff;
              }
              

              regards,

              Slamet PS

              1 Reply Last reply Reply Quote 4
              • cowboysdudeC Offline
                cowboysdude Module Developer
                last edited by

                Very nice job!!!

                1 Reply Last reply Reply Quote 0
                • Mykle1M Offline
                  Mykle1 Project Sponsor Module Developer @slametps
                  last edited by

                  @slametps

                  I only just saw this.

                  Well done sir!

                  Create a working config
                  How to add modules

                  1 Reply Last reply Reply Quote 0
                  • M Offline
                    MyMirror @slametps
                    last edited by

                    @slametps
                    It really looks nice. May i have also the config and more detailed information of your settings? How did you get the coloured signs in each line of your calender?
                    Greets

                    slametpsS 1 Reply Last reply Reply Quote 0
                    • slametpsS Offline
                      slametps @MyMirror
                      last edited by

                      @MyMirror said in My First Magic Mirror:

                      @slametps
                      It really looks nice. May i have also the config and more detailed information of your settings? How did you get the coloured signs in each line of your calender?
                      Greets

                      Here is my custom css (copy-paste from various posts in MM-forum):

                      html {
                        cursor: none;
                        overflow: hidden;
                      }
                      
                      ::-webkit-scrollbar {
                        display: none;
                      }
                      
                      body {
                        margin: 2px;
                        position: absolute;
                        height: calc(100% - 2px);
                        width: calc(100% - 2px);
                        background: #000;
                        color: #fff;
                        font-family: "Roboto Condensed", sans-serif;
                        font-weight: 400;
                        font-size: 2em;
                        line-height: 1.5em;
                        -webkit-font-smoothing: antialiased;
                      }
                      
                      /**
                       * Default styles.
                       */
                      
                      .dimmed {
                        color: #666;
                      }
                      
                      .normal {
                        color: #fff;
                      }
                      
                      .bright {
                        color: #fff;
                      }
                      
                      .xsmall {
                        font-size: 10px;
                        line-height: 15px;
                      }
                      
                      .small {
                        font-size: 15px;
                        line-height: 20px;
                      }
                      
                      .medium {
                        font-size: 25px;
                        line-height: 30px;
                      }
                      
                      .large {
                        font-size: 60px;
                        line-height: 60px;
                      }
                      
                      .xlarge {
                        font-size: 70px;
                        line-height: 70px;
                        letter-spacing: -3px;
                      }
                      
                      .thin {
                        font-family: Roboto, sans-serif;
                        font-weight: 100;
                      }
                      
                      .light {
                        font-family: "Roboto Condensed", sans-serif;
                        font-weight: 300;
                      }
                      
                      .regular {
                        font-family: "Roboto Condensed", sans-serif;
                        font-weight: 400;
                      }
                      
                      .bold {
                        font-family: "Roboto Condensed", sans-serif;
                        font-weight: 700;
                      }
                      
                      .align-right {
                        text-align: right;
                      }
                      
                      .align-left {
                        text-align: left;
                      }
                      
                      header {
                        text-transform: uppercase;
                        font-size: 15px;
                        font-family: "Roboto Condensed";
                        font-weight: 400;
                        border-bottom: 1px solid #666;
                        line-height: 10px;
                        padding-bottom: 5px;
                        margin-bottom: 10px;
                        color: #999;
                      }
                      
                      sup {
                        font-size: 50%;
                        line-height: 50%;
                      }
                      
                      /**
                       * Module styles.
                       */
                      
                      .module {
                        margin-bottom: 20px;
                      }
                      
                      .region.bottom .module {
                        margin-top: 20px;
                        margin-bottom: 0;
                      }
                      
                      /**
                       * Region Definitions.
                       */
                      
                      .region {
                        position: absolute;
                      }
                      
                      .region.fullscreen {
                        position: absolute;
                        top: -50px;
                        left: -50px;
                        right: -50px;
                        bottom: -50px;
                      }
                      
                      .region.right {
                        right: 0;
                      }
                      
                      .region.top {
                        top: 0;
                      }
                      
                      .region.top .container {
                        margin-bottom: 15px;
                      }
                      
                      .region.top .container:empty {
                        margin-bottom: 0;
                      }
                      
                      .region.top.center,
                      .region.bottom.center {
                        left: 50%;
                        -moz-transform: translateX(-50%);
                        -o-transform: translateX(-50%);
                        -webkit-transform: translateX(-50%);
                        -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
                      }
                      
                      .region.top.right,
                      .region.top.left,
                      .region.top.center {
                        top: 100%;
                      }
                      
                      .region.bottom {
                        bottom: 0;
                      }
                      
                      .region.bottom .container {
                        margin-top: 15px;
                      }
                      
                      .region.bottom .container:empty {
                        margin-top: 0;
                      }
                      
                      .region.bottom.right,
                      .region.bottom.center,
                      .region.bottom.left {
                        bottom: 100%;
                      }
                      
                      .region.bar {
                        width: 100%;
                        text-align: center;
                      }
                      
                      .region.third,
                      .region.middle.center {
                        width: 100%;
                        text-align: center;
                        -moz-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        transform: translateY(-50%);
                      }
                      
                      .region.upper.third {
                        top: 33%;
                      }
                      
                      .region.middle.center {
                        top: 50%;
                      }
                      
                      .region.lower.third {
                        top: 66%;
                      }
                      
                      .region.left {
                        text-align: left;
                      }
                      
                      .region.right {
                        text-align: right;
                      }
                      
                      .region table {
                        width: 100%;
                        border-spacing: 0;
                        border-collapse: separate;
                      }
                      
                      /*
                       * CALENDAR SPECIFIC
                       */
                      
                      .fa.fa-calendar {
                        color: #ff0000; /* Red */
                      }
                      .fa.fa-birthday-cake {
                        color: #ff0000; /* Red */
                      }
                      .fa.fa-calendar-check-o {
                        color: #ffff00; /* Yellow */
                      }
                      
                      fa.fa-calendar-o {
                        color: #ffff00; /* white */
                      }
                      
                      /*
                       * WUFORECAST SPECIFIC
                       */
                      
                      .wuforecast .max-temp {
                        font-size: 15px;
                        line-height: 15px;
                        color: #f66;
                      }
                      
                      .wuforecast .min-temp {
                        font-size: 15px;
                        line-height: 15px;
                        color: #0ff;
                      }
                      
                      .wuforecast .weather-icon {
                        font-size: 15px;
                        line-height: 15px;
                        color: #f93;
                      }
                      
                      .wuforecast .day {
                        font-size: 15px;
                        line-height: 15px;
                        color: #6f6;
                      }
                      
                      /*
                       * FORECAST
                       */
                      
                      .brightb {
                        color: #55acee;
                      }
                      .currentweather .wi-sunrise {
                        color: #ffd700;
                      }
                      .currentweather .wi-sunset {
                        color: #ffa500;
                      }
                      .currentweather .wi-day-sunny {
                        color: #ffff00;
                      }
                      .currentweather .wi-night-showers {
                        color: #55acee;
                      }
                      .currentweather .wi-degrees {
                        color: #415;
                      }
                      .currentweather .wi-rain {
                        color: #55acee;
                      }
                      .currentweather .wi-showers {
                        color: #55acee;
                      }
                      .currentweather .wi-night-showers {
                        color: #55acee;
                      }
                      .currentweather .wi-night-alt-cloudy-windy {
                        color: #aaa;
                      }
                      .currentweather .wi-night-cloudy {
                        color: #aaa;
                      }
                      .currentweather .wi-cloudy {
                        color: #aaa;
                      }
                      .currentweather .wi-day-cloudy {
                        color: #aaa;
                      }
                      .currentweather .wi-cloudy {
                        color: #aaa;
                      }
                      .currentweather .wi-cloudy-windy {
                        color: #aaa;
                      }
                      .currentweather .wi-showers {
                        color: #55acee;
                      }
                      .currentweather .wi-thunderstorm {
                      color: #ff00ff;
                      }
                      .currentweather .wi-snow {
                      color: #fff;
                      }
                      .currentweather .wi-fog {
                      color: #999;
                      }
                      .currentweather .wi-night-clear {
                      color: #fff;
                      }
                      .currentweather .wi-night-rain {
                      color: #55acee;
                      }
                      .currentweather .wi-night-thunderstorm {
                      color: #ff00ff;
                      }
                      .currentweather .wi-night-snow {
                      color: #fff;
                      }
                      
                      .weatherforecast .wi-sunrise {
                      color: #ffd700;
                      }
                      .weatherforecast .wi-sunset {
                      color: #ffa500;
                      }
                      .weatherforecast .wi-day-sunny {
                      color: #ffff00;
                      }
                      .weatherforecast .wi-night-showers {
                      color: #55acee;
                      }
                      .weatherforecast .wi-degrees {
                      color: #415;
                      }
                      .weatherforecast .wi-rain {
                      color: #55acee;
                      }
                      .weatherforecast .wi-showers {
                      color: #55acee;
                      }
                      .weatherforecast .wi-night-showers {
                      color: #55acee;
                      }
                      .weatherforecast .wi-night-alt-cloudy-windy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-night-cloudy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-cloudy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-day-cloudy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-cloudy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-cloudy-windy {
                        color: #aaa;
                      }
                      .weatherforecast .wi-showers {
                        color: #55acee;
                      }
                      .weatherforecast .wi-thunderstorm {
                      color: #ff00ff;
                      }
                      .weatherforecast .wi-snow {
                      color: #fff;
                      }
                      .weatherforecast .wi-fog {
                      color: #999;
                      }
                      .weatherforecast .wi-night-clear {
                      color: #fff;
                      }
                      .weatherforecast .wi-night-rain {
                      color: #55acee;
                      }
                      .weatherforecast .wi-night-thunderstorm {
                      color: #ff00ff;
                      }
                      .currentweather .wi-night-snow {
                      color: #fff;
                      }
                      
                      /*.clock .time {
                        color: #99F;
                      }*/
                      
                      .clock .date {
                      	color: #09F;
                      }
                      
                      .calendar .header {
                      	color: #F00;
                      }
                      
                      /*.newsfeed div.light.small.dimmed {
                        color: #F00;
                        font-size: 9px;
                      }*/
                      
                      .MMM-WunderGround .max-temp {
                        color: #f66;
                      }
                      
                      .MMM-WunderGround .min-temp {
                        color: #0ff;
                      }
                      
                      .MMM-WunderGround .weather-icon {
                        color: #f93;
                      }
                      
                      .MMM-WunderGround .day {
                        color: #6f6;
                      }
                      
                      /* aligns the table to the right */
                      .MMM-SystemStats table {
                        width: initial;
                        float: right;
                      }
                      
                      /* aligns all columns to the right within the table */
                      .MMM-SystemStats td {
                        text-align: right !important;
                      }
                      
                      .MMM-NetworkScanner ul .fa-ul li .fa-li {
                        float: left;
                      }
                      

                      regards,

                      Slamet PS

                      slametpsS 1 Reply Last reply Reply Quote 1
                      • slametpsS Offline
                        slametps @slametps
                        last edited by

                        @slametps it is my MM now.
                        0_1488092416195_MM-20170226_135322-smaller.jpg

                        regards,

                        Slamet PS

                        cowboysdudeC 1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy