Posts made by xTITUS MAXIMUSx

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 */
}

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

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

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

@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? :)

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

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?