Added Map Window components

This commit is contained in:
2026-03-09 23:15:47 +01:00
parent 9e17d5f638
commit 20393f3f70
2 changed files with 405 additions and 19 deletions

View File

@@ -5,6 +5,7 @@
import { VerticalBox, Button } from "std-widgets.slint"; 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";
component StatusBadge { component StatusBadge {
in property <string> label; in property <string> label;
@@ -123,7 +124,7 @@ export component AppWindow inherits Window {
horizontal-stretch: 1; horizontal-stretch: 1;
vertical-stretch: 1; vertical-stretch: 1;
Rectangle { Rectangle {
width: parent.width / 2; width: parent.width / 3;
height: parent.height / 2; height: parent.height / 2;
x: 0px; x: 0px;
y: 0px; y: 0px;
@@ -148,26 +149,307 @@ export component AppWindow inherits Window {
} }
Rectangle { Rectangle {
width: parent.width / 2; width: 2 * parent.width / 3;
height: parent.height / 2; height: 2 * parent.height / 3;
x: parent.width / 2; x: parent.width / 3;
y: 0px; y: 0px;
DataWindow { MapWindow {
data1: [ data-min: 2200;
{ label: "Engine Temp", value: 97, unit: " °C" }, data-max: 12000;
{ label: "Engine RPM", value: 2573, unit: " RPM" }, name: "MAP 1";
{ label: "Engine Map", value: 7, unit: "" }, map-axis: [
{ label: "Fuel Rate", value: 0.62, unit: " L/h" }, 0.0,
{ label: "Injector PW", value: 2.7, unit: " ms" }, 0.0667,
{ label: "Ignition Adv", value: 21, unit: " °" }, 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
]; ];
data2: [ rpm-axis: [
{ label: "GPS Speed", value: 38.9, unit: " km/h" }, 250,
{ label: "GPS Satellites", value: 14, unit: "" }, 500,
{ label: "Tank Pressure", value: 101.7, unit: " kPa" }, 750,
{ label: "Air Temp", value: 24, unit: " °C" }, 1000,
{ label: "Humidity", value: 42, unit: " %" }, 1250,
{ label: "Barometric", value: 1012, unit: " hPa" } 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,
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
]; ];
} }
} }

View File

@@ -0,0 +1,104 @@
// 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 MapWindow {
in property <[float]> data;
in property <[float]> rpm-axis;
in property <[float]> map-axis;
in property <float> data-min;
in property <float> data-max;
in property <string> name;
preferred-width: 100%;
preferred-height: 100%;
VerticalLayout {
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;
VerticalLayout {
HorizontalLayout {
alignment: center;
padding-top: 6px;
Text {
text: name;
font-size: 20px;
color: Palette.text-primary;
}
}
GridLayout {
width: 100%;
padding: 6px;
vertical-stretch: 1;
for i in rpm-axis.length: Rectangle {
border-color: black;
border-width: 1px;
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);
property <int> r: 0;
property <int> c: mod(i, rpm-axis.length) + 1;
col: c;
row: r;
Text {
text: rpm-axis[i];
color: Palette.text-primary;
font-size: 16px;
horizontal-alignment: center;
vertical-alignment: center;
}
}
for i in map-axis.length: Rectangle {
border-color: black;
border-width: 1px;
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);
property <int> r: i + 1;
property <int> c: 0;
col: c;
row: r;
Text {
text: map-axis[i];
color: Palette.text-primary;
font-size: 16px;
horizontal-alignment: center;
vertical-alignment: center;
}
}
for i in data.length: Rectangle {
border-color: black;
border-width: 1px;
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);
property <int> r: i / rpm-axis.length + 1;
property <int> c: mod(i, rpm-axis.length) + 1;
col: c;
row: r;
Text {
text: data[i];
color: Palette.text-primary;
font-size: 14px;
horizontal-alignment: center;
vertical-alignment: center;
stroke: hsv((240deg - ((data[i] - data-min) / (data-max - data-min)) * 240deg), 0.8, 0.3);
}
}
}
}
}
}
}