From ad34f03df4abb2c430bf6a4f5ac030d12d05863e Mon Sep 17 00:00:00 2001 From: Kevin Day Date: Sat, 19 Oct 2024 16:12:38 +1000 Subject: Modified clock example to make the clock more readable. Added numbers on the clock face and took the portion of the hour passed into consideration for the hour hand. It now looks like a reasonable clock. --- examples/clock/src/main.rs | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'examples/clock/src/main.rs') diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs index ef3064c7..a7e86ff1 100644 --- a/examples/clock/src/main.rs +++ b/examples/clock/src/main.rs @@ -1,4 +1,4 @@ -use iced::alignment; +use iced::{alignment, Radians}; use iced::mouse; use iced::time; use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke}; @@ -117,9 +117,12 @@ impl canvas::Program for Clock { }; frame.translate(Vector::new(center.x, center.y)); + let minutes_portion = Radians::from(hand_rotation(self.now.minute(), 60)) / 12.0; + let hour_hand_angle = Radians::from(hand_rotation(self.now.hour(), 12)) + minutes_portion; + frame.with_save(|frame| { - frame.rotate(hand_rotation(self.now.hour(), 12)); + frame.rotate(hour_hand_angle); frame.stroke(&short_hand, wide_stroke()); }); @@ -155,10 +158,31 @@ impl canvas::Program for Clock { ..canvas::Text::default() }); }); + + // Draw clock numbers + for i in 1..=12 { + let distance_out = radius * 1.05; + let angle = + Radians::from(hand_rotation(i, 12)) - Radians::from(Degrees(90.0)); + let x = distance_out * angle.0.cos(); + let y = distance_out * angle.0.sin(); + + frame.fill_text(canvas::Text { + content: format!("{}", i), + size: (radius / 15.0).into(), + position: Point::new(x * 0.85, y * 0.85), + color: palette.secondary.strong.text, + horizontal_alignment: alignment::Horizontal::Center, + vertical_alignment: alignment::Vertical::Center, + font: Font::MONOSPACE, + ..canvas::Text::default() + }); + } }); vec![clock] } + } fn hand_rotation(n: u32, total: u32) -> Degrees { -- cgit From 10e5362c04b968e9e708287dece4b167d4040570 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 16 Jan 2025 12:07:41 +0000 Subject: Make numbers bigger and draw ticks in `clock` example --- examples/clock/src/main.rs | 51 +++++++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 16 deletions(-) (limited to 'examples/clock/src/main.rs') diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs index a7e86ff1..0aa54d3a 100644 --- a/examples/clock/src/main.rs +++ b/examples/clock/src/main.rs @@ -1,11 +1,11 @@ -use iced::{alignment, Radians}; use iced::mouse; use iced::time; use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke}; use iced::widget::{canvas, container}; +use iced::{alignment, Radians}; use iced::{ - Degrees, Element, Fill, Font, Point, Rectangle, Renderer, Subscription, - Theme, Vector, + Degrees, Element, Fill, Font, Point, Rectangle, Renderer, Size, + Subscription, Theme, Vector, }; pub fn main() -> iced::Result { @@ -117,9 +117,11 @@ impl canvas::Program for Clock { }; frame.translate(Vector::new(center.x, center.y)); - let minutes_portion = Radians::from(hand_rotation(self.now.minute(), 60)) / 12.0; - let hour_hand_angle = Radians::from(hand_rotation(self.now.hour(), 12)) + minutes_portion; - + let minutes_portion = + Radians::from(hand_rotation(self.now.minute(), 60)) / 12.0; + let hour_hand_angle = + Radians::from(hand_rotation(self.now.hour(), 12)) + + minutes_portion; frame.with_save(|frame| { frame.rotate(hour_hand_angle); @@ -160,17 +162,16 @@ impl canvas::Program for Clock { }); // Draw clock numbers - for i in 1..=12 { - let distance_out = radius * 1.05; - let angle = - Radians::from(hand_rotation(i, 12)) - Radians::from(Degrees(90.0)); - let x = distance_out * angle.0.cos(); - let y = distance_out * angle.0.sin(); + for hour in 1..=12 { + let angle = Radians::from(hand_rotation(hour, 12)) + - Radians::from(Degrees(90.0)); + let x = radius * angle.0.cos(); + let y = radius * angle.0.sin(); frame.fill_text(canvas::Text { - content: format!("{}", i), - size: (radius / 15.0).into(), - position: Point::new(x * 0.85, y * 0.85), + content: format!("{}", hour), + size: (radius / 5.0).into(), + position: Point::new(x * 0.82, y * 0.82), color: palette.secondary.strong.text, horizontal_alignment: alignment::Horizontal::Center, vertical_alignment: alignment::Vertical::Center, @@ -178,11 +179,29 @@ impl canvas::Program for Clock { ..canvas::Text::default() }); } + + // Draw ticks + for tick in 0..60 { + let angle = Radians::from(hand_rotation(tick, 60)) + - Radians::from(Degrees(90.0)); + + let width = if tick % 5 == 0 { 3.0 } else { 1.0 }; + + frame.with_save(|frame| { + frame.rotate(angle); + frame.fill( + &Path::rectangle( + Point::new(0.0, radius - 15.0), + Size::new(width, 7.0), + ), + palette.secondary.strong.text, + ); + }); + } }); vec![clock] } - } fn hand_rotation(n: u32, total: u32) -> Degrees { -- cgit From d9a732994f0ac426fabcf189b4ec1014f9af96ab Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 16 Jan 2025 12:17:28 +0000 Subject: Simplify tick drawing logic in `clock` example --- examples/clock/src/main.rs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'examples/clock/src/main.rs') diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs index 0aa54d3a..7d11a3b5 100644 --- a/examples/clock/src/main.rs +++ b/examples/clock/src/main.rs @@ -182,9 +182,7 @@ impl canvas::Program for Clock { // Draw ticks for tick in 0..60 { - let angle = Radians::from(hand_rotation(tick, 60)) - - Radians::from(Degrees(90.0)); - + let angle = hand_rotation(tick, 60); let width = if tick % 5 == 0 { 3.0 } else { 1.0 }; frame.with_save(|frame| { -- cgit