Attaching an image to the end of a bar meter?

[miyazakipiiman]

Hi, I'm trying to create a skin that functions similarly to a typical bar meter, but with an image moving from a start point to an end point instead of a bar that drains/fills. Is it possible to somehow attach an image to the moving part of a bar meter or should I be using a different meter for this?

Figuring out the meter is the only thing I need to do. I already have a measure that works just fine, except that it uses a Roundline meter and not a bar. It measures the time remaining in the day starting from 8 AM and ending at 10 PM.

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1

[Metadata]
Name=
Author=
Information=
Version=
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]

[MeterString]
Meter=String

[MeasureNow]
Measure=Time

[MeasureSecondsElapsed]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=28800
MaxValue=79200

[MeasureSecondsRemaining]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=28800
MaxValue=79200
InvertMeasure=1

[MeterSecondsElapsed]
Meter=Roundline
MeasureName=MeasureSecondsElapsed
AntiAlias=1
X=0
Y=0
W=600
H=600
StartAngle=4.712
RotationAngle=-6.283
LineLength=300
LineColor=255,255,255,25
Solid=1

I still want it to drain as the day progresses but I don't want a solid bar, nor do I want my image to replace the color of the bar. I want my image to start at a certain point, and then slowly move to another point depending on the value of the measure.

[CodeCode]

You can also make the entire bar an image - to suit any need for your visuals to be to your liking:

Code: Select all

[MeasureBar]
Measure=NowPlaying
PlayerName=#Player#
PlayerType=Progress
MinValue=0
MaxValue=100

[MeterBarImage]
Meter=Bar
MeasureName=MeasureBar
X=37
Y=128
W=100
H=10
BarImage=#@#YourImage.png
BarOrientation=Horizontal

[miyazakipiiman]

You can also make the entire bar an image - to suit any need for your visuals to be to your liking:

That's the thing, though, I don't really want a typical bar meter with a custom image. That would just be a rectangle that drains or fills. I'm trying to get an image to start at one spot at the beginning of the day, and slowly move it to a different spot as the day progresses. I'm trying to recreate this:

p2.png

The only image I need to program to move is the yellow sun looking thing, everything else I can just load up as static image meters. The measure for measuring the time left in the day works fine with a RoundLine meter. The only problem I'm having is figuring out a meter to get this sun image to move from one place to another based on the percentage of the measure.

[CodeCode]

Ok. You don't want the standard bar meter. You also don't actually need a roundline either, since that is what was in your code above. You also asked for a picture to be at the end of a bar meter.

The idea then would be to have your image at the far right of a transparent bar png. That way you could take advantage of my code example. Using instead your Seconds Measures as a percent value.

[CodeCode]

Ok to be thorough, I was wondering what you are measuring and what time related information that depends on?

There are actually quite a few different ways to move an image in a straight line. My example being only one.

If your seconds meter is divided by 100 to get the percentage value increment. The width of your intended display could be divided by that number, then increment your image X value positive to its starting point by the result until the duration reached its maximum. Then reset to zero percent to either continue again or remain to wait for the start to occur again.

[miyazakipiiman]

Ok to be thorough, I was wondering what you are measuring and what time related information that depends on?

My measures are used to measure the amount of seconds that have elapsed/are remaining in a day. Usually it would be set for all 24 hours but I have the Min and MaxValues set to 28800 and 79200 respectively, so the Roundline meter would be full at 8 AM and empty at 10 PM.

The idea then would be to have your image at the far right of a transparent bar png.

Yes, but I'm unsure if I can properly implement it in a way that gets the yellow circle to move from left to right across the screen. It doesn't look like I can attach it as an image to a bar because that would just make it static, but I also am struggling to find a way to attach an image to a moving part of a meter.

[CodeCode]

My measures are used to measure the amount of seconds that have elapsed/are remaining in a day. Usually it would be set for all 24 hours but I have the Min and MaxValues set to 28800 and 79200 respectively, so the Roundline meter would be full at 8 AM and empty at 10 PM.

So you say here Roundline...

Yes, but I'm unsure if I can properly implement it in a way that gets the yellow circle to move from left to right across the screen. It doesn't look like I can attach it as an image to a bar because that would just make it static, but I also am struggling to find a way to attach an image to a moving part of a meter.

But then here you say here left to right.

Those are not the same thing.

Which are you asking help with?

[miyazakipiiman]

Which are you asking help with?

The left to right.

[balala]

I still want it to drain as the day progresses but I don't want a solid bar, nor do I want my image to replace the color of the bar. I want my image to start at a certain point, and then slowly move to another point depending on the value of the measure.

Definitely possible. Here is an example. Replace the existing [MeterSecondsElapsed] meter by the following one (not to have a Roundline, but a Bar meter instead) and add the [MeterImage] meter:

Code: Select all

[MeterSecondsElapsed]
MeasureName=MeasureSecondsElapsed
Meter=BAR
X=0
Y=0
W=250
H=30
BarColor=255,255,255,1
SolidColor=0,0,0,1
BarOrientation=Horizontal

[MeterImage]
Meter=Image
ImageName=ADD-HERE-THE-IMAGE-YOU-WANT-TO-USE
X=(Clamp(((([MeterSecondsElapsed:X]+([MeterSecondsElapsed:W]*(([MeasureSecondsElapsed]-[MeasureSecondsElapsed:MinValue])/([MeasureSecondsElapsed:MaxValue]-[MeasureSecondsElapsed:MinValue]))))-[#CURRENTSECTION#:W])),[MeterSecondsElapsed:X],([MeterSecondsElapsed:XW]-[#CURRENTSECTION#:w])))
Y=0r
H=[MeterSecondsElapsed:H]
DynamicVariables=1

Take care the followings:

• Don't forget to add to the ImageName option of the [MeterImage] meter the image you want to use as moving image (for instance ImageName=#@#MyImage.png).
• The [MeterSecondsElapsed] Bar meter, even if it there, is practically invisible. You can make it visible by altering the BarColor and SolidColor options (if needed / wanted).
• The size of the image (the [MeterImage] meter) is determined by the height of the used Bar meter ([MeterSecondsElapsed]). The height of the image is the same as the height of the Bar meter, while its width is determined by the aspect ratio of the image used into the meter.
• Finally note that the image is always kept inside the Bar meter. When the [MeasureSecondsElapsed] returns a value equal to its lower value, the image is kept on the left side of the bar and it doesn't move until the value of the measure doesn't reach a value which increases the bar above the width of the image. If you want any other way to move the image, but you can't figure out how to do this, please let me know.

Does this work as expected?

[Yincognito]

The left to right.

In fact, if your code is the one here and you display the time remaining, the direction of the dot on your bar would be from right to left (since remaining time would be decreasing). In that code and if time remaining is the case (since balala covered the elapsed time case), if you:

- comment out the Measure=Time line from [MeasureNow], and, just to simulate this faster, add to it:

Code: Select all

Measure=Calc
Formula=((MeasureNow+3600)%86400)

- add this to your code, assuming you have a 32x32 pixels "1.png" image in your skin's @Resources folder (feel free to adjust this to your disk):

Code: Select all

[MeterBar]
Meter=Image
Y=10R
W=600
H=32
SolidColor=255,128,0,255

[MeterDot]
Meter=Image
ImageName=#@#1.png
X=((([MeasureSecondsRemaining]>[MeasureSecondsRemaining:MaxValue]?[MeasureSecondsRemaining:MaxValue]:[MeasureSecondsRemaining])-[MeasureSecondsRemaining:MinValue])/([MeasureSecondsRemaining:MaxValue]-[MeasureSecondsRemaining:MinValue])*[MeterBar:W]-16)
Y=0r
W=32
H=32
DynamicVariables=1

then you'll achieve what you want. Bar the DynamicVariables=1 line in the 2nd meter that's required when using changing variables in such a section, it's only a matter of arithmetics, and things become quite easy if you break the X formula into parts:
- the ([MeasureSecondsRemaining]-[MeasureSecondsRemaining:MinValue])/([MeasureSecondsRemaining:MaxValue]-[MeasureSecondsRemaining:MinValue]) part will get you a number between 0 and 1 representing the fraction of remaining time from the total time
- to span the above to the desired width, we have to *[MeterBar:W] aka multiply with the total width of the bar meter
- to prevent displaying the dot outside the bar from 22:00 to 08:00, we add a numerical conditional like ([MeasureSecondsRemaining]>[MeasureSecondsRemaining:MaxValue]?[MeasureSecondsRemaining:MaxValue]:[MeasureSecondsRemaining]) instead of simply [MeasureSecondsRemaining] in the fraction formula above (balala solved this by clamping a value, it achieves the same thing)
- to prevent displaying the dot outside the bar when at its maximum position, we do -16 aka subtract half of the dot's width (32 in my implementation) from the overall result, in order to "center" it on the value it's illustrating