Throwing down the gauntlet

Mykle1

My 1st mirror is nearly perfect thanks to some very talented and generous people here. If I mention Strawberry-3.141 again, people are going to start talking about “us”, but this dude is a miracle worker.

So, here it is. What I thought was my final rendition of my layout, isn’t. As you can see, I was using the clock, currentweather and weatherforecast modules. I had currentweather under the clock and weatherforecast to the right. That was ok.

But then I discovered the WunderGround weather module. With it, I get my weather from a weather station less than a mile from my home, instead of a generic or centrally located local station. And, I find the color icons visually stunning. But there is a small(?) problem. The current weather and the weather forecast within this module are tied together (I think), so I can’t put the current weather under the clock, as in the picture above.

Below is a picture of how I would like my mirror to look. The simple answer (I think) would be to have the nice color icon in the currentweather module (if that’s possible). Also, you might have noticed that I edited out (of the picture) the predicted rainfall column on the far right of the weather forecast and moved the “umbrella” icon over the percentage column, strictly for the sake of spacing.

The current weather icon is what I mostly desire. I can certainly live without the removal of the predicted rainfall amount column.

Any challengers? :thinking:

Seriously, thanks for all the help and patience you have all shown to me. :thumbsup:

Mykle1

Ok, ok, this might appear creepy, but it’s just my way of saying thank you. I believe in giving credit where credit is due.

Strawberry 3.141 has come to my aid once again, and in the dead of night (at least for him). Honestly, he is simply amazing at his craft. My custom.css file is not really mine at all. It’s virtually all his doing. Every time I came up with something I wanted to change (and was impossible for me), and posted my request, this dude swoops in like Superman and saves the day. I posted the above request and within minutes he was working on it. And a few short minutes later he had done EXACTLY what I had hoped for. Who does that?

I was happy (at first) with using the default modules and some 3rd party modules but reading the inspiring posts here made me think, “What if I could have it my way?”

So, for your kindness and generosity, and for your amazing knowledge and talent, I thank you.

The creepy part? See compliments.

cowboysdude

Yeah he has done that a lot for me too!! He’s a good guy!

strawberry 3.141

if someone wants to achieve the same, actually there is the module wunderground twice (center and right), but once the forecast and the other time the current weather is hidden

.region.top.center .MMM-WunderGround table.small, //selector for forecast
.region.top.right .MMM-WunderGround table:not(.small), //selector for current weather
.region.top.right .MMM-WunderGround table.small td:nth-child(6) { //selector for rain amount
  display:none;
}

Mykle1

@strawberry-3.141 said in Throwing down the gauntlet:

if someone wants to achieve the same, actually there is the module wunderground twice (center and right), but once the forecast and the other time the current weather is hidden

The dude makes it sound so simple.

You’re awesome! Take the day off. I promise, I won’t post any questions today. :smiley:

lolobyte

@strawberry-3.141

Hi, @strawberry-3-141 , i’m missing something in your code.

Where is the second curved bracket? Is somewhere more code?

strawberry 3.141

@lolobyte no that’s all, you can combine selectors with a comma. the open bracket is in line 3 and the closing bracket in line 5

it’s the short form for

.region.top.center .MMM-WunderGround table.small {
  display:none;
}
.region.top.right .MMM-WunderGround table:not(.small) {
  display:none;
}
.region.top.right .MMM-WunderGround table.small td:nth-child(6) {
  display:none;
}

lolobyte

@strawberry-3.141

… and all for custom css i think!

jproehl

Hi:

Newbie here: I really like the design layout you’ve come up with - Kudos! However, can’t make heads or tails out of exactly what code I put where? Are the lines you list placed in config.js or in custom.css? If possible, can you post the part of your config.js and/or custom.css files (with appid and any other personal info erased, of course) that gives this display?

Thanks!
jproehl

strawberry 3.141

@jproehl all I posted here goes into the custom.css file

jproehl

@strawberry-3.141 What do you put into your config.js file?

Mykle1

@jproehl said in Throwing down the gauntlet:

I really like the design layout you’ve come up with - Kudos!

Thanks! It’s just how I pictured it, but it only happened through the goodwill of Strawberry 3.141

jproehl

@Mykle1 and/or @strawberry-3.141: I’m still having problems getting things to look like Mykle’s. If I just put those 9 lines in my custom.css file and have no reference to the MMM-WunderGround module in my config.js file, I get nothing displayed for my weather info. Does this mean that the custom.css file isn’t being read? Do I have to place my custom.css file somewhere other than pi/MagicMirror/css/?

When I add references to the MMM-WunderGround module in config.js, I get the weather info, but I do not get the format you have. Presumably the parameters set in the module reference override the custom.css info in some way.

That’s why I was wondering what you have in your config.js file to initiate the MMM-WunderGround module.

Mykle1

@jproehl said in Throwing down the gauntlet:

I’m still having problems getting things to look like Mykle’s.

My design/layout ideas are in high demand. :thumbsup_tone1:

This is my entry in the config. Yes, there are 2 entries. One is for the current weather and one is for the weather forecast, only seperate and in different locations. You still have to enter what Strawberry told you to enter in your custom.css file. Then all should be well.

{
    			module: 'MMM-WunderGround',
    			position: 'top_center',
    			config: {
        		apikey: 'YOUR API KEY', // private; don't share!
        		pws: 'pws:KNYNEWYO103', // Richmondtown Weather Station - Very Cool
			currentweather: 1,
        		coloricon: true,
        		hourly: '0',
        		fctext: '1',
        		fcdaycount: "10",
        		fcdaystart: "0",
        		hourlyinterval: "2",
        		hourlycount: "1",
			animationSpeed: 5000,
        		alerttime: 10000,
        		alerttruncatestring: "english:",
    			roundTmpDecs: 0,
    			UseCardinals: 1,
    			layout: "vertical",
			windunits: "mph",
    			sysstat: "0"
			}
		},
		{
    			module: 'MMM-WunderGround',
    			position: 'top_right',
    			config: {
        		apikey: 'YOUR API KEY AGAIN', // private; don't share!
        		pws: 'pws:KNYNEWYO103', // Richmondtown Weather Station - Very Cool
			currentweather: 0,
        		coloricon: true,
        		hourly: '1',
        		fctext: '1',
        		fcdaycount: "10",
        		fcdaystart: "1",
        		hourlyinterval: "2",
        		hourlycount: "1",
			animationSpeed: 5000,
        		alerttime: 10000,
        		alerttruncatestring: "english:",
    			roundTmpDecs: 0,
    			UseCardinals: 1,
    			layout: "vertical",
			windunits: "mph",
    			sysstat: "0"
			}
		},

jproehl

@Mykle1 Thanks! I’m much closer. There are a couple of minor differences that I’m trying to ferret out:

I had to change a few lines in your module call to MMM-WunderGround for the current weather - I zeroed out the fctext, fcdaycount, hourlyinterval and hourlycount otherwise I got the forecast right below the current conditions in addition to the one at upper-right
Under my current conditions color icon/temperature, I see a line with two thermometers and an umbrella (i.e. the header for the forecasts) which I have no idea how to get rid of. I believe the changes I made under 1) should have removed any call for a forecast.
I do not get any color changes like you have in the forecast at the upper right. Did you have to change something else to get those?

Thanks a bunch!

Mykle1

@jproehl said in Throwing down the gauntlet:

I believe the changes I made under 1) should have removed any call for a forecast.

This page will explain the effects of the individual config changes that you made.
https://github.com/RedNax67/MMM-WunderGround

Mykle1

@jproehl said in Throwing down the gauntlet:

I do not get any color changes like you have in the forecast at the upper right. Did you have to change something else to get those?

This goes in your custom.css file for the coloring that I have. You can change the colors to your liking

.MMM-WunderGround .max-temp {
  color: #f66;
}

.MMM-WunderGround .min-temp {
  color: #0ff;
}

.MMM-WunderGround .weather-icon {
  color: #f93;
}

.MMM-WunderGround .day {
  color: #6f6;
}

jproehl

@Mykle1 and/or @strawberry-3.141:

Great, thanks for the color update, I’ll try that in a minute.

As for the current weather, I’ve been looking at the web page for MMM-WunderGround extensively. I don’t think all the changes I made to your current weather module call to WWW-WunderGround in your config.js were necessary, but I thought I should try to shut off ALL parameters that were possibly related to the forecast to see if I could get rid of that last line of header symbols used for the forecast. None did, because I still have those 3 icons (max thermometer, min thermometer and the umbrella) right below the current conditions icon and current temperature.

Mykle1

@jproehl

Ok, well that is beyond me but I’ll go out on a limb here and say that Strawberry will be able to help you with that. That’s a custom.css thing and I do believe he is the resident expert. When he does fix it for you (because I am sure that he will) be sure to post the css entry so that I can see how it looks on mine. Right now, I sorta like the little icons

jproehl

@Mykle1 and/or @strawberry-3-141:
I suspect that Strawberry will straighten me out on this.Those additions to custom.css do not change my font colors. I wonder if I have an error somewhere that is interfering with the proper loading of the custom.css file. When I start the display, I see a flash of text, which I think lists node.js, that disappears very fast that might be an error message. But since it’s so fast I can’t tell.