Exergie/Telemetrix
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Exergie:main
Branches Tags
Exergie:main Exergie:dev
..
compare: Exergie:dev
Branches Tags
Exergie:dev Exergie:main

3 Commits
main ... dev

Author SHA1 Message Date
Hector van der Aa
bda1465422 Tweaked hover effects 2026-03-10 14:03:36 +01:00
Hector van der Aa
4ccd49b11b Added Tab Bar and animations 2026-03-10 13:52:05 +01:00
Hector van der Aa
8faa56c522 Added Window Header and minor tweaks 2026-03-10 13:18:28 +01:00
5 changed files with 442 additions and 369 deletions
Expand all files Collapse all files

137
ui/app-window.slint
View File

@@ -6,6 +6,7 @@ import { VerticalBox, Button } from "std-widgets.slint";
import { Palette } from "palette.slint"; import { Palette } from "palette.slint";
import { DataWindow } from "components/data-window.slint"; import { DataWindow } from "components/data-window.slint";
import { MapWindow } from "components/map-window.slint"; import { MapWindow } from "components/map-window.slint";
import { MinimizedTab } from "components/minimized-tab.slint";
component StatusBadge { component StatusBadge {
in property <string> label; in property <string> label;
@@ -43,6 +44,8 @@ component MenuButton {
border-radius: 8px; border-radius: 8px;
background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main; background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
animate background { duration: 100ms; }
animate border-color { duration: 100ms; }
HorizontalLayout { HorizontalLayout {
padding-left: 12px; padding-left: 12px;
@@ -123,12 +126,24 @@ export component AppWindow inherits Window {
background: Palette.bg-secondary; background: Palette.bg-secondary;
horizontal-stretch: 1; horizontal-stretch: 1;
vertical-stretch: 1; vertical-stretch: 1;
Rectangle { VerticalLayout {
width: parent.width / 3; padding-top: 4px;
height: parent.height / 2; height: 100%;
x: 0px; width: 28px;
y: 0px; x: parent.width - self.width + 2px;
alignment: start;
MinimizedTab {
name: "Spark Advance";
}
MinimizedTab {
name: "Voltage Graph";
}
}
DataWindow { DataWindow {
x: 0;
y: 0;
data1: [ data1: [
{ label: "Engine Temp", value: 97, unit: " °C" }, { label: "Engine Temp", value: 97, unit: " °C" },
{ label: "Engine RPM", value: 2573, unit: " RPM" }, { label: "Engine RPM", value: 2573, unit: " RPM" },
@@ -146,35 +161,14 @@ export component AppWindow inherits Window {
{ label: "Barometric", value: 1012, unit: " hPa" } { label: "Barometric", value: 1012, unit: " hPa" }
]; ];
} }
}
Rectangle {
width: 2 * parent.width / 3;
height: 2 * parent.height / 3;
x: parent.width / 3;
y: 0px;
MapWindow { MapWindow {
x: 512px;
y: 0;
data-min: 2200; data-min: 2200;
data-max: 12000; data-max: 9400;
name: "MAP 1"; name: "Injection Period";
map-axis: [ map-axis: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
0.0,
0.0667,
0.1333,
0.2,
0.2667,
0.3333,
0.4,
0.4667,
0.5333,
0.6,
0.6667,
0.7333,
0.8,
0.8667,
0.9333,
1.0
];
rpm-axis: [ rpm-axis: [
250, 250,
500, 500,
@@ -370,90 +364,9 @@ export component AppWindow inherits Window {
8800, 8800,
9100, 9100,
9400, 9400,
5400,
5600,
5900,
6200,
6500,
6800,
7100,
7400,
7700,
8000,
8300,
8600,
8900,
9200,
9500,
9800,
5800,
6000,
6300,
6600,
6900,
7200,
7500,
7800,
8100,
8400,
8700,
9000,
9300,
9600,
9900,
10200,
6200,
6500,
6800,
7100,
7400,
7700,
8000,
8300,
8600,
8900,
9200,
9500,
9800,
10100,
10400,
10700,
6800,
7100,
7400,
7700,
8000,
8300,
8600,
8900,
9200,
9500,
9800,
10100,
10400,
10700,
11000,
11300,
7400,
7700,
8000,
8300,
8600,
8900,
9200,
9500,
9800,
10100,
10400,
10700,
11000,
11300,
11600,
12000
]; ];
} }
} }
}
Rectangle { Rectangle {
width: 100%; width: 100%;

49
ui/components/data-window.slint
View File

@@ -2,6 +2,7 @@
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com> // Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later // SPDX-License-Identifier: GPL-3.0-or-later
import { Palette } from "../palette.slint"; import { Palette } from "../palette.slint";
import { WindowHeader } from "window-header.slint";
struct DataItem { struct DataItem {
label: string, label: string,
value: float, value: float,
@@ -10,11 +11,7 @@ struct DataItem {
component DataColumn { component DataColumn {
in property <[DataItem]> data; in property <[DataItem]> data;
preferred-width: 100%;
preferred-height: 100%;
HorizontalLayout { HorizontalLayout {
width: 100%;
height: 100%;
VerticalLayout { VerticalLayout {
alignment: center; alignment: center;
@@ -54,45 +51,61 @@ component DataColumn {
export component DataWindow { export component DataWindow {
in property <[DataItem]> data1; in property <[DataItem]> data1;
in property <[DataItem]> data2; in property <[DataItem]> data2;
preferred-width: 100%;
preferred-height: 100%;
HorizontalLayout { HorizontalLayout {
padding: 12px; padding: 12px;
Rectangle { Rectangle {
area := TouchArea { area := TouchArea { }
mouse-cursor: pointer;
}
background: Palette.bg-main; background: Palette.bg-main;
border-color: area.has-hover ? Palette.border-focus : Palette.border;
border-width: 2px;
border-radius: 8px; border-radius: 8px;
drop-shadow-color: black; drop-shadow-color: black;
drop-shadow-offset-x: 6px; drop-shadow-offset-x: 6px;
drop-shadow-offset-y: 6px; drop-shadow-offset-y: 6px;
drop-shadow-blur: 10px; drop-shadow-blur: 10px;
width: 500px;
vertical-stretch: 1;
VerticalLayout {
visible: true;
alignment: start;
WindowHeader {
title: "Data";
}
HorizontalLayout { HorizontalLayout {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
alignment: space-between;
DataColumn { DataColumn {
width: 218px;
data: data1; data: data1;
} }
HorizontalLayout { HorizontalLayout {
height: 100%; vertical-stretch: 1;
width: 1px; width: 21px;
padding-top: 10px;
padding-bottom: 10px;
Rectangle {
padding: 10px; padding: 10px;
Rectangle {
width: 1px; width: 1px;
background: Palette.bg-secondary; background: Palette.border;
} }
} }
DataColumn { DataColumn {
width: 218px;
data: data2; data: data2;
} }
} }
} }
Rectangle {
background: transparent;
border-color: Palette.border;
border-width: 2px;
border-radius: 8px;
vertical-stretch: 1;
animate border-color { duration: 200ms; }
}
}
} }
} }

78
ui/components/map-window.slint
View File

@@ -2,6 +2,7 @@
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com> // Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later // SPDX-License-Identifier: GPL-3.0-or-later
import { Palette } from "../palette.slint"; import { Palette } from "../palette.slint";
import { WindowHeader } from "window-header.slint";
export component MapWindow { export component MapWindow {
in property <[float]> data; in property <[float]> data;
in property <[float]> rpm-axis; in property <[float]> rpm-axis;
@@ -9,19 +10,13 @@ export component MapWindow {
in property <float> data-min; in property <float> data-min;
in property <float> data-max; in property <float> data-max;
in property <string> name; in property <string> name;
preferred-width: 100%;
preferred-height: 100%;
VerticalLayout { VerticalLayout {
padding: 12px; padding: 12px;
Rectangle { Rectangle {
area := TouchArea { area := TouchArea { }
mouse-cursor: pointer;
}
background: Palette.bg-main; background: Palette.bg-main;
border-color: area.has-hover ? Palette.border-focus : Palette.border;
border-width: 2px;
border-radius: 8px; border-radius: 8px;
drop-shadow-color: black; drop-shadow-color: black;
drop-shadow-offset-x: 6px; drop-shadow-offset-x: 6px;
@@ -29,25 +24,59 @@ export component MapWindow {
drop-shadow-blur: 10px; drop-shadow-blur: 10px;
VerticalLayout { VerticalLayout {
HorizontalLayout { WindowHeader {
alignment: center; title: name;
padding-top: 6px;
Text {
text: name;
font-size: 20px;
color: Palette.text-primary;
}
} }
GridLayout { GridLayout {
width: 100%;
padding: 6px; padding: 6px;
vertical-stretch: 1; vertical-stretch: 1;
Rectangle {
border-color: black;
border-width: 1px;
width: 60px;
height: 60px;
col: 0;
row: 0;
clip: true;
Rectangle {
height: 2 * (parent.height);
width: 2px;
background: white;
transform-rotation: -45deg;
}
Text {
text: "RPM";
font-size: 14px;
color: Palette.text-primary;
transform-origin: { x: self.width / 2, y: self.height / 2 };
transform-rotation: 45deg;
x: parent.width / 2 + 18px * sin(45deg) - self.width / 2;
y: parent.height / 2 - 18px * sin(45deg) - self.height / 2;
}
Text {
text: "Map";
font-size: 14px;
color: Palette.text-primary;
transform-origin: { x: self.width / 2, y: self.height / 2 };
transform-rotation: 45deg;
x: parent.width / 2 - 18px * sin(45deg) - self.width / 2;
y: parent.height / 2 + 18px * sin(45deg) - self.height / 2;
}
}
for i in rpm-axis.length: Rectangle { for i in rpm-axis.length: Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1); width: 60px;
height: 60px;
property <int> r: 0; property <int> r: 0;
property <int> c: mod(i, rpm-axis.length) + 1; property <int> c: mod(i, rpm-axis.length) + 1;
@@ -64,7 +93,8 @@ export component MapWindow {
for i in map-axis.length: Rectangle { for i in map-axis.length: Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1); width: 60px;
height: 30px;
property <int> r: i + 1; property <int> r: i + 1;
property <int> c: 0; property <int> c: 0;
@@ -82,7 +112,8 @@ export component MapWindow {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
background: hsv((240deg - ((data[i] - data-min) / (data-max - data-min)) * 240deg), 0.8, 0.80); background: hsv((240deg - ((data[i] - data-min) / (data-max - data-min)) * 240deg), 0.8, 0.80);
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1); width: 60px;
height: 30px;
property <int> r: i / rpm-axis.length + 1; property <int> r: i / rpm-axis.length + 1;
property <int> c: mod(i, rpm-axis.length) + 1; property <int> c: mod(i, rpm-axis.length) + 1;
@@ -99,6 +130,15 @@ export component MapWindow {
} }
} }
} }
Rectangle {
background: transparent;
border-color: Palette.border;
border-width: 2px;
border-radius: 8px;
vertical-stretch: 1;
animate border-color { duration: 200ms; }
}
} }
} }
} }

40
ui/components/minimized-tab.slint Normal file
View File

@@ -0,0 +1,40 @@
// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later
import { Palette } from "../palette.slint";
export component MinimizedTab {
in property <string> name;
height: label.width + 20px;
VerticalLayout {
padding-bottom: 4px;
Rectangle {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-width: 2px;
border-color: area.has-hover ? Palette.brand : Palette.border;
background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
animate background { duration: 100ms; }
animate border-color { duration: 100ms; }
label := Text {
text: name;
transform-origin: { x: self.width / 2, y: self.height / 2 };
transform-rotation: -90deg;
color: Palette.text-primary;
font-size: 14px;
horizontal-alignment: center;
vertical-alignment: center;
x: parent.width / 2 - self.width / 2 + 1px;
y: parent.height / 2 - self.height / 2;
}
area := TouchArea {
mouse-cursor: pointer;
}
}
}
}

67
ui/components/window-header.slint Normal file
View File

@@ -0,0 +1,67 @@
// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later
import { Palette } from "../palette.slint";
export component WindowHeader {
in property <string> title;
HorizontalLayout {
horizontal-stretch: 1;
Rectangle {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: Palette.border;
HorizontalLayout {
VerticalLayout {
alignment: center;
padding-left: 6px;
Rectangle {
vertical-stretch: 1;
Text {
text: title;
color: Palette.text-primary;
horizontal-alignment: center;
font-size: 14px;
}
}
}
Rectangle {
horizontal-stretch: 1;
}
HorizontalLayout {
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
Rectangle {
width: 12px;
height: 12px;
background: Palette.warning;
border-radius: self.width / 2;
y: (parent.height - self.height) / 2;
TouchArea {
mouse-cursor: pointer;
}
}
}
HorizontalLayout {
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
Rectangle {
width: 12px;
height: 12px;
background: Palette.error;
border-radius: self.width / 2;
y: (parent.height - self.height) / 2;
TouchArea {
mouse-cursor: pointer;
}
}
}
}
}
}
}