It is currently December 1st, 2020, 5:43 pm

⭐ Step-by-Step Basic Weather Skin Tutorial

Our most popular Tips and Tricks from the Rainmeter Team and others
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4192
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

⭐ Step-by-Step Basic Weather Skin Tutorial

Post by eclectic-tech »

Creating a weather skin can seem like a difficult task. But, thanks to a few forum members who developed files that can be included in any skin to obtain all types of weather data, getting a basic skin is not difficult.

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)
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 be partially cut off.

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1
8) Add the weather variables and language files to the [Variables] section using @include statements:

Code: Select all

[Variables]
; Include weather settings and language variables 

@includeVariables=#@#WeatherComJSONVariables.inc
@IncludeLanguageVariables="#@#WeatherComJSONLanguage.inc"
addvariables.jpg
9) Add the weather measures file using another @include statement. Note: there are several measure files available 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".

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.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 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
addafternoontest.jpg
Now would be a good time to save your changes.

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.
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. 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]"
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
WeatherTutorial_1.2020.09.11.rmskin

Reference: The complete code of 'WeatherTutorial.ini"

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Metadata]
Name=WeatherTutorial
Author=Me
Information=Weather skin to show temperature and current conditions
Version=1.2020.09.07
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
; Include weather settings and language variables 

@includeVariables=#@#WeatherComJSONVariables.inc
@IncludeLanguageVariables="#@#WeatherComJSONLanguage.inc"

; 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.inc

; 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 "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

[MeterString]
Meter=String

; 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]"

You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Posts: 2933
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: ⭐ Step-by-Step Basic Weather Skin Tutorial

Post by Yincognito »

eclectic-tech wrote: September 12th, 2020, 2:08 amThis 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.
Excellent tutorial, eclectic-tech - but you already know my opinion about it. ;-) 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... :???:
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4192
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: ⭐ Step-by-Step Basic Weather Skin Tutorial

Post by eclectic-tech »

Yincognito wrote: September 24th, 2020, 9:38 am Excellent tutorial, eclectic-tech - but you already know my opinion about it. ;-) 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... :???:
Rainmeter Snippets for Notepad++
That reminds me I need to update the changes made in the last few months, but it is 99% up-to-date :Whistle
User avatar
Yincognito
Posts: 2933
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: ⭐ Step-by-Step Basic Weather Skin Tutorial

Post by Yincognito »

eclectic-tech wrote: September 24th, 2020, 11:12 am Rainmeter Snippets for Notepad++
That reminds me I need to update the changes made in the last few months, but it is 99% up-to-date :Whistle
Ah, so it needs updating... will check it out, thanks! :thumbup: