scaling ROTATOR images

[Alex Becherer]

i have a skin with rather big images which i want to scale depending on screen resolution (retina displays will be common soon).

Code: Select all

[Rainmeter]
Author=Alex Becherer
AppVersion=2003000
Update=1000
BackgroundMode=1

[MeasureTime]
Measure=Time

[MeasureDate]
Measure=Time
Format="%d"

[Factor]
Measure=Calc
Formula=#WORKAREAHEIGHT# / 1440

[MeterBack]
Meter=Image
ImageName=clock-face.png
X=0
Y=0
W=(300*[Factor])
H=(300*[Factor])
AntiAlias=1
DynamicVariables=1

[MeterHour]
Meter=ROTATOR
MeasureName=MeasureTime
ImageName=hand-hour.png
X=0
Y=0
W=(300*[Factor])
H=(300*[Factor])
OffsetX=(150*[Factor])
OffsetY=(150*[Factor])
StartAngle=6.2831853
RotationAngle=6.2831853
AntiAlias=1
ValueReminder=43200
DynamicVariables=1

[MeterMinute]
Meter=ROTATOR
MeasureName=MeasureTime
ImageName=hand-minute.png
X=0
Y=0
W=(300*[Factor])
H=(300*[Factor])
OffsetX=(150*[Factor])
OffsetY=(150*[Factor])
OffsetX=47
OffsetY=47
StartAngle=6.2831853
RotationAngle=6.2831853
AntiAlias=1
ValueReminder=3600
DynamicVariables=1

[MeterDate]
Meter=IMAGE
MeasureName=MeasureDate
ImageName=cal-d-%1.png
X=0
Y=0
W=(300*[Factor])
H=(300*[Factor])
AntiAlias=1
DynamicVariables=1

everything works nice, except for the ROTATORs. looks like the images doe not get scaled at all, but there is rather some cropping going on.

here's a screenshot:

Untitled-2.jpg

on the left you see the skin with [Factor] set to 1. on the right the factor is 0.59722.
(every single image is 300 x 300 px btw).

am i doing something wrong?

[MerlinTheRed]

In a rotator meter, the width and height don't specify the size of the image but the size of the "bounding box" and by this also the place where the center of rotation will be placed (in the middle).

I think you can't scale the image you use in a rotator meter. You can, however, replace it by a normal image meter using a TransformationMatrix for rotation.

[Alex Becherer]

do you have a link to an example skin doing a rotation?
i have to admit i just don't get it.

[Alex Becherer]

ok, i think i might have gotten it now

Code: Select all

[Rainmeter]
Author=Alex Becherer
AppVersion=2003000
Update=50
BackgroundMode=1

[MeasureTime]
Measure=Time

[MeasureTimeC]
Measure=Calc
Formula=MeasureTime

[MeasureTimeHours]
Measure=Calc
Formula=-((MeasureTime / 43200) - (FLOOR (MeasureTime / 43200)))*360

[MeasureTimeMinutes]
Measure=Calc
Formula=-((MeasureTime / 3600) - (FLOOR (MeasureTime / 3600)))*360


[MeasureDate]
Measure=Time
Format="%d"

[Factor]
Measure=Calc
Formula=(#WORKAREAHEIGHT# / 1800) * 300

[FactorHalf]
Measure=Calc
Formula=Factor / 2

[MeasureSinAngle]
Measure=Calc
Formula=SIN((MeasureTimeHours)/360*2*PI)

[MeasureNegSinAngle]
Measure=Calc
Formula=-(MeasureSinAngle)

[MeasureCosAngle]
Measure=Calc
Formula=COS((MeasureTimeHours)/360*2*PI)

[MeasureTX]
Measure=Calc
Formula=FactorHalf-MeasureCosAngle*FactorHalf-MeasureSinAngle*FactorHalf

[MeasureTY]
Measure=Calc
Formula=FactorHalf-MeasureNegSinAngle*FactorHalf-MeasureCosAngle*FactorHalf

[MeasureSinAngleM]
Measure=Calc
Formula=SIN((MeasureTimeMinutes)/360*2*PI)

[MeasureNegSinAngleM]
Measure=Calc
Formula=-(MeasureSinAngleM)

[MeasureCosAngleM]
Measure=Calc
Formula=COS((MeasureTimeMinutes)/360*2*PI)

[MeasureTXM]
Measure=Calc
Formula=FactorHalf-MeasureCosAngleM*FactorHalf-MeasureSinAngleM*FactorHalf

[MeasureTYM]
Measure=Calc
Formula=FactorHalf-MeasureNegSinAngleM*FactorHalf-MeasureCosAngleM*FactorHalf

[MeterBack]
Meter=Image
ImageName=clock-face.png
X=0
Y=0
W=[Factor]
H=[Factor]
AntiAlias=1
DynamicVariables=1

[MeterHour]
Meter=Image
ImageName=hand-hour.png
X=r
Y=r
W=[Factor]
H=[Factor]
AntiAlias=1
DynamicVariables=1
TransformationMatrix=[MeasureCosAngle]; [MeasureNegSinAngle]; [MeasureSinAngle]; [MeasureCosAngle]; [MeasureTX]; [MeasureTY]

[MeterMinute]
Meter=Image
ImageName=hand-minute.png
X=r
Y=r
W=[Factor]
H=[Factor]
AntiAlias=1
DynamicVariables=1
TransformationMatrix=[MeasureCosAngleM]; [MeasureNegSinAngleM]; [MeasureSinAngleM]; [MeasureCosAngleM]; [MeasureTXM]; [MeasureTYM]

[MeterDate]
Meter=IMAGE
MeasureName=MeasureDate
ImageName=cal-d-%1.png
X=r
Y=r
W=[Factor]
H=[Factor]
AntiAlias=1
DynamicVariables=1

[MerlinTheRed]

Hm. TransformationMatrix can be a bit tricky to use, especially if you're not that good with math. Here is a tutorial about TransformationMatrix in general: http://rainmeter.net/forum/viewtopic.php?f=15&t=812

It explains how to combine multiple transformations into one TransformationMatrix. What you probably need is a combination of:

1. shift center of image to origin
2. rotate image
3. shift back to where it was

I'm not sure if you can use formulas directly in the TransformationMatrix option. If not, you have to use calc measures to calculate the appropriate values for a, b, c, d, e, f depending on your current screen size. This might be a little tricky, so if somebody knows how to scale the image in a rotator meter, I'd like to hear how that works.

[Alex Becherer]

sorry, just edited the post above. thanks for putting me on the right track.

[MerlinTheRed]

Yeah that's almost exactly like I did it in one of my (unreleased) skins.