Looking for an easy step-by-step guide to build a weather widget

[Sereby]

Greetings! This is my first post; please forgive me if it’s in the wrong location.

I have been trying for hours to get the weather widget in a number of skins to work. I’ve read at least a dozen tutorials, but nothing in those actually worked.

Is there a simple guide I can follow to creat a weather widget? My main problem, I think, is getting the syntax correct. I also read somewhere that Rainmeter no longer uses weather codes and just uses your zip code. Even with this information, I have no idea how to properly setup the .ini file.

I’m sorry - I’m a total noob. Can anyone please help?

[SilverAzide]

Greetings! This is my first post; please forgive me if it’s in the wrong location.

I have been trying for hours to get the weather widget in a number of skins to work. I’ve read at least a dozen tutorials, but nothing in those actually worked.

Is there a simple guide I can follow to creat a weather widget? My main problem, I think, is getting the syntax correct. I also read somewhere that Rainmeter no longer uses weather codes and just uses your zip code. Even with this information, I have no idea how to properly setup the .ini file.

I’m sorry - I’m a total noob. Can anyone please help?

If you are a total noob, then creating a weather skin yourself is going to be a substantial challenge, to say the least. Part of your problem appears to be that you are looking at old weather skins that no longer work. I would suggest you check the list of skins here, Weather Skins, marked with a green dot. These are all confirmed to work. Most all weather.com-based skins now require your latitude and longitude coordinates, NOT weather codes or zip codes.

If you find a skin you like, use and/or modify that one instead of trying to create your own from scratch.

One skin that you can use as a tutorial is this one, Weather.com - Parsing the V3 JSON. It is straightforward and demonstrates a number of features and techniques you can use with Rainmeter.

[Sereby]

Thank you very much for the advice! I’ve already started to reverse engineer some of the skins from the link you provided, and it’s not as intimidating as I had expected.

[eclectic-tech]

1) Download: "@includeFiles.zip". Save it to your computer. This package will be extracted after you create a new skin.

2) Click 'Create new skin' from Manage dialog (folder+ icon)

createnewskin.png

A) Click 'Add folder', and enter the name as "WeatherTutorial"

createnewskinfolder.jpg

B) Click '@Resources' to add that folder to "WeatherTutorial"

createresourcesfolder.jpg

C) Click 'Add skin', and enter the name as "WeatherTutorial.ini"

addskin.jpg

D) Click 'Close' ... Rainmeter will Refresh and open the Manage dialog window

3) The Manage dialog will show the new folder "WeatherTutorial", a new skin in that folder "WeatherTutorial.ini", and a '@Resources' sub-folder.

managelist.jpg

4) Before you begin to edit the code, extract all of the files from "@includeFiles.zip" you downloaded above to "Skins\WeatherTutorial\@Resources"

5) From the Manage dialog, select "WeatherTutorial.ini" and click the 'Edit' button to open the file in your text editor

editnewskin.jpg

6) The code that is already in the file contains the basic sections for a working skin:
one [Rainmeter] section
one [MetaData] section
one [Variables] section
and a [MeterString]

NOTE: A valid skin MUST contain at least one METER

You are now ready to create a weather skin. The files you extracted to "@Resources" contain all of the MEASURES need to return the weather data for the skin. All you need to do is add @include statements to include those MEASURES in your skin, and create METERS to display the information.

7) Add DynamicWindowSize=1 to the [Rainmeter] section; skins that return data using the WebParser will not have data until the WebParser reads the URL. By adding this line, the skin can adjust it's size once the data is available; otherwise displayed information may not be visible or partially cut off.

8) Add the weather variables and language files to the [Variables] section.

addvariables.jpg

9) Add the weather measures file. Note: there are several measure files based on the number of days of weather data desired. I would recommend using the least number of days you need. In this skin it is 3 days of data: "WeatherComJSONMeasures3Day.inc".

addmeasures.jpg

10) At some point in the afternoon, the forecast high temperature is removed by TWC. You need to check this value, and if empty, replace the information with night values.
Add [MeasureAfternoon] section to test for the absence of data.

Code: Select all

; At some point in the afternoon, the forecasted high temperature is removed by TWC
; You need to check this value, and if empty, replace the information with alternate values
[MeasureAfternoon]
Measure=String
String=[@ForecastTodayDayTemperature]
IfMatch=^$
IfMatchAction=[!SetOption meterConditions TooltipText "#LowTonight#: [*@ForecastTodayNightTemperature*]#CRLF##Humidity#: [*@CurrentHumidity*]%#CRLF##Wind#: [*@CurrentWindSpeed*] [*@UnitsSpeed*]"]
IfNotMatchAction=[!SetOption meterConditions TooltipText "#High#: [*@ForecastTodayDayTemperature*] / #Low#: [*@ForecastTodayNightTemperature*]#CRLF##Humidity#: [*@CurrentHumidity*]%#CRLF##Wind#: [*@CurrentWindSpeed*] [*@UnitsSpeed*]"]
DynamicVariables=1

addafternoontest.jpg

At this point you have a skin that will return all of the weather data in MEASURES. You can verify everything is working by loading the skin and opening the log and looking at SKINS tab and the "WeatherTutorial" skin's measure values.

measurevalues.jpg

The last step is to create METERS to display the MEASURES data. This is where you personalize how the information is displayed.

I have included 3 meters to display a condition icon, the current temperature, and the current condition text which has a pop-up tool tip containing additional details.

11) Add the code for the three meters by copying this code and pasting it in skin code at the bottom. You can delete [MeterString] section if desired.

Code: Select all

; If you want to display the associated weather icon, you should add the icon images to "{YourSkinName}\@Resources\WeatherIcons" folder to be used here
[MeterConditionIcon]
Meter=Image
MeasureName=@CurrentIcon
DynamicVariables=1
ImageName=#@#WeatherIcons\%1.png
X=5
Y=5

[MeterCurrentTemperature]
Meter=String
MeasureName=@CurrentTemperature
MeasureName2=@LocationName
DynamicVariables=1
X=5R
Y=5r
FontColor=255,255,255,255
FontSize=36
Text="%1°[@UnitsTemperature]"
SolidColor=0,0,0,1
LeftMouseUpAction=["Shell:AppsFolder\Microsoft.BingWeather_8wekyb3d8bbwe!App"]
ToolTipText="Left-click to open Win10 Weather for %2"

[meterConditions]
Meter=STRING
MeasureName=@CurrentConditions
X=18
Y=2R
H=18
FontColor=255,255,255,255
FontSize=12
StringStyle=BoldItalic
SolidColor=0,0,0,1
Text=%1
ToolTipText="High: [@ForecastTodayDayTemperature] / Low: [@ForecastTodayNightTemperature]#CRLF##Humidity#: [@CurrentHumidity]%#CRLF##Wind#: [@CurrentWindSpeed] [@UnitsSpeed]"

You are done coding...

addmeters.jpg

12) Save the file. Open the Manage dialog and select 'Refresh All'.

13) Load "WeatherTutorial\weathertutorial.ini" skin and start customizing!

weathertutorial.png

ADDENDUM:
Weather Tutorial RMSKIN Package

Weather Tutorial_1.2020.09.07.rmskin

Skin Code: WeatherTutorial,ini

WeatherTutorial.ini

WeatherIcons

WeatherIcons.zip

[Alex88]

Excellent guide ET - Even if an author doesn't plan to use all the @include files currently in their config, one option could be placing them all in a separate folder within the @Resources folder, as it would keep the @Resources folder tidy, and still allow for future expansion, be it by the original author or variations by others.

WeatherFolder.PNG

I'll try it further when I'm back home, but to move the @include files like such, I believe it would just change the chosen @include file paths in the [Variables] section and the path for ImageName for whichever meter(s) is(are) to show the weather icons, for example:

Code: Select all

[Variables]
 ...
 @includeVariables=#@#Weather\WeatherComJSONVariables.inc
 @includeLanguageVariables=#@#Weather\WeatherComJSONLanguage.inc
 @includeMeasures=#@#Weather\WeatherComJSONMeasures3Day.inc

[MeterConditionIcon]
 ...
 ImageName=#@#Weather\WeatherIcons\%1.png

Would anything need to be changed in the include files themselves?

[SilverAzide]

Would anything need to be changed in the include files themselves?

Nope, they can be placed anywhere, so all that's needed are the tweaks you made to reference them.

[eclectic-tech]

Excellent guide ET - Even if an author doesn't plan to use all the @include files currently in their config, one option could be placing them all in a separate folder within the @Resources folder, as it would keep the @Resources folder tidy, and still allow for future expansion, be it by the original author or variations by others.
WeatherFolder.PNG
I'll try it further when I'm back home, but to move the @include files like such, I believe it would just change the chosen @include file paths in the [Variables] section and the path for ImageName for whichever meter(s) is(are) to show the weather icons, for example:

Code: Select all

[Variables]
 ...
 @includeVariables=#@#Weather\WeatherComJSONVariables.inc
 @includeLanguageVariables=#@#Weather\WeatherComJSONLanguage.inc
 @includeMeasures=#@#Weather\WeatherComJSONMeasures3Day.inc

[MeterConditionIcon]
 ...
 ImageName=#@#Weather\WeatherIcons\%1.png

Would anything need to be changed in the include files themselves?

Thanks Alex88

As SilverAzide mentioned, only the path used in the @includes would need to be changed. Also 'ImageName=' references if you put those images in the same sub-folder.

I usually DO keep those files in a sub-folder in @Resources for that very reason... it keeps things less cluttered.

It is a personal preference, and as you noticed, wherever you place the files does not affect how the measure names are used in the skin, only how they are @included in the [Variables] section. My 'WeatherIcons' folder is usually in my '@Resources\Images' folder; again, just for neatness.

I found that it is less confusing to copy ALL of the WeatherCom... includes into @Resources (or a sub-folder). When an update is needed, I don't have to try to remember which file I used in a particular weather skin, all of them are there and simply will not be used by the skin.

[Yincognito]

1) Download: "@includeFiles.zip". Save it to your computer. This package will be extracted after you create a new skin.

2) Click 'Create new skin' from Manage dialog (folder+ icon)createnewskin.png
A) Click 'Add folder', and enter the name as "WeatherTutorial"createnewskinfolder.jpg
B) Click '@Resources' to add that folder to "WeatherTutorial"createresourcesfolder.jpg
C) Click 'Add skin', and enter the name as "WeatherTutorial.ini"addskin.jpg
D) Click 'Close' ... Rainmeter will Refresh and open the Manage dialog window
[...]

Excellent turorial, eclectic-tech! In my view, this should be posted somewhere in the Tips & Tricks section so that it's easy to see and link to whenever someone who just started with Rainmeter asks such questions. Here it will be "lost" in the thousands of other posts and will help just one user; there it could be used by more users and be "always on top", so to speak. Even a link to this in jsmorley's post regarding Weather.com could be helpful, as it's the go-to for everyone dealing with weather skins nowadays.

[jsmorley]

Yes, it's a really good tutorial. Eclectic-Tech, maybe you can re-create this as a stand-alone post in "Tips % Tricks / Featured Guides", where it will be in the logical place and reasonably easy to find. I do want to try and boil up all the many posts on this subject into a select few that offer the most benefit and are something a new user is likely to tumble onto. I'd rather that you remain the author of this, it's really good work.

[eclectic-tech]

Thanks, I will look at adding this to Tips and I will add a link to JSMorley's Weather.com for sure!

That may take a day or two since I would like it to follow the style of the current examples and perhaps add actual code 'text' elements instead of simply images of the code.