MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    1. Home
    2. xTITUS MAXIMUSx
    X
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 7
    • Best 1
    • Controversial 0
    • Groups 0

    xTITUS MAXIMUSx

    @xTITUS MAXIMUSx

    1
    Reputation
    8
    Profile views
    7
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    xTITUS MAXIMUSx Unfollow Follow

    Best posts made by xTITUS MAXIMUSx

    • RE: Change background image based on time of day

      @Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!

      posted in Development
      X
      xTITUS MAXIMUSx

    Latest posts made by xTITUS MAXIMUSx

    • Default weather color change

      I am posting to hopefully solve the problem and some headache of changing the color or size to all the components for the default weather module. Below are all the sections with a short description of what they are. Make sure to place this code in the custom CSS file. Enjoy!

      .dimmed {
      color: DarkSlateGrey;  /* Feels like Temp section */
      }
      
      .module-header {
      color: DarkSlateGrey; /* Waether Forecase City, State section */
      }
      
      .dimmed.wi-strong-wind + span {
      color: DarkSlateGrey; /* text for the wind symbol */
      }
      
      .dimmed.wi-strong-wind {
      color: DarkSlateGrey; /* Wind symbol */
      }
      
      .weather .wi-sunset + span {
      color: DarkSlateGrey; /* sunset time */
      }
      
      .weather .wi-sunset {
      color: DarkOrange; /* sunset symbol */
      }
      
      .weather .wi-sunrise + span 
      color: DarkSlateGrey; /* sunrise time */
      }
      
      .weather. .wi-sunrise {
      color: DarkYellow; /* sunrise symbol */
      }
      
      .weather .day {
      color: DarkSlateGray; /* days list */ 
      }
      
      .weather .weathericon + span {
      color: DarkSlateGray; /* current temp */
      }
      
      .weather .weathericon {
      color: DarkSlateGray; /* icon nect to current temp (sets all icons the same color) */
      }
      
      .weather .min-temp {
      color: DarkSlateGray; /* minimum temp */
      }
      
      .weather .max-temp {
      color: DimGray; /* maximum temp */
      }
      
      

      MMM-Weather.png

      posted in Custom CSS
      X
      xTITUS MAXIMUSx
    • RE: Change background image based on time of day

      @Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!

      posted in Development
      X
      xTITUS MAXIMUSx
    • RE: Help creating background module to change on set time of the day

      @xTITUS-MAXIMUSx nvm… after reviewing my mistakes I actually got it working

      Module.register("MMM-CSSswitch", {
            
          defaults: {
      	morning_start: 5,
              morning_stop: 12,
      	noon_start: 12,
              noon_stop: 23,
          },    
      
          //Do I still need to load the custom.css?
          getStyles: function() {
              return ["MMM-CSSswitch.css"];
          },
      
          // Define start sequence.
          start: function() {
      	Log.info("Starting module: " + this.name);
      
      
      
      	// Schedule update interval.
      	var self = this;
              self.updatecssswitch();
      	setInterval(function() {
      	self.updatecssswitch();
      	}, 5000);
          },
          
          updatecssswitch: function() {
              var currentTime = new Date().getHours();
              var body = document.querySelector('morning');
      
              if ( currentTime >= this.config.morning_start && currentTime < this.config.morning_end ) {
                  document.body.className = "morning";       
              }
      		
      	else if ( currentTime >= this.config.noon_start && currentTime < this.config.noon_stop ) {
                  document.body.className = "noon";
              }
      
              else {
                   document.body.className = "night";       
              }
          }
      });
      

      CSS

      .morning {
        background-image: url("morning.png");
        margin: 0; 
        height: 100%;
        width: 100%;
      }
      
      .noon {
        background-image: url("noon.jpg");
        margin: 0; 
        height: 100%;
        width: 100%;
      }
      
      .night {
        background-image: url("night.jpg");
        margin: 0; 
        height: 100%;
        width: 100%;
      }
      

      Big thanks to @Piranha1605 and his github for a template.

      posted in Development
      X
      xTITUS MAXIMUSx
    • RE: Change background image based on time of day

      @Piranha1605 Cool! how would one do that? Still a noob.

      posted in Development
      X
      xTITUS MAXIMUSx
    • RE: Change background image based on time of day

      @Piranha1605

      Not exactly what I am looking for. I tried to take @I_Am_Anthony code and tweak it to my needs but, no success. maybe you’ll review my code? 🙂

      posted in Development
      X
      xTITUS MAXIMUSx
    • RE: Change background image based on time of day

      I know this is an old topic but did you get this module finished? if do you have a git hub?

      posted in Development
      X
      xTITUS MAXIMUSx
    • Help creating background module to change on set time of the day

      Hi! Sooo defiantly new to all this module jazz and I am trying to build a module that sets the background based on the time of the day. What I have so far is this.

      Module.register("MMM-Background", {
      
          defaults: {
      	morning_start: 6,
              morning_stop: 11,
      	noon_start: 12,
              noon_stop: 16,
              morning_background: "morning.jpg",
              noon_background: "noon.jpg",
      	night_background: "night.jpg"
          },
      	
      	//CSS file
      	getStyles: function() {
              return ["MMM-Background.css"];
          },
      
          // Define start sequence.
          start: function() {
      	Log.info("Starting module: " + this.name);
      
      
      
      	// Schedule update interval.
      	var self = this;
              self.updateBackground();
      	setInterval(function() {
      		self.updateBackground();
      	}, 600000);
          },
      
          updateBackground: function() {
              var currentTime = new Date().getHours();
              var body = document.querySelector('body');
      
              if ( currentTime >= this.config.morning_start && currentTime =< this.config.morning_stop )  {
                  body.className = this.config.morning_background;
              }
      
              else if ( currentTime >= this.config.noon_start && currentTime =< this.config.noon_stop )  {
                  body.className = this.config.noon_background;
              }
      		
      		else { 
      			body.className = this.config.night_background;
      		}
          }
      });
      

      CSS file

      .morning_background {
        margin: 0; 
        height: 100%;
        width: 100%;
      }
      
      .noon_background {
        margin: 0;
        height: 100%;
        width: 100%;
      }
      
      .night_background {
        margin: 0;
        height: 100%;
        width: 100%;
      }
      

      Any guidance would be appreciated. I noticed on some other users modules they use a node-js helper? do I need that here?

      posted in Development
      X
      xTITUS MAXIMUSx