Clock widget settings
The Clock widget is used to display date and time. The clock can be displayed in many formats such as analog or digital format. The time displayed takes into account the timezone for the branch that the widget runs in. The locale for the date and time notation is retrieved from the page locale. Default locale is English.
When using the analog clock, make sure that the widget size on the surface canvas is square so that the clock is shaped as a circle.
The clock can be displayed in many different formats:
-
Analog
-
Digital
-
Internet time .beat
-
Hexadecimal
-
Date/time
The widget has the following settings:
| Name | Description | Default |
|---|---|---|
| Clock type | The clock format | Analog |
| Smooth animation | Smooth animation of the seconds hand for the analog clock, or the time bar for the digital clock | Yes |
| Date element | The text component where the widget will put the date/time as set in the ‘Date format’ setting. Leave empty when not in use. | |
| Date format | Format of date or time to be shown, look at momentjs.com for proper formatting | LLLL |
| Background color | The widget's background color | #252525 |
| Analog border color | The border color used for the analog clock | #6b6b6b |
| Analog clock color | The inner color for the analog clock | #cccccc |
| Show Second hand | Show the seconds hand or not | Yes |
| Seconds hand width | The width of the seconds hand | 6 |
| Seconds hand length | The length of the seconds hand in % | 100 |
| Seconds hand rouning | The rounding of the seconds hand | 3 |
| Seconds hand color | The color of the seconds hand | #ff0000 |
| Minutes hand width | The width of the minutes hand | 20 |
| Minutes hand length | The length of the minutes hand in % | 75 |
| Minutes hand rounding | The rounding of the minutes hand | 10 |
| Minutes hand color | The color of the minutes hand | #000000 |
| Hours hand width | The width of the hours hand | 20 |
| Hours hand length | The length of the hours hand in % | 50 |
| Hours hand rounding | The rounding of the hours hand | 10 |
| Hours hand color | The color of the hours hand | #000000 |
| Seconds marker | When enabled it will show dots for every second | Yes |
| Dot size | Size of the seconds dot, this will always be shown as a circle | 14 |
| Dot color | Color of the seconds dot | #6b6b6b |
| Hour mark | Will mark the hours, quarters or none | Every hour |
| Hour mark size | Length of the hour marker, the width will be the same as the seconds marker | 30 |
| Hour mark color | Color of the hour marker | #6b6b6b |
| Digital font | Font for the digital clock | Arial, 88px |
| Digital color | Font color for the digital clock | #ffffff |
| Digital background | Background color for the digital clock | #252525 |
| Digital timebar width | The width of the timebar around the numbers | 40 |
| Digital padding | Padding between the timebar and the number | 30 |
| Timebar color | Color of the timebar background | #252525 |
| Timebar seconds color | Color of the timebar for the seconds | #76ad13 |
| Timebar minutes color | Color of the timebar for the minutes | #2474cd |
| Timebar hours color | Color of the timebar for the hours | #e1591b |
| .beat sign | Official is the @ sign | @ |
| .beat font | Font of the sign | Arial, 16px |
| .beat color | Color of the sign | #ffff00 |
| .beat value font | Font for the .beat value | Arial, 26px |
| .beat value color | Color of the .beat value | #000000 |
| Hexadecimal font | Font for the hexadecimal clock | Arial, 26px |
| Hexadecimal color | Color for the hexadecimal clock | #000000 |