Added Window Header and minor tweaks
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
import { Palette } from "../palette.slint";
|
||||
import { WindowHeader } from "window-header.slint";
|
||||
struct DataItem {
|
||||
label: string,
|
||||
value: float,
|
||||
@@ -10,11 +11,7 @@ struct DataItem {
|
||||
|
||||
component DataColumn {
|
||||
in property <[DataItem]> data;
|
||||
preferred-width: 100%;
|
||||
preferred-height: 100%;
|
||||
HorizontalLayout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
|
||||
@@ -54,44 +51,61 @@ component DataColumn {
|
||||
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;
|
||||
width: 500px;
|
||||
vertical-stretch: 1;
|
||||
VerticalLayout {
|
||||
visible: true;
|
||||
alignment: start;
|
||||
WindowHeader {
|
||||
title: "Data";
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
Rectangle {
|
||||
alignment: space-between;
|
||||
DataColumn {
|
||||
width: 218px;
|
||||
data: data1;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
vertical-stretch: 1;
|
||||
width: 21px;
|
||||
padding: 10px;
|
||||
width: 1px;
|
||||
background: Palette.bg-secondary;
|
||||
Rectangle {
|
||||
width: 1px;
|
||||
background: Palette.border;
|
||||
}
|
||||
}
|
||||
|
||||
DataColumn {
|
||||
width: 218px;
|
||||
data: data2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DataColumn {
|
||||
data: data2;
|
||||
}
|
||||
Rectangle {
|
||||
background: transparent;
|
||||
border-color: area.has-hover ? Palette.border-focus : Palette.border;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
vertical-stretch: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
import { Palette } from "../palette.slint";
|
||||
import { WindowHeader } from "window-header.slint";
|
||||
export component MapWindow {
|
||||
in property <[float]> data;
|
||||
in property <[float]> rpm-axis;
|
||||
@@ -9,8 +10,6 @@ export component MapWindow {
|
||||
in property <float> data-min;
|
||||
in property <float> data-max;
|
||||
in property <string> name;
|
||||
preferred-width: 100%;
|
||||
preferred-height: 100%;
|
||||
VerticalLayout {
|
||||
padding: 12px;
|
||||
|
||||
@@ -20,8 +19,6 @@ export component MapWindow {
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -29,25 +26,59 @@ export component MapWindow {
|
||||
drop-shadow-blur: 10px;
|
||||
VerticalLayout {
|
||||
|
||||
HorizontalLayout {
|
||||
alignment: center;
|
||||
padding-top: 6px;
|
||||
Text {
|
||||
text: name;
|
||||
font-size: 20px;
|
||||
color: Palette.text-primary;
|
||||
}
|
||||
WindowHeader {
|
||||
title: name;
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
vertical-stretch: 1;
|
||||
|
||||
Rectangle {
|
||||
border-color: black;
|
||||
border-width: 1px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
col: 0;
|
||||
row: 0;
|
||||
clip: true;
|
||||
Rectangle {
|
||||
height: 2 * (parent.height);
|
||||
width: 2px;
|
||||
background: white;
|
||||
transform-rotation: -45deg;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "RPM";
|
||||
font-size: 14px;
|
||||
color: Palette.text-primary;
|
||||
|
||||
transform-origin: { x: self.width / 2, y: self.height / 2 };
|
||||
transform-rotation: 45deg;
|
||||
|
||||
x: parent.width / 2 + 18px * sin(45deg) - self.width / 2;
|
||||
y: parent.height / 2 - 18px * sin(45deg) - self.height / 2;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Map";
|
||||
font-size: 14px;
|
||||
color: Palette.text-primary;
|
||||
|
||||
transform-origin: { x: self.width / 2, y: self.height / 2 };
|
||||
transform-rotation: 45deg;
|
||||
|
||||
x: parent.width / 2 - 18px * sin(45deg) - self.width / 2;
|
||||
y: parent.height / 2 + 18px * sin(45deg) - self.height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
for i in rpm-axis.length: Rectangle {
|
||||
border-color: black;
|
||||
border-width: 1px;
|
||||
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
property <int> r: 0;
|
||||
property <int> c: mod(i, rpm-axis.length) + 1;
|
||||
@@ -64,7 +95,8 @@ export component MapWindow {
|
||||
for i in map-axis.length: Rectangle {
|
||||
border-color: black;
|
||||
border-width: 1px;
|
||||
width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
|
||||
property <int> r: i + 1;
|
||||
property <int> c: 0;
|
||||
@@ -82,7 +114,8 @@ export component MapWindow {
|
||||
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);
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
|
||||
property <int> r: i / rpm-axis.length + 1;
|
||||
property <int> c: mod(i, rpm-axis.length) + 1;
|
||||
@@ -99,6 +132,14 @@ export component MapWindow {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: transparent;
|
||||
border-color: area.has-hover ? Palette.border-focus : Palette.border;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
vertical-stretch: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
57
ui/components/window-header.slint
Normal file
57
ui/components/window-header.slint
Normal file
@@ -0,0 +1,57 @@
|
||||
// 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 WindowHeader {
|
||||
|
||||
in property <string> title;
|
||||
HorizontalLayout {
|
||||
horizontal-stretch: 1;
|
||||
Rectangle {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background: Palette.border;
|
||||
HorizontalLayout {
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
padding-left: 6px;
|
||||
Rectangle {
|
||||
vertical-stretch: 1;
|
||||
Text {
|
||||
text: title;
|
||||
color: Palette.text-primary;
|
||||
horizontal-alignment: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
padding: 4px;
|
||||
Rectangle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: Palette.warning;
|
||||
border-radius: self.width / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
padding: 4px;
|
||||
Rectangle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: Palette.error;
|
||||
border-radius: self.width / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user