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

Encode colors in sRGBA

Browse source
This commit is contained in:
Emil Ernerfeldt 2018-12-27 17:47:32 +01:00
parent d828e58d1b
commit a52f27b8c8
5 changed files with 107 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
docs/frontend.js
View file

@ -1,22 +1,25 @@
function paintCommand(canvas, cmd) { function styleFromColor(color) {
return "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + color.a / 255.0 + ")";
}
function paint_command(canvas, cmd) {
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
// console.log(`cmd: ${JSON.stringify(cmd)}`); // console.log(`cmd: ${JSON.stringify(cmd)}`);
switch (cmd.kind) { switch (cmd.kind) {
case "circle": case "circle":
ctx.beginPath(); ctx.beginPath();
ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false); ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false);
if (cmd.fill_style) { if (cmd.fill_color) {
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.fill(); ctx.fill();
} }
if (cmd.outline) { if (cmd.outline) {
ctx.lineWidth = cmd.outline.width; ctx.lineWidth = cmd.outline.width;
ctx.strokeStyle = cmd.outline.style; ctx.strokeStyle = styleFromColor(cmd.outline.color);
ctx.stroke(); ctx.stroke();
} }
return; return;
case "clear": case "clear":
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
return; return;
case "line": case "line":
@ -27,7 +30,7 @@ function paintCommand(canvas, cmd) {
ctx.lineTo(point.x, point.y); ctx.lineTo(point.x, point.y);
} }
ctx.lineWidth = cmd.width; ctx.lineWidth = cmd.width;
ctx.strokeStyle = cmd.style; ctx.strokeStyle = styleFromColor(cmd.color);
ctx.stroke(); ctx.stroke();
return; return;
case "rect": case "rect":
@ -47,19 +50,19 @@ function paintCommand(canvas, cmd) {
ctx.lineTo(x, y + r); ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y); ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath(); ctx.closePath();
if (cmd.fill_style) { if (cmd.fill_color) {
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.fill(); ctx.fill();
} }
if (cmd.outline) { if (cmd.outline) {
ctx.lineWidth = cmd.outline.width; ctx.lineWidth = cmd.outline.width;
ctx.strokeStyle = cmd.outline.style; ctx.strokeStyle = styleFromColor(cmd.outline.color);
ctx.stroke(); ctx.stroke();
} }
return; return;
case "text": case "text":
ctx.font = cmd.font; ctx.font = cmd.font;
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.textAlign = cmd.text_align; ctx.textAlign = cmd.text_align;
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y); ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return; return;
@ -96,12 +99,12 @@ function js_gui(input) {
function paint_gui(canvas, input) { function paint_gui(canvas, input) {
var commands = rust_gui(input); var commands = rust_gui(input);
commands.unshift({ commands.unshift({
fill_style: "#00000000", fill_color: { r: 0, g: 0, b: 0, a: 0 },
kind: "clear" kind: "clear"
}); });
for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) { for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
var cmd = commands_1[_i]; var cmd = commands_1[_i];
paintCommand(canvas, cmd); paint_command(canvas, cmd);
} }
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------

50
docs/frontend.ts
View file

@ -6,26 +6,34 @@ interface Vec2 {
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Paint module: // Paint module:
/// 0-255 sRGBA
interface Color {
r: number;
g: number;
b: number;
a: number;
}
interface Clear { interface Clear {
kind: "clear"; kind: "clear";
fill_style: string; fill_color: Color;
} }
interface Line { interface Line {
kind: "line"; kind: "line";
points: Vec2[]; points: Vec2[];
style: string; color: Color;
width: number; width: number;
} }
interface Outline { interface Outline {
width: number; width: number;
style: string; color: Color;
} }
interface Circle { interface Circle {
center: Vec2; center: Vec2;
fill_style: string | null; fill_color: Color | null;
kind: "circle"; kind: "circle";
outline: Outline | null; outline: Outline | null;
radius: number; radius: number;
@ -33,7 +41,7 @@ interface Circle {
interface Rect { interface Rect {
corner_radius: number; corner_radius: number;
fill_style: string | null; fill_color: Color | null;
kind: "rect"; kind: "rect";
outline: Outline | null; outline: Outline | null;
pos: Vec2; pos: Vec2;
@ -42,17 +50,21 @@ interface Rect {
interface Text { interface Text {
kind: "text"; kind: "text";
fill_style: string | null; fill_color: Color | null;
font: string; font: string;
pos: Vec2; pos: Vec2;
stroke_style: string | null; stroke_color: Color | null;
text: string; text: string;
text_align: "start" | "center" | "end"; text_align: "start" | "center" | "end";
} }
type PaintCmd = Circle | Clear | Line | Rect | Text; type PaintCmd = Circle | Clear | Line | Rect | Text;
function paintCommand(canvas, cmd: PaintCmd) { function styleFromColor(color: Color): string {
return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255.0})`;
}
function paint_command(canvas, cmd: PaintCmd) {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
// console.log(`cmd: ${JSON.stringify(cmd)}`); // console.log(`cmd: ${JSON.stringify(cmd)}`);
@ -61,19 +73,19 @@ function paintCommand(canvas, cmd: PaintCmd) {
case "circle": case "circle":
ctx.beginPath(); ctx.beginPath();
ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false); ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false);
if (cmd.fill_style) { if (cmd.fill_color) {
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.fill(); ctx.fill();
} }
if (cmd.outline) { if (cmd.outline) {
ctx.lineWidth = cmd.outline.width; ctx.lineWidth = cmd.outline.width;
ctx.strokeStyle = cmd.outline.style; ctx.strokeStyle = styleFromColor(cmd.outline.color);
ctx.stroke(); ctx.stroke();
} }
return; return;
case "clear": case "clear":
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
return; return;
@ -84,7 +96,7 @@ function paintCommand(canvas, cmd: PaintCmd) {
ctx.lineTo(point.x, point.y); ctx.lineTo(point.x, point.y);
} }
ctx.lineWidth = cmd.width; ctx.lineWidth = cmd.width;
ctx.strokeStyle = cmd.style; ctx.strokeStyle = styleFromColor(cmd.color);
ctx.stroke(); ctx.stroke();
return; return;
@ -105,20 +117,20 @@ function paintCommand(canvas, cmd: PaintCmd) {
ctx.lineTo(x, y + r); ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y); ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath(); ctx.closePath();
if (cmd.fill_style) { if (cmd.fill_color) {
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.fill(); ctx.fill();
} }
if (cmd.outline) { if (cmd.outline) {
ctx.lineWidth = cmd.outline.width; ctx.lineWidth = cmd.outline.width;
ctx.strokeStyle = cmd.outline.style; ctx.strokeStyle = styleFromColor(cmd.outline.color);
ctx.stroke(); ctx.stroke();
} }
return; return;
case "text": case "text":
ctx.font = cmd.font; ctx.font = cmd.font;
ctx.fillStyle = cmd.fill_style; ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.textAlign = cmd.text_align; ctx.textAlign = cmd.text_align;
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y); ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return; return;
@ -184,12 +196,12 @@ function js_gui(input: RawInput): PaintCmd[] {
function paint_gui(canvas, input: RawInput) { function paint_gui(canvas, input: RawInput) {
const commands = rust_gui(input); const commands = rust_gui(input);
commands.unshift({ commands.unshift({
fill_style: "#00000000", fill_color: {r: 0, g: 0, b: 0, a: 0},
kind: "clear", kind: "clear",
}); });
for (const cmd of commands) { for (const cmd of commands) {
paintCommand(canvas, cmd); paint_command(canvas, cmd);
} }
} }

4
src/app.rs
View file

@ -66,12 +66,12 @@ impl GuiSettings for App {
gui.commands gui.commands
.push(GuiCmd::PaintCommands(vec![PaintCmd::Rect { .push(GuiCmd::PaintCommands(vec![PaintCmd::Rect {
corner_radius: self.corner_radius, corner_radius: self.corner_radius,
fill_style: Some("#888888ff".into()), fill_color: Some(srgba(136, 136, 136, 255)),
pos: vec2(300.0, 100.0), pos: vec2(300.0, 100.0),
size: vec2(self.width, self.height), size: vec2(self.width, self.height),
outline: Some(Outline { outline: Some(Outline {
width: self.stroke_width, width: self.stroke_width,
style: "#ffffffff".into(), color: srgba(255, 255, 255, 255),
}), }),
}])); }]));

76
src/style.rs
View file

@ -21,23 +21,23 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
rect, rect,
text, text,
} => { } => {
let rect_fill_style = if interact.active { let rect_fill_color = if interact.active {
"#888888ff".to_string() srgba(136, 136, 136, 255)
} else if interact.hovered { } else if interact.hovered {
"#666666ff".to_string() srgba(100, 100, 100, 255)
} else { } else {
"#444444ff".to_string() srgba(68, 68, 68, 255)
}; };
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 5.0, corner_radius: 5.0,
fill_style: Some(rect_fill_style), fill_color: Some(rect_fill_color),
outline: None, outline: None,
pos: rect.pos, pos: rect.pos,
size: rect.size, size: rect.size,
}); });
// TODO: clip-rect of text // TODO: clip-rect of text
out_commands.push(PaintCmd::Text { out_commands.push(PaintCmd::Text {
fill_style: "#ffffffbb".to_string(), fill_color: srgba(255, 255, 255, 187),
font: "14px Palatino".to_string(), font: "14px Palatino".to_string(),
pos: Vec2 { pos: Vec2 {
x: rect.center().x, x: rect.center().x,
@ -53,20 +53,20 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
rect, rect,
text, text,
} => { } => {
let fill_style = if interact.active { let fill_color = if interact.active {
"#888888ff".to_string() srgba(136, 136, 136, 255)
} else if interact.hovered { } else if interact.hovered {
"#666666ff".to_string() srgba(100, 100, 100, 255)
} else { } else {
"#444444ff".to_string() srgba(68, 68, 68, 255)
}; };
let stroke_style = if interact.active { let stroke_color = if interact.active {
"#ffffffff".to_string() srgba(255, 255, 255, 255)
} else if interact.hovered { } else if interact.hovered {
"#ffffffcc".to_string() srgba(255, 255, 255, 200)
} else { } else {
"#ffffffaa".to_string() srgba(255, 255, 255, 170)
}; };
let box_side = 16.0; let box_side = 16.0;
@ -76,7 +76,7 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
); );
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 3.0, corner_radius: 3.0,
fill_style: Some(fill_style), fill_color: Some(fill_color),
outline: None, outline: None,
pos: box_rect.pos, pos: box_rect.pos,
size: box_rect.size, size: box_rect.size,
@ -90,13 +90,13 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
vec2(smaller_rect.center().x, smaller_rect.max().y), vec2(smaller_rect.center().x, smaller_rect.max().y),
vec2(smaller_rect.max().x, smaller_rect.min().y), vec2(smaller_rect.max().x, smaller_rect.min().y),
], ],
style: stroke_style.clone(), color: stroke_color,
width: style.line_width, width: style.line_width,
}); });
} }
out_commands.push(PaintCmd::Text { out_commands.push(PaintCmd::Text {
fill_style: stroke_style.clone(), fill_color: stroke_color,
font: "14px Palatino".to_string(), font: "14px Palatino".to_string(),
pos: Vec2 { pos: Vec2 {
x: box_rect.max().x + 4.0, x: box_rect.max().x + 4.0,
@ -112,27 +112,27 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
rect, rect,
text, text,
} => { } => {
let fill_style = if interact.active { let fill_color = if interact.active {
"#888888ff".to_string() srgba(136, 136, 136, 255)
} else if interact.hovered { } else if interact.hovered {
"#666666ff".to_string() srgba(100, 100, 100, 255)
} else { } else {
"#444444ff".to_string() srgba(68, 68, 68, 255)
}; };
let stroke_style = if interact.active { let stroke_color = if interact.active {
"#ffffffff".to_string() srgba(255, 255, 255, 255)
} else if interact.hovered { } else if interact.hovered {
"#ffffffcc".to_string() srgba(255, 255, 255, 200)
} else { } else {
"#ffffffaa".to_string() srgba(255, 255, 255, 170)
}; };
let circle_radius = 8.0; let circle_radius = 8.0;
let circle_center = vec2(rect.min().x + circle_radius, rect.center().y); let circle_center = vec2(rect.min().x + circle_radius, rect.center().y);
out_commands.push(PaintCmd::Circle { out_commands.push(PaintCmd::Circle {
center: circle_center, center: circle_center,
fill_style: Some(fill_style), fill_color: Some(fill_color),
outline: None, outline: None,
radius: circle_radius, radius: circle_radius,
}); });
@ -140,14 +140,14 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
if checked { if checked {
out_commands.push(PaintCmd::Circle { out_commands.push(PaintCmd::Circle {
center: circle_center, center: circle_center,
fill_style: Some("#000000ff".to_string()), fill_color: Some(srgba(0, 0, 0, 255)),
outline: None, outline: None,
radius: circle_radius * 0.5, radius: circle_radius * 0.5,
}); });
} }
out_commands.push(PaintCmd::Text { out_commands.push(PaintCmd::Text {
fill_style: stroke_style.clone(), fill_color: stroke_color,
font: "14px Palatino".to_string(), font: "14px Palatino".to_string(),
pos: Vec2 { pos: Vec2 {
x: rect.min().x + 2.0 * circle_radius + 4.0, x: rect.min().x + 2.0 * circle_radius + 4.0,
@ -177,17 +177,17 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
vec2(16.0, 16.0), vec2(16.0, 16.0),
); );
let marker_fill_style = if interact.active { let marker_fill_color = if interact.active {
"#888888ff".to_string() srgba(136, 136, 136, 255)
} else if interact.hovered { } else if interact.hovered {
"#666666ff".to_string() srgba(100, 100, 100, 255)
} else { } else {
"#444444ff".to_string() srgba(68, 68, 68, 255)
}; };
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 2.0, corner_radius: 2.0,
fill_style: Some("#222222ff".to_string()), fill_color: Some(srgba(34, 34, 34, 255)),
outline: None, outline: None,
pos: thin_rect.pos, pos: thin_rect.pos,
size: thin_rect.size, size: thin_rect.size,
@ -195,14 +195,14 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
out_commands.push(PaintCmd::Rect { out_commands.push(PaintCmd::Rect {
corner_radius: 3.0, corner_radius: 3.0,
fill_style: Some(marker_fill_style), fill_color: Some(marker_fill_color),
outline: None, outline: None,
pos: marker_rect.pos, pos: marker_rect.pos,
size: marker_rect.size, size: marker_rect.size,
}); });
out_commands.push(PaintCmd::Text { out_commands.push(PaintCmd::Text {
fill_style: "#ffffffbb".to_string(), fill_color: srgba(255, 255, 255, 187),
font: "14px Palatino".to_string(), font: "14px Palatino".to_string(),
pos: vec2( pos: vec2(
rect.min().x, rect.min().x,
@ -218,11 +218,11 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
text_align, text_align,
style, style,
} => { } => {
let fill_style = match style { let fill_color = match style {
TextStyle::Label => "#ffffffbb".to_string(), TextStyle::Label => srgba(255, 255, 255, 187),
}; };
out_commands.push(PaintCmd::Text { out_commands.push(PaintCmd::Text {
fill_style, fill_color,
font: "14px Palatino".to_string(), font: "14px Palatino".to_string(),
pos: pos + vec2(0.0, 7.0), // TODO: FIXME pos: pos + vec2(0.0, 7.0), // TODO: FIXME
text, text,

29
src/types.rs
View file

@ -48,6 +48,21 @@ impl GuiInput {
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
/// 0-255 sRGBA
#[derive(Clone, Copy, Debug, Default, Serialize)]
pub struct Color {
pub r: u8,
pub g: u8,
pub b: u8,
pub a: u8,
}
pub fn srgba(r: u8, g: u8, b: u8, a: u8) -> Color {
Color { r, g, b, a }
}
// ----------------------------------------------------------------------------
#[derive(Clone, Copy, Debug, Default, Serialize)] #[derive(Clone, Copy, Debug, Default, Serialize)]
pub struct InteractInfo { pub struct InteractInfo {
pub hovered: bool, pub hovered: bool,
@ -111,12 +126,10 @@ pub enum GuiCmd {
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
pub type Style = String;
#[derive(Clone, Debug, Serialize)] #[derive(Clone, Debug, Serialize)]
pub struct Outline { pub struct Outline {
pub width: f32, pub width: f32,
pub style: Style, pub color: Color,
} }
#[derive(Clone, Debug, Serialize)] // TODO: copy #[derive(Clone, Debug, Serialize)] // TODO: copy
@ -124,27 +137,27 @@ pub struct Outline {
pub enum PaintCmd { pub enum PaintCmd {
Circle { Circle {
center: Vec2, center: Vec2,
fill_style: Option<Style>, fill_color: Option<Color>,
outline: Option<Outline>, outline: Option<Outline>,
radius: f32, radius: f32,
}, },
Clear { Clear {
fill_style: Style, fill_color: Color,
}, },
Line { Line {
points: Vec<Vec2>, points: Vec<Vec2>,
style: Style, color: Color,
width: f32, width: f32,
}, },
Rect { Rect {
corner_radius: f32, corner_radius: f32,
fill_style: Option<Style>, fill_color: Option<Color>,
outline: Option<Outline>, outline: Option<Outline>,
pos: Vec2, pos: Vec2,
size: Vec2, size: Vec2,
}, },
Text { Text {
fill_style: Style, fill_color: Color,
font: String, font: String,
pos: Vec2, pos: Vec2,
text: String, text: String,