Pseudo pseudorandom color picker

This commit is contained in:
Alexey 2025-09-18 16:30:37 +03:00
commit 218ee49a8b
7 changed files with 75 additions and 15 deletions

View file

@ -31,7 +31,6 @@ export component AppWindow inherits Window {
property<[string]> combo-spans: ["1 Hour", "4 Hours", "8 Hours", "24 Hours"];
title: "Aliveline";
TabWidget {
Tab {
title: "Record";

View file

@ -16,7 +16,6 @@ export component RecordWidget inherits VerticalBox {
property<string> event-name: "";
property<bool> minimized: false;
property<int> combo-index: 0;
tl := Timeline {
preferred-height: 100%;
updating: true;

43
ui/theme.slint Normal file
View file

@ -0,0 +1,43 @@
export global Palette {
in-out property<color> background: gray;
in-out property<color> timeline: darkgray;
in-out property<color> background-text: black;
// Note: these colors were almost randomly picked
in-out property<[color]> event-colors: [
#97f9f9,
#a4def9,
#c1e0f7,
#cfbae1,
#c59fc9,
#4e3d42,
#c9d5b5,
#2d82b7,
#556f44,
#772e25,
#c44536,
#7c6a0a,
#babd8d,
#ffdac6,
#fa9500,
#eb6424
];
in-out property <[color]> event-text: [
#000000,
#000000,
#000000,
#000000,
#000000,
#ffffff,
#000000,
#000000,
#000000,
#ffffff,
#000000,
#000000,
#000000,
#000000,
#000000,
#000000
];
}

View file

@ -1,8 +1,11 @@
import { Palette } from "theme.slint";
export struct TimelineEvent {
start: int,
duration: int,
finished: bool,
label: string
label: string,
color-id: int
}
global TimeString {
@ -26,6 +29,7 @@ global TimeString {
export component Timeline inherits Rectangle {
callback new-day-started;
callback clicked <=> ta.clicked;
background: Palette.background;
in-out property<bool> updating: true;
in-out property<[TimelineEvent]> events: [];
@ -52,7 +56,6 @@ export component Timeline inherits Rectangle {
preferred-height: 100%;
}
background: gray;
border-width: 1px;
border-color: black;
Rectangle {
@ -63,19 +66,21 @@ export component Timeline inherits Rectangle {
height: parent.height / 2;
border-color: black;
border-width: 1px;
background: purple;
background: Palette.timeline;
}
Text {
x: 0;
y: parent.height - self.height;
text: TimeString.from(visible-offset - visible-time);
color: Palette.background-text;
}
Text {
x: parent.width - self.width;
y: parent.height - self.height;
text: TimeString.from(visible-offset);
color: Palette.background-text;
}
for event in events: timeline-event := Rectangle {
@ -91,13 +96,14 @@ export component Timeline inherits Rectangle {
visible: self.width > 0 && self.real-x < parent.width;
border-color: black;
border-width: 1px;
background: red;
background: Palette.event-colors[event.color-id];
Text {
x: 0;
y: -self.height;
text: event.label;
visible: timeline-event.visible;
color: Palette.background-text;
}
start-txt := Text {
x: 0;
@ -108,6 +114,7 @@ export component Timeline inherits Rectangle {
visible: timeline-event.visible &&
(self.width * 2 < timeline-event.width ||
(!end-txt.visible && self.width < timeline-event.width));
color: Palette.event-text[event.color-id];
}
end-txt := Text {
x: timeline-event.width - self.width;
@ -116,6 +123,7 @@ export component Timeline inherits Rectangle {
TimeString.from(event.start + event.duration) :
TimeString.from(visible-offset);
visible: timeline-event.visible && timeline-event.width - self.width * 2 > 0;
color: Palette.event-text[event.color-id];
}
}
@children