feat: rounded corners

A proof of concept commit for rounded corners. Currently unoptimized and in need of reorganization too. May also make keyboard keys invisible
This commit is contained in:
Adalyn Black
2024-07-19 08:57:32 -07:00
committed by galister
parent a56ed68b44
commit f27c320231
9 changed files with 276 additions and 112 deletions

View File

@@ -39,22 +39,22 @@ impl<D, S> CanvasBuilder<D, S> {
} }
// Creates a panel with bg_color inherited from the canvas // Creates a panel with bg_color inherited from the canvas
pub fn panel(&mut self, x: f32, y: f32, w: f32, h: f32) -> &mut Control<D, S> { pub fn panel(&mut self, x: f32, y: f32, w: f32, h: f32, r: f32) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r },
bg_color: self.bg_color, bg_color: self.bg_color,
on_render_bg: Some(Control::render_rect), on_render_bg: Some(Control::render_rounded_rect),
..Control::new() ..Control::new()
}); });
&mut self.canvas.controls[idx] &mut self.canvas.controls[idx]
} }
// Creates a label with fg_color, font_size inherited from the canvas // Creates a label with fg_color, font_size inherited from the canvas
pub fn label(&mut self, x: f32, y: f32, w: f32, h: f32, text: Arc<str>) -> &mut Control<D, S> { pub fn label(&mut self, x: f32, y: f32, w: f32, h: f32, r: f32, text: Arc<str>) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r },
text, text,
fg_color: self.fg_color, fg_color: self.fg_color,
size: self.font_size, size: self.font_size,
@@ -72,11 +72,12 @@ impl<D, S> CanvasBuilder<D, S> {
y: f32, y: f32,
w: f32, w: f32,
h: f32, h: f32,
r: f32,
text: Arc<str>, text: Arc<str>,
) -> &mut Control<D, S> { ) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r },
text, text,
fg_color: self.fg_color, fg_color: self.fg_color,
size: self.font_size, size: self.font_size,
@@ -90,7 +91,7 @@ impl<D, S> CanvasBuilder<D, S> {
pub fn sprite(&mut self, x: f32, y: f32, w: f32, h: f32) -> &mut Control<D, S> { pub fn sprite(&mut self, x: f32, y: f32, w: f32, h: f32) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r: 0. },
on_render_bg: Some(Control::render_sprite_bg), on_render_bg: Some(Control::render_sprite_bg),
..Control::new() ..Control::new()
}); });
@@ -101,7 +102,7 @@ impl<D, S> CanvasBuilder<D, S> {
pub fn sprite_interactive(&mut self, x: f32, y: f32, w: f32, h: f32) -> &mut Control<D, S> { pub fn sprite_interactive(&mut self, x: f32, y: f32, w: f32, h: f32) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r: 0. },
on_render_bg: Some(Control::render_sprite_bg), on_render_bg: Some(Control::render_sprite_bg),
on_render_hl: Some(Control::render_sprite_hl), on_render_hl: Some(Control::render_sprite_hl),
..Control::new() ..Control::new()
@@ -110,17 +111,17 @@ impl<D, S> CanvasBuilder<D, S> {
} }
// Creates a button with fg_color, bg_color, font_size inherited from the canvas // Creates a button with fg_color, bg_color, font_size inherited from the canvas
pub fn button(&mut self, x: f32, y: f32, w: f32, h: f32, text: Arc<str>) -> &mut Control<D, S> { pub fn button(&mut self, x: f32, y: f32, w: f32, h: f32, r: f32, text: Arc<str>) -> &mut Control<D, S> {
let idx = self.canvas.controls.len(); let idx = self.canvas.controls.len();
self.canvas.interactive_set_idx(x, y, w, h, idx); self.canvas.interactive_set_idx(x, y, w, h, idx);
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r },
text, text,
fg_color: self.fg_color, fg_color: self.fg_color,
bg_color: self.bg_color, bg_color: self.bg_color,
size: self.font_size, size: self.font_size,
on_render_bg: Some(Control::render_rect), on_render_bg: Some(Control::render_rounded_rect),
on_render_fg: Some(Control::render_text_centered), on_render_fg: Some(Control::render_text_centered),
on_render_hl: Some(Control::render_highlight), on_render_hl: Some(Control::render_highlight),
..Control::new() ..Control::new()
@@ -135,6 +136,7 @@ impl<D, S> CanvasBuilder<D, S> {
y: f32, y: f32,
w: f32, w: f32,
h: f32, h: f32,
r: f32,
cap_type: KeyCapType, cap_type: KeyCapType,
label: &[String], label: &[String],
) -> &mut Control<D, S> { ) -> &mut Control<D, S> {
@@ -142,9 +144,9 @@ impl<D, S> CanvasBuilder<D, S> {
self.canvas.interactive_set_idx(x, y, w, h, idx); self.canvas.interactive_set_idx(x, y, w, h, idx);
self.canvas.controls.push(Control { self.canvas.controls.push(Control {
rect: Rect { x, y, w, h }, rect: Rect { x, y, w, h, r },
bg_color: self.bg_color, bg_color: self.bg_color,
on_render_bg: Some(Control::render_rect), on_render_bg: Some(Control::render_rounded_rect),
on_render_hl: Some(Control::render_highlight), on_render_hl: Some(Control::render_highlight),
..Control::new() ..Control::new()
}); });
@@ -157,6 +159,7 @@ impl<D, S> CanvasBuilder<D, S> {
y, y,
w, w,
h: h - self.font_size as f32, h: h - self.font_size as f32,
r: 0.,
}; };
vec![(render, rect, 1f32)] vec![(render, rect, 1f32)]
} }
@@ -167,12 +170,14 @@ impl<D, S> CanvasBuilder<D, S> {
y: y + (self.font_size as f32) + 12., y: y + (self.font_size as f32) + 12.,
w, w,
h, h,
r: 0.,
}; };
let rect1 = Rect { let rect1 = Rect {
x: x + w * 0.5 + 12., x: x + w * 0.5 + 12.,
y: y + h - (self.font_size as f32) + 8., y: y + h - (self.font_size as f32) + 8.,
w, w,
h, h,
r: 0.,
}; };
vec![(render, rect0, 1.0), (render, rect1, 0.8)] vec![(render, rect0, 1.0), (render, rect1, 0.8)]
} }
@@ -183,12 +188,14 @@ impl<D, S> CanvasBuilder<D, S> {
y: y + 2.0, y: y + 2.0,
w, w,
h: h * 0.5, h: h * 0.5,
r: 0.,
}; };
let rect1 = Rect { let rect1 = Rect {
x, x,
y: y + h * 0.5 + 2.0, y: y + h * 0.5 + 2.0,
w, w,
h: h * 0.5, h: h * 0.5,
r: 0.,
}; };
vec![(render, rect1, 1.0), (render, rect0, 0.8)] vec![(render, rect1, 1.0), (render, rect0, 0.8)]
} }
@@ -199,18 +206,21 @@ impl<D, S> CanvasBuilder<D, S> {
y: y + (self.font_size as f32) + 8., y: y + (self.font_size as f32) + 8.,
w, w,
h, h,
r: 0.,
}; };
let rect1 = Rect { let rect1 = Rect {
x: x + 12., x: x + 12.,
y: y + h - (self.font_size as f32) + 4., y: y + h - (self.font_size as f32) + 4.,
w, w,
h, h,
r: 0.,
}; };
let rect2 = Rect { let rect2 = Rect {
x: x + w * 0.5 + 8., x: x + w * 0.5 + 8.,
y: y + h - (self.font_size as f32) + 4., y: y + h - (self.font_size as f32) + 4.,
w, w,
h, h,
r: 0.,
}; };
vec![ vec![
(render, rect1, 1.0), (render, rect1, 1.0),

View File

@@ -1,9 +1,12 @@
use glam::Vec4; use glam::Vec4;
use std::sync::Arc; use std::{sync::Arc, f32::consts::PI};
use vulkano::image::view::ImageView; use vulkano::{
buffer::{Buffer, BufferUsage, BufferCreateInfo},
image::view::ImageView,
memory::allocator::{AllocationCreateInfo, MemoryTypeFilter}};
use crate::{ use crate::{
backend::input::PointerMode, graphics::WlxCommandBuffer, gui::GuiColor, state::AppState, backend::input::PointerMode, graphics::{WlxCommandBuffer, Vert2Uv}, gui::GuiColor, state::AppState,
}; };
use super::{CanvasData, Rect}; use super::{CanvasData, Rect};
@@ -49,6 +52,7 @@ impl<D, S> Control<D, S> {
y: 0., y: 0.,
w: 0., w: 0.,
h: 0., h: 0.,
r: 0.,
}, },
fg_color: Vec4::ONE, fg_color: Vec4::ONE,
bg_color: Vec4::ZERO, bg_color: Vec4::ZERO,
@@ -102,6 +106,153 @@ impl<D, S> Control<D, S> {
self.dirty = true; self.dirty = true;
} }
pub fn render_rounded_rect(
&self,
canvas: &CanvasData<D>,
_: &mut AppState,
cmd_buffer: &mut WlxCommandBuffer,
) -> anyhow::Result<()> {
let pass = {
let r = self.rect.r.min(self.rect.w / 2.0).min(self.rect.h / 2.0);
let rw = r / canvas.width as f32;
let ruw = r / self.rect.w as f32;
let rh = r / canvas.height as f32;
let ruh = r / self.rect.h as f32;
let x0 = self.rect.x / canvas.width as f32 + rw;
let y0 = self.rect.y / canvas.height as f32 + rh;
let x1 = self.rect.w / canvas.width as f32 + x0 - rw - rw;
let y1 = self.rect.h / canvas.height as f32 + y0 - rh - rh;
let pi6s = (PI/6.).sin();
let pi6c = (PI/6.).cos();
let pi3s = (PI/3.).sin();
let pi3c = (PI/3.).cos();
let vertices = [
// Top Left Corner (0-3)
Vert2Uv {
in_pos: [x0 - rw, y0],
in_uv: [0.0, ruh],
},
Vert2Uv {
in_pos: [x0 - rw * pi6c, y0 - rh * pi6s],
in_uv: [ruw - ruw * pi6c, ruh - ruh * pi6s],
},
Vert2Uv {
in_pos: [x0 - rw * pi3c, y0 - rh * pi3s],
in_uv: [ruw - ruw * pi3c, ruh - ruh * pi3s],
},
Vert2Uv {
in_pos: [x0, y0 - rh],
in_uv: [ruw, 0.0],
},
// Top Right Corner (4-7)
Vert2Uv {
in_pos: [x1, y0 - rh],
in_uv: [1.0 - ruw, 0.0],
},
Vert2Uv {
in_pos: [x1 + rw * pi3c, y0 - rh * pi3s],
in_uv: [1.0 - ruw + ruw * pi3c, ruh - ruh * pi3s],
},
Vert2Uv {
in_pos: [x1 + rw * pi6c, y0 - rh * pi6s],
in_uv: [1.0 - ruw + ruw * pi6c, ruh - ruh * pi6s],
},
Vert2Uv {
in_pos: [x1 + rw, y0],
in_uv: [1.0, ruh],
},
// Bottom Right Corner (8-11)
Vert2Uv {
in_pos: [x1 + rw, y1],
in_uv: [1.0, 1.0 - ruh],
},
Vert2Uv {
in_pos: [x1 + rw * pi6c, y1 + rh * pi6s],
in_uv: [1.0 - ruw + ruw * pi6c, 1.0 - ruh + ruh * pi6s],
},
Vert2Uv {
in_pos: [x1 + rw * pi3c, y1 + rh * pi3s],
in_uv: [1.0 - ruw + ruw * pi3c, 1.0 - ruh + ruh * pi3s],
},
Vert2Uv {
in_pos: [x1, y1 + rh],
in_uv: [1.0 - ruw, 1.0],
},
// Bottom Left Corner (12-15)
Vert2Uv {
in_pos: [x0, y1 + rh],
in_uv: [ruw, 1.0],
},
Vert2Uv {
in_pos: [x0 - rw * pi3c, y1 + rh * pi3s],
in_uv: [ruw - ruw * pi3c, 1.0 - ruh + ruh * pi3s],
},
Vert2Uv {
in_pos: [x0 - rw * pi6c, y1 + rh * pi6s],
in_uv: [ruw - ruw * pi6c, 1.0 - ruh + ruh * pi6s],
},
Vert2Uv {
in_pos: [x0 - rw, y1],
in_uv: [0.0, 1.0 - ruh],
},
];
let mut vertex_string = String::from("[");
for vertex in vertices.iter() {
vertex_string.push('(');
vertex_string.push_str(&vertex.in_uv[0].to_string());
vertex_string.push(',');
vertex_string.push_str(&vertex.in_uv[1].to_string());
vertex_string.push_str("),");
}
vertex_string.push(']');
//log::info!("{}", vertex_string);
let vertex_buffer = canvas.graphics.upload_buffer(BufferUsage::VERTEX_BUFFER, vertices.iter())?;
let set0 = canvas
.pipeline_bg_color
.uniform_buffer(0, self.bg_color.to_array().to_vec())?;
let indices: [u16; 42] =
[0,1,15, 14,15,1
,1,2,14, 13,14,2
,2,3,13, 12,13,3
,3,4,12, 11,12,4
,4,5,11, 10,12,5
,5,6,10, 9,10,6
,6,7,9, 8, 9,7];
canvas.pipeline_bg_color.create_pass(
[canvas.width as _, canvas.height as _],
vertex_buffer,
Buffer::from_iter(
canvas.graphics.memory_allocator.clone(),
BufferCreateInfo {
usage: BufferUsage::INDEX_BUFFER,
..Default::default()
},
AllocationCreateInfo {
memory_type_filter: MemoryTypeFilter::PREFER_DEVICE
| MemoryTypeFilter::HOST_SEQUENTIAL_WRITE,
..Default::default()
},
indices.iter().cloned(),
)?,
vec![set0],
)?
};
cmd_buffer.run_ref(&pass)
}
pub(super) fn render_rect( pub(super) fn render_rect(
&self, &self,
canvas: &CanvasData<D>, canvas: &CanvasData<D>,

View File

@@ -26,6 +26,7 @@ pub struct Rect {
y: f32, y: f32,
w: f32, w: f32,
h: f32, h: f32,
r: f32,
} }
pub struct CanvasData<D> { pub struct CanvasData<D> {

View File

@@ -53,18 +53,18 @@ pub struct OverlayListTemplate {
#[serde(tag = "type")] #[serde(tag = "type")]
pub enum ModularElement { pub enum ModularElement {
Panel { Panel {
rect: [f32; 4], rect: [f32; 5],
bg_color: Arc<str>, bg_color: Arc<str>,
}, },
Label { Label {
rect: [f32; 4], rect: [f32; 5],
font_size: isize, font_size: isize,
fg_color: Arc<str>, fg_color: Arc<str>,
#[serde(flatten)] #[serde(flatten)]
data: LabelContent, data: LabelContent,
}, },
CenteredLabel { CenteredLabel {
rect: [f32; 4], rect: [f32; 5],
font_size: isize, font_size: isize,
fg_color: Arc<str>, fg_color: Arc<str>,
#[serde(flatten)] #[serde(flatten)]
@@ -76,7 +76,7 @@ pub enum ModularElement {
sprite_st: Option<[f32; 4]>, sprite_st: Option<[f32; 4]>,
}, },
Button { Button {
rect: [f32; 4], rect: [f32; 5],
font_size: isize, font_size: isize,
fg_color: Arc<str>, fg_color: Arc<str>,
bg_color: Arc<str>, bg_color: Arc<str>,
@@ -86,7 +86,7 @@ pub enum ModularElement {
}, },
/// Convenience type to save you from having to create a bunch of labels /// Convenience type to save you from having to create a bunch of labels
BatteryList { BatteryList {
rect: [f32; 4], rect: [f32; 5],
font_size: isize, font_size: isize,
fg_color: Arc<str>, fg_color: Arc<str>,
fg_color_low: Arc<str>, fg_color_low: Arc<str>,
@@ -96,7 +96,7 @@ pub enum ModularElement {
layout: ListLayout, layout: ListLayout,
}, },
OverlayList { OverlayList {
rect: [f32; 4], rect: [f32; 5],
font_size: isize, font_size: isize,
fg_color: Arc<str>, fg_color: Arc<str>,
bg_color: Arc<str>, bg_color: Arc<str>,
@@ -139,32 +139,32 @@ pub fn modular_canvas(
for elem in elements.iter() { for elem in elements.iter() {
match elem { match elem {
ModularElement::Panel { ModularElement::Panel {
rect: [x, y, w, h], rect: [x, y, w, h, r],
bg_color, bg_color,
} => { } => {
canvas.bg_color = color_parse(bg_color).unwrap_or(*FALLBACK_COLOR); canvas.bg_color = color_parse(bg_color).unwrap_or(*FALLBACK_COLOR);
canvas.panel(*x, *y, *w, *h); canvas.panel(*x, *y, *w, *h, *r);
} }
ModularElement::Label { ModularElement::Label {
rect: [x, y, w, h], rect: [x, y, w, h, r],
font_size, font_size,
fg_color, fg_color,
data, data,
} => { } => {
canvas.font_size = *font_size; canvas.font_size = *font_size;
canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR); canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR);
let label = canvas.label(*x, *y, *w, *h, empty_str.clone()); let label = canvas.label(*x, *y, *w, *h, *r, empty_str.clone());
modular_label_init(label, data); modular_label_init(label, data);
} }
ModularElement::CenteredLabel { ModularElement::CenteredLabel {
rect: [x, y, w, h], rect: [x, y, w, h, r],
font_size, font_size,
fg_color, fg_color,
data, data,
} => { } => {
canvas.font_size = *font_size; canvas.font_size = *font_size;
canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR); canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR);
let label = canvas.label_centered(*x, *y, *w, *h, empty_str.clone()); let label = canvas.label_centered(*x, *y, *w, *h, *r, empty_str.clone());
modular_label_init(label, data); modular_label_init(label, data);
} }
ModularElement::Sprite { ModularElement::Sprite {
@@ -187,7 +187,7 @@ pub fn modular_canvas(
} }
}, },
ModularElement::Button { ModularElement::Button {
rect: [x, y, w, h], rect: [x, y, w, h, r],
font_size, font_size,
bg_color, bg_color,
fg_color, fg_color,
@@ -197,11 +197,11 @@ pub fn modular_canvas(
canvas.bg_color = color_parse(bg_color).unwrap_or(*FALLBACK_COLOR); canvas.bg_color = color_parse(bg_color).unwrap_or(*FALLBACK_COLOR);
canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR); canvas.fg_color = color_parse(fg_color).unwrap_or(*FALLBACK_COLOR);
canvas.font_size = *font_size; canvas.font_size = *font_size;
let button = canvas.button(*x, *y, *w, *h, text.clone()); let button = canvas.button(*x, *y, *w, *h, *r, text.clone());
modular_button_init(button, data); modular_button_init(button, data);
} }
ModularElement::BatteryList { ModularElement::BatteryList {
rect: [x, y, w, h], rect: [x, y, w, h, r],
font_size, font_size,
fg_color, fg_color,
fg_color_low, fg_color_low,
@@ -229,6 +229,7 @@ pub fn modular_canvas(
button_y + 2., button_y + 2.,
button_w - 4., button_w - 4.,
button_h - 4., button_h - 4.,
*r,
empty_str.clone(), empty_str.clone(),
); );
modular_label_init( modular_label_init(
@@ -252,7 +253,7 @@ pub fn modular_canvas(
} }
} }
ModularElement::OverlayList { ModularElement::OverlayList {
rect: [x, y, w, h], rect: [x, y, w, h, r],
font_size, font_size,
fg_color, fg_color,
bg_color, bg_color,
@@ -277,6 +278,7 @@ pub fn modular_canvas(
button_y + 2., button_y + 2.,
button_w - 4., button_w - 4.,
button_h - 4., button_h - 4.,
*r,
screen.name.clone(), screen.name.clone(),
); );

View File

@@ -57,7 +57,7 @@ where
)?; )?;
canvas.bg_color = color_parse("#101010").unwrap(); //safe canvas.bg_color = color_parse("#101010").unwrap(); //safe
canvas.panel(0., 0., size.x, size.y); canvas.panel(0., 0., size.x, size.y, 5.);
canvas.font_size = 18; canvas.font_size = 18;
canvas.bg_color = color_parse("#202020").unwrap(); //safe canvas.bg_color = color_parse("#202020").unwrap(); //safe
@@ -146,7 +146,7 @@ where
if label.is_empty() { if label.is_empty() {
label = LAYOUT.label_for_key(key); label = LAYOUT.label_for_key(key);
} }
let button = canvas.key_button(x, y, w, h, cap_type, &label); let button = canvas.key_button(x, y, w, h, 0., cap_type, &label);
button.state = Some(state); button.state = Some(state);
button.on_press = Some(key_press); button.on_press = Some(key_press);
button.on_release = Some(key_release); button.on_release = Some(key_release);

View File

@@ -180,17 +180,17 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
canvas.font_size = FONT_SIZE; canvas.font_size = FONT_SIZE;
canvas.fg_color = color_parse("#aaaaaa").unwrap(); // want panic canvas.fg_color = color_parse("#aaaaaa").unwrap(); // want panic
canvas.bg_color = color_parse("#333333").unwrap(); // want panic canvas.bg_color = color_parse("#333333").unwrap(); // want panic
canvas.panel(0., 0., size.0, size.1); canvas.panel(0., 0., size.0, size.1, 3.);
if toast.body.len() > 0 { if toast.body.len() > 0 {
canvas.label(PADDING.0, 54., og_width, size.1 - 54., toast.body); canvas.label(PADDING.0, 54., og_width, size.1 - 54., 3., toast.body);
canvas.fg_color = color_parse("#101010").unwrap(); // want panic canvas.fg_color = color_parse("#101010").unwrap(); // want panic
canvas.bg_color = color_parse("#666666").unwrap(); // want panic canvas.bg_color = color_parse("#666666").unwrap(); // want panic
canvas.panel(0., 0., size.0, 30.); canvas.panel(0., 0., size.0, 30., 3.);
canvas.label_centered(PADDING.0, 16., og_width, FONT_SIZE as f32 + 2., title); canvas.label_centered(PADDING.0, 16., og_width, FONT_SIZE as f32 + 2., 3., title);
} else { } else {
canvas.label_centered(PADDING.0, 0., og_width, size.1, title); canvas.label_centered(PADDING.0, 0., og_width, size.1, 3., title);
} }
let state = OverlayState { let state = OverlayState {

View File

@@ -11,15 +11,15 @@ spawn_pos: [0, 0, -1]
elements: elements:
- type: Panel - type: Panel
rect: [98, 0, 4, 200] rect: [98, 0, 4, 200, 2]
bg_color: "#ffff00" bg_color: "#ffff00"
- type: Panel - type: Panel
rect: [0, 98, 200, 4] rect: [0, 98, 200, 4, 2]
bg_color: "#ffff00" bg_color: "#ffff00"
- type: Label - type: Label
rect: [8, 90, 600, 70] rect: [8, 90, 600, 70, 2]
font_size: 18 font_size: 18
fg_color: "#ffff00" fg_color: "#ffff00"
source: Static source: Static

View File

@@ -11,18 +11,18 @@ spawn_pos: [0, -0.1, -0.5]
elements: elements:
- type: Panel - type: Panel
rect: [0, 0, 600, 800] rect: [0, 0, 600, 800, 2]
bg_color: "#102030" bg_color: "#102030"
- type: Label - type: Label
rect: [15, 35, 600, 70] rect: [15, 35, 600, 70, 2]
font_size: 24 font_size: 24
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Settings text: Settings
- type: Button - type: Button
rect: [560, 0, 40, 40] rect: [560, 0, 40, 40, 2]
font_size: 16 font_size: 16
bg_color: "#880000" bg_color: "#880000"
fg_color: "#ffffff" fg_color: "#ffffff"
@@ -33,31 +33,31 @@ elements:
action: Destroy action: Destroy
- type: Panel - type: Panel
rect: [50, 53, 500, 1] rect: [50, 53, 500, 1, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
####### Watch Section ####### ####### Watch Section #######
- type: Label - type: Label
rect: [15, 85, 570, 24] rect: [15, 85, 570, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Watch text: Watch
- type: Panel - type: Panel
rect: [250, 105, 1, 100] rect: [250, 105, 1, 100, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
- type: Label - type: Label
rect: [288, 105, 100, 24] rect: [288, 105, 100, 24, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Visibility text: Visibility
- type: Button - type: Button
rect: [270, 120, 100, 30] rect: [270, 120, 100, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -67,7 +67,7 @@ elements:
action: Hide action: Hide
- type: Button - type: Button
rect: [270, 170, 100, 30] rect: [270, 170, 100, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -77,18 +77,18 @@ elements:
action: SwitchHands action: SwitchHands
- type: Panel - type: Panel
rect: [390, 105, 1, 100] rect: [390, 105, 1, 100, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
- type: Label - type: Label
rect: [430, 105, 120, 24] rect: [430, 105, 120, 24, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Watch Fade text: Watch Fade
- type: Button - type: Button
rect: [410, 120, 140, 30] rect: [410, 120, 140, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -106,7 +106,7 @@ elements:
ViewAngle: {kind: "MaxOpacity", delta: -0.01} ViewAngle: {kind: "MaxOpacity", delta: -0.01}
- type: Button - type: Button
rect: [410, 170, 140, 30] rect: [410, 170, 140, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -124,14 +124,14 @@ elements:
ViewAngle: {kind: "MinOpacity", delta: -0.01} ViewAngle: {kind: "MinOpacity", delta: -0.01}
- type: Label - type: Label
rect: [25, 140, 90, 30] rect: [25, 140, 90, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Rotation text: Rotation
- type: Button - type: Button
rect: [108, 120, 30, 30] rect: [108, 120, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -149,7 +149,7 @@ elements:
Rotation: {axis: "X", delta: -0.25} Rotation: {axis: "X", delta: -0.25}
- type: Button - type: Button
rect: [153, 120, 30, 30] rect: [153, 120, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -167,7 +167,7 @@ elements:
Rotation: {axis: "Y", delta: -0.25} Rotation: {axis: "Y", delta: -0.25}
- type: Button - type: Button
rect: [198, 120, 30, 30] rect: [198, 120, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -185,14 +185,14 @@ elements:
Rotation: {axis: "Z", delta: -0.25} Rotation: {axis: "Z", delta: -0.25}
- type: Label - type: Label
rect: [25, 190, 90, 30] rect: [25, 190, 90, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Position text: Position
- type: Button - type: Button
rect: [108, 170, 30, 30] rect: [108, 170, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -210,7 +210,7 @@ elements:
Position: {axis: "X", delta: -0.001} Position: {axis: "X", delta: -0.001}
- type: Button - type: Button
rect: [153, 170, 30, 30] rect: [153, 170, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -228,7 +228,7 @@ elements:
Position: {axis: "Y", delta: -0.001} Position: {axis: "Y", delta: -0.001}
- type: Button - type: Button
rect: [198, 170, 30, 30] rect: [198, 170, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#306060" bg_color: "#306060"
@@ -246,26 +246,26 @@ elements:
Position: {axis: "Z", delta: -0.001} Position: {axis: "Z", delta: -0.001}
- type: Panel - type: Panel
rect: [50, 220, 500, 1] rect: [50, 220, 500, 1, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
####### Mirror Section ####### ####### Mirror Section #######
- type: Label - type: Label
rect: [15, 255, 570, 24] rect: [15, 255, 570, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Mirrors text: Mirrors
- type: Label - type: Label
rect: [25, 290, 30, 30] rect: [25, 290, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: M1 text: M1
- type: Button - type: Button
rect: [60, 270, 110, 30] rect: [60, 270, 110, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -279,7 +279,7 @@ elements:
action: ShowMirror # only fires if not exists action: ShowMirror # only fires if not exists
- type: Button - type: Button
rect: [185, 270, 60, 30] rect: [185, 270, 60, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -290,7 +290,7 @@ elements:
action: ToggleInteraction action: ToggleInteraction
- type: Button - type: Button
rect: [258, 270, 30, 30] rect: [258, 270, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#880000" bg_color: "#880000"
@@ -301,14 +301,14 @@ elements:
action: Destroy action: Destroy
- type: Label - type: Label
rect: [25, 340, 30, 30] rect: [25, 340, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: M2 text: M2
- type: Button - type: Button
rect: [60, 320, 110, 30] rect: [60, 320, 110, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -322,7 +322,7 @@ elements:
action: ShowMirror action: ShowMirror
- type: Button - type: Button
rect: [185, 320, 60, 30] rect: [185, 320, 60, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -333,7 +333,7 @@ elements:
action: ToggleInteraction action: ToggleInteraction
- type: Button - type: Button
rect: [258, 320, 30, 30] rect: [258, 320, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#880000" bg_color: "#880000"
@@ -344,14 +344,14 @@ elements:
action: Destroy action: Destroy
- type: Label - type: Label
rect: [25, 390, 30, 30] rect: [25, 390, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: M3 text: M3
- type: Button - type: Button
rect: [60, 370, 110, 30] rect: [60, 370, 110, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -365,7 +365,7 @@ elements:
action: ShowMirror action: ShowMirror
- type: Button - type: Button
rect: [185, 370, 60, 30] rect: [185, 370, 60, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -376,7 +376,7 @@ elements:
action: ToggleInteraction action: ToggleInteraction
- type: Button - type: Button
rect: [258, 370, 30, 30] rect: [258, 370, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#880000" bg_color: "#880000"
@@ -387,27 +387,27 @@ elements:
action: Destroy action: Destroy
- type: Panel - type: Panel
rect: [300, 240, 1, 200] rect: [300, 240, 1, 200, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
####### Color Gain Section ####### ####### Color Gain Section #######
- type: Label - type: Label
rect: [325, 255, 90, 24] rect: [325, 255, 90, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Color Gain text: Color Gain
- type: Label - type: Label
rect: [470, 255, 90, 30] rect: [470, 255, 90, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: (SteamVR) text: (SteamVR)
- type: Button - type: Button
rect: [330, 270, 60, 30] rect: [330, 270, 60, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#707070" bg_color: "#707070"
@@ -425,7 +425,7 @@ elements:
delta: -0.01 delta: -0.01
- type: Button - type: Button
rect: [405, 270, 30, 30] rect: [405, 270, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#701010" bg_color: "#701010"
@@ -443,7 +443,7 @@ elements:
delta: -0.01 delta: -0.01
- type: Button - type: Button
rect: [450, 270, 30, 30] rect: [450, 270, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#107010" bg_color: "#107010"
@@ -461,7 +461,7 @@ elements:
delta: -0.01 delta: -0.01
- type: Button - type: Button
rect: [495, 270, 30, 30] rect: [495, 270, 30, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#101070" bg_color: "#101070"
@@ -479,20 +479,20 @@ elements:
delta: -0.01 delta: -0.01
- type: Panel - type: Panel
rect: [325, 315, 225, 1] rect: [325, 315, 225, 1, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
####### Playspace Section ####### ####### Playspace Section #######
- type: Label - type: Label
rect: [325, 345, 90, 24] rect: [325, 345, 90, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Playspace text: Playspace
- type: Button - type: Button
rect: [330, 360, 220, 30] rect: [330, 360, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#206060" bg_color: "#206060"
@@ -502,7 +502,7 @@ elements:
action: PlayspaceFixFloor action: PlayspaceFixFloor
- type: Button - type: Button
rect: [330, 410, 220, 30] rect: [330, 410, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#206060" bg_color: "#206060"
@@ -514,18 +514,18 @@ elements:
####### Notifications Section ####### ####### Notifications Section #######
- type: Panel - type: Panel
rect: [50, 460, 500, 1] rect: [50, 460, 500, 1, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
- type: Label - type: Label
rect: [325, 490, 90, 24] rect: [325, 490, 90, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Notifications text: Notifications
- type: Button - type: Button
rect: [330, 505, 220, 30] rect: [330, 505, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#401010" bg_color: "#401010"
@@ -536,7 +536,7 @@ elements:
highlight: Notifications highlight: Notifications
- type: Button - type: Button
rect: [330, 555, 220, 30] rect: [330, 555, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#401010" bg_color: "#401010"
@@ -548,14 +548,14 @@ elements:
####### Behavior Section ####### ####### Behavior Section #######
- type: Label - type: Label
rect: [15, 490, 570, 24] rect: [15, 490, 570, 24, 2]
font_size: 18 font_size: 18
fg_color: "#ffffff" fg_color: "#ffffff"
source: Static source: Static
text: Behavior text: Behavior
- type: Button - type: Button
rect: [30, 505, 220, 30] rect: [30, 505, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#401010" bg_color: "#401010"
@@ -566,7 +566,7 @@ elements:
highlight: AutoRealign highlight: AutoRealign
- type: Button - type: Button
rect: [30, 555, 220, 30] rect: [30, 555, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#401010" bg_color: "#401010"
@@ -579,11 +579,11 @@ elements:
####### Footer Section ####### ####### Footer Section #######
- type: Panel - type: Panel
rect: [50, 605, 500, 1] rect: [50, 605, 500, 1, 2]
bg_color: "#c0c0c0" bg_color: "#c0c0c0"
- type: Button - type: Button
rect: [330, 625, 220, 30] rect: [330, 625, 220, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#206060" bg_color: "#206060"
@@ -595,7 +595,7 @@ elements:
message: Settings saved successfully. message: Settings saved successfully.
- type: Button - type: Button
rect: [30, 625, 250, 30] rect: [30, 625, 250, 30, 2]
font_size: 12 font_size: 12
fg_color: "#ffffff" fg_color: "#ffffff"
bg_color: "#206060" bg_color: "#206060"

View File

@@ -9,11 +9,11 @@ size: [400, 200]
elements: elements:
# background panel # background panel
- type: Panel - type: Panel
rect: [0, 0, 400, 200] rect: [0, 0, 400, 200, 3]
bg_color: "#353535" bg_color: "#353535"
- type: Button - type: Button
rect: [2, 162, 26, 36] rect: [2, 162, 26, 36, 3]
font_size: 14 font_size: 14
bg_color: "#808040" bg_color: "#808040"
fg_color: "#ffffff" fg_color: "#ffffff"
@@ -28,7 +28,7 @@ elements:
# Keyboard button # Keyboard button
- type: Button - type: Button
rect: [32, 162, 60, 36] rect: [32, 162, 60, 36, 3]
font_size: 14 font_size: 14
fg_color: "#FFFFFF" fg_color: "#FFFFFF"
bg_color: "#406050" bg_color: "#406050"
@@ -62,7 +62,7 @@ elements:
# bottom row, of keyboard + overlays # bottom row, of keyboard + overlays
- type: OverlayList - type: OverlayList
rect: [94, 160, 306, 40] rect: [94, 160, 306, 40, 3]
font_size: 14 font_size: 14
fg_color: "#FFFFFF" fg_color: "#FFFFFF"
bg_color: "#405060" bg_color: "#405060"
@@ -78,7 +78,7 @@ elements:
# local clock # local clock
- type: Label - type: Label
rect: [19, 90, 200, 50] rect: [19, 90, 200, 50, 3]
font_size: 46 # Use 32 for 12-hour time font_size: 46 # Use 32 for 12-hour time
fg_color: "#ffffff" fg_color: "#ffffff"
source: Clock source: Clock
@@ -87,7 +87,7 @@ elements:
# local date # local date
- type: Label - type: Label
rect: [20, 117, 200, 20] rect: [20, 117, 200, 20, 3]
font_size: 14 font_size: 14
fg_color: "#ffffff" fg_color: "#ffffff"
source: Clock source: Clock
@@ -95,7 +95,7 @@ elements:
# local day-of-week # local day-of-week
- type: Label - type: Label
rect: [20, 137, 200, 50] rect: [20, 137, 200, 50, 3]
font_size: 14 font_size: 14
fg_color: "#ffffff" fg_color: "#ffffff"
source: Clock source: Clock
@@ -104,7 +104,7 @@ elements:
# alt clock 1 # alt clock 1
- type: Label - type: Label
rect: [210, 90, 200, 50] rect: [210, 90, 200, 50, 3]
font_size: 24 # Use 18 for 12-hour time font_size: 24 # Use 18 for 12-hour time
fg_color: "#99BBAA" fg_color: "#99BBAA"
source: Clock source: Clock
@@ -112,7 +112,7 @@ elements:
format: "%H:%M" # 23:59 format: "%H:%M" # 23:59
#format: "%I:%M %p" # 11:59 PM #format: "%I:%M %p" # 11:59 PM
- type: Label - type: Label
rect: [210, 60, 200, 50] rect: [210, 60, 200, 50, 3]
font_size: 14 font_size: 14
fg_color: "#99BBAA" fg_color: "#99BBAA"
source: Static source: Static
@@ -120,7 +120,7 @@ elements:
# alt clock 2 # alt clock 2
- type: Label - type: Label
rect: [210, 150, 200, 50] rect: [210, 150, 200, 50, 3]
font_size: 24 # Use 18 for 12-hour time font_size: 24 # Use 18 for 12-hour time
fg_color: "#AA99BB" fg_color: "#AA99BB"
source: Clock source: Clock
@@ -128,7 +128,7 @@ elements:
format: "%H:%M" # 23:59 format: "%H:%M" # 23:59
#format: "%I:%M %p" # 11:59 PM #format: "%I:%M %p" # 11:59 PM
- type: Label - type: Label
rect: [210, 120, 200, 50] rect: [210, 120, 200, 50, 3]
font_size: 14 font_size: 14
fg_color: "#AA99BB" fg_color: "#AA99BB"
source: Static source: Static
@@ -136,7 +136,7 @@ elements:
# batteries # batteries
- type: BatteryList - type: BatteryList
rect: [0, 0, 400, 30] rect: [0, 0, 400, 30, 3]
font_size: 14 font_size: 14
fg_color: "#99BBAA" fg_color: "#99BBAA"
fg_color_low: "#B06060" fg_color_low: "#B06060"
@@ -147,7 +147,7 @@ elements:
# volume buttons # volume buttons
- type: Button - type: Button
rect: [327, 52, 46, 32] rect: [327, 52, 46, 32, 3]
font_size: 14 font_size: 14
fg_color: "#FFFFFF" fg_color: "#FFFFFF"
bg_color: "#505050" bg_color: "#505050"
@@ -156,7 +156,7 @@ elements:
- type: Exec - type: Exec
command: [ "pactl", "set-sink-volume", "@DEFAULT_SINK@", "+5%" ] command: [ "pactl", "set-sink-volume", "@DEFAULT_SINK@", "+5%" ]
- type: Button - type: Button
rect: [327, 116, 46, 32] rect: [327, 116, 46, 32, 3]
font_size: 14 font_size: 14
fg_color: "#FFFFFF" fg_color: "#FFFFFF"
bg_color: "#505050" bg_color: "#505050"