Componentize and add data window
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user