It is currently March 28th, 2024, 3:17 pm

Small/Large Clock

Clocks and timer skins
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Small/Large Clock

Post by CyberTheWorm »

Was playing and made this a clickable clock that changes from large to small.
Not sure if there is a better way or simple way to do it.
Did not add a skin file as the code is all 1 file, no images all done with shapes.

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Author=Graham Wedepohl
Version=1.0.0
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Small/Large Clock

[Variables]
ShowMenu=[!RainmeterHideMeter MeterButtonSmall][!RainmeterShowMeter MeterButtonLarge][!RainmeterShowMeter MeterTime][!RainmeterShowMeter MeterDate][!RainmeterShowMeter MeterDay][!RainmeterHideMeter MeterVTime][!RainmeterRedraw]
HideMenu=[!RainmeterShowMeter MeterButtonSmall][!RainmeterHideMeter MeterButtonLarge][!RainmeterHideMeter MeterTime][!RainmeterHideMeter MeterDate][!RainmeterHideMeter MeterDay][!RainmeterShowMeter MeterVTime][!RainmeterRedraw]

[MeasureVTime]
Measure=Time
Format=%H %M %S

[MeasureTime]
Measure=Time
Format=%H:%M

[MeasureDate]
Measure=Time
Format=%d %B %Y

[MeasureDay]
Measure=Time
Format=%A

[MeterButtonSmall]
Meter=Shape
X=360
Y=0
Shape=Rectangle 0,0,40,80,10,10 | Fill Color 127,127,127,255
LeftMouseDownAction=!Execute #ShowMenu#
Hidden=1
ToolTipText=Left-click to Open

[MeterButtonLarge]
Meter=Shape
X=200
Y=0
Shape=Rectangle 0,0,200,80,10,10 | Fill Color 127,127,127,255
LeftMouseDownAction=!Execute #HideMenu#
ToolTipText=Left-click to Hide

[MeterVTime]
MeasureName=MeasureVTime
Meter=STRING
X=380
Y=15
W=30
H=60
FontColor=255,255,255,255
FontSize=12
StringAlign=CENTER
AntiAlias=1
ClipString=1
Hidden=1

[MeterTime]
MeasureName=MeasureTime
Meter=STRING
X=300
Y=2
FontColor=255,255,255,255
FontSize=25
StringAlign=CENTER
AntiAlias=1

[MeterDate]
MeasureName=MeasureDate
Meter=STRING
X=0r
Y=30r
FontColor=255,255,255,255
FontSize=15
StringAlign=CENTER
AntiAlias=1

[MeterDay]
MeasureName=MeasureDay
Meter=STRING
X=0r
Y=20r
FontColor=255,255,255,255
FontSize=15
StringAlign=CENTER
AntiAlias=1
Small.PNG
Large.PNG
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy
Contact:

Re: Small/Large Clock

Post by fonpaolo »

Very nice as idea, not very updated as code...

!Execute, !RainmeterHideMeter, and so on are deprecated from long ago. ;-)
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Small/Large Clock

Post by CyberTheWorm »

fonpaolo wrote:!Execute, !RainmeterHideMeter, and so on are deprecated from long ago. ;-)
What would be a better way to do the same thing with updated code? I'm assuming something with groups.
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy
Contact:

Re: Small/Large Clock

Post by fonpaolo »

If you give a look at the deprecated link posted above, you'll find all needed to update your bangs.

But, since we're here:
- Remove !Execute, leave the #Variables# untouched;
- Remove the Rainmeter from all the bangs, now it's !HideMeter, !ShowMeter, !UpdateMeasure, !UpdateMeter, !Update and !Redraw.

- For the groups, !HideMeterGroup, !ShowMeterGroup, !UpdateMeasureGroup, !UpdateMeterGroup.
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Small/Large Clock

Post by CyberTheWorm »

Thanks fonpaolo :thumbup:
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy
Contact:

Re: Small/Large Clock

Post by fonpaolo »

You're welcome. :D

Sorry to be so picky... but better give to users something coded in the proper way, to learn. ;-)
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Small/Large Clock

Post by balala »

Besides what fonpaolo said, there is another small problem: the upper side of the shape meters (used as backgrounds), are truncated. That's happening because the vertical position of these meters is set to 0 (the Y option and the second parameter/number in the Rectangle section of the Shape options of [MeterButtonSmall] and [MeterButtonLarge] meters), but the strokes have a default width of 1. This will truncate these strokes. Details: https://forum.rainmeter.net/viewtopic.php?p=131429#p131429
The simplest solution would be to move these meters 1 pixel down: replace the Y=0 options of them with Y=1. Alternatively you could try to modify the second 0 in the (as I said) second parameter/number in the Rectangle section of the Shape options, to 1: Shape=Rectangle 0,[color=#FF0000]1[/color],40,80,10,10 | Fill Color 127,127,127,255 respectively Shape=Rectangle 0,[color=#FF0000]1[/color],200,80,10,10 | Fill Color 127,127,127,255.
Anyway if do any of these, probably the position of [MeterVTime] and [MeterTime] meters should be adjusted accordingly, because they are positioned absolutely, so if you move the backgrounds, won't look good enough (even if we're talking just about 1 pixel movement).
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Small/Large Clock

Post by jsmorley »

You also don't need the [!Redraw] bangs. !ShowMeter and !HideMeter are instantaneous in all cases, and there is no need to force a redraw of the skin window before the next update.

If you do want to force a redraw of the skin before the next normal update, which in many cases you will, you should always use !UpdateMeter / !UpdateMeterGroup before and with the !Redraw. !Redraw on its own does absolutely nothing.

https://forum.rainmeter.net/viewtopic.php?p=128650#p128650
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Small/Large Clock

Post by CyberTheWorm »

Thanks for all the suggestions/help guys here is my update.

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Author=Graham Wedepohl
Version=1.1.0
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Small/Large Clock

[Variables]
ShowClock=[!HideMeter MeterButtonSmall][!ShowMeter MeterButtonLarge][!ShowMeter MeterTime][!ShowMeter MeterDate][!ShowMeter MeterDay][!HideMeter MeterVTime]
HideClock=[!ShowMeter MeterButtonSmall][!HideMeter MeterButtonLarge][!HideMeter MeterTime][!HideMeter MeterDate][!HideMeter MeterDay][!ShowMeter MeterVTime]

[MeasureVTime]
Measure=Time
Format=%H %M %S

[MeasureTime]
Measure=Time
Format=%H:%M:%S

[MeasureDate]
Measure=Time
Format=%d %B %Y

[MeasureDay]
Measure=Time
Format=%A

[MeterButtonSmall]
Meter=Shape
X=160
Y=1
Shape=Rectangle 0,0,40,80,10,10 | StrokeWidth 2 | Fill Color 127,127,127,255 | Stroke Color 200,200,200,255
LeftMouseUpAction=#ShowClock#
Hidden=1
ToolTipText=Left-click to Open

[MeterButtonLarge]
Meter=Shape
X=1
Y=1
Shape=Rectangle 0,0,200,80,10,10 | StrokeWidth 2 | Fill Color 127,127,127,255 | Stroke Color 200,200,200,255
LeftMouseUpAction=#HideClock#
ToolTipText=Left-click to Hide

[MeterVTime]
MeasureName=MeasureVTime
Meter=STRING
X=180
Y=16
W=30
H=60
FontColor=255,255,255,255
FontSize=12
StringAlign=CENTER
StringEffect=Shadow
FontEffectColor=0,0,0,255
AntiAlias=1
ClipString=1
Hidden=1

[MeterTime]
MeasureName=MeasureTime
Meter=STRING
X=100
Y=3
FontColor=255,255,255,255
FontSize=25
StringAlign=CENTER
StringEffect=Shadow
FontEffectColor=0,0,0,255
AntiAlias=1

[MeterDay]
MeasureName=MeasureDay
Meter=STRING
X=0r
Y=34r
FontColor=255,255,255,255
FontSize=15
StringAlign=CENTER
StringEffect=Shadow
FontEffectColor=0,0,0,255
AntiAlias=1

[MeterDate]
MeasureName=MeasureDate
Meter=STRING
X=0r
Y=20r
FontColor=255,255,255,255
FontSize=15
StringAlign=CENTER
StringEffect=Shadow
FontEffectColor=0,0,0,255
AntiAlias=1
Last edited by CyberTheWorm on January 25th, 2017, 12:24 am, edited 3 times in total.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5382
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Small/Large Clock

Post by eclectic-tech »

I like what you have done!

A few suggestions (of course :D ):
I would recommend use of 'LeftMouseUpAction=' instead of 'LeftMouseDownAction=' in your bangs; using 'LeftMouseDownAction=' prevents dragging the skin to position it.

Secondly, you set the X position of your Large background to 200, which prevents the skin from being positioned all the way to the left screen edge. I would suggest a setting of X=1 on the Large background, and modify all your other meters X values by the same (-199), so 360 becomes 161, 380 becomes 181, and 300 becomes 101. Now the Large skin can be set to the left edge.

Nice clean code and the clock looks good! :thumbup:
Post Reply