1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5
6component ValueDelegate {
7 in property <bool> active;
8 in property <string> title <=> i-title.text;
9 in property <string> unit <=> i-unit.text;
10 in property <float> value;
11 in property <bool> alternative-colors;
12
13 private property <float> display-value;
14
15 states [
16 active when active : {
17 display-value: value;
18
19 in {
20 animate display-value { duration: Theme.durations.slow; }
21 }
22 }
23 ]
24
25 HorizontalLayout {
26 spacing: 15px;
27
28 Rectangle {
29 min_width: 1px;
30 background: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green;
31 horizontal-stretch: 0;
32 }
33
34 VerticalLayout {
35 alignment: center;
36 horizontal-stretch: 1;
37
38 i-title := Text {
39 color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green;
40 font-size: Theme.typo.label.size;
41 font-weight: Theme.typo.label.weight;
42 }
43
44 HorizontalLayout {
45 alignment: start;
46 spacing: 5px;
47
48 Text {
49 color: Theme.palette.white;
50 text: round(display-value * 100) / 100;
51 font-size: Theme.typo.value.size;
52 font-weight: Theme.typo.value.weight;
53 vertical-alignment: center;
54 }
55
56 i-unit := Text {
57 y: Theme.spaces.small;
58 vertical-alignment: center;
59 color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green;
60 font-size: Theme.typo.label-light.size;
61 font-weight: Theme.typo.label-light.weight;
62 }
63 }
64 }
65 }
66}
67
68export struct Value {
69 title: string,
70 value: float,
71 unit: string,
72}
73
74export component ValueDisplay {
75 in property <bool> alternative-colors;
76 in property <[Value]> model;
77 in property <bool> active;
78 in property <bool> transparent-background;
79 in property <bool> vertical;
80
81 min-height: 70px;
82
83 i-container := Rectangle {
84 visible: !transparent-background;
85 width: 100%;
86 height: 100%;
87 border-radius: 4px;
88 background: alternative-colors ? Theme.palette.slint-blue-gradient : Theme.palette.lemon-green-gradient;
89 }
90
91 if(model.length > 0 && !vertical) : HorizontalLayout {
92 x: 15px;
93 width: parent.width - 30px;
94 height: 100%;
95 padding-top: 12px;
96 padding-bottom: 12px;
97
98 for value in root.model : ValueDelegate {
99 width: parent.width / model.length;
100 horizontal-stretch: 1;
101 alternative-colors: root.alternative-colors;
102 title: value.title;
103 value: value.value;
104 unit: value.unit;
105 active: root.active;
106 }
107 }
108
109 if(model.length > 0 && vertical) : VerticalLayout {
110 for value in root.model : ValueDelegate {
111 vertical-stretch: 1;
112 alternative-colors: root.alternative-colors;
113 title: value.title;
114 value: value.value;
115 unit: value.unit;
116 active: root.active;
117 }
118 }
119}
120