Updated Customize UI (markdown)

Customize-UI.md

@@ -16,6 +16,23 @@ cd ~/.config/wlxoverlay
 wget https://github.com/galister/wlx-overlay-s/raw/main/src/res/settings.yaml
 ```
 
+### Customize Alternate Timezones
+
+Starting with releases *after* v0.6, alternate timezones preference was moved outside `watch.yaml` to its own separate file.
+
+Create `~/.config/wlxoverlay/timezones.yaml`:
+```yaml
+timezones:
+- "Europe/Oslo"
+- "America/New_York"
+```
+
+Once this file is created, the various settings in custom UI that accept the `timezone` property will use these custom alternate timezones (instead of the default set, which are selected as major ones on different continents from your current actual timezone).
+
+The first timezone is selected with `timezone: 0`, the second with `timezone: 1`, and so on.
+
+There is usually no need to specify your own local timezone in here; omitting `timezone` from a `type: Clock` Label will display local time.
+
 ### Add a custom UI window of your own
 
 Simply create any Yaml file in `~/.config/wlxoverlay` with the correct format. You will be able to spawn it using the `ShowUi` type `Button` placed on an existing UI panel, such as the watch or settings.
@@ -28,7 +45,7 @@ WlxOverlay-S uses one primary font for optimal resource usage. This font can be
 echo 'primary_font: "JetBrains Mono:style=Bold"' > ~/.config/wlxoverlay/conf.d/font.yaml
 ```
 
-The setting takes a fontconfig pattern. For help, see `man fonts-conf`, sections `FONT PROPERTIES` and `FONT NAMES`. 
+The setting takes a fontconfig pattern. For help, see `man fonts-conf`, sections `FONT PROPERTIES` and `FONT NAMES`.
 
 **Do not include font size.** Font size is instead set on the UI element.
 
@@ -54,7 +71,7 @@ The preview is currently non-interactive and won't react to mouse or keyboard in
 
 # Basic UI Settings
 
-- `size` - render resolution of the panel. after changing this, you would need to to re-adjust the placement and sizes of elements. 
+- `size` - render resolution of the panel. after changing this, you would need to to re-adjust the placement and sizes of elements.
 - `width` - size of the panel in 3D space, in meters. height will be calculated from the aspect ratio.
 
 - `elements` - the UI elements that will be drawn and may be interacted with
@@ -96,6 +113,7 @@ Example:
 Displays some kind of text.
 
 #### Static Label
+
 Displays static text.
 ```yaml
   - type: Label
@@ -107,12 +125,34 @@ Displays static text.
 ```
 
 #### Clock label
+
 The clock label displays date, time or both with the provided format. See available formats [here](https://docs.rs/chrono/0.4.34/chrono/format/strftime/index.html).
 ```yaml
+  - type: Label
     source: Clock
     format: "%x"
+    timezone: 0 # Optional. If omitted, use local time
 ```
-#### Exec Label
+
+If a `timezone` property is given, displays the date/time in the the alternate timezone with the given index (0-based).
+To choose a different set of alternate timezones, see the section [Customize Alternate Timezones](#customize-alternate-timezones).
+
+In releases *before and including* v0.6, `timezone` is a tz data timezone identifier.
+In releases *after* v0.6, `timezone` is a 0-based index, defined by the alternate timezones file.
+
+#### Timezone label
+
+Added in releases *after* v0.6.
+
+This shows the friendly name assocated with the alternate timezone with the given index (0-based).
+To choose a different set of alternate timezones, see the section [Customize Alternate Timezones](#customize-alternate-timezones).
+```yaml
+  - type: Label
+    source: Timezone
+    timezone: 0
+```
+
+#### Exec label
 
 Executes a command every `interval` seconds
 
@@ -128,6 +168,7 @@ By default, commands are not executed in a shell. You may explicitly call a shel
     command: [ "bash", "-c", "echo \"hello this is $USER\"" ]
     interval: 0.5
 ```
+
 #### Ipd Label
 
 Displays the current IPD in millimeters with 1 decimal precision
@@ -239,4 +280,4 @@ A showcase of this can be found on the `kbd` button in [watch.yaml](https://gith
 
 #### Internal Use
 
-There are some types that are meant to be used internally, but feel free to use them, too. See: [ButtonData, ButtonAction](https://github.com/galister/wlx-overlay-s/blob/main/src/gui/modular/button.rs)
+There are some types that are meant to be used internally, but feel free to use them, too. See: [ButtonData, ButtonAction](https://github.com/galister/wlx-overlay-s/blob/main/src/gui/modular/button.rs)