reivilibre/iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add example program: color palette

Browse Source 
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
This commit is contained in:
Clark Moody 2020-04-02 17:52:21 -05:00
parent 71657b50dd
commit 664a63a4b8
4 changed files with 274 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -41,6 +41,7 @@ members = [
"winit", "winit",
"examples/bezier_tool", "examples/bezier_tool",
"examples/clock", "examples/clock",
"examples/color_palette",
"examples/counter", "examples/counter",
"examples/custom_widget", "examples/custom_widget",
"examples/download_progress", "examples/download_progress",

14
examples/color_palette/Cargo.toml Normal file
View File

@ -0,0 +1,14 @@
[package]
name = "color_palette"
version = "0.1.0"
authors = ["Clark Moody <clark@clarkmoody.com>"]
edition = "2018"
publish = false
[features]
palette = []
[dependencies]
iced = { path = "../..", features = ["palette"] }
iced_core = { path = "../../core" }
iced_native = { path = "../../native" }

9
examples/color_palette/README.md Normal file
View File

@ -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
```

250
examples/color_palette/src/main.rs Normal file
View File

@ -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<Message> {
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()
}
}