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

Componentize and add data window

Browse Source
This commit is contained in:
Hector van der Aa
2026-03-09 22:05:28 +01:00
parent 76589b4185
commit 9e17d5f638
4 changed files with 198 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
ui/app-window.slint
View File

@@ -1,7 +1,10 @@
// 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 { VerticalBox, Button } from "std-widgets.slint";
import { Palette } from "palette.slint";
import { DataWindow } from "components/data-window.slint";
component StatusBadge {
in property <string> label;
@@ -35,9 +38,10 @@ component MenuButton {
Rectangle {
border-width: 2px;
border-color: Palette.brand;
border-color: area.has-hover ? Palette.brand : Palette.border;
border-radius: 8px;
background: area.pressed ? Palette.brand.darker(0.3) : area.has-hover ? Palette.bg-hover : Palette.bg-main;
background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
HorizontalLayout {
padding-left: 12px;
@@ -83,21 +87,18 @@ export component AppWindow inherits Window {
Rectangle {
height: 40px;
width: 100%;
background: Palette.bg-secondary;
background: Palette.bg-main;
HorizontalLayout {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding: 6px;
spacing: 6px;
MenuButton {
text: "File";
text: "Connect";
}
MenuButton {
text: "Edit";
text: "Window";
}
Rectangle {
@@ -118,9 +119,58 @@ export component AppWindow inherits Window {
// Main content
Rectangle {
background: Palette.bg-main;
background: Palette.bg-secondary;
horizontal-stretch: 1;
vertical-stretch: 1;
Rectangle {
width: parent.width / 2;
height: parent.height / 2;
x: 0px;
y: 0px;
DataWindow {
data1: [
{ label: "Engine Temp", value: 97, unit: " °C" },
{ label: "Engine RPM", value: 2573, unit: " RPM" },
{ label: "Engine Map", value: 7, unit: "" },
{ label: "Fuel Rate", value: 0.62, unit: " L/h" },
{ label: "Injector PW", value: 2.7, unit: " ms" },
{ label: "Ignition Adv", value: 21, unit: " °" },
];
data2: [
{ label: "GPS Speed", value: 38.9, unit: " km/h" },
{ label: "GPS Satellites", value: 14, unit: "" },
{ label: "Tank Pressure", value: 101.7, unit: " kPa" },
{ label: "Air Temp", value: 24, unit: " °C" },
{ label: "Humidity", value: 42, unit: " %" },
{ label: "Barometric", value: 1012, unit: " hPa" }
];
}
}
Rectangle {
width: parent.width / 2;
height: parent.height / 2;
x: parent.width / 2;
y: 0px;
DataWindow {
data1: [
{ label: "Engine Temp", value: 97, unit: " °C" },
{ label: "Engine RPM", value: 2573, unit: " RPM" },
{ label: "Engine Map", value: 7, unit: "" },
{ label: "Fuel Rate", value: 0.62, unit: " L/h" },
{ label: "Injector PW", value: 2.7, unit: " ms" },
{ label: "Ignition Adv", value: 21, unit: " °" },
];
data2: [
{ label: "GPS Speed", value: 38.9, unit: " km/h" },
{ label: "GPS Satellites", value: 14, unit: "" },
{ label: "Tank Pressure", value: 101.7, unit: " kPa" },
{ label: "Air Temp", value: 24, unit: " °C" },
{ label: "Humidity", value: 42, unit: " %" },
{ label: "Barometric", value: 1012, unit: " hPa" }
];
}
}
}
Rectangle {
@@ -131,7 +181,7 @@ export component AppWindow inherits Window {
Rectangle {
height: 32px;
background: Palette.bg-secondary;
background: Palette.bg-main;
width: 100%;
HorizontalLayout {
@@ -157,7 +207,7 @@ export component AppWindow inherits Window {
horizontal-stretch: 0;
height: parent.height - (2 * parent.padding-top);
width: 2px;
background: Palette.bg-main;
background: Palette.bg-secondary;
}
Rectangle {
@@ -173,7 +223,7 @@ export component AppWindow inherits Window {
horizontal-stretch: 0;
height: parent.height - (2 * parent.padding-top);
width: 2px;
background: Palette.bg-main;
background: Palette.bg-secondary;
}
StatusBadge {

98
ui/components/data-window.slint Normal file
View File

@@ -0,0 +1,98 @@
// 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";
struct DataItem {
label: string,
value: float,
unit: string,
}
component DataColumn {
in property <[DataItem]> data;
preferred-width: 100%;
preferred-height: 100%;
HorizontalLayout {
width: 100%;
height: 100%;
VerticalLayout {
alignment: center;
for item in data: HorizontalLayout {
HorizontalLayout {
alignment: center;
padding-top: 6px;
padding-bottom: 6px;
Text {
text: item.label;
color: Palette.text-primary;
font-size: 14px;
}
}
}
}
VerticalLayout {
alignment: center;
for item in data: HorizontalLayout {
HorizontalLayout {
alignment: center;
padding-top: 6px;
padding-bottom: 6px;
Text {
text: item.value + item.unit;
color: Palette.text-primary;
font-size: 14px;
}
}
}
}
}
}
export component DataWindow {
in property <[DataItem]> data1;
in property <[DataItem]> data2;
preferred-width: 100%;
preferred-height: 100%;
HorizontalLayout {
padding: 12px;
Rectangle {
area := TouchArea {
mouse-cursor: pointer;
}
background: Palette.bg-main;
border-color: area.has-hover ? Palette.border-focus : Palette.border;
border-width: 2px;
border-radius: 8px;
drop-shadow-color: black;
drop-shadow-offset-x: 6px;
drop-shadow-offset-y: 6px;
drop-shadow-blur: 10px;
HorizontalLayout {
DataColumn {
data: data1;
}
HorizontalLayout {
height: 100%;
width: 1px;
padding-top: 10px;
padding-bottom: 10px;
Rectangle {
padding: 10px;
width: 1px;
background: Palette.bg-secondary;
}
}
DataColumn {
data: data2;
}
}
}
}
}

0
ui/components/map-window.slint Normal file
View File

40
ui/palette.slint
View File

@@ -1,24 +1,54 @@
// 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
export global Palette {
// ---------- BRAND ----------
in property <color> brand: #f67a00;
in property <color> brand-soft: #ff9a33;
in property <color> brand-dim: #c85f00;
// ---------- BACKGROUND ----------
// ---------- BACKGROUND LAYERS ----------
// application root
in property <color> bg-main: #0f1115;
in property <color> bg-secondary: #3a3a3a;
in property <color> bg-panel: #171a1f;
in property <color> bg-hover: #1f232a;
// window surfaces
in property <color> bg-secondary: #1a1d23;
// panels / cards
in property <color> bg-panel: #20242b;
// hover states
in property <color> bg-hover: #2a2f36;
// pressed states
in property <color> bg-active: #313742;
// ---------- TEXT ----------
in property <color> text-primary: #ffffff;
in property <color> text-secondary: #a0a7b4;
in property <color> text-dim: #6b7280;
in property <color> text-muted: #4b5563;
// ---------- STATES ----------
in property <color> success: #22c55e;
in property <color> warning: #f59e0b;
in property <color> error: #ef4444;
in property <color> info: #38bdf8;
// ---------- BORDERS ----------
in property <color> border: #2a2f36;
// subtle separators
in property <color> border-subtle: #22262d;
// default component border
in property <color> border: #2f3540;
// strong window border
in property <color> border-strong: #404754;
// focus ring
in property <color> border-focus: #f67a00;
// divider lines
in property <color> border-divider: #3a404c;
}