This tutorial will walk you through the steps to create a basic weather skin. Once you finish this, it should be an easy, repeatable process to create a basic starting weather skin to which you can add as much detail as you desire.
Let's get started...
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) A) Click 'Add folder', and enter the name as "WeatherTutorial" B) Click '@Resources' to add that folder to "WeatherTutorial" C) Click 'Add skin', and enter the name as "WeatherTutorial.ini" 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. 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 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 be partially cut off.
Code: Select all
[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1Code: Select all
[Variables]
; Include weather settings and language variables
@includeVariables=#@#WeatherComJSONVariables.inc
@IncludeLanguageVariables="#@#WeatherComJSONLanguage.inc"Code: Select all
; MEASURES return some kind of value
; Include allow the addition of an external file with code that can be used in multiple skins
@IncludeMeasures=#@#WeatherComJSONMeasures3Day.incAdd [MeasureAfternoon] section to test for the absence of data.
Code: Select all
; 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 alternate values
[MeasureAfternoon]
Measure=String
String=[@ForecastTodayDayTemperature]
IfMatch=^$
IfMatchAction=[!SetOption meterConditions TooltipText "Low Tonight: [*@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
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. Note that we have not created any meters to display the data, so you will not see anything appear on your screen. However, you can see the data by opening the Rainmeter log, looking at the SKINS tab, and click the "WeatherTutorial" skin to see the measure values. 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. You can download the RMSKIN which contains a set of weather icons, or use your own images; add your icon images to "WeatherTutorial\@Resources\WeatherIcons" folder.
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 "WeatherTutorial\@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]"
13) Load "WeatherTutorial\weathertutorial.ini" skin and start customizing! ADDENDUM:
Weather Tutorial RMSKIN Package (Updated APIKey V 1.2023.03.27)
Reference: The complete code of 'WeatherTutorial.ini"
I only notice now though... what's that window on the right side of your Notepad++ (the one labeled "Snippets" / "Rainmeter Templates")? Is that a macro collection or what? It certainly looks interesting and probably very useful, judging by the labels you have there... 
