It is currently April 18th, 2024, 7:02 am

Rotating Stylesheets

Tips and Tricks from the Rainmeter Community
User avatar
Kaelri
Developer
Posts: 1721
Joined: July 25th, 2009, 4:47 am

Rotating Stylesheets

Post by Kaelri »

This is a method that I'm using to make skins cycle between several different forms on command. If you have a skin with many separate variants, each of which shares the same basic meters and only differs in appearance, this will enable you to condense them into a single self-modifying skin.

This method allowed me to eliminate over 40 .ini files - more than a third of my suite - without removing any functionality whatsoever.

First, decide how many variations you want in your cycle, and give them each a unique name in your [Variables] section.

Code: Select all

[Variables]
Style1=Alpha
Style2=Beta
Style3=Gamma
Second, create a MeterStyle for each variation. These styles will determine how a particular meter appears as you rotate the skin. Make sure that the exact variation name is included in the name of each style, and that the rest of the name stays constant.

Code: Select all

[StyleTextAlpha]
FontColor=0,0,0
StringAlign=LEFT

[StyleTextBeta]
FontColor=255,255,255
StringAlign=CENTER

[StyleTextGamma]
FontColor=160,160,160
StringAlign=RIGHT
You'll need to repeat this for each meter that needs to be changed. For example, if you have three variations and three meters to vary, you'll need nine styles (unless several meters can use the same styles).

Third, tell your meters to use the first style, using the variable that you created.

Code: Select all

[MeterText]
Meter=STRING
MeterStyle=StyleText#Style1#
Fourth, create a command that will cause the variables to rotate. I like to apply a MiddleMouseDown action to the skin as a whole:

Code: Select all

[Rainmeter]
MiddleMouseDownAction=!Execute [!RainmeterWriteKeyValue Variables Style1 #Style2#][!RainmeterWriteKeyValue Variables Style2 #Style3#][!RainmeterWriteKeyValue Variables Style3 #Style1#][!RainmeterRefresh]
The skin will now instantly rotate to the next variation when clicked. Because the command uses !RainmeterWriteKeyValue, the active variation will persist even if the skin (or Rainmeter) is closed.

There is no limit to the number of different variations you can use, nor to the number of meters changed, as long as you provide the necessary MeterStyles. If you have a meter that you don't want to appear in some phases, such as an icon or a background image, you can simply tell it to hide:

Code: Select all

[StyleImageAlpha]
Hidden=1
X=0
Y=0
W=0
H=0
Finally, if you have a number of skins using exactly the same set of styles, you can add them to a shared .inc file. This will not only allow you to edit the appearance of many different skins at once, but also reduce the size of your package by eliminating redundant code. If your skins are sufficiently uniform, it is possible to write working meter sections with only three keys (type, measure and style).

Code: Select all

@include=#SKINSPATH#YourSkinName\SharedStyles.inc
User avatar
Pandora
Posts: 24
Joined: November 4th, 2010, 2:23 pm
Location: East Coast, US

Re: Rotating Stylesheets

Post by Pandora »

I'm going to try the shared stylesheet idea, as soon as I get a slightly better idea of how I want to name things in Rainmeter. As soon as a comfortable set of category names settles in, I can attack that project with verve. This idea is reallly no different then having a CSS stylesheet that handles all design elements for 50 webpages. ;)

-Pandora
plasticup
Posts: 8
Joined: October 7th, 2010, 12:48 pm

Re: Rotating Stylesheets

Post by plasticup »

Love it, Kaelri. I just implemented a derivation of this to rotate through a set of variable names, so that each click advances a slick weather forecast by one day: http://rainmeter.net/forum/viewtopic.php?f=27&t=5614.

My only quibble is that updating variables takes about 200 milliseconds, so the skin has an ugly little seizure each time it changes the variables...
User avatar
Kaelri
Developer
Posts: 1721
Joined: July 25th, 2009, 4:47 am

Re: Rotating Stylesheets

Post by Kaelri »

Pandora wrote:I'm going to try the shared stylesheet idea, as soon as I get a slightly better idea of how I want to name things in Rainmeter. As soon as a comfortable set of category names settles in, I can attack that project with verve. This idea is reallly no different then having a CSS stylesheet that handles all design elements for 50 webpages. ;)

-Pandora
That's exactly what I had in mind. :)
plasticup wrote:Love it, Kaelri. I just implemented a derivation of this to rotate through a set of variable names, so that each click advances a slick weather forecast by one day: http://rainmeter.net/forum/viewtopic.php?f=27&t=5614.

My only quibble is that updating variables takes about 200 milliseconds, so the skin has an ugly little seizure each time it changes the variables...
Yeah, the performance is a lot better on simpler skins. That said, I doubt it's any slower than loading a variant config in the usual manner. I also suspect that a lot of the lag you're getting is from WebParser re-pinging the weather server, which is really beyond our control.
plasticup
Posts: 8
Joined: October 7th, 2010, 12:48 pm

Re: Rotating Stylesheets

Post by plasticup »

(apologies for dragging your thread off topic)
Kaelri wrote:I also suspect that a lot of the lag you're getting is from WebParser re-pinging the weather server, which is really beyond our control.
You know, I bet that's it. Once the variables are updates it refreshes the whole skin, which involves re-pinging the weather servers. Is there any way to just refresh the affected meters without refreshing the whole skin? Google has not revealed a solution.
User avatar
Kaelri
Developer
Posts: 1721
Joined: July 25th, 2009, 4:47 am

Re: Rotating Stylesheets

Post by Kaelri »

You could try using !RainmeterSetVariable instead of !RainmeterWriteKeyValue. However, this would require you to set DynamicVariables=1, and the skin state would not be saved - it would revert back to the default when reloaded or refreshed. (Unless, I suppose, you did both at the same time.)
User avatar
Chewtoy
Moderator
Posts: 995
Joined: June 10th, 2009, 12:44 pm
Location: Sweden

Re: Rotating Stylesheets

Post by Chewtoy »

plasticup wrote:(apologies for dragging your thread off topic) You know, I bet that's it. Once the variables are updates it refreshes the whole skin, which involves re-pinging the weather servers. Is there any way to just refresh the affected meters without refreshing the whole skin? Google has not revealed a solution.
Have a different skin that draws the entire page from the weather site, Download=1, then you just parse the downloaded file.
This way your skin displaying the info can 'update' how often it wants without hitting the actual site. The skin drawing the info don't have to be big or anything. I got this in one of my random-playaround-skins.

Code: Select all

[AMeter]
Meter=String
FontColor=255

[MCWeather]
Measure=Plugin
Plugin=Plugins\WebParser.dll
UpdateRate=1800
Url=http://xml.weather.com/weather/local/#LocationCode#?cc=*&unit=#Unit#&dayf=0
Download=1
DownloadFile=CWeather.txt

[MFWeather]
Measure=Plugin
Plugin=Plugins\WebParser.dll
UpdateRate=12600
Url=http://xml.weather.com/weather/local/#LocationCode#?cc=*&unit=#Unit#&dayf=#ForcastDays#
Download=1
DownloadFile=FWeather.txt
That's really all you need in that skin. The file will be created in #CurrentFolder#DownloadFile\
I don't think, therefore I'm not.
User avatar
Church Punk
Posts: 25
Joined: September 17th, 2010, 9:26 am

Re: Rotating Stylesheets

Post by Church Punk »

Kaelri wrote:This is a method that I'm using to make skins cycle between several different forms on command. If you have a skin with many separate variants, each of which shares the same basic meters and only differs in appearance, this will enable you to condense them into a single self-modifying skin.

This method allowed me to eliminate over 40 .ini files - more than a third of my suite - without removing any functionality whatsoever.
<snip>

Excellent post! I am going to implement this on my skin! Many thanks for the tip :)
Image
User avatar
Seahorse
Posts: 1175
Joined: June 9th, 2010, 5:56 pm
Location: Locks heath, UK

Re: Rotating Stylesheets

Post by Seahorse »

I have 5 colours which happily toggles the background image colours orange.png, Blue.png etc and the string colours to match. However the roundline meter LineColour doesn't wish to play ball. Given the first two work as intended I clearly am doing something wrong....

In the skin.ini:

Code: Select all

[Variables]
Style1=Orange
Style2=Blue
Style3=Green
Style4=Purple
Style5=Yellow
Background image meter (works fine):

Code: Select all

ImageName=#ROOTCONFIGPATH#Images\#Style1#.png
String meter (works fine):

Code: Select all

MeterStyle=String#Style1#
Roundline meter LineColor entry (doesn't change at all - white in all cases):

Code: Select all

LineColor=MeterColour#Style1#
I've popped all the variable in an .inc:

Code: Select all

[Variables]

;-----------------------------------------------------------------------------------------------
;Colours
;-----------------------------------------------------------------------------------------------

;Orange
Colour1=255,153,0,255

;Orange 65% Trans
Colour2=255,153,0,175

;Blue
Colour3=51,153,255,255

;Blue 65% Trans
Colour4=51,153,255,175

;Green
Colour5=51,255,0,255

;Green 65% Trans
Colour6=51,255,0,175

;Purple
Colour7=153,0,204,255

;Purple 65% Trans
Colour8=153,0,204,175

;Yellow
Colour9=255,255,102,255

;Yellow 65% Trans
Colour10=255,255,102,175

;Black 40% Trans
Colour11=0,0,0,100

;-----------------------------------------------------------------------------------------------
;Meter Colour Styles
;-----------------------------------------------------------------------------------------------

[MeterColourOrange]
LineColor=#Colour1#

[MeterColourBlue]
LineColor=#Colour3#

[MeterColourGreen]
LineColor=#Colour5#

[MeterColourPurple]
LineColor=#Colour7#

[MeterColourYellow]
LineColor=#Colour9#

;-----------------------------------------------------------------------------------------------
;String Styles
;-----------------------------------------------------------------------------------------------

[StringOrange]
FontColor=#Colour1#
FontFace=Neuropol
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
AntiAlias=1
LineColor=#Colour1#

[StringBlue]
FontColor=#Colour3#
FontFace=Neuropol
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
AntiAlias=1

[StringGreen]
FontColor=#Colour5#
FontFace=Neuropol
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
AntiAlias=1

[StringPurple]
FontColor=#Colour7#
FontFace=Neuropol
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
AntiAlias=1

[StringYellow]
FontColor=#Colour9#
FontFace=Neuropol
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
AntiAlias=1

I'm conscious of the fact that the two working ones are popping the colour into the meter be that an image or a font colour via a style, however I have also tried a second style for the bar to no avail.

Code: Select all

Meterstyle=MeterColour#Style1#
with

Code: Select all

[MeterColourOrange]
LineColor=#Colour1#
using this in the inc gives the first bar in the right colour, but the rest in black, seeing as LineColor=#Colour1# fills all of them correctly if typed in the meter I'm at a loss to understand the cause.
"Regrettably your planet is one of those scheduled for demolition"
Mike

My Skins at DeviantArt

User avatar
Seahorse
Posts: 1175
Joined: June 9th, 2010, 5:56 pm
Location: Locks heath, UK

Re: Rotating Stylesheets

Post by Seahorse »

So several days of experimenting further with the roundline colour problem...

It appears that as the meter that the roundline is calculated in is used by subsequent meters as a style is the cause of the problem - it seems you cannot daisy-chain styles. Using either of these works fine, but clearly the colour remains static:

Code: Select all

LineColor=0,0,0,125

or

LineColor=#Colour1#
I have tried using using a separate styles for LineColor (LineColourOrange, LineColorBlue etc) or variables (Orange=255,153,0,255, Blue=51,153,255,255 etc) and neither work, they either get ignored and I get a white meter with Styles or you get the first indicator the correct colour and the remainder appear offset and in black with the variable.

I have experimented with !SetVariable, but I can't figure out a way to trigger this using the #Style1#, #Style2# etc above so am scratching my head at the moment.

It's particularly frustrating seeing as the coloured background images and the text colours have happily cycled from the word go.
"Regrettably your planet is one of those scheduled for demolition"
Mike

My Skins at DeviantArt