Help make this "stopwatch" skin working (button behavior)

[balala]

I have added the AntiAlias=1 parameter to the background section, but it doesn't really show any effect of antialiasing, at least as how I can see it:

As ZXCVBOT pointed above (but he didn't explain), AntiAlias=1 is an option related to meters. You can't use it on the [Rainmeter] section, it doesn't work there. And even one more: you didn't add this option to the background section, such a section doesn't even exist, but to the [Rainmeter] section.
If you want to try out to see how the image is looking with the added option, remove the Background option from the [Rainmeter] section (obviously along with the AntiAlias=1 option from the same section) and add an Image meter showing the image as the first meter of your code (it's extremely important not to have other meters before this one). For instance:

Code: Select all

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06.png
UpdateDivider=-1
AntiAlias=1

Note the added AntiAlias=1 and the UpdateDivider=-1 options.
Does it look better?

Additionally:

• Nor the PreserveAspectRatio=1 option can be used on the [Rainmeter] section. It belongs to Image meters.
• I'm glad you've added me as the author of that code, but I'm not.
• The Author option, even if while ago did belong to the [Rainmeter] section, it now should be used on the [Metadata] section, being deprecated on the [Rainmeter] section. Move it there (create such a section, if you don't have it).
• The AppVersion option is completely deprecated, shouldn't be used anymore. See the Note of the above link.

[Olympus112]

Ok, I have did what you have suggested:

Code: Select all

[Rainmeter]
Update=50
MouseOverAction=[!ShowMeter Menu][!ShowMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
MouseLeaveAction=[!HideMeter Menu][!HideMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
OnRefreshAction=[!ShowMeter StopWatchDigits][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!ZPos "2"]

[Metadata]
Author=Original: vlesun (vlesun@newmail.ru) & balala / Stopwtach Modded: Olympus112 (with the help of: eclectic-tech & balala & ikarus1969: THX!)

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06.png
UpdateDivider=-1
AntiAlias=1

Tho I still didn't recognize any difference in the smoothness of the background's edges with the AntiAlias=1 switch activated. ??? Is there still missing something?

(And I wasn't the one who added you to the author's list in the first place, I guess It's had to be the Skin's original author, as it was there before I began to mod the skin. And it was you, who posted the original Skin pack here so you can even check it out. But I have now extended the authors list in the added Metadata section concerning my own Stopwatch skin modding creation.)

[balala]

Tho I still didn't recognize any difference in the smoothness of the background's edges with the AntiAlias=1 switch activated. ??? Is there still missing something?

No, there is not. However I'm not sure this option can help. In fact, to be honest, I didn't really see the meaning of it, even if usually am using it as well. You are the one who have to decide if you want or want not to use it.

And it was you, who posted the original Skin pack here so you can even check it out.

Alright, now makes sense. I saw the skin look little bit familiar to me, but couldn't make the connection with my skin. That skin is way too old, has been uploaded 13 years ago, so...

[Yincognito]

Ok, I have did what you have suggested:

Code: Select all

[Rainmeter]
Update=50
MouseOverAction=[!ShowMeter Menu][!ShowMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
MouseLeaveAction=[!HideMeter Menu][!HideMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
OnRefreshAction=[!ShowMeter StopWatchDigits][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!ZPos "2"]

[Metadata]
Author=Original: vlesun (vlesun@newmail.ru) & balala / Stopwtach Modded: Olympus112 (with the help of: eclectic-tech & balala & ikarus1969: THX!)

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06.png
UpdateDivider=-1
AntiAlias=1

Tho I still didn't recognize any difference in the smoothness of the background's edges with the AntiAlias=1 switch activated. ??? Is there still missing something?

(And I wasn't the one who added you to the author's list in the first place, I guess It's had to be the Skin's original author, as it was there before I began to mod the skin. And it was you, who posted the original Skin pack here so you can even check it out. But I have now extended the authors list in the added Metadata section concerning my own Stopwatch skin modding creation.)

As far as I know, antialiasing doesn't make a difference for images, at least not for what I've tried over time. Its main use in Rainmeter is for String and Shape meters, since the Image meters will not be able to "correct" jagged / blocky edges if the image itself is that way, especially if the image is a "zoomed" / "scaled" version of an older original using a less suited interpolation / resampling.

If you want to smooth the background image's rounded edges, you have 2 options:
- photoshop it accordingly to operate the changes in the image file itself
- use a rounded Rectangle Shape meter as a Container for the Image meter acting as background
The first variant is permanent, while the second is adjustable. A downside of the second variant could be that, since containers cannot be nested in Rainmeter, you won't be able to use another container in the skin you're already using one for the background.

For the second variant, take a look at:
https://docs.rainmeter.net/manual/meters/shape/#Rectangle
https://docs.rainmeter.net/manual/meters/general-options/container/
to see how it can be implemented. Basically you'll create a rounded Rectangle Shape as your first meter, then in your background Image meter (which will now be the second meter after the newly created Shape one) you'd add a Container=TheNameOfYourFirstMeter line. The way your image will be "masked" by the container is based on the opacity of the container's pixels: the more opaque the pixel is, the more visible will be the masked equivalent from the image; the more transparent it is, the more "faded" its image equivalent will be.

[Olympus112]

Well, thank you so far for the help. I have made some other refinements and little modifications to be more like I would imagine it and now (let's say) is in some kind of "Prototype version". You can check it out from here:

Modern Stopwatch V1.zip

------------------
Yincognito: Well this "rectangularing" thing looks a bit complicated for me (at the moment) so I guess I will stick for what I've got for a while at least.

[Yincognito]

Yincognito: Well this "rectangularing" thing looks a bit complicated for me (at the moment) so I guess I will stick for what I've got for a while at least.

Sure thing - as you wish.

[Olympus112]

As far as I know, antialiasing doesn't make a difference for images, at least not for what I've tried over time. Its main use in Rainmeter is for String and Shape meters, since the Image meters will not be able to "correct" jagged / blocky edges if the image itself is that way, especially if the image is a "zoomed" / "scaled" version of an older original using a less suited interpolation / resampling.

If you want to smooth the background image's rounded edges, you have 2 options:
- photoshop it accordingly to operate the changes in the image file itself
- use a rounded Rectangle Shape meter as a Container for the Image meter acting as background
The first variant is permanent, while the second is adjustable. A downside of the second variant could be that, since containers cannot be nested in Rainmeter, you won't be able to use another container in the skin you're already using one for the background.

For the second variant, take a look at:
https://docs.rainmeter.net/manual/meters/shape/#Rectangle
https://docs.rainmeter.net/manual/meters/general-options/container/
to see how it can be implemented. Basically you'll create a rounded Rectangle Shape as your first meter, then in your background Image meter (which will now be the second meter after the newly created Shape one) you'd add a Container=TheNameOfYourFirstMeter line. The way your image will be "masked" by the container is based on the opacity of the container's pixels: the more opaque the pixel is, the more visible will be the masked equivalent from the image; the more transparent it is, the more "faded" its image equivalent will be.

So now have begin to try this "Rectengular Shape" modding session, but didn't get it to work the way I wanted.
With the code like this:

Code: Select all

[Rainmeter]
Update=50
MouseOverAction=[!ShowMeter Menu][!ShowMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
MouseLeaveAction=[!HideMeter Menu][!HideMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
OnRefreshAction=[!ShowMeter StopWatchDigits][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!ZPos "2"]

[Metadata]
Author=Original Skin: vlesun (vlesun@newmail.ru) & balala / Modern Stopwatch Modded Skin: Olympus112 (with the help of: eclectic-tech & balala & ikarus1969: THX!)

[MeterContainer]
Meter=Shape
Shape=Rectangle -3,-3,298,156,20 | Fill Color 215,18,18,100 | StrokeWidth 14

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06 - Blocky Edge - Try 3.png
Container=MeterContainer
UpdateDivider=-1
AntiAlias=1

I have got this result, what is surely not how I want it to look:


No matter how I have tried placing the code bits it's still not what I was wishing for.
So to be clear again: I only want the rounded edges of the rectangular shape to be shown as a "frame" on the background image. But this way it's surely not what happens.

So can you be more clear pleaqe and help me adjusting it to be fine?

Thank you!

[ZXCVBOT]

Try shifting X and Y to beyond 0.
I am shifting them to 14 as your StrokeWidth is 14.
Try this now:

Code: Select all

[MeterContainer]
Meter=Shape
Shape=Rectangle 14,14,298,156,20 | Fill Color 215,18,18,100 | StrokeWidth 14

Edit: You also have to shift other meters due to this; On the other hand, you can reduce/remove the stroke till you are satisfied.

[Yincognito]

So now have begin to try this "Rectengular Shape" modding session, but didn't get it to work the way I wanted.
With the code like this:

Code: Select all

[Rainmeter]
Update=50
MouseOverAction=[!ShowMeter Menu][!ShowMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
MouseLeaveAction=[!HideMeter Menu][!HideMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
OnRefreshAction=[!ShowMeter StopWatchDigits][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!ZPos "2"]

[Metadata]
Author=Original Skin: vlesun (vlesun@newmail.ru) & balala / Modern Stopwatch Modded Skin: Olympus112 (with the help of: eclectic-tech & balala & ikarus1969: THX!)

[MeterContainer]
Meter=Shape
Shape=Rectangle -3,-3,298,156,20 | Fill Color 215,18,18,100 | StrokeWidth 14

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06 - Blocky Edge - Try 3.png
Container=MeterContainer
UpdateDivider=-1
AntiAlias=1

I have got this result, what is surely not how I want it to look:


No matter how I have tried placing the code bits it's still not what I was wishing for.
So to be clear again: I only want the rounded edges of the rectangular shape to be shown as a "frame" on the background image. But this way it's surely not what happens.

So can you be more clear pleaqe and help me adjusting it to be fine?

Thank you!

Apart from the possible improvements that ZXCVBOT mentioned, I thought you wanted the interior of your background image corresponding to the rounded Rectangle to be visible (i.e. where the fill would be applied), hence my previous advice regarding using containers.

If you just want a rounded frame aka a border overlaid on top of your background Image, then you don't need containers at all. Just place your background meter first, and the rounded Rectangle second, using a transparent fill, something like this:

Code: Select all

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06 - Blocky Edge - Try 3.png
UpdateDivider=-1

[MeterBorder]
Meter=Shape
Shape=Rectangle ([MeterBackground:X]+14/2),([MeterBackground:Y]+14/2),([MeterBackground:W]-14),([MeterBackground:H]-14),20 | Fill Color 0,0,0,0 | Stroke Color 215,18,18,100 | StrokeWidth 14
UpdateDivider=-1
DynamicVariables=1

This uses the positional section variable parameters for meters:
https://docs.rainmeter.net/manual/variables/section-variables/
to draw the border precisely on the supposed edges of the background meter, while taking the stroke width and the fact that the stroke is drawn from the center:
https://docs.rainmeter.net/manual/meters/shape/#StrokeWidth
into account, but you can of course revert to using hardcoded values there if you feel more comfortable with them. The advantage of this approach is that it will automatically adjust the border coordinates and extent based on the similar properties of the background meter. This might be useful if one day you'd like to implement scaling on your background/ skin. Obviously you can still adjust positioning and extent to your liking in both approaches.

Hopefully you accurately described what you wanted this time and I correctly understood your description - let us know how it goes.

[Olympus112]

Thank you, after many hours of trying I get some decent results with these parameters:

Code: Select all

[Rainmeter]
Update=50
MouseOverAction=[!ShowMeter Menu][!ShowMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
MouseLeaveAction=[!HideMeter Menu][!HideMeter Close][!ShowMeter MoveBack][!ShowMeter MoveUp][!Redraw]
OnRefreshAction=[!ShowMeter StopWatchDigits][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!ZPos "2"]

[Metadata]
Author=Original Skin: vlesun (vlesun@newmail.ru) & balala / Modern Stopwatch Modded Skin: Olympus112 (with the help of: eclectic-tech & balala & ikarus1969: THX!)

[MeterShape]
Meter=Shape
Shape2=Rectangle 257,3,35,35,0 | Fill Color 60,66,76,255  | StrokeWidth 5
Shape=Rectangle 3,1,291,150,20 | Fill Color 215,18,18,255 | StrokeWidth 1
AntiAlias=1

[MeterBackground]
Meter=Image
ImageName=#@#bg_night - Lighter06 - Blocky Edge - Try 3.png
Container=MeterShape
UpdateDivider=-1
AntiAlias=1

Tho' still not 100% perfect, as you can see I had to add another "Shape2" to make the upper right corner fully angular by my original concept, but this way the line of the pixels on the very edge of the two shapes are in different shades of gray, so there's a bit "bumpiness", where the two shapes connect. You can check this difference mostly before some lighter colored background (like this Forum's page):

Enlarged:


I've also added the new version here to download:

Modern Stopwatch V2.zip