Add hour names

src/main.rs

@@ -9,12 +9,20 @@ use sctk::reexports::client::protocol::{wl_shm, wl_surface};
 use sctk::shm::AutoMemPool;
 use sctk::window::{Event as WEvent, FallbackFrame};
 use svg::node::element::path::Data as PathData;
-use svg::node::element::{Circle, Definitions, Group, Line, Path, Rectangle, Style, Text};
+use svg::node::element::{
+    Circle, Definitions, Group, Line, Path, Rectangle, Style, Text, TextPath,
+};
 use svg::node::Text as TextNode;
 use svg::Document;
 
 sctk::default_environment!(SeasonalClock, desktop);
 
+const HOUR_NAMES: [&str; 24] = [
+    "Candle", "Ice", "Comet", "Thimble", "Root", "Mist", "Sprout", "Rainbow", "Worm", "Bud",
+    "Blossom", "Ladybug", "Geese", "Dust", "Peach", "Fog", "Acorn", "Gourd", "Soup", "Crow",
+    "Mushroom", "Thunder", "Frost", "Lantern",
+];
+
 fn seconds_to_degrees(seconds: i32) -> f32 {
     seconds as f32 * 360.0 / 86400.0
 }
@@ -49,11 +57,49 @@ fn hour_marker(
     image_width: u32,
     outer_r: f32,
     ring_width: f32,
+    hour_name_font_size: f32,
     utc_hour_font_size: f32,
 ) -> Group {
     let rotation = hour * 15;
+
+    let delta_x = outer_r * (15f32.to_radians() / 2.0).sin();
+    let delta_y = outer_r * (1.0 - (15f32.to_radians() / 2.0).cos());
+
+    let s_delta_x = 0.0 - ring_width * (15f32.to_radians() / 2.0).sin();
+    let s_delta_y = ring_width * (15f32.to_radians() / 2.0).cos();
+
+    let i_delta_x = -2.0 * (outer_r - ring_width) * (15f32.to_radians() / 2.0).sin();
+
+    let x1 = image_width as f32 / 2.0 - delta_x;
+    let y1 = (image_width as f32 / 2.0 - outer_r) + delta_y;
+
     let utc_hour_y = image_width as f32 / 2.0 - outer_r + ring_width + utc_hour_font_size;
 
+    let path_data = PathData::new()
+        .move_to((x1, y1))
+        .elliptical_arc_by((outer_r, outer_r, 15, 0, 1, 2.0 * delta_x, 0))
+        .line_by((s_delta_x, s_delta_y))
+        .elliptical_arc_by((
+            outer_r - ring_width,
+            outer_r - ring_width,
+            15,
+            0,
+            0,
+            i_delta_x,
+            0,
+        ))
+        .close();
+    let path = Path::new().set("d", path_data);
+    let hour_name_text_path = TextPath::new()
+        .set("xlink:href", "#hour-name-path")
+        .set("startOffset", "50%")
+        .add(TextNode::new(HOUR_NAMES[hour as usize]));
+    let hour_name_text = Text::new()
+        .set("text-anchor", "middle")
+        .set("dominant-baseline", "mathematical")
+        .set("font-size", hour_name_font_size)
+        .add(hour_name_text_path);
+
     let utc_hour_text = Text::new()
         .set("class", "utc")
         .set(
@@ -78,6 +124,8 @@ fn hour_marker(
                 image_width / 2
             ),
         )
+        .add(path)
+        .add(hour_name_text)
         .add(utc_hour_text)
 }
 
@@ -228,6 +276,8 @@ fn gen_svg() -> Document {
     let stylesheet = Style::new(
         "\
         #border {stroke: none; fill: rgb(19, 17, 30); }
+        .hour path {stroke: rgb(0, 0, 0); stroke-width: 2px;}
+        .hour text {stroke: none; fill: rgb(238, 187, 85);}
         .hour text.utc {stroke: none; fill: rgb(91, 68, 38);}
         .local-hour {stroke: none; fill: rgb(238, 187, 85);}
         .night-time {stroke: none; fill: rgb(19, 17, 30);}
@@ -283,6 +333,7 @@ fn gen_svg() -> Document {
             image_width,
             outer_r,
             ring_width,
+            hour_name_font_size,
             utc_hour_font_size,
         ));
     }