From 2b746c7b253573c9194844a02afba709839f5910 Mon Sep 17 00:00:00 2001 From: Matthias Vogelgesang Date: Sat, 2 Sep 2023 13:44:45 +0200 Subject: Add gradient picker example --- examples/gradients/Cargo.toml | 8 +++ examples/gradients/src/main.rs | 136 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+) create mode 100644 examples/gradients/Cargo.toml create mode 100644 examples/gradients/src/main.rs (limited to 'examples') diff --git a/examples/gradients/Cargo.toml b/examples/gradients/Cargo.toml new file mode 100644 index 00000000..1bc65a9c --- /dev/null +++ b/examples/gradients/Cargo.toml @@ -0,0 +1,8 @@ +[package] +name = "gradients" +version = "0.1.0" +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../.." } diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs new file mode 100644 index 00000000..d8b7945e --- /dev/null +++ b/examples/gradients/src/main.rs @@ -0,0 +1,136 @@ +use iced::widget::{column, container, row, slider, text}; +use iced::{ + gradient, Alignment, Background, BorderRadius, Color, Element, Length, + Radians, Sandbox, Settings, +}; + +pub fn main() -> iced::Result { + Gradient::run(Settings::default()) +} + +struct Gradient { + first: Color, + second: Color, + angle: f32, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + FirstChanged(Color), + SecondChanged(Color), + AngleChanged(f32), +} + +impl Sandbox for Gradient { + type Message = Message; + + fn new() -> Self { + let first = Color::new(0.2784314, 0.0627451, 0.4117647, 1.0); + let second = Color::new(0.1882353, 0.772549, 0.8235294, 1.0); + + Self { + first, + second, + angle: 0.0, + } + } + + fn title(&self) -> String { + String::from("Color gradient") + } + + fn update(&mut self, message: Message) { + match message { + Message::FirstChanged(color) => self.first = color, + Message::SecondChanged(color) => self.second = color, + Message::AngleChanged(angle) => self.angle = angle, + } + } + + fn view(&self) -> Element { + let first = self.first; + let second = self.second; + let angle = self.angle; + + let gradient_box = container(text("")) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .style(move |_: &_| { + let gradient = gradient::Linear::new(Radians(angle)) + .add_stop(0.0, first) + .add_stop(1.0, second) + .into(); + + container::Appearance { + text_color: None, + background: Some(Background::Gradient(gradient)), + border_radius: BorderRadius::default(), + border_width: 0.0, + border_color: Color::new(0.0, 0.0, 0.0, 0.0), + } + }); + + let range = 0.0..=1.0; + let l = self.first; + let r = self.second; + + let first_color_picker = row![ + text("First").width(64), + slider(range.clone(), l.r, move |v| { + Message::FirstChanged(Color::new(v, l.g, l.b, l.a)) + }) + .step(0.01), + slider(range.clone(), l.g, move |v| { + Message::FirstChanged(Color::new(l.r, v, l.b, l.a)) + }) + .step(0.01), + slider(range.clone(), l.b, move |v| { + Message::FirstChanged(Color::new(l.r, l.g, v, l.a)) + }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + let second_color_picker = row![ + text("Second").width(64), + slider(range.clone(), r.r, move |v| { + Message::SecondChanged(Color::new(v, r.g, r.b, r.a)) + }) + .step(0.01), + slider(range.clone(), r.g, move |v| { + Message::SecondChanged(Color::new(r.r, v, r.b, r.a)) + }) + .step(0.01), + slider(range.clone(), r.b, move |v| { + Message::SecondChanged(Color::new(r.r, r.g, v, r.a)) + }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + let angle_picker = row![ + text("Angle").width(64), + slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { + Message::AngleChanged(v) + }) + .step(0.01) + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + column![ + first_color_picker, + second_color_picker, + angle_picker, + gradient_box + ] + .into() + } +} -- cgit From adfcd8c727b896589b77322eae01f9710a86f7cc Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:37:57 +0200 Subject: Simplify `gradients` example --- examples/gradients/src/main.rs | 99 ++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 62 deletions(-) (limited to 'examples') diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs index d8b7945e..ad9bfe11 100644 --- a/examples/gradients/src/main.rs +++ b/examples/gradients/src/main.rs @@ -8,16 +8,17 @@ pub fn main() -> iced::Result { Gradient::run(Settings::default()) } +#[derive(Debug, Clone, Copy)] struct Gradient { - first: Color, - second: Color, + start: Color, + end: Color, angle: f32, } #[derive(Debug, Clone, Copy)] enum Message { - FirstChanged(Color), - SecondChanged(Color), + StartChanged(Color), + EndChanged(Color), AngleChanged(f32), } @@ -25,32 +26,30 @@ impl Sandbox for Gradient { type Message = Message; fn new() -> Self { - let first = Color::new(0.2784314, 0.0627451, 0.4117647, 1.0); - let second = Color::new(0.1882353, 0.772549, 0.8235294, 1.0); + let start = Color::new(1.0, 1.0, 1.0, 1.0); + let end = Color::new(0.0, 0.0, 1.0, 1.0); Self { - first, - second, + start, + end, angle: 0.0, } } fn title(&self) -> String { - String::from("Color gradient") + String::from("Gradient") } fn update(&mut self, message: Message) { match message { - Message::FirstChanged(color) => self.first = color, - Message::SecondChanged(color) => self.second = color, + Message::StartChanged(color) => self.start = color, + Message::EndChanged(color) => self.end = color, Message::AngleChanged(angle) => self.angle = angle, } } fn view(&self) -> Element { - let first = self.first; - let second = self.second; - let angle = self.angle; + let Self { start, end, angle } = *self; let gradient_box = container(text("")) .width(Length::Fill) @@ -58,10 +57,12 @@ impl Sandbox for Gradient { .center_x() .center_y() .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians(angle)) - .add_stop(0.0, first) - .add_stop(1.0, second) - .into(); + let gradient = gradient::Linear::new(Radians( + angle + std::f32::consts::PI, + )) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); container::Appearance { text_color: None, @@ -72,48 +73,6 @@ impl Sandbox for Gradient { } }); - let range = 0.0..=1.0; - let l = self.first; - let r = self.second; - - let first_color_picker = row![ - text("First").width(64), - slider(range.clone(), l.r, move |v| { - Message::FirstChanged(Color::new(v, l.g, l.b, l.a)) - }) - .step(0.01), - slider(range.clone(), l.g, move |v| { - Message::FirstChanged(Color::new(l.r, v, l.b, l.a)) - }) - .step(0.01), - slider(range.clone(), l.b, move |v| { - Message::FirstChanged(Color::new(l.r, l.g, v, l.a)) - }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - - let second_color_picker = row![ - text("Second").width(64), - slider(range.clone(), r.r, move |v| { - Message::SecondChanged(Color::new(v, r.g, r.b, r.a)) - }) - .step(0.01), - slider(range.clone(), r.g, move |v| { - Message::SecondChanged(Color::new(r.r, v, r.b, r.a)) - }) - .step(0.01), - slider(range.clone(), r.b, move |v| { - Message::SecondChanged(Color::new(r.r, r.g, v, r.a)) - }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - let angle_picker = row![ text("Angle").width(64), slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { @@ -126,11 +85,27 @@ impl Sandbox for Gradient { .align_items(Alignment::Center); column![ - first_color_picker, - second_color_picker, + color_picker("Start", self.start).map(Message::StartChanged), + color_picker("End", self.end).map(Message::EndChanged), angle_picker, gradient_box ] .into() } } + +fn color_picker(label: &str, color: Color) -> Element<'_, Color> { + row![ + text(label).width(64), + slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center) + .into() +} -- cgit From 21259ee745c17d0f257c7a6c356d8a491460f9d6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:38:51 +0200 Subject: Rename `gradients` example to `gradient` --- examples/gradient/Cargo.toml | 8 +++ examples/gradient/src/main.rs | 111 +++++++++++++++++++++++++++++++++++++++++ examples/gradients/Cargo.toml | 8 --- examples/gradients/src/main.rs | 111 ----------------------------------------- 4 files changed, 119 insertions(+), 119 deletions(-) create mode 100644 examples/gradient/Cargo.toml create mode 100644 examples/gradient/src/main.rs delete mode 100644 examples/gradients/Cargo.toml delete mode 100644 examples/gradients/src/main.rs (limited to 'examples') diff --git a/examples/gradient/Cargo.toml b/examples/gradient/Cargo.toml new file mode 100644 index 00000000..1bc65a9c --- /dev/null +++ b/examples/gradient/Cargo.toml @@ -0,0 +1,8 @@ +[package] +name = "gradients" +version = "0.1.0" +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../.." } diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs new file mode 100644 index 00000000..ad9bfe11 --- /dev/null +++ b/examples/gradient/src/main.rs @@ -0,0 +1,111 @@ +use iced::widget::{column, container, row, slider, text}; +use iced::{ + gradient, Alignment, Background, BorderRadius, Color, Element, Length, + Radians, Sandbox, Settings, +}; + +pub fn main() -> iced::Result { + Gradient::run(Settings::default()) +} + +#[derive(Debug, Clone, Copy)] +struct Gradient { + start: Color, + end: Color, + angle: f32, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + StartChanged(Color), + EndChanged(Color), + AngleChanged(f32), +} + +impl Sandbox for Gradient { + type Message = Message; + + fn new() -> Self { + let start = Color::new(1.0, 1.0, 1.0, 1.0); + let end = Color::new(0.0, 0.0, 1.0, 1.0); + + Self { + start, + end, + angle: 0.0, + } + } + + fn title(&self) -> String { + String::from("Gradient") + } + + fn update(&mut self, message: Message) { + match message { + Message::StartChanged(color) => self.start = color, + Message::EndChanged(color) => self.end = color, + Message::AngleChanged(angle) => self.angle = angle, + } + } + + fn view(&self) -> Element { + let Self { start, end, angle } = *self; + + let gradient_box = container(text("")) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .style(move |_: &_| { + let gradient = gradient::Linear::new(Radians( + angle + std::f32::consts::PI, + )) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); + + container::Appearance { + text_color: None, + background: Some(Background::Gradient(gradient)), + border_radius: BorderRadius::default(), + border_width: 0.0, + border_color: Color::new(0.0, 0.0, 0.0, 0.0), + } + }); + + let angle_picker = row![ + text("Angle").width(64), + slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { + Message::AngleChanged(v) + }) + .step(0.01) + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + column![ + color_picker("Start", self.start).map(Message::StartChanged), + color_picker("End", self.end).map(Message::EndChanged), + angle_picker, + gradient_box + ] + .into() + } +} + +fn color_picker(label: &str, color: Color) -> Element<'_, Color> { + row![ + text(label).width(64), + slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center) + .into() +} diff --git a/examples/gradients/Cargo.toml b/examples/gradients/Cargo.toml deleted file mode 100644 index 1bc65a9c..00000000 --- a/examples/gradients/Cargo.toml +++ /dev/null @@ -1,8 +0,0 @@ -[package] -name = "gradients" -version = "0.1.0" -edition = "2021" -publish = false - -[dependencies] -iced = { path = "../.." } diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs deleted file mode 100644 index ad9bfe11..00000000 --- a/examples/gradients/src/main.rs +++ /dev/null @@ -1,111 +0,0 @@ -use iced::widget::{column, container, row, slider, text}; -use iced::{ - gradient, Alignment, Background, BorderRadius, Color, Element, Length, - Radians, Sandbox, Settings, -}; - -pub fn main() -> iced::Result { - Gradient::run(Settings::default()) -} - -#[derive(Debug, Clone, Copy)] -struct Gradient { - start: Color, - end: Color, - angle: f32, -} - -#[derive(Debug, Clone, Copy)] -enum Message { - StartChanged(Color), - EndChanged(Color), - AngleChanged(f32), -} - -impl Sandbox for Gradient { - type Message = Message; - - fn new() -> Self { - let start = Color::new(1.0, 1.0, 1.0, 1.0); - let end = Color::new(0.0, 0.0, 1.0, 1.0); - - Self { - start, - end, - angle: 0.0, - } - } - - fn title(&self) -> String { - String::from("Gradient") - } - - fn update(&mut self, message: Message) { - match message { - Message::StartChanged(color) => self.start = color, - Message::EndChanged(color) => self.end = color, - Message::AngleChanged(angle) => self.angle = angle, - } - } - - fn view(&self) -> Element { - let Self { start, end, angle } = *self; - - let gradient_box = container(text("")) - .width(Length::Fill) - .height(Length::Fill) - .center_x() - .center_y() - .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians( - angle + std::f32::consts::PI, - )) - .add_stop(0.0, start) - .add_stop(1.0, end) - .into(); - - container::Appearance { - text_color: None, - background: Some(Background::Gradient(gradient)), - border_radius: BorderRadius::default(), - border_width: 0.0, - border_color: Color::new(0.0, 0.0, 0.0, 0.0), - } - }); - - let angle_picker = row![ - text("Angle").width(64), - slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { - Message::AngleChanged(v) - }) - .step(0.01) - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - - column![ - color_picker("Start", self.start).map(Message::StartChanged), - color_picker("End", self.end).map(Message::EndChanged), - angle_picker, - gradient_box - ] - .into() - } -} - -fn color_picker(label: &str, color: Color) -> Element<'_, Color> { - row![ - text(label).width(64), - slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) - .step(0.01), - slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) - .step(0.01), - slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center) - .into() -} -- cgit From f83fb9b6cd221ecfc02d468df128dbb8b3751c3f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:40:27 +0200 Subject: Use `Color::WHITE` in `gradient` example --- examples/gradient/src/main.rs | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'examples') diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index ad9bfe11..dd50ebc9 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -26,12 +26,9 @@ impl Sandbox for Gradient { type Message = Message; fn new() -> Self { - let start = Color::new(1.0, 1.0, 1.0, 1.0); - let end = Color::new(0.0, 0.0, 1.0, 1.0); - Self { - start, - end, + start: Color::WHITE, + end: Color::new(0.0, 0.0, 1.0, 1.0), angle: 0.0, } } -- cgit From fc261a539b28dcd5f1898107a7c69c0719f3bbbf Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:53:26 +0200 Subject: Fix name of `gradient` example package --- examples/gradient/Cargo.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'examples') diff --git a/examples/gradient/Cargo.toml b/examples/gradient/Cargo.toml index 1bc65a9c..2dea2c4f 100644 --- a/examples/gradient/Cargo.toml +++ b/examples/gradient/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "gradients" +name = "gradient" version = "0.1.0" edition = "2021" publish = false -- cgit From 6ff2e48feb7c0c3f65a3e6d298fc1c73356dc740 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:53:34 +0200 Subject: Use `Default` for `container::Appearance` in `gradient` example --- examples/gradient/src/main.rs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'examples') diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index dd50ebc9..91a65f1e 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -1,7 +1,7 @@ +use iced::gradient; use iced::widget::{column, container, row, slider, text}; use iced::{ - gradient, Alignment, Background, BorderRadius, Color, Element, Length, - Radians, Sandbox, Settings, + Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings, }; pub fn main() -> iced::Result { @@ -62,11 +62,8 @@ impl Sandbox for Gradient { .into(); container::Appearance { - text_color: None, background: Some(Background::Gradient(gradient)), - border_radius: BorderRadius::default(), - border_width: 0.0, - border_color: Color::new(0.0, 0.0, 0.0, 0.0), + ..Default::default() } }); -- cgit From d6be3ab68246b08ea3f8988833e3b266b524dd1d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:55:09 +0200 Subject: Use `horizontal_space` instead of empty `text` widget in `gradient` example --- examples/gradient/src/main.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'examples') diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 91a65f1e..3ba08a06 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -1,5 +1,5 @@ use iced::gradient; -use iced::widget::{column, container, row, slider, text}; +use iced::widget::{column, container, horizontal_space, row, slider, text}; use iced::{ Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings, }; @@ -48,7 +48,7 @@ impl Sandbox for Gradient { fn view(&self) -> Element { let Self { start, end, angle } = *self; - let gradient_box = container(text("")) + let gradient_box = container(horizontal_space(Length::Fill)) .width(Length::Fill) .height(Length::Fill) .center_x() -- cgit From c1139898c50d22ac3b711801b1058aacef514030 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:55:54 +0200 Subject: Remove unnecessary centering in `gradient` example --- examples/gradient/src/main.rs | 2 -- 1 file changed, 2 deletions(-) (limited to 'examples') diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 3ba08a06..0b32e73c 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -51,8 +51,6 @@ impl Sandbox for Gradient { let gradient_box = container(horizontal_space(Length::Fill)) .width(Length::Fill) .height(Length::Fill) - .center_x() - .center_y() .style(move |_: &_| { let gradient = gradient::Linear::new(Radians( angle + std::f32::consts::PI, -- cgit From d2294737c2e28b3b3050d7bf820bbca09896b00e Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Sep 2023 01:58:52 +0200 Subject: Use `Radians` as a number directly in `gradient` example --- examples/gradient/src/main.rs | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) (limited to 'examples') diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 0b32e73c..1bf5822d 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -12,14 +12,14 @@ pub fn main() -> iced::Result { struct Gradient { start: Color, end: Color, - angle: f32, + angle: Radians, } #[derive(Debug, Clone, Copy)] enum Message { StartChanged(Color), EndChanged(Color), - AngleChanged(f32), + AngleChanged(Radians), } impl Sandbox for Gradient { @@ -29,7 +29,7 @@ impl Sandbox for Gradient { Self { start: Color::WHITE, end: Color::new(0.0, 0.0, 1.0, 1.0), - angle: 0.0, + angle: Radians(0.0), } } @@ -52,12 +52,10 @@ impl Sandbox for Gradient { .width(Length::Fill) .height(Length::Fill) .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians( - angle + std::f32::consts::PI, - )) - .add_stop(0.0, start) - .add_stop(1.0, end) - .into(); + let gradient = gradient::Linear::new(angle) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); container::Appearance { background: Some(Background::Gradient(gradient)), @@ -67,10 +65,8 @@ impl Sandbox for Gradient { let angle_picker = row![ text("Angle").width(64), - slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { - Message::AngleChanged(v) - }) - .step(0.01) + slider(Radians::RANGE, self.angle, Message::AngleChanged) + .step(0.01) ] .spacing(8) .padding(8) -- cgit