Clock

A clock is a display that shows the time, with optional hour, minute and second hands.

It can be styled with several attributes that change its appearance.

It has a timer mode that counts down to a specified end time.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

"mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 40.

Height

Sets the object's height in pixels.

Minimum value is 40.

Clock

Type

Specifies the clock type.

Attribute Values

Value	Description
analog	Default value. Analog clock.
digital	Digital clock.

The default value is: analog.

Time

Specifies the time to display.

Attribute Values

Value	Description	Example
now	Default value. Live time.
<hh:mm:ss.SSS>	Fixed time. Minutes, seconds and milliseconds are optional.	12:00
<timestamp>	Fixed timestamp in milliseconds.	1789661777885

The default value is: now.

Time Source

Specifies the time source.

Attribute Values

Value	Description
server	Default value. Use the server time.
local	Use the browser time.

The default value is: server.

Time Zone Offset

Specifies the time zone offset, applied to the time source UTC value. It can be aligned with the server time zone, the local time zone or it can be a specific offset. Specific offsets are expressed as [+/-][hours]:[minutes], e.g.

• +0:00 for UTC
• +1:00 for UTC+1
• -5:30 for UTC-5:30

Attribute Values

Value	Description	Example
server	Default value. Use the server time zone.
local	Use the local time zone.
+0:00	UTC time zone.
<string>	Time zone offset expressed as [+/-][hours]:[minutes].	+1:00

The default value is: server.

Mode

Specifies the clock mode.

Attribute Values

Value	Description
clock	Default value. Show a clock.
timer	Show a timer, that counts down to end time.

The default value is: clock.

End Time

Specifies the end time for the timer.

Attribute Values

Value	Description	Example
<hh:mm:ss.SSS>	The end time in time format. Milliseconds are optional.	12:00:00:0001
<yyyy/MM/dd hh:mm:ss.SSS>	The end time in date time format. Milliseconds are optional.	01/01/2000 12:00:00:0001
<timestamp>	The end time as timestamp.	1789661777885

This attribute is available when mode is "timer".

Hands

Hour Hand

Specifies the hour hand visibility.

Attribute Values

Value	Description
true	Default value. Show hour hand.
false	No hour hand.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to true.

Minute Hand

Specifies the minute hand visibility.

Attribute Values

Value	Description
true	Default value. Show minute hand.
false	No minute hand.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to true.

Second Hand

Specifies the second hand visibility and behavior.

Attribute Values

Value	Description
sweep	Default value. Show second hand with a sweeping movement.
step	Show second hand with a stepping movement.
off	No second hand.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to sweep.

Layout

Hour Markers

Specifies if the hour markers are visible.

Attribute Values

Value	Description
on	Show hour markers.
off	No hour markers.
auto	Default value. Show hour markers only when the clock is large enough.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to auto.

Minute Markers

Specifies if the minute markers are visible.

Attribute Values

Value	Description
on	Show minute markers.
off	No minute markers.
auto	Default value. Show minute markers only when the clock is large enough.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to auto.

Numerals

Specifies if the hour numerals are visible.

Attribute Values

Value	Description
auto	Default value. Show hour (clock mode) or minute (timer mode) numerals when the clock is large enough.
hour	Show hour numerals.
minute	Show minute numerals.
off	No numerals.

This attribute is available when type is "analog".

When type is "analog", this attribute defaults to auto.

Time Layout

Specifies the time layout.

Attribute Values

Value	Description
horizontal	Default value. Horizontal layout.
vertical	Vertical layout.

The default value is: horizontal.

Time Display Format

Specifies the field's format.

Attribute Values

Value	Description	Example
<JSON object>	Format configuration object.	{"format":"time","timestyle":"short","hourcycle":"h23","timezone":"UTC"}

The default value is: {"timestyle":"custom","hour":"2-digit"}.

Panel

Panel

Shows a panel that frames the object. Its style can be modified.

Attribute Values

Value	Description
true	Default value. Shows the panel.
false	Hides the panel.

The default value is: true.

Panel Color

Specifies the panel color.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

This attribute is available when panel is "true".

The default value is: default.

Panel Custom Color

Specifies the panel custom color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom".

Style

Face Color

Specifies the clock face color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Hand Color

Specifies the clock hand color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Second Hand Color

Specifies the clock second hand color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Hour Marker Color

Specifies the clock hour marker color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Minute Marker Color

Specifies the clock minute marker color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Numeral Color

Specifies the clock numeral color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "analog".

Typography

Font Family

Specifies the font family.

This attribute is available when type is "digital".

When type is "digital", this attribute defaults to default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

This attribute is available when type is "digital".

When type is "digital", this attribute defaults to 14.

Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when type is "digital".

Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

This attribute is available when type is "digital".

The default value is: normal.

Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

This attribute is available when type is "digital".

The default value is: false.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.