It is currently May 9th, 2024, 4:08 am

Simple visual indicator for how much time is left in the day

Get help with creating, editing & fixing problems with skins
miyazakipiiman
Posts: 12
Joined: September 5th, 2023, 9:18 pm

Simple visual indicator for how much time is left in the day

Post by miyazakipiiman »

I'm trying to find or otherwise create a skin that's just a circular indicator for time left in the day. Like a progress bar that drains, with no numbers, hands, or ticks whatsoever. Something that looks exactly like this app but for days instead of minutes:
https://play.google.com/store/apps/details?id=at.cwiesner.android.visualtimer

It would be nice if I could set it to specific times of day (like 8 AM to 10 PM) but wouldn't mind having it represent all 24 hours either. I have already done some digging around on the forums and LifeHacker and have been unable to find any similar skins. I'm new to Rainmeter so I don't really know where to start when it comes to programming a skin like this either, so any advice would be much appreciated.
Last edited by miyazakipiiman on September 12th, 2023, 7:34 pm, edited 1 time in total.
User avatar
SilverAzide
Rainmeter Sage
Posts: 2620
Joined: March 23rd, 2015, 5:26 pm

Re: Simple visual indicator for how much time is left in the day

Post by SilverAzide »

miyazakipiiman wrote: September 5th, 2023, 10:09 pm I'm trying to find or otherwise create a skin that's just a circular indicator for time left in the day. Like a progress bar that drains, with no numbers, hands, or ticks whatsoever. Something that looks exactly like this app but for days instead of minutes:
https://play.google.com/store/apps/details?id=at.cwiesner.android.visualtimer

It would be nice if I could set it to specific times of day (like 8 AM to 10 PM) but wouldn't mind having it represent all 24 hours either. I have already done some digging around on the forums and LifeHacker and have been unable to find any similar skins. I'm new to Rainmeter so I don't really know where to start when it comes to programming a skin like this either, so any advice would be much appreciated.
What you are looking for -- I think -- is a countdown timer skin. You can try searching these forums or DeviantArt for a skin that is prebuilt to do something like what you want. Here is a recent post for example: Simple Elapsed Time.

If you can't find what you want, you'll have to build it yourself. Take a look at the docs:
Time Measure
Roundline Meter

Basically, what you want is to use a roundline meter to show the number of seconds remaining in the day (counting down from 86400 to 0, or vice versa, depending on how you want to display the data).

To find the seconds remaining in the day, you need to find the current time in seconds, then figure out the how many seconds have elapsed today.

Code: Select all

; this measure returns the number of seconds since January 1st, 1601
[MeasureNow]
Measure=Time

; this measure calculates the number of seconds elapsed today
; NOTE: set the Min and Max values so the Roundline will know how to draw the meter
[MeasureSecondsElapsed]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=0
MaxValue=86400

; this meter will display a pie-chart shape showing elapsed seconds today
[MeterUsedDisk]
Meter=Roundline
MeasureName=MeasureSecondsElapsed
AntiAlias=1
X=0
Y=0
W=120
H=120
StartAngle=4.712
RotationAngle=6.283
LineLength=60
LineColor=255,0,0,255
Solid=1
I'll leave the rest up to you to decide if you want the pie-chart to move clockwise or counter-clockwise, where you want to start drawing, etc.
Gadgets Wiki GitHub More Gadgets...
miyazakipiiman
Posts: 12
Joined: September 5th, 2023, 9:18 pm

Re: Simple visual indicator for how much time is left in the day

Post by miyazakipiiman »

SilverAzide wrote: September 5th, 2023, 11:25 pm What you are looking for -- I think -- is a countdown timer skin. You can try searching these forums or DeviantArt for a skin that is prebuilt to do something like what you want. Here is a recent post for example: Simple Elapsed Time.

If you can't find what you want, you'll have to build it yourself. Take a look at the docs:
Time Measure
Roundline Meter

Basically, what you want is to use a roundline meter to show the number of seconds remaining in the day (counting down from 86400 to 0, or vice versa, depending on how you want to display the data).

To find the seconds remaining in the day, you need to find the current time in seconds, then figure out the how many seconds have elapsed today.

...
Thank you, this is exactly what I needed. I looked over the documentation and played around with the variables until I had achieved the desired result.

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

; this measure returns the number of seconds since January 1st, 1601
[MeasureNow]
Measure=Time

; this measure calculates the number of seconds elapsed today
; NOTE: set the Min and Max values so the Roundline will know how to draw the meter
[MeasureSecondsElapsed]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=0
MaxValue=86400

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

; this meter will display a pie-chart shape showing elapsed seconds today
[MeterSecondsElapsed]
Meter=Roundline
MeasureName=MeasureSecondsElapsed
AntiAlias=1
X=0
Y=0
W=120
H=120
StartAngle=4.712
RotationAngle=-6.283
LineLength=60
LineColor=255,255,255,25
Solid=1

[MeterSecondsRemaining]
Meter=Roundline
MeasureName=MeasureSecondsRemaining
AntiAlias=1
X=0
Y=0
W=120
H=120
StartAngle=4.712
RotationAngle=6.283
LineLength=60
LineColor=255,255,255,255
Solid=1
This will generate a small circle displaying the remaining time in the day, with white representing time left and transparent white (dark gray on a black monitor) representing the time that's already passed.
clockthingy.png
Since I took this screencap at 18:38 it only shows about a quarter left.

Might take another dive through the documentation and figure out how to make it bigger or to restrict it to displaying the time from 08:00 to 22:00, but for now this is a satisfactory result and I'm honestly surprised at how much less confusing it got when I looked at the documentation.
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Rainmeter Sage
Posts: 7211
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Simple visual indicator for how much time is left in the day

Post by Yincognito »

miyazakipiiman wrote: September 6th, 2023, 12:45 am Thank you, this is exactly what I needed. I looked over the documentation and played around with the variables until I had achieved the desired result.

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

; this measure returns the number of seconds since January 1st, 1601
[MeasureNow]
Measure=Time

; this measure calculates the number of seconds elapsed today
; NOTE: set the Min and Max values so the Roundline will know how to draw the meter
[MeasureSecondsElapsed]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=0
MaxValue=86400

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

; this meter will display a pie-chart shape showing elapsed seconds today
[MeterSecondsElapsed]
Meter=Roundline
MeasureName=MeasureSecondsElapsed
AntiAlias=1
X=0
Y=0
W=120
H=120
StartAngle=4.712
RotationAngle=-6.283
LineLength=60
LineColor=255,255,255,25
Solid=1

[MeterSecondsRemaining]
Meter=Roundline
MeasureName=MeasureSecondsRemaining
AntiAlias=1
X=0
Y=0
W=120
H=120
StartAngle=4.712
RotationAngle=6.283
LineLength=60
LineColor=255,255,255,255
Solid=1
This will generate a small circle displaying the remaining time in the day, with white representing time left and transparent white (dark gray on a black monitor) representing the time that's already passed.
clockthingy.png
Since I took this screencap at 18:38 it only shows about a quarter left.

Might take another dive through the documentation and figure out how to make it bigger or to restrict it to displaying the time from 08:00 to 22:00, but for now this is a satisfactory result and I'm honestly surprised at how much less confusing it got when I looked at the documentation.
It's surely less confusing if one is willing to take a look at the documentation in the first place - good job.

For the record, if you only need the remaining time in the initial measure detailed by SilverAzide, you could have simply subtracted the elapsed time from 86400, e.g. Formula=(86400-MeasureNow%86400), it's the same effect as the InvertMeasure is producing. Also, depending on the colors you choose and their alphas (opacities), you could have got away with just a fully filled disk meter covered by the remaining time meter. Obviously, different colors and alphas would have resulted in blending colors on the remaining time area where the two meters overlap, hence the "depending on" part, in case you don't find that desirable.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
balala
Rainmeter Sage
Posts: 16206
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Simple visual indicator for how much time is left in the day

Post by balala »

I add something, even if this has not been asked for. If besides the "circular indicator" you'd like to see the number of remaining seconds you need to add a String meter. But this in my opinion is not quite sugestive, seeing there are 57214 seconds doesn1t tell too much, especially not on a first look.
However there is a simple method to convert this number of seconds into time: the Uptime measure.
So if you need this, here is a simple workaround: you can add the following measure and meter to the last code:

Code: Select all

[MeasureRemainingTime]
Measure=UpTime
SecondsValue=[MeasureSecondsRemaining]
Format=%3!i!:%2!02i!:%1!02i!
DynamicVariables=1

[MeterRemainingTime]
Meter=STRING
MeasureName=MeasureRemainingTime
X=60
Y=60
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=%1
The format of the time is defined by the Format option of the [MeasureRemainingTime] measure, as shown here. Alter it if needed.
Sorry if you are not interested in this. Just felt it would be a nice (and maybe useful?) addition.
miyazakipiiman
Posts: 12
Joined: September 5th, 2023, 9:18 pm

Re: Simple visual indicator for how much time is left in the day

Post by miyazakipiiman »

An update for anybody else on the forums interested in using this.

The meter will start and end at different times of day depending on what values you put in the MinValue and MaxValue variables. You just need to convert hours into seconds. I have it set to start at 28800 seconds (8 AM) and end at 72900 seconds (10 PM). This way the circle will be full when I log on in the morning and completely empty by the time I log off at night. I find it useful as an abstract way of measuring time since analog/digital clocks tend to only give me info on what time it is right now and not how much time I have left in the day to do stuff.

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

; this measure returns the number of seconds since January 1st, 1601
[MeasureNow]
Measure=Time

; this measure calculates the number of seconds elapsed today
; NOTE: set the Min and Max values so the Roundline will know how to draw the meter
[MeasureSecondsElapsed]
Measure=Calc
Formula=(MeasureNow % 86400)
MinValue=28800
MaxValue=79200

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

; this meter will display a pie-chart shape showing elapsed seconds today
[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

[MeterSecondsRemaining]
Meter=Roundline
MeasureName=MeasureSecondsRemaining
AntiAlias=1
X=0
Y=0
W=600
H=600
StartAngle=4.712
RotationAngle=6.283
LineLength=300
LineColor=255,255,255,255
Solid=1
User avatar
tass_co
Posts: 518
Joined: May 4th, 2020, 3:01 pm
Location: Ankara, TURKEY

Re: Simple visual indicator for how much time is left in the day

Post by tass_co »

miyazakipiiman wrote: September 6th, 2023, 5:55 pm An update for anybody else on the forums interested in using this.
I am sharing a code as Miyazakipiiman requested :thumbup:

Code: Select all

[Rainmeter]
Update=1000

[MeasureTime]
Measure=Time

[MeasureTimeH]
Measure=Time
Format=%H

[MeasureTimeM]
Measure=Time
Format=%M

[MeasureTimeS]
Measure=Time
Format=%S

[CalcTime]
Measure=Calc
Formula=(([MeasureTimeH]*3600)+([MeasureTimeM]*60)+([MeasureTimeS]))
IfCondition=CalcTime < 28800
IfTrueAction=[!SetOption MeterCircle1 LineColor "200,200,200,255"][!SetOption MeterText FontColor "200,200,200,255"]
IfFalseAction=[!SetOption MeterCircle1 LineColor "200,200,0,255"][!SetOption MeterText FontColor "200,200,0,255"]
IfCondition2=CalcTime > 82799
IfTrueAction2=[!SetOption MeterCircle1 LineColor "255,0,0,255"][!SetOption MeterText FontColor "255,0,0,255"]
DynamicVariables=1

[MeterCircle1]
Meter=Roundline
X=0
Y=0
W=180
H=180
StartAngle=(Rad(42))
RotationAngle=(Rad(-266))
LineStart=81
LineLength=62
Solid=1
LineColor=200,200,0,255
AntiAlias=1

[MeterCircle2]
Meter=Roundline
MeasureName=CalcTime
X=0
Y=0
W=180
H=180
StartAngle=(Rad(42))
RotationAngle=(Rad(-266))
LineStart=81
LineLength=62
Solid=1
LineColor=0,0,0,255
AntiAlias=1
ValueRemainder=86400
DynamicVariables=1

[MeterText]
Meter=String
X=34
Y=74
FontSize=20
FontColor=200,200,0,255
Text=[MeasureTime]
DynamicVariables=1
GIF 10.09.2023 14-54-55.gif
You do not have the required permissions to view the files attached to this post.
I don't know where i going from here, but i promise it won't be boring... :great:
miyazakipiiman
Posts: 12
Joined: September 5th, 2023, 9:18 pm

Re: Simple visual indicator for how much time is left in the day

Post by miyazakipiiman »

tass_co wrote: September 10th, 2023, 11:56 am I am sharing a code as Miyazakipiiman requested :thumbup:

Code: Select all

[Rainmeter]
Update=1000

[MeasureTime]
Measure=Time

[MeasureTimeH]
Measure=Time
Format=%H

[MeasureTimeM]
Measure=Time
Format=%M

[MeasureTimeS]
Measure=Time
Format=%S

[CalcTime]
Measure=Calc
Formula=(([MeasureTimeH]*3600)+([MeasureTimeM]*60)+([MeasureTimeS]))
IfCondition=CalcTime < 28800
IfTrueAction=[!SetOption MeterCircle1 LineColor "200,200,200,255"][!SetOption MeterText FontColor "200,200,200,255"]
IfFalseAction=[!SetOption MeterCircle1 LineColor "200,200,0,255"][!SetOption MeterText FontColor "200,200,0,255"]
IfCondition2=CalcTime > 82799
IfTrueAction2=[!SetOption MeterCircle1 LineColor "255,0,0,255"][!SetOption MeterText FontColor "255,0,0,255"]
DynamicVariables=1

[MeterCircle1]
Meter=Roundline
X=0
Y=0
W=180
H=180
StartAngle=(Rad(42))
RotationAngle=(Rad(-266))
LineStart=81
LineLength=62
Solid=1
LineColor=200,200,0,255
AntiAlias=1

[MeterCircle2]
Meter=Roundline
MeasureName=CalcTime
X=0
Y=0
W=180
H=180
StartAngle=(Rad(42))
RotationAngle=(Rad(-266))
LineStart=81
LineLength=62
Solid=1
LineColor=0,0,0,255
AntiAlias=1
ValueRemainder=86400
DynamicVariables=1

[MeterText]
Meter=String
X=34
Y=74
FontSize=20
FontColor=200,200,0,255
Text=[MeasureTime]
DynamicVariables=1
GIF 10.09.2023 14-54-55.gif
Thank you.
Last edited by miyazakipiiman on September 12th, 2023, 6:35 pm, edited 1 time in total.
User avatar
tass_co
Posts: 518
Joined: May 4th, 2020, 3:01 pm
Location: Ankara, TURKEY

Re: Simple visual indicator for how much time is left in the day

Post by tass_co »

miyazakipiiman wrote: September 10th, 2023, 3:31 pm Thank you.
:bow:
I don't know where i going from here, but i promise it won't be boring... :great: