Toggle clock?

[thenormalguy]

Hello all,

Sorry for posting this, I know you may feel like this is very basic and anyone can do it but I am facing the trouble trying to figure this out and have given it all the time I can however have failed how many ways I have tried.


I am using the default clock skin which comes with rain meter.

I want to add a toggle option in the time section of the clock so I can hide time and look at it if needed.

Also I want to add a percentage bar or something which shows how much time is left for example I have a event coming in 2 months so I want to see how much time is left for that event.

Any help is appreciated, I have tried editing the code using the manual but anything I add does not seem to take effect.
I am very new at this but have tried my best.

[Yincognito]

Hello all,

Sorry for posting this, I know you may feel like this is very basic and anyone can do it but I am facing the trouble trying to figure this out and have given it all the time I can however have failed how many ways I have tried.


I am using the default clock skin which comes with rain meter.

I want to add a toggle option in the time section of the clock so I can hide time and look at it if needed.

Also I want to add a percentage bar or something which shows how much time is left for example I have a event coming in 2 months so I want to see how much time is left for that event.

Any help is appreciated, I have tried editing the code using the manual but anything I add does not seem to take effect.
I am very new at this but have tried my best.

I'm not an expert in the Illustro suite that comes with Rainmeter since I don't use it, so there might be other folks more familiar with it than I am, but just for better clarity:
- how can you hide time "and" still look at it, considering that it would then be hidden?
- I might be mistaken here, but as far as I recall the default Illustro clock doesn't have events and it's just a simple clock, so is that event in 2 months just some hypothetical one that you have in mind, or an actual event added to some other skin on your screen?

Other than that, in general, toggling the hidden state of a meter in a skin is easily done from another meter (since the first one wouldn't be able to be shown if it's already hidden) via, say, a click, by adding something like LeftMouseUpAction=[!ToggleMeter MeterToToggle1][!ToggleMeter MeterToToggle2]... to your second meter. Similarly, toggling an entire skin from a meter in another skin on click can be done by adding something like a LeftMouseUpAction=[!Toggle "illustro\Clock"] to that meter. Finally, assuming you have two Time measures holding the current and event times in your skin, and another that's calculating their timestamp difference using dynamic variables and has its MaxValue option set to the said 2 months expressed in seconds:

Code: Select all

[NowTime]
Measure=Time
Format=%Y.%m.%d %H:%M:%S

[EventTime]
Measure=Time
Format=%Y.%m.%d %H:%M:%S
Timestamp=2023.11.22 08:00:00
TimestampFormat=%Y.%m.%d %H:%M:%S

[RemainingTime]
Measure=Time
Format=%Y.%m.%d %H:%M:%S
Timestamp=([EventTime:Timestamp]-[NowTime:Timestamp])
MaxValue=((30+31)*24*60*60)
DynamicVariables=1

then all you need would be a Bar meter that references the time difference measure in its MeasureName option:

Code: Select all

[PercentageBar]
Meter=Bar
...
MeasureName=RemainingTime
...

Obviously, if your scenario(s) are slightly different, some adjustments might be needed to get to the point where you can use these approaches.

[eclectic-tech]

I agree that the desired features are not clear

Yincognito offered ideas that would meet most of the desired effect, but there are always alternate methods, so I will offer one.

In my opinion, modifying illustro skins is not necessarily the best starting point because they use a scaled background image that make it difficult to edit.

My suggestion is to use a container to modify the displayed skin (shrinking and expanding the container) on mouse over/leave.

An UpTime meter is added to display the days until the event (using the same Timestamp calculations already suggested) rather than a Bar meter which requires a MaxValue in order to work.

So you end up with this on mouseover/mouseleave.

illustroclock2.gif

I remove the background image in the [Rainmeter] section

Code: Select all

[Rainmeter]
; This section contains general settings that can be used to change how Rainmeter behaves.
Update=1000
; Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
; BackgroundMode=3
; BackgroundMargins=0,34,0,14

Above the [meterTitle] add a container meter, a mouse detect meter, and a background Image meter [meterBack] to control the display on mouse over/leave.

Code: Select all

[meterContainer]
Meter=Shape
x=1
Y=1
Shape=Rectangle 0,6,200,4,4

[meterContainerDetect]
Meter=Shape
x=1
Y=1
Shape=Rectangle 10,8,200,60,4 | StrokeWidth 0 | Fill Color 0,0,0,1
MouseOverAction=[!SetOption meterContainer Shape "Rectangle 6,6,196,60,4"][!Update]
MouseLeaveAction=[!SetOption meterContainer Shape "Rectangle 6,6,196,4,4"][!Update]

[meterBack]
Meter=Image
ImageName=#@#Background
ScaleMargins=0,34,0,14
Container=meterContainer

[meterTitle]
Meter=String
MeterStyle=styleTitle
; Using MeterStyle=styleTitle will basically "copy" the
; contents of the [styleTitle] section here during runtime.
MeasureName=measureTime
X=100
Y=12
W=190
H=18
Text=%1
; %1 stands for the value of MeasureName (measureTime in this case).
Container=meterContainer

A new variable EventDate was added, the format is YYYY/MM/DD

Code: Select all

[Variables]
; Variables declared here can be used later on between two # characters (e.g. #MyVariable#).
fontName=Trebuchet MS
textSize=8
colorBar=235,170,0,255
colorText=255,255,255,205

EventDate=2023/11/25

Four measures are used to calculate the EventDate information [MeasureTimeStamp], [MeasureTimeEvent], [MeasureTimeEventTimeRemaining], and [MeasureUptime].

Code: Select all

[measureTimeTimeStamp]
Measure=Time

[measureTimeEvent]
Measure=Time
TimeStamp=#EventDate#
TimeStampFormat=%Y/%m/%d

[measureTimeEventTimeRemaining]
Measure=Calc
Formula=measureTimeEvent-measureTimeTimeStamp

[MeasureUpTime]
Measure=UpTime
Format="%4!i! days"
; AddDaysToHours=
SecondsValue=[measureTimeEventTimeRemaining]
; UpdateDivider=
; Documentation: Uptime https://docs.rainmeter.net/manual/measures/uptime/
DynamicVariables=1

Finally, a meter was added between [meterDay] and [meterDate] to display the remaining days
NOTE: All meters have a Container=meterContainer line added to them.

Code: Select all

[meterEventDays]
Meter=String
MeterStyle=styleLeftText
MeasureName=MeasureUpTime
X=100
Y=40
H=14
StringAlign=Center
Text=%1
Container=meterContainer

The OP can decide on what works best for them.

[Yincognito]

As a funny side note, one has to appreciate how seriously professional is our balala, he even edits other sages' posts to instruct them on how to use the mysterious code tags, when their fingers make it comfortable to use the said tags from their phone...

Joking aside, thanks, balala - the post is clearer now thanks to your help. Those little selection icons and the tiny cursor are harder to drag around properly when not on a computer.

[balala]

As a funny side note, one has to appreciate how seriously professional is our balala, he even edits other sages' posts to instruct them on how to use the mysterious code tags, when their fingers make it comfortable to use the said tags from their phone...

Joking aside, thanks, balala - the post is clearer now thanks to your help. Those little selection icons and the tiny cursor are harder to drag around properly when not on a computer.

When saw your post and realized the code is posted just so, without the appropriate tags, I wondered why. Didn't know you've posted it from a phone and decided to fix it. What I posted to the comment, is something which has been used on my computer, so just have to click it, to post it.
And I'm not a professional. But always fix this, when see code without the needed tags. No matter who it belongs to...

[Yincognito]

When saw your post and realized the code is posted just so, without the appropriate tags, I wondered why. Didn't know you've posted it from a phone and decided to fix it. What I posted to the comment, is something which has been used on my computer, so just have to click it, to post it.
And I'm not a professional. But always fix this, when see code without the needed tags. No matter who it belongs to...

Of course. Professionalism - even though not necessarily related to a job - tends to involve the above. I appreciate both it and your reaction, I just found the standard message funny given the circumstances, that's all.

[balala]

Of course. Professionalism - even though not necessarily related to a job - tends to involve the above. I appreciate both it and your reaction, I just found the standard message funny given the circumstances, that's all.

Alright, got it. As said, I post the same message to every post I edit adding the Code tags.

[thenormalguy]

So you end up with this on mouseover/mouseleave.illustroclock2.gif
[/code]

I am sorry for not being clear.

Thank you my friend, its working as I wanted it to work THANK YOU VERY MUCH !

One quick question it shows a lot of days remaining in the middle of the icon now.
It should however only show like 107 days remaining or so?
I have tried tweaking the date any idea what I have done wrong?

Code: Select all

[Variables]
; Variables declared here can be used later on between two # characters (e.g. #MyVariable#).
fontName=Trebuchet MS
textSize=8
colorBar=235,170,0,255
colorText=255,255,255,205

EventDate=2024/01/10

https://prnt.sc/hrH4TOXieM6S

Also I do not know what I did but some how I have made it show the icon like this : https://prnt.sc/qn708MLj6may and when I hover over the icon it shows like this : https://prnt.sc/1mQwVk88u3lS (I like this version better as I can still see date and day however it only hides the time).

Here is the code : https://jpst.it/3oovh

[thenormalguy]

..

- how can you hide time "and" still look at it, considering that it would then be hidden?
Basically like a toggle option which allows me to show and hide it according to my desire.

[eclectic-tech]

I am sorry for not being clear.

Thank you my friend, its working as I wanted it to work THANK YOU VERY MUCH !

One quick question it shows a lot of days remaining in the middle of the icon now.
It should however only show like 107 days remaining or so?
I have tried tweaking the date any idea what I have done wrong?

{clip}
Here is the code : ...

You cannot just copy and paste and expect things to work.

You have 2 [Variables] sections (they should be edited, not duplicated) and you now have 2 [meterTitle] sections, so the second one is ignored.
You did not modify the rest of the meters as described by adding the container=... line

We will help you modify skins, but not re-write them.