From 664a63a4b8c1b0b945ca45b1181ead040a12fa73 Mon Sep 17 00:00:00 2001 From: Clark Moody Date: Thu, 2 Apr 2020 17:52:21 -0500 Subject: [PATCH] Add example program: color palette Sliders for many color spaces update as any other sliders are moved around. Color is space is clamped to sRGB, so Lab and Lch color spaces cannot be fully expressed. TODO: - Real-time manipulation of base color to create a color scheme. - Show slider value under each slider - Show output values in text boxes for each color space --- Cargo.toml | 1 + examples/color_palette/Cargo.toml | 14 ++ examples/color_palette/README.md | 9 ++ examples/color_palette/src/main.rs | 250 +++++++++++++++++++++++++++++ 4 files changed, 274 insertions(+) create mode 100644 examples/color_palette/Cargo.toml create mode 100644 examples/color_palette/README.md create mode 100644 examples/color_palette/src/main.rs diff --git a/Cargo.toml b/Cargo.toml index 9b88f9ec..8f0a95c3 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -41,6 +41,7 @@ members = [ "winit", "examples/bezier_tool", "examples/clock", + "examples/color_palette", "examples/counter", "examples/custom_widget", "examples/download_progress", diff --git a/examples/color_palette/Cargo.toml b/examples/color_palette/Cargo.toml new file mode 100644 index 00000000..0ad6708c --- /dev/null +++ b/examples/color_palette/Cargo.toml @@ -0,0 +1,14 @@ +[package] +name = "color_palette" +version = "0.1.0" +authors = ["Clark Moody "] +edition = "2018" +publish = false + +[features] +palette = [] + +[dependencies] +iced = { path = "../..", features = ["palette"] } +iced_core = { path = "../../core" } +iced_native = { path = "../../native" } diff --git a/examples/color_palette/README.md b/examples/color_palette/README.md new file mode 100644 index 00000000..b646f3b3 --- /dev/null +++ b/examples/color_palette/README.md @@ -0,0 +1,9 @@ +## Color Palette + +A color palette generator, based on a user-defined root color. + +You can run it with `cargo run`: + +``` +cargo run --package color_palette +``` diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs new file mode 100644 index 00000000..1c9fffbc --- /dev/null +++ b/examples/color_palette/src/main.rs @@ -0,0 +1,250 @@ +use iced::{ + slider, Color, Column, Element, Row, Sandbox, Settings, Slider, Text, +}; +use iced_core::palette::{self, Limited}; + +pub fn main() { + ColorPalette::run(Settings::default()) +} + +#[derive(Default)] +pub struct ColorPalette { + base_color: Color, + rgb_sliders: [slider::State; 3], + hsl_sliders: [slider::State; 3], + hsv_sliders: [slider::State; 3], + hwb_sliders: [slider::State; 3], + lab_sliders: [slider::State; 3], + lch_sliders: [slider::State; 3], +} + +#[derive(Debug, Clone, Copy)] +pub enum Message { + RgbColorChanged(Color), + HslColorChanged(palette::Hsl), + HsvColorChanged(palette::Hsv), + HwbColorChanged(palette::Hwb), + LabColorChanged(palette::Lab), + LchColorChanged(palette::Lch), +} + +impl Sandbox for ColorPalette { + type Message = Message; + + fn new() -> Self { + let mut s = Self::default(); + s.base_color = Color::from_rgb8(27, 135, 199); + s + } + + fn title(&self) -> String { + String::from("Color Palette") + } + + fn update(&mut self, message: Message) { + let mut srgb = match message { + Message::RgbColorChanged(rgb) => palette::Srgb::from(rgb), + Message::HslColorChanged(hsl) => palette::Srgb::from(hsl), + Message::HsvColorChanged(hsv) => palette::Srgb::from(hsv), + Message::HwbColorChanged(hwb) => palette::Srgb::from(hwb), + Message::LabColorChanged(lab) => palette::Srgb::from(lab), + Message::LchColorChanged(lch) => palette::Srgb::from(lch), + }; + srgb.clamp_self(); + self.base_color = Color::from(srgb); + } + + fn view(&mut self) -> Element { + let [rgb1, rgb2, rgb3] = &mut self.rgb_sliders; + let [hsl1, hsl2, hsl3] = &mut self.hsl_sliders; + let [hsv1, hsv2, hsv3] = &mut self.hsv_sliders; + let [hwb1, hwb2, hwb3] = &mut self.hwb_sliders; + let [lab1, lab2, lab3] = &mut self.lab_sliders; + let [lch1, lch2, lch3] = &mut self.lch_sliders; + + let color = self.base_color; + let srgb = palette::Srgb::from(self.base_color); + let hsl = palette::Hsl::from(srgb); + let hsv = palette::Hsv::from(srgb); + let hwb = palette::Hwb::from(srgb); + let lab = palette::Lab::from(srgb); + let lch = palette::Lch::from(srgb); + + Column::new() + .padding(20) + .spacing(20) + .push( + Row::new() + .spacing(10) + .push(Text::new("RGB")) + .push(Slider::new(rgb1, 0.0..=1.0, color.r, move |r| { + Message::RgbColorChanged(Color { r, ..color }) + })) + .push(Slider::new(rgb2, 0.0..=1.0, color.g, move |g| { + Message::RgbColorChanged(Color { g, ..color }) + })) + .push(Slider::new(rgb3, 0.0..=1.0, color.b, move |b| { + Message::RgbColorChanged(Color { b, ..color }) + })), + ) + .push( + Row::new() + .spacing(10) + .push(Text::new("HSL")) + .push(Slider::new( + hsl1, + 0.0..=360.0, + hsl.hue.to_positive_degrees(), + move |hue| { + Message::HslColorChanged(palette::Hsl { + hue: palette::RgbHue::from_degrees(hue), + ..hsl + }) + }, + )) + .push(Slider::new( + hsl2, + 0.0..=1.0, + hsl.saturation, + move |saturation| { + Message::HslColorChanged(palette::Hsl { + saturation, + ..hsl + }) + }, + )) + .push(Slider::new( + hsl3, + 0.0..=1.0, + hsl.lightness, + move |lightness| { + Message::HslColorChanged(palette::Hsl { + lightness, + ..hsl + }) + }, + )), + ) + .push( + Row::new() + .spacing(10) + .push(Text::new("HSV")) + .push(Slider::new( + hsv1, + 0.0..=360.0, + hsv.hue.to_positive_degrees(), + move |hue| { + Message::HsvColorChanged(palette::Hsv { + hue: palette::RgbHue::from_degrees(hue), + ..hsv + }) + }, + )) + .push(Slider::new( + hsv2, + 0.0..=1.0, + hsv.saturation, + move |saturation| { + Message::HsvColorChanged(palette::Hsv { + saturation, + ..hsv + }) + }, + )) + .push(Slider::new( + hsv3, + 0.0..=1.0, + hsv.value, + move |value| { + Message::HsvColorChanged(palette::Hsv { + value, + ..hsv + }) + }, + )), + ) + .push( + Row::new() + .spacing(10) + .push(Text::new("HWB")) + .push(Slider::new( + hwb1, + 0.0..=360.0, + hwb.hue.to_positive_degrees(), + move |hue| { + Message::HwbColorChanged(palette::Hwb { + hue: palette::RgbHue::from_degrees(hue), + ..hwb + }) + }, + )) + .push(Slider::new( + hwb2, + 0.0..=1.0, + hwb.whiteness, + move |whiteness| { + Message::HwbColorChanged(palette::Hwb { + whiteness, + ..hwb + }) + }, + )) + .push(Slider::new( + hwb3, + 0.0..=1.0, + hwb.blackness, + move |blackness| { + Message::HwbColorChanged(palette::Hwb { + blackness, + ..hwb + }) + }, + )), + ) + .push( + Row::new() + .spacing(10) + .push(Text::new("Lab")) + .push(Slider::new(lab1, 0.0..=100.0, lab.l, move |l| { + Message::LabColorChanged(palette::Lab { l, ..lab }) + })) + .push(Slider::new(lab2, -128.0..=127.0, lab.a, move |a| { + Message::LabColorChanged(palette::Lab { a, ..lab }) + })) + .push(Slider::new(lab3, -128.0..=127.0, lab.b, move |b| { + Message::LabColorChanged(palette::Lab { b, ..lab }) + })), + ) + .push( + Row::new() + .spacing(10) + .push(Text::new("Lch")) + .push(Slider::new(lch1, 0.0..=100.0, lch.l, move |l| { + Message::LchColorChanged(palette::Lch { l, ..lch }) + })) + .push(Slider::new( + lch2, + 0.0..=128.0, + lch.chroma, + move |chroma| { + Message::LchColorChanged(palette::Lch { + chroma, + ..lch + }) + }, + )) + .push(Slider::new( + lch3, + 0.0..=360.0, + lch.hue.to_positive_degrees(), + move |hue| { + Message::LchColorChanged(palette::Lch { + hue: palette::LabHue::from_degrees(hue), + ..lch + }) + }, + )), + ) + .into() + } +}