It is currently May 8th, 2024, 5:40 am

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

Get help with creating, editing & fixing problems with skins
ZXCVBOT

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

Post by ZXCVBOT »

Firstly, hats off man, you revived a few years old skin and managed to make it work. Secondly, add these 2 lines and make it a bit better (performance-wise), no visible affect can be seen at first:

[!WriteKeyValue Rainmeter Update 0]
[!WriteKeyValue Rainmeter Update 1000]

In the start and stop, as:
Start:
...

Code: Select all

LeftMouseUpAction=[!EnableMeasure MeasureStopwatch][!EnableMeasure MeasureCounterStopwatch][!HideMeter MeterTimerStart][!ShowMeter MeterTimerStop][!SetVariable Running 1][!WriteKeyValue Rainmeter Update 0]
...
Stop:
...

Code: Select all

LeftMouseUpAction=[!DisableMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!SetVariable Running 0][!WriteKeyValue Rainmeter Update "1000"]
....

Lastly, why in the god's name is everything so blocky?? I can see the AntiAlias=1, no overlays, I changed the font, even if Segoe UI is not blocky.
Just do this and it is complete!
Olympus112
Posts: 28
Joined: October 17th, 2023, 5:03 am

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

Post by Olympus112 »

ZXCVBOT wrote: October 25th, 2023, 9:40 am Firstly, hats off man, you revived a few years old skin and managed to make it work. Secondly, add these 2 lines and make it a bit better (performance-wise), no visible affect can be seen at first:

[!WriteKeyValue Rainmeter Update 0]
[!WriteKeyValue Rainmeter Update 1000]

In the start and stop, as:
Start:
...

Code: Select all

LeftMouseUpAction=[!EnableMeasure MeasureStopwatch][!EnableMeasure MeasureCounterStopwatch][!HideMeter MeterTimerStart][!ShowMeter MeterTimerStop][!SetVariable Running 1][!WriteKeyValue Rainmeter Update 0]
...
Stop:
...

Code: Select all

LeftMouseUpAction=[!DisableMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!SetVariable Running 0][!WriteKeyValue Rainmeter Update "1000"]
....

Lastly, why in the god's name is everything so blocky?? I can see the AntiAlias=1, no overlays, I changed the font, even if Segoe UI is not blocky.
Just do this and it is complete!
Should I add the [!WriteKeyValue Rainmeter Update 0] line for both the [MeterTimerStart], [MeterTimerStartDarker] and the line [!WriteKeyValue Rainmeter Update "1000"] to both the [MeterTimerStop], [MeterTimerStopDarker] section?
Lastly, why in the god's name is everything so blocky??
-> What you mean by this? Or do you thing I'm overthinking this blockyness issue? Well, the background edge blockyness has been resolved by this rectangular shaping, I'm just not purely satisfied with that edge section in the upper right corner as seen in the attached image...
ZXCVBOT

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

Post by ZXCVBOT »

Changge it in MeterTimerStartDarker and MeterTimerStopDarker as they are the ones that have uncommented sections of code that you are using.

The blockiness is in the text - the main timer. As far as I am concerned, the edge is what makes your skin stand tall among many others; It also matches the vibes with the buttons - squares 8-) .
Olympus112
Posts: 28
Joined: October 17th, 2023, 5:03 am

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

Post by Olympus112 »

ZXCVBOT wrote: October 25th, 2023, 1:08 pm The blockiness is in the text - the main timer. As far as I am concerned, the edge is what makes your skin stand tall among many others; It also matches the vibes with the buttons - squares 8-) .
I'm not sure what you exactly mean by "blockiness":
Image
As far as I can see these counter numbers are all smooth on the edges... Or do you mean the look of the font type?
ZXCVBOT

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

Post by ZXCVBOT »

I can't quite keep a finger on what you mean by "look of the font type". I am saying that the font looks like its scaled by using nearest-neighbour - hence blocky. Your start and stop are images, so, the look of the skin is unaltered, I'll probably wait for someone else to reply, if they are seeing the same.
User avatar
Yincognito
Rainmeter Sage
Posts: 7207
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

Olympus112 wrote: October 25th, 2023, 6:12 am 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):
Image
Enlarged:
Image

I've also added the new version here to download:
Modern Stopwatch V2.zip
Glad you managed to get to a decent result. I believe an even better result is achievable on the edge you mentioned, so I might take a look at the skin sometime tomorrow and see if and how it can be done. Posting the skin and the screenshots do help, since the earlier descriptions didn't capture all the details of what you envisioned (e.g. the angular top right corner and such).
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Olympus112
Posts: 28
Joined: October 17th, 2023, 5:03 am

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

Post by Olympus112 »

There's something went wrong with how the Start / Stop and the Reset buttons acting in the V2 version (since I have added this rectangular shape modding): In the V1 version of the skin there is an immediate response if you hover the mouse over the button, so the "darker" button variants appear over the lighter ones, but in V2 there's sometimes a quite perceptible "delay" till the darker buttons getting appear. There's no change in the code within the "Image button" section, so I guess it has to do something with the rectangular shape modification...

Could you check it out please to possibly find out what could be the issue here?

Here's the full code of V2 version again:

Code: Select all

[Rainmeter]
Update=1000
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

[Variables]
color.Skin=00000001
color.Title=FFFFFFFF
color.Text=FFFFFFFF
text.Size=8
font.Name=Segoe UI
Snooze=#CURRENTPATH##@#Ding.wav

Running=0

Reset0="[!DisableMeasure MeasureStopwatch][!DisableMeasure MeasureCounterStopwatch][!UpdateMeasure MeasureStopwatch][!UpdateMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStart]"

Reset1="[!DisableMeasure MeasureStopwatch][!DisableMeasure MeasureCounterStopwatch][!UpdateMeasure MeasureStopwatch][!UpdateMeasure MeasureCounterStopwatch][!EnableMeasure MeasureStopwatch][!EnableMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStop]"

[sTimer]
FontColor=#color.Text#
FontEffectColor=00000020
FontFace=#font.Name#
FontSize=#text.Size#
StringAlign=CENTER
StringCase=NONE
StringStyle=BOLD
StringEffect=SHADOW
AntiAlias=1

[sStopWatch]
FontColor=#color.Text#
FontEffectColor=00000020
FontFace=#font.Name#
FontSize=42
StringAlign=CENTER
StringCase=NONE
StringEffect=SHADOW
AntiAlias=1

;--------------------------------------------------------------------
;Interface
;--------------------------------------------------------------------

; [MeterTimerWindow]
; Meter=Image
; ImageName=#@#bgtimer.png

; [MeterStopwatchWindow]
; Meter=Image
; ImageName=#@#bgstopwatch.png
; Hidden=1

; [MeterSettingsTab]
; Meter=Image
; X=2
; Y=3
; ImageName=#@#Settings.png
; Hidden=1

; [MeterAlarmBeforeTab]
; Meter=Image
; X=2
; Y=3
; ImageName=#@#AlarmBefore.png
; Hidden=1

;--------------------------------------------------------------------
;Counter for stopwatch
;--------------------------------------------------------------------

[MeasureCounterStopwatchTime]
Measure=Time
AverageSize=20

[MeasureCounterStopwatch]
Measure=Calc
Formula=( MeasureCounterStopwatch = 0 ? ( MeasureCounterStopwatchTime - MeasureStopwatch / 10 ) : MeasureCounterStopwatch )
Disabled=1

[MeasureStopwatch]
Measure=Calc
Formula=( MeasureCounterStopwatch = 0 ? MeasureStopwatch : (MeasureCounterStopwatchTime - MeasureCounterStopwatch) *10 )

;--------------------------------------------------------------------
;Stopwatch
;--------------------------------------------------------------------

[MeasureStopwatchDigit1]
Measure=Calc
Formula=MeasureStopwatch%10
MaxValue=3

[MeasureStopwatchDigit1-2]
Measure=Calc
Formula= ( MeasureStopwatchDigit1 > 9 ? 9 : MeasureStopwatchDigit1 )

[MeasureStopwatchDigit2]
Measure=Calc
Formula=(FLOOR(MeasureStopwatch/10))%60
RegExpSubstitute=1
Substitute="^(.)$":"0\1"

[MeasureStopwatchDigit3]
Measure=Calc
Formula=(FLOOR(MeasureStopwatch/600))%60
RegExpSubstitute=1
Substitute="^(.)$":"0\1"

[MeasureStopwatchDigit4]
Measure=Calc
Formula=(FLOOR(MeasureStopwatch/36000))%100
MaxValue=2
RegExpSubstitute=1
Substitute="^(.)$":"0\1"

[BeepHourly]
Measure=Calc
Formula=((( MeasureStopwatchDigit3=0 ) ? 1 : 0 ) + (( MeasureStopwatchDigit4<>0 ) ? 1 : 0 ))
IfEqualAction=!execute [PLAY #Snooze#]
IfEqualValue=2

;--------------------------------------------------------------------
;Buttons for Stopwatch
;--------------------------------------------------------------------

[MeterTimerStart]
Meter=Image
ImageName=#@#Start Cutted Smaller.png
X=111
Y=107
MeterStyle=sTimer
;Text=Start
;MouseActionCursor=1
;LeftMouseUpAction=[!EnableMeasure MeasureStopwatch][!EnableMeasure MeasureCounterStopwatch][!HideMeter MeterTimerStart][!ShowMeter MeterTimerStop][!SetVariable Running 1]
MouseOverAction=[!ShowMeter MeterTimerStartDarker]
MouseLeaveAction=[!HideMeter MeterTimerStartDarker]

[MeterTimerStartDarker]
Meter=Image
ImageName=#@#Start Cutted Smaller - Darker.png
X=111
Y=107
MeterStyle=sTimer
;Text=Start
MouseActionCursor=1
LeftMouseUpAction=[!EnableMeasure MeasureStopwatch][!EnableMeasure MeasureCounterStopwatch][!HideMeter MeterTimerStart][!ShowMeter MeterTimerStop][!SetVariable Running 1]
Hidden=1

[MeterTimerStop]
Meter=Image
ImageName=#@#Stop Cutted Smaller 2.png
X=111
Y=107
MeterStyle=sTimer
;Text=Stop
;MouseActionCursor=1
;LeftMouseUpAction=[!DisableMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!SetVariable Running 0][!WriteKeyValue Rainmeter Update "1000"]
;MouseActionCursor=1
DynamicVariables=1
MouseOverAction=[!ShowMeter MeterTimerStopDarker]
MouseLeaveAction=[!HideMeter MeterTimerStopDarker]

[MeterTimerStopDarker]
Meter=Image
ImageName=#@#Stop Cutted Smaller 2 - Darker.png
X=111
Y=107
MeterStyle=sTimer
;Text=Stop
MouseActionCursor=1
LeftMouseUpAction=[!DisableMeasure MeasureCounterStopwatch][!ShowMeter MeterTimerStart][!HideMeter MeterTimerStop][!ShowMeter MeterTimerReset][!SetVariable Running 0]
MouseActionCursor=1
DynamicVariables=1
Hidden=1

[MeterTimerReset]
Meter=Image
ImageName=#@#Reset Button Small Yellow 1.png
X=210
Y=112
MeterStyle=sTimer
;Text=Reset
;MouseActionCursor=1
;LeftMouseUpAction=[#Reset[#Running]]
Hidden=1
DynamicVariables=1
;MouseOverAction=[!ShowMeter App1Text][!ShowMeter MeterTimerResetDarker]
;MouseLeaveAction=[!HideMeter App1Text][!HideMeter MeterTimerResetDarker]
MouseOverAction=[!ShowMeter MeterTimerResetDarker]
MouseLeaveAction=[!HideMeter MeterTimerResetDarker]


[MeterTimerResetDarker]
Meter=Image
ImageName=#@#Reset Button Small Yellow 1 - Darker 3.png
X=210
Y=112
MeterStyle=sTimer
;Text=Reset
MouseActionCursor=1
LeftMouseUpAction=[#Reset[#Running]]
Hidden=1
DynamicVariables=1
MouseOverAction=[!ShowMeter App1Text][!HideMeter MeterTimerReset]
MouseLeaveAction=[!HideMeter App1Text][!ShowMeter MeterTimerReset]
Hidden=1

[StopWatchDigits]
Meter=String
MeasureName=MeasureStopwatchDigit4
MeasureName2=MeasureStopwatchDigit3
MeasureName3=MeasureStopwatchDigit2
MeasureName4=MeasureStopwatchDigit1-2
X=150
Y=10
MeterStyle=sStopWatch
Text=%1:%2:%3
AntiAlias=1
Hidden=1

[Menu]
Meter=IMAGE
ImageName=#@#Menu Buttons Plain 4.png
X=270
Y=4
;X=267
;Y=8
Hidden=1

[Close]
Meter=BUTTON
ButtonImage=#@#Close.png
X=270
Y=4
;X=267
;Y=8
ButtonCommand=!DeactivateConfig
Hidden=1
SolidColor=0,0,0,1
MouseOverAction=[!ShowMeter App4Text]
MouseLeaveAction=[!HideMeter App4Text]

[MoveUp]
Meter=BUTTON
ButtonImage=#@#Move UP.png
X=270
Y=27
;X=267
;Y=31
ButtonCommand=[!zpos 2]
Hidden=1
SolidColor=0,0,0,1
MouseOverAction=[!ShowMeter App3Text]
MouseLeaveAction=[!HideMeter App3Text]

[MoveBack]
Meter=BUTTON
ButtonImage=#@#Move Down 01.png
X=270
Y=47
;X=267
;Y=51
ButtonCommand=[!zpos -2]
Hidden=1
SolidColor=0,0,0,1
MouseOverAction=[!ShowMeter App2Text]
MouseLeaveAction=[!HideMeter App2Text]

[App1Text]
Meter=String
FontFace=#font.Name#
;FontColor=241,209,78
;FontColor=255,162,23
FontColor=255,180,45
FontSize=10
FontWeight=800
Text=Reset
x=243
y=121
Text=Valami
DynamicVariables=1
Hidden=1
AntiAlias=1

[App2Text]
Meter=String
FontFace=#font.Name#
FontColor=249,154,65
FontSize=10
FontWeight=800
Text=Move to Desktop
StringAlign=Center
x=150
;x=165
y=76
Text=Valami
DynamicVariables=1
Hidden=1
AntiAlias=1

[App3Text]
Meter=String
FontFace=#font.Name#
FontColor=11,210,226
FontSize=10
FontWeight=800
Text=Move to Topmost
StringAlign=Center
x=150
;x=160
y=76
Text=Valami
DynamicVariables=1
Hidden=1
AntiAlias=1

[App4Text]
Meter=String
FontFace=#font.Name#
FontColor=255,72,72
FontSize=10
FontWeight=800
Text=Close
StringAlign=Center
x=150
;x=246
y=76
Text=Valami
DynamicVariables=1
Hidden=1
AntiAlias=1
And here are both the V1 (working fine) and the messed up V2 versions of the Skin again:
Modern Stopwatch V1.zip
Modern Stopwatch V2.zip

Edit: I have found it! It was the Update=1000 value in the [Rainmeter] section. I have changed back to Update=50 and now the buttons work as fine as before. Still don't know why I had to change this value to 1000 in the first place...??? :confused: It's surely of the effect of suggestions to place [!WriteKeyValue Rainmeter Update 1000] value in the [MeterTimerStopDarker] section, so when it gets activated it will stay that way in the [Rainmater] section, even if I have completely removed [!WriteKeyValue Rainmeter Update 1000] from the code.
You do not have the required permissions to view the files attached to this post.
ZXCVBOT

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

Post by ZXCVBOT »

Hi again! The Update=1000 is making your skin "act" as you described. It was to make sure that it is not being updated so frequently when its not being used, but when started, it looks good, so I added the Update=0 thing, so that, even if you want to add milliseconds to your stopwatch, it will look smooth. There is nothing wrong with your skin as it was and as it is, so adding it or not adding it - as I said earlier, will not make any 'visible' changes, but changes to the 'performance'. Then again, it's up to you to make or not make changes.

Also, if you want your update to stay 50, you can also remove the Update 0 thing I suggested earlier.

Have a good day! :welcome:

Edit: Try this:
bg_night - Lighter06 - Blocky Edge - Try 3.png
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Rainmeter Sage
Posts: 7207
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

For the record, setting Update to 0 will in fact set it to 16, since that's its (positive) minimum:
https://docs.rainmeter.net/manual/skins/rainmeter-section/#Update

Other than that, performance is important, especially in cases involving multiple / larger / more complex skins having a lower update, so it's never a bad thing to consider ways to improve it. Here, you could very well let the Update be 1000 since Rainmeter can't measure time accurately under a second anyway (even with actual Time measures), because your issue is easily solved by adding a [!Redraw] to redraw the skin after each bang where you're hiding or showing meters. Doing this will make such changes happen immediately from a visual point of view. Generally, updating relevant meters would be needed before redrawing in order to achieve immediate effects, but in the case of hiding and showing meters, such updates are not needed.

In case you wonder, an accurate stopwatch having a granularity of less than a second can only be made in Rainmeter by using a Lua script, since the latter has some functions that can handle that. Personally, I already made such a skin for the next version of my skin suite, it's just that it's not released yet (due to many other pending improvements I want to include in it as well).
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
ZXCVBOT

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

Post by ZXCVBOT »

Bloody hell! I never saw that "Lowest Update is 16" :-(.

In other case, you can use the update meter and redraw as Yincognito said, in the mouseoveraction.

PS: Do you mean that MYiniMeter v2 is coming :bounce: ?????????? Cause it's been too long!