It is currently May 18th, 2021, 11:49 pm

The Neu Clock

Help with creating, editing & fixing problems with skins
Brian0404
Posts: 1
Joined: May 2nd, 2021, 5:53 am

The Neu Clock

Post by Brian0404 »

I was surffing through internet when I found this clean and minimal clock but the only problem I am encountering is that the code is in HTML, CSS,
and JS the link to the clock is here https://codepen.io/MananTank/pen/bGdOedL
Can someone help me I don't know what to do
User avatar
CyberTheWorm
Posts: 776
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: The Neu Clock

Post by CyberTheWorm »

It's not a Rainmeter skin, you will need to create a webpage with the HTML, CSS and JS.
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
ikarus1969
Posts: 428
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: The Neu Clock

Post by ikarus1969 »

Hi!
i have made a relatively quick and relatively dirty skin for it. There's plenty room of optimizing in the sense of design and you can play around with ActionTimer to make smooth transitions from one second/minute/hour to another. I will do that myself but i won't stop you from find out things by yourself and discover the beauty of Rainmeter.

GIF 02.05.2021 10-26-18.gif

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Variables]
SKIN.W=460
SKIN.H=560

CSOnly.Offset=2
Offset.Links=(4 * #CSOnly.Offset#)
Offset.Rechts=#Offset.Links#
Offset.Oben=#Offset.Links#
Offset.Unten=#Offset.Links#

CSOnly.Border_WH=8
CSOnly.Border.X=(#WORKAREAX# + 0.5 * #CSOnly.Border_WH#)
CSOnly.Border.Y=(#WORKAREAY# + 0.5 * #CSOnly.Border_WH#)
CSOnly.Border.W=(#SKIN.W# - #CSOnly.Border_WH#)
CSOnly.Border.H=(#SKIN.H# - #CSOnly.Border_WH#)

SKIN.BG.X=(#CSOnly.Border.X# + 0.5 * #CSOnly.Border_WH#)
SKIN.BG.Y=(#CSOnly.Border.Y# + 0.5 * #CSOnly.Border_WH#)
SKIN.BG.W=(#CSOnly.Border.W# - #CSOnly.Border_WH#)
SKIN.BG.H=(#CSOnly.Border.H# - #CSOnly.Border_WH#)

SKIN.BG.X.Mitte=(#SKIN.BG.X# + 0.5 * #SKIN.BG.W#)
SKIN.BG.X.Rechts=(#SKIN.BG.X# + #SKIN.BG.W#)

Canvas.Y.Unten=(#SKIN.BG.Y# + #SKIN.BG.H#)
Canvas.H=(#Canvas.Y.Unten# - #SKIN.BG.Y#)

SKIN.BG.Y.Mitte=(#SKIN.BG.Y# + 0.5 * #Canvas.H#)

Font.Face.NumValues=Victor Mono

CS.SW=2
CS.R=20
CS.D=(2 * #CS.R#)
CS.X=(#SKIN.BG.X# + #Offset.Links# + #CS.R#)
CS.Y=#SKIN.BG.Y.Mitte#

HH.1.Mitte.X=(#CS.X#         +     #CS.R#)
HH.2.Mitte.X=(#HH.1.Mitte.X# + 3 * #CS.R#)
MM.1.Mitte.X=(#HH.2.Mitte.X# + 4 * #CS.R#)
MM.2.Mitte.X=(#MM.1.Mitte.X# + 3 * #CS.R#)
SS.1.Mitte.X=(#MM.2.Mitte.X# + 4 * #CS.R#)
SS.2.Mitte.X=(#SS.1.Mitte.X# + 3 * #CS.R#)



; --------------------------------------------------------------------------------
; Measures
; --------------------------------------------------------------------------------
[Measure_Zeit_HH]
Measure=TIME
Format=%H

[Measure_Zeit_MM]
Measure=TIME
Format=%M

[Measure_Zeit_SS]
Measure=TIME
Format=%S
; --------------------------------------------------------------------------------

[Measure_Zeit_HH_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_HH / 10)

[Measure_Zeit_HH_O]
Measure=CALC
Formula=Measure_Zeit_HH - 10 * Measure_Zeit_HH_T
; --------------------------------------------------------------------------------

[Measure_Zeit_MM_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_MM / 10)

[Measure_Zeit_MM_O]
Measure=CALC
Formula=Measure_Zeit_MM - 10 * Measure_Zeit_MM_T
; --------------------------------------------------------------------------------

[Measure_Zeit_SS_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_SS / 10)

[Measure_Zeit_SS_O]
Measure=CALC
Formula=Measure_Zeit_SS - 10 * Measure_Zeit_SS_T



; --------------------------------------------------------------------------------
; Styles
; --------------------------------------------------------------------------------
[Style_Digit_Stripe]
Y=0R
InlineSetting= Face   | #Font.Face.NumValues#
InlineSetting2=Size   | 14
InlineSetting3=Color  | FFFFFFFF
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[Style_Digit]
Y=(#CS.Y# - 2)
InlineSetting= Face   | #Font.Face.NumValues#
InlineSetting2=Size   | 16
InlineSetting3=Color  | 004080FF
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1


; --------------------------------------------------------------------------------
; Meters
; --------------------------------------------------------------------------------
[Meter_BG]
Meter=SHAPE
Shape=Rectangle #CSOnly.Border.X#, #CSOnly.Border.Y#, #CSOnly.Border.W#, #CSOnly.Border.H# | Extend Format_Border
Format_Border=StrokeWidth #CSOnly.Border_WH# | Stroke Color FFFFFF80 | Fill Color FFFFFF00

Shape2=Rectangle #SKIN.BG.X#, #SKIN.BG.Y#, #SKIN.BG.W#, #SKIN.BG.H# | Extend Format_BG
Format_BG=StrokeWidth 0 | Fill Color FFFFFFFF

Shape3=Path Path_Inset | Extend Format_Inset
Path_Inset=(#SKIN.BG.X# + 0.5), (#SKIN.BG.Y# + #SKIN.BG.H#) | LineTo (#SKIN.BG.X# + 0.5), #SKIN.BG.Y# | LineTo (#SKIN.BG.X.Rechts# - 0.5), #SKIN.BG.Y#
Format_Inset=Stroke Color 000000FF

AntiAlias=1
DynamicVariables=1
UpdateDivider=-1

[Meter_HH_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#HH.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_T] * [Meter_HH_T_Stripe_0:H]), (#CS.D# - 6), (3 * [Meter_HH_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=16 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#HH.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_T] * [Meter_HH_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_HH_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#HH.1.Mitte.X#

[Meter_HH_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#HH.1.Mitte.X#

[Meter_HH_T_BG]
Meter=SHAPE
Shape=Ellipse #HH.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_HH_T
X=#HH.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_HH_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#HH.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_O] * [Meter_HH_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_HH_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#HH.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_O] * [Meter_HH_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_HH_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#HH.2.Mitte.X#

[Meter_HH_O_BG]
Meter=SHAPE
Shape=Ellipse #HH.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_HH_O
X=#HH.2.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_MM_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#MM.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_T] * [Meter_MM_T_Stripe_0:H]), (#CS.D# - 6), (6 * [Meter_MM_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=8 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#MM.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_T] * [Meter_MM_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_MM_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#MM.1.Mitte.X#

[Meter_MM_T_BG]
Meter=SHAPE
Shape=Ellipse #MM.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_MM_T
X=#MM.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_MM_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#MM.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_O] * [Meter_MM_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_MM_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#MM.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_O] * [Meter_MM_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_MM_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#MM.2.Mitte.X#

[Meter_MM_O_BG]
Meter=SHAPE
Shape=Ellipse #MM.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_MM_O
X=#MM.2.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_SS_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#SS.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_T] * [Meter_SS_T_Stripe_0:H]), (#CS.D# - 6), (6 * [Meter_SS_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=8 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#SS.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_T] * [Meter_SS_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_SS_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#SS.1.Mitte.X#

[Meter_SS_T_BG]
Meter=SHAPE
Shape=Ellipse #SS.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_SS_T
X=#SS.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_SS_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#SS.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_O] * [Meter_SS_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_SS_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#SS.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_O] * [Meter_SS_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_SS_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#SS.2.Mitte.X#

[Meter_SS_O_BG]
Meter=SHAPE
Shape=Ellipse #SS.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_SS_O
X=#SS.2.Mitte.X#
You do not have the required permissions to view the files attached to this post.