From 20393f3f703261fa26866e9b59ae3931fffbdd9a Mon Sep 17 00:00:00 2001 From: Hector van der Aa Date: Mon, 9 Mar 2026 23:15:47 +0100 Subject: [PATCH] Added Map Window components --- ui/app-window.slint | 320 +++++++++++++++++++++++++++++++-- ui/components/map-window.slint | 104 +++++++++++ 2 files changed, 405 insertions(+), 19 deletions(-) diff --git a/ui/app-window.slint b/ui/app-window.slint index 0954a10..c549e38 100644 --- a/ui/app-window.slint +++ b/ui/app-window.slint @@ -5,6 +5,7 @@ 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"; component StatusBadge { in property label; @@ -123,7 +124,7 @@ export component AppWindow inherits Window { horizontal-stretch: 1; vertical-stretch: 1; Rectangle { - width: parent.width / 2; + width: parent.width / 3; height: parent.height / 2; x: 0px; y: 0px; @@ -148,26 +149,307 @@ export component AppWindow inherits Window { } Rectangle { - width: parent.width / 2; - height: parent.height / 2; - x: parent.width / 2; + width: 2 * parent.width / 3; + height: 2 * parent.height / 3; + x: parent.width / 3; 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: " °" }, + MapWindow { + data-min: 2200; + data-max: 12000; + name: "MAP 1"; + map-axis: [ + 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 ]; - 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" } + 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, + 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 ]; } } diff --git a/ui/components/map-window.slint b/ui/components/map-window.slint index e69de29..484b2de 100644 --- a/ui/components/map-window.slint +++ b/ui/components/map-window.slint @@ -0,0 +1,104 @@ +// Copyright (C) 2026 Hector van der Aa +// Copyright (C) 2026 Association Exergie +// 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 data-min; + in property data-max; + in property 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 r: 0; + property 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 r: i + 1; + property 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 r: i / rpm-axis.length + 1; + property 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); + } + } + } + } + } + } +}