djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nicer looking colors and sliders

Browse source
This commit is contained in:
Emil Ernerfeldt 2019-03-11 15:30:32 +01:00
parent cd58190d35
commit 7cbf8e45bc
4 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/example_bg.wasm
View file

Binary file not shown.

47
emigui/src/style.rs
View file

@ -21,32 +21,32 @@ impl Default for Style {
impl Style { impl Style {
/// e.g. the background of the slider /// e.g. the background of the slider
fn background_fill_color(&self) -> Color { fn background_fill_color(&self) -> Color {
srgba(34, 34, 34, 200) gray(34, 200)
} }
fn text_color(&self) -> Color { fn text_color(&self) -> Color {
srgba(255, 255, 255, 187) gray(255, 200)
} }
/// Fill color of the interactive part of a component (button, slider grab, checkbox, ...) /// Fill color of the interactive part of a component (button, slider grab, checkbox, ...)
fn interact_fill_color(&self, interact: &InteractInfo) -> Color { fn interact_fill_color(&self, interact: &InteractInfo) -> Color {
if interact.active { if interact.active {
srgba(136, 136, 136, 255) srgba(100, 100, 200, 255)
} else if interact.hovered { } else if interact.hovered {
srgba(100, 100, 100, 255) srgba(100, 100, 150, 255)
} else { } else {
srgba(68, 68, 68, 220) srgba(60, 60, 70, 255)
} }
} }
/// Stroke and text color of the interactive part of a component (button, slider grab, checkbox, ...) /// Stroke and text color of the interactive part of a component (button, slider grab, checkbox, ...)
fn interact_stroke_color(&self, interact: &InteractInfo) -> Color { fn interact_stroke_color(&self, interact: &InteractInfo) -> Color {
if interact.active { if interact.active {
srgba(255, 255, 255, 255) gray(255, 255)
} else if interact.hovered { } else if interact.hovered {
srgba(255, 255, 255, 200) gray(255, 200)
} else { } else {
srgba(255, 255, 255, 170) gray(255, 170)
} }
} }
@ -69,7 +69,7 @@ fn debug_rect(rect: Rect) -> PaintCmd {
corner_radius: 0.0, corner_radius: 0.0,
fill_color: None, fill_color: None,
outline: Some(Outline { outline: Some(Outline {
color: srgba(255, 255, 255, 255), color: gray(255, 255),
width: 1.0, width: 1.0,
}), }),
rect, rect,
@ -82,7 +82,7 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
GuiCmd::PaintCommands(mut commands) => out_commands.append(&mut commands), GuiCmd::PaintCommands(mut commands) => out_commands.append(&mut commands),
GuiCmd::Button { interact } => { GuiCmd::Button { interact } => {
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 5.0, corner_radius: 10.0,
fill_color: Some(style.interact_fill_color(&interact)), fill_color: Some(style.interact_fill_color(&interact)),
outline: None, outline: None,
rect: interact.rect, rect: interact.rect,
@ -185,27 +185,28 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
} => { } => {
let rect = interact.rect; let rect = interact.rect;
let thickness = rect.size().y; let thickness = rect.size().y;
let thin_size = vec2(rect.size.x, thickness / 2.0); let thin_size = vec2(rect.size.x, thickness / 5.0);
let thin_rect = Rect::from_center_size(rect.center(), thin_size); let thin_rect = Rect::from_center_size(rect.center(), thin_size);
let marker_center_x = remap_clamp(value, min, max, rect.min().x, rect.max().x); let marker_center_x = remap_clamp(value, min, max, rect.min().x, rect.max().x);
let marker_rect = Rect::from_center_size(
vec2(marker_center_x, thin_rect.center().y),
vec2(thickness, thickness),
);
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 2.0, corner_radius: 4.0,
fill_color: Some(style.background_fill_color()), fill_color: Some(style.background_fill_color()),
outline: None, outline: Some(Outline {
color: gray(200, 255), // TODO
width: 1.0,
}),
rect: thin_rect, rect: thin_rect,
}); });
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Circle {
corner_radius: 6.0, center: vec2(marker_center_x, thin_rect.center().y),
fill_color: Some(style.interact_fill_color(&interact)), fill_color: Some(style.interact_fill_color(&interact)),
outline: None, outline: Some(Outline {
rect: marker_rect, color: style.interact_stroke_color(&interact),
width: 1.5,
}),
radius: thickness / 3.0,
}); });
if style.debug_rects { if style.debug_rects {
@ -233,7 +234,7 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
corner_radius: 5.0, corner_radius: 5.0,
fill_color: Some(style.background_fill_color()), fill_color: Some(style.background_fill_color()),
outline: Some(Outline { outline: Some(Outline {
color: srgba(255, 255, 255, 255), // TODO color: gray(255, 255), // TODO
width: 1.0, width: 1.0,
}), }),
rect, rect,

12
emigui/src/types.rs
View file

@ -85,6 +85,15 @@ pub const fn srgba(r: u8, g: u8, b: u8, a: u8) -> Color {
Color { r, g, b, a } Color { r, g, b, a }
} }
pub const fn gray(l: u8, a: u8) -> Color {
Color {
r: l,
g: l,
b: l,
a,
}
}
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
#[derive(Clone, Copy, Debug, Default, Serialize)] #[derive(Clone, Copy, Debug, Default, Serialize)]
@ -160,7 +169,6 @@ pub enum PaintCmd {
outline: Option<Outline>, outline: Option<Outline>,
radius: f32, radius: f32,
}, },
Mesh(Mesh),
Line { Line {
points: Vec<Vec2>, points: Vec<Vec2>,
color: Color, color: Color,
@ -183,4 +191,6 @@ pub enum PaintCmd {
x_offsets: Vec<f32>, x_offsets: Vec<f32>,
// TODO: font info // TODO: font info
}, },
/// Low-level triangle mesh
Mesh(Mesh),
} }

12
example/src/app.rs
View file

@ -2,10 +2,8 @@ use emigui::{label, math::*, types::*, widgets::*, Align, Region, TextStyle};
pub fn show_value_gui(value: &mut usize, gui: &mut Region) { pub fn show_value_gui(value: &mut usize, gui: &mut Region) {
gui.add(Slider::usize(value, 1, 1000)); gui.add(Slider::usize(value, 1, 1000));
if *value < 500 { if gui.add(Button::new("Double it")).clicked {
if gui.add(Button::new("Double it")).clicked { *value *= 2;
*value *= 2;
}
} }
gui.add(label!("Value: {}", value)); gui.add(label!("Value: {}", value));
} }
@ -120,14 +118,14 @@ impl App {
for i in 0..self.num_boxes { for i in 0..self.num_boxes {
cmds.push(PaintCmd::Rect { cmds.push(PaintCmd::Rect {
corner_radius: self.corner_radius, corner_radius: self.corner_radius,
fill_color: Some(srgba(136, 136, 136, 255)), fill_color: Some(gray(136, 255)),
rect: Rect::from_min_size( rect: Rect::from_min_size(
vec2(pos.x + (i as f32) * self.size.x, pos.y), vec2(pos.x + (i as f32) * (self.size.x * 1.1), pos.y),
self.size, self.size,
), ),
outline: Some(Outline { outline: Some(Outline {
width: self.stroke_width, width: self.stroke_width,
color: srgba(255, 255, 255, 255), color: gray(255, 255),
}), }),
}); });
} }