It is currently November 29th, 2021, 12:40 pm

Small/Large Clock

Clocks and timer skins
User avatar
CyberTheWorm
Posts: 801
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
You do not have the required permissions to view the files attached to this post.
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
fonpaolo
Moderator
Posts: 1388
Joined: April 11th, 2013, 8:08 pm
Location: Italy

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: 801
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.
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
fonpaolo
Moderator
Posts: 1388
Joined: April 11th, 2013, 8:08 pm
Location: Italy

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: 801
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Small/Large Clock

Post by CyberTheWorm »

Thanks fonpaolo :thumbup:
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
fonpaolo
Moderator
Posts: 1388
Joined: April 11th, 2013, 8:08 pm
Location: Italy

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: 13497
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: 22414
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: 801
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.
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4497
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

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: