1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { Slider, Palette } from "std-widgets.slint";
5
6component MetricsLabel {
7 in property <string> name;
8 in property <length> value;
9 in property <length> baseline;
10 in property <color> color: t.color;
11 out property <length> text-width: t.preferred-width;
12
13 Rectangle {
14 y: root.baseline - root.value;
15 height: 1px;
16 border-color: root.color;
17 border-width: 1px;
18
19 t := Text {
20 x: 0; //parent.width - self.width;
21 y: - self.height;
22 text: {
23 if root.name == "baseline" {
24 return root.name;
25 }
26 "\{root.name} (\{Math.round(root.value / 1px)}px)";
27 }
28 }
29 }
30}
31
32import "../../../demos/printerdemo/ui/fonts/NotoSans-Regular.ttf";
33
34export component AppWindow inherits Window {
35 width: l.x + l.width;
36 height: l.y + 2 * l.font-size;
37
38 l := Text {
39 y: self.font-size / 2;
40 x: max(baseline.text-width, ascent.text-width, descent.text-width, x-height.text-width, cap-height.text-width);
41 text: "Sphinx";
42 font-family: "Noto Sans";
43 font-size: 96px;
44 }
45
46 baseline := MetricsLabel {
47 x: 0;
48 y: l.y;
49 width: 100%;
50 name: "baseline";
51 value: 0;
52 baseline: l.font-metrics.ascent;
53 color: red;
54 }
55
56 ascent := MetricsLabel {
57 x: 0;
58 y: l.y;
59 width: 100%;
60 name: "ascent";
61 value: l.font-metrics.ascent;
62 baseline: l.font-metrics.ascent;
63 }
64
65 descent := MetricsLabel {
66 x: 0;
67 y: l.y;
68 width: 100%;
69 name: "descent";
70 value: l.font-metrics.descent;
71 baseline: l.font-metrics.ascent;
72 }
73
74 x-height := MetricsLabel {
75 x: 0;
76 y: l.y;
77 width: 100%;
78 name: "x-height";
79 value: l.font-metrics.x-height;
80 baseline: l.font-metrics.ascent;
81 }
82
83 cap-height := MetricsLabel {
84 x: 0;
85 y: l.y;
86 width: 100%;
87 name: "cap-height";
88 value: l.font-metrics.cap-height;
89 baseline: l.font-metrics.ascent;
90 }
91}
92