1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5import { BarBackground } from "bar_chart.slint";
6
7export struct BarTileModel {
8 title: string,
9 icon: image,
10 max: int,
11 min: int,
12 absolute-min: int,
13 absolute-max: int,
14 unit: string,
15}
16
17component ValueLabel {
18 in property <string> text;
19 in property <string> unit;
20
21 HorizontalLayout {
22 Text {
23 color: Theme.palette.white;
24 vertical-stretch: 0;
25 horizontal-alignment: right;
26 text: root.text;
27 font-size: Theme.typo.description-light.size;
28 font-weight: Theme.typo.description-light.weight;
29 }
30
31 Text {
32 color: Theme.palette.white;
33 vertical-stretch: 0;
34 horizontal-alignment: left;
35 text: "°";
36 font-size: Theme.typo.description-light.size;
37 font-weight: Theme.typo.description-light.weight;
38 }
39 }
40}
41
42component BarTile {
43 in property <string> title <=> i-title.text;
44 in property <image> icon <=> i-icon.source;
45 in property <float> max;
46 in property <float> min;
47 in property <string> unit;
48 in property <float> absolute-min;
49 in property <float> absolute-max;
50
51 HorizontalLayout {
52 alignment: center;
53
54 VerticalLayout {
55 spacing: 7px;
56
57 i-title := Text {
58 color: Theme.palette.white;
59 vertical-stretch: 0;
60 horizontal-alignment: center;
61 font-size: Theme.typo.description.size;
62 font-weight: Theme.typo.description.weight;
63 }
64
65 i-icon := Image {
66 height: 20px;
67 vertical-stretch: 0;
68 }
69
70 ValueLabel {
71 text: floor(max);
72 unit: unit;
73 }
74
75 Rectangle {
76 private property <int> range: root.absolute-max - root.absolute-min;
77 private property <length> max-y: self.height * (root.max - root.absolute-min) / range;
78 private property <length> min-y: self.height * (root.min - root.absolute-min) / range;
79
80 vertical-stretch: 1;
81
82 HorizontalLayout {
83 alignment: center;
84 y: parent.height - max-y;
85 height: max-y - min-y;
86
87 Rectangle {
88 min_width: 12px;
89 border-radius: 6px;
90
91 background: Theme.palette.lemon-green-light-gradient;
92 }
93 }
94 }
95
96 ValueLabel {
97 text: floor(min);
98 unit: unit;
99 }
100 }
101 }
102}
103
104export component BarTiles {
105 in property <[BarTileModel]> model;
106 in property <bool> active;
107
108 horizontal-stretch: 1;
109 vertical-stretch: 1;
110
111 BarBackground {}
112
113 HorizontalLayout {
114 padding-right: 18px;
115 padding-left: 18px;
116 padding-top: 11px;
117 padding-bottom: 11px;
118
119 for tile in model : BarTile {
120 private property <float> display-max: tile.max;
121
122 horizontal-stretch: 1;
123 title: tile.title;
124 icon: tile.icon;
125 min: tile.min;
126 absolute-min: tile.absolute-min;
127 absolute-max: tile.absolute-max;
128 unit: tile.unit;
129
130 states [
131 active when active : {
132 max: display-max;
133
134 in {
135 animate max { duration: Theme.durations.slow; easing: cubic-bezier(0, 0, 0, 1); }
136 }
137 }
138 ]
139 }
140 }
141}
142