442 lines
12 KiB
Plaintext
442 lines
12 KiB
Plaintext
// 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";
|
|
import { MapWindow } from "components/map-window.slint";
|
|
import { MinimizedTab } from "components/minimized-tab.slint";
|
|
|
|
component StatusBadge {
|
|
in property <string> label;
|
|
in property <brush> color;
|
|
|
|
horizontal-stretch: 0;
|
|
HorizontalLayout {
|
|
spacing: 6px;
|
|
Rectangle {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: color;
|
|
border-radius: self.width / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
|
|
Text {
|
|
text: label;
|
|
color: Palette.text-primary;
|
|
vertical-alignment: center;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
component MenuButton {
|
|
in property <string> text;
|
|
callback clicked;
|
|
|
|
height: 28px;
|
|
|
|
Rectangle {
|
|
border-width: 2px;
|
|
border-color: area.has-hover ? Palette.brand : Palette.border;
|
|
border-radius: 8px;
|
|
|
|
background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
|
|
animate background { duration: 100ms; }
|
|
animate border-color { duration: 100ms; }
|
|
|
|
HorizontalLayout {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
|
|
Text {
|
|
text: root.text;
|
|
font-size: 14px;
|
|
color: Palette.text-primary;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
|
|
area := TouchArea {
|
|
mouse-cursor: pointer;
|
|
|
|
clicked => {
|
|
root.clicked();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component AppWindow inherits Window {
|
|
title: "My App";
|
|
|
|
// Allow WM to resize normally
|
|
min-width: 400px;
|
|
min-height: 300px;
|
|
|
|
preferred-width: 900px;
|
|
preferred-height: 600px;
|
|
|
|
VerticalBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
spacing: 0;
|
|
padding: 0;
|
|
|
|
// Top bar
|
|
Rectangle {
|
|
height: 40px;
|
|
width: 100%;
|
|
background: Palette.bg-main;
|
|
|
|
HorizontalLayout {
|
|
padding: 6px;
|
|
spacing: 6px;
|
|
|
|
MenuButton {
|
|
text: "Connect";
|
|
}
|
|
|
|
MenuButton {
|
|
text: "Window";
|
|
}
|
|
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
}
|
|
|
|
MenuButton {
|
|
text: "Setting";
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: Palette.brand;
|
|
}
|
|
|
|
// Main content
|
|
Rectangle {
|
|
background: Palette.bg-secondary;
|
|
horizontal-stretch: 1;
|
|
vertical-stretch: 1;
|
|
VerticalLayout {
|
|
padding-top: 4px;
|
|
height: 100%;
|
|
width: 28px;
|
|
x: parent.width - self.width + 2px;
|
|
alignment: start;
|
|
MinimizedTab {
|
|
name: "Spark Advance";
|
|
}
|
|
|
|
MinimizedTab {
|
|
name: "Voltage Graph";
|
|
}
|
|
}
|
|
|
|
DataWindow {
|
|
x: 0;
|
|
y: 0;
|
|
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" }
|
|
];
|
|
}
|
|
|
|
MapWindow {
|
|
x: 512px;
|
|
y: 0;
|
|
data-min: 2200;
|
|
data-max: 9400;
|
|
name: "Injection Period";
|
|
map-axis: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
|
|
rpm-axis: [
|
|
250,
|
|
500,
|
|
750,
|
|
1000,
|
|
1250,
|
|
1500,
|
|
1750,
|
|
2000,
|
|
2250,
|
|
2500,
|
|
2750,
|
|
3000,
|
|
3250,
|
|
3500,
|
|
3750,
|
|
4000
|
|
];
|
|
data: [
|
|
2200,
|
|
2300,
|
|
2400,
|
|
2500,
|
|
2600,
|
|
2700,
|
|
2800,
|
|
2900,
|
|
3000,
|
|
3100,
|
|
3200,
|
|
3300,
|
|
3400,
|
|
3500,
|
|
3600,
|
|
3700,
|
|
2400,
|
|
2500,
|
|
2600,
|
|
2700,
|
|
2800,
|
|
3000,
|
|
3200,
|
|
3400,
|
|
3600,
|
|
3800,
|
|
4000,
|
|
4200,
|
|
4400,
|
|
4600,
|
|
4800,
|
|
5000,
|
|
2600,
|
|
2800,
|
|
3000,
|
|
3200,
|
|
3400,
|
|
3600,
|
|
3800,
|
|
4000,
|
|
4200,
|
|
4400,
|
|
4600,
|
|
4800,
|
|
5000,
|
|
5200,
|
|
5400,
|
|
5600,
|
|
2800,
|
|
3000,
|
|
3200,
|
|
3400,
|
|
3600,
|
|
3800,
|
|
4000,
|
|
4300,
|
|
4600,
|
|
4900,
|
|
5200,
|
|
5500,
|
|
5800,
|
|
6100,
|
|
6400,
|
|
6700,
|
|
3000,
|
|
3200,
|
|
3400,
|
|
3600,
|
|
3800,
|
|
4100,
|
|
4400,
|
|
4700,
|
|
5000,
|
|
5300,
|
|
5600,
|
|
5900,
|
|
6200,
|
|
6500,
|
|
6800,
|
|
7100,
|
|
3300,
|
|
3500,
|
|
3700,
|
|
3900,
|
|
4200,
|
|
4500,
|
|
4800,
|
|
5100,
|
|
5400,
|
|
5700,
|
|
6000,
|
|
6300,
|
|
6600,
|
|
6900,
|
|
7200,
|
|
7500,
|
|
3600,
|
|
3800,
|
|
4000,
|
|
4200,
|
|
4500,
|
|
4800,
|
|
5100,
|
|
5400,
|
|
5700,
|
|
6000,
|
|
6300,
|
|
6600,
|
|
6900,
|
|
7200,
|
|
7500,
|
|
7800,
|
|
3900,
|
|
4100,
|
|
4300,
|
|
4600,
|
|
4900,
|
|
5200,
|
|
5500,
|
|
5800,
|
|
6100,
|
|
6400,
|
|
6700,
|
|
7000,
|
|
7300,
|
|
7600,
|
|
7900,
|
|
8200,
|
|
4200,
|
|
4400,
|
|
4700,
|
|
5000,
|
|
5300,
|
|
5600,
|
|
5900,
|
|
6200,
|
|
6500,
|
|
6800,
|
|
7100,
|
|
7400,
|
|
7700,
|
|
8000,
|
|
8300,
|
|
8600,
|
|
4600,
|
|
4800,
|
|
5100,
|
|
5400,
|
|
5700,
|
|
6000,
|
|
6300,
|
|
6600,
|
|
6900,
|
|
7200,
|
|
7500,
|
|
7800,
|
|
8100,
|
|
8400,
|
|
8700,
|
|
9000,
|
|
5000,
|
|
5200,
|
|
5500,
|
|
5800,
|
|
6100,
|
|
6400,
|
|
6700,
|
|
7000,
|
|
7300,
|
|
7600,
|
|
7900,
|
|
8200,
|
|
8500,
|
|
8800,
|
|
9100,
|
|
9400,
|
|
];
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: Palette.brand;
|
|
}
|
|
|
|
Rectangle {
|
|
height: 32px;
|
|
background: Palette.bg-main;
|
|
width: 100%;
|
|
|
|
HorizontalLayout {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
spacing: 20px;
|
|
|
|
StatusBadge {
|
|
label: "LoRa";
|
|
color: Palette.success;
|
|
}
|
|
|
|
StatusBadge {
|
|
label: "V-Link";
|
|
color: Palette.error;
|
|
}
|
|
|
|
Rectangle {
|
|
horizontal-stretch: 0;
|
|
height: parent.height - (2 * parent.padding-top);
|
|
width: 2px;
|
|
background: Palette.bg-secondary;
|
|
}
|
|
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
Text {
|
|
text: "ENGINE [WARNING] - High Engine Temperature";
|
|
font-size: 14px;
|
|
color: Palette.text-primary;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
horizontal-stretch: 0;
|
|
height: parent.height - (2 * parent.padding-top);
|
|
width: 2px;
|
|
background: Palette.bg-secondary;
|
|
}
|
|
|
|
StatusBadge {
|
|
label: "Engine";
|
|
color: Palette.warning;
|
|
}
|
|
|
|
StatusBadge {
|
|
label: "ECU";
|
|
color: Palette.success;
|
|
}
|
|
|
|
StatusBadge {
|
|
label: "Telemetry";
|
|
color: Palette.success;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|