Add UTC hours to the watch face

src/main.rs

@@ -23,6 +23,43 @@ fn time_to_degrees(timestamp: i32, // should be time/timestamp
     seconds_to_degrees(timestamp)
 }
 
+fn hour_marker(
+    hour: i32,
+    image_width: u32,
+    outer_r: f32,
+    ring_width: f32,
+    utc_hour_font_size: f32,
+) -> Group {
+    let rotation = hour * 15;
+    let utc_hour_y = image_width as f32 / 2.0 - outer_r + ring_width + utc_hour_font_size;
+
+    let utc_hour_text = Text::new()
+        .set("class", "utc")
+        .set(
+            "transform",
+            format!("rotate(-7.5, {}, {})", image_width / 2, image_width / 2),
+        )
+        .set("x", image_width / 2)
+        .set("y", utc_hour_y)
+        .set("text-anchor", "middle")
+        .set("dominant-baseline", "mathematical")
+        .set("font-size", utc_hour_font_size)
+        .add(TextNode::new(format!("U {:02}", hour)));
+
+    Group::new()
+        .set("class", "hour")
+        .set(
+            "transform",
+            format!(
+                "rotate({}, {}, {})",
+                rotation as f32 - 172.5,
+                image_width / 2,
+                image_width / 2
+            ),
+        )
+        .add(utc_hour_text)
+}
+
 fn get_moon_path(image_width: u32, radius: f32, moon_phase: f64) -> Path {
     let handle_x_pos = radius as f64 * 1.34;
     let handle_y_pos = radius * 0.88;
@@ -66,6 +103,7 @@ fn get_moon_path(image_width: u32, radius: f32, moon_phase: f64) -> Path {
 fn gen_svg() -> Document {
     // These should be calculated
     let local_timestamp = Local::now();
+    let utc_offset = local_timestamp.offset().local_minus_utc();
     let local_time = local_timestamp.time().num_seconds_from_midnight() as i32;
 
     // TODO: These should be calculated instead of hardcoded
@@ -78,6 +116,7 @@ fn gen_svg() -> Document {
     let moon_phase = moon_illumination.phase * 28.0;
 
     let local_hour_font_size = 16.5;
+    let utc_hour_font_size = image_width as f32 * 0.021462;
     let hour_name_font_size = 13.37699;
     let outer_r = (image_width as f32) / 2.0 - 3.0 * hour_name_font_size;
     let ring_width = hour_name_font_size * 3.0;
@@ -90,6 +129,7 @@ fn gen_svg() -> Document {
     let stylesheet = Style::new(
         "\
         #border {stroke: none; fill: rgb(19, 17, 30); }
+        .hour text.utc {stroke: none; fill: rgb(91, 68, 38);}
         .local-hour {stroke: none; fill: rgb(238, 187, 85);}
         .moon-background {stroke: rgb(170, 170, 170); stroke-width: 2px; fill: rgb(19, 17, 30);}
         .moon {stroke: none; fill: rgb(170, 170, 170);}
@@ -119,6 +159,26 @@ fn gen_svg() -> Document {
         local_clock = local_clock.add(hour_node);
     }
 
+    let mut seasonal_clock = Group::new().set(
+        "transform",
+        format!(
+            "rotate({}, {}, {})",
+            seconds_to_degrees(utc_offset),
+            image_width / 2,
+            image_width / 2
+        ),
+    );
+
+    for hour in 0i32..24 {
+        seasonal_clock = seasonal_clock.add(hour_marker(
+            hour,
+            image_width,
+            outer_r,
+            ring_width,
+            utc_hour_font_size,
+        ));
+    }
+
     let moon_circle = Circle::new()
         .set("class", "moon-background")
         .set("cx", image_width / 2)
@@ -158,6 +218,7 @@ fn gen_svg() -> Document {
         .add(stylesheet)
         .add(border)
         .add(local_clock)
+        .add(seasonal_clock)
         .add(moon_group)
         .add(dial)
 }