Skip to content

Commit 5bd6c4b

Browse files
NigelBreslawNigelBreslaw
authored
Improve the resolution the Home Automation demo runs at
1 parent 446bb4a commit 5bd6c4b

27 files changed

+290
-280
lines changed

‎demos/home-automation/ui/appState.slint‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export global AppState {
3434
in-out property <int> current-page: 0; // Don't use this directly. Use target-page instead.
3535
in-out property <int> target-page: 0;
3636
out property <DataGroup> current-layout-data: pageData[current-page];
37-
in property <length> window-width;
38-
in property <length> window-height;
37+
in property <length> window-width: 960px;
38+
in property <length> window-height: 540px;
3939
out property <float> x-scale: window-width / 1920px;
4040
out property <float> y-scale: window-height / 1080px;
4141

‎demos/home-automation/ui/common.slint‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@
22
// SPDX-License-Identifier: MIT
33
export global Measurements {
44
out property <length> zone-button-spacing: 30px;
5-
out property <length> tile-radius: 20px;
5+
out property <length> tile-radius: 10px;
66
out property <length> page-height: 1080px;
77
out property <length> page-width: 1920px;
88
out property <length> padding: 12px;
9-
out property <length> small-width-tile: 278px;
10-
out property <length> small-height-tile: 153px;
11-
out property <length> medium-height-tile: 278px;
12-
out property <length> medium-width-tile: 435px;
13-
out property <length> large-height-tile: 906px;
14-
out property <length> large-width-tile: 435px;
15-
out property <length> sidebar-width: 400px;
9+
out property <length> small-width-tile: 139px;
10+
out property <length> small-height-tile: 76.5px;
11+
out property <length> medium-height-tile: 139px;
12+
out property <length> medium-width-tile: 217.5px;
13+
out property <length> large-height-tile: 453px;
14+
out property <length> large-width-tile: 217.5px;
15+
out property <length> sidebar-width: 200px;
1616
out property <length> tile-shadow-blur: 20px;
17-
out property <length> sidebar-padding: 36px;
18-
out property <length> sidebar-spacing: 36px;
19-
out property <length> application-width: 1920px;
20-
out property <length> application-height: 1080px;
17+
out property <length> sidebar-padding: 18px;
18+
out property <length> sidebar-spacing: 18px;
19+
out property <length> application-width: 960px;
20+
out property <length> application-height: 540px;
2121
}
2222

2323
export global Style {
24-
out property <length> icon-title-font-size: 20px;
25-
out property <length> normal-font-size: 24px;
26-
out property <length> H1-font-size: 64px;
27-
out property <length> H2-font-size: 42px;
28-
out property <length> H3-font-size: 36px;
29-
out property <length> tile-title-font-size: 20pt;
24+
out property <length> icon-title-font-size: 10px;
25+
out property <length> normal-font-size: 12px;
26+
out property <length> H1-font-size: 32px;
27+
out property <length> H2-font-size: 21px;
28+
out property <length> H3-font-size: 18px;
29+
out property <length> tile-title-font-size: 10pt;
3030
}
3131

3232
export global Animation {

‎demos/home-automation/ui/components/alarm.slint‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ export component ArmButton inherits Rectangle {
1010
callback clicked <=> ta.clicked;
1111
in property <int> label;
1212
background: ta.pressed ? Palette.control-alternate-background.transparentize(0.5) : Palette.control-alternate-background;
13-
border-radius: 10px;
14-
width: 130px;
15-
height: 95px;
13+
border-radius: 5px;
14+
width: 65px;
15+
height: 47px;
1616
HaText {
1717
font-size: root.label == -2 ? Style.H1-font-size * 0.6 : Style.H2-font-size;
1818
text: root.label == -2 ? "⌫" : root.label;
@@ -37,6 +37,11 @@ export component Alarm inherits Control {
3737
font-size: Style.H1-font-size;
3838
text: root.indirect-passcode;
3939
opacity: 0;
40+
changed width => {
41+
if self.width > 130px {
42+
root.passcode = -1;
43+
}
44+
}
4045
}
4146

4247
content := Rectangle {
@@ -54,7 +59,7 @@ export component Alarm inherits Control {
5459
color: Palette.hvac-knob-foreground;
5560
font-weight: 300;
5661
x: parent.width / 2 - self.width / 2;
57-
y: 100px;
62+
y: 50px;
5863
}
5964

6065
Rectangle {
@@ -77,20 +82,20 @@ export component Alarm inherits Control {
7782

7883
Rectangle {
7984
width: 100%;
80-
height: 50px;
85+
height: 25px;
8186
border-radius: self.height / 2;
8287
background: Palette.alternate-background;
8388

8489
HaText {
8590
text: "Arm Alarm";
8691
color: Palette.foreground;
87-
font-size: 2rem;
92+
font-size: 1rem;
8893
}
8994
}
9095
}
9196

9297
Rectangle {
93-
width: 400px;
98+
width: 200px;
9499
states [
95100
isVisible when root.full-screen: {
96101
opacity: 1;
@@ -113,34 +118,30 @@ export component Alarm inherits Control {
113118
]
114119
x: parent.width / 2 - self.width / 2;
115120
Rectangle {
116-
width: 130px * 3 + 2 * 10px;
121+
y: parent.height * 0.2;
122+
width: 65px * 3 + 2 * 5px;
117123
height: (95px * 5) + (4 * 10px);
118124
visible: root.full-screen;
119125

120126
container := Rectangle {
121127
y: 0;
122128
border-radius: 10px;
123129
width: 100%;
124-
height: 95px;
130+
height: 48px;
125131
background: Palette.alternate-background;
126132
le := LineEdit {
127133
font-size: Style.H1-font-size;
128134
text: root.indirect-passcode;
129135
input-type: password;
130-
width: Math.max(290px, hidden-text.width);
131-
changed width => {
132-
if self.width > 300px {
133-
root.passcode = -1;
134-
}
135-
}
136+
width: 145px;
136137
}
137138

138139
mask := Rectangle {
139-
width: le.width + (17px * 2);
140+
width: le.width + (9px * 2);
140141
height: container.height - 1px;
141-
x: le.x - 17px;
142+
x: le.x - 9px;
142143
y: container.y + 1px;
143-
border-width: 18px;
144+
border-width: 9px;
144145
border-color: Palette.lineedit-background;
145146
}
146147

@@ -149,7 +150,7 @@ export component Alarm inherits Control {
149150
height: container.height;
150151
x: container.x;
151152
y: container.y;
152-
border-radius: 10px;
153+
border-radius: 5px;
153154
background: Palette.lineedit-background;
154155
}
155156

@@ -158,7 +159,7 @@ export component Alarm inherits Control {
158159
height: container.height;
159160
x: mask.x + mask.width;
160161
y: container.y;
161-
border-radius: 10px;
162+
border-radius: 5px;
162163
background: Palette.lineedit-background;
163164
}
164165
}
@@ -171,12 +172,12 @@ export component Alarm inherits Control {
171172
[7, 8, 9],
172173
[-1, 0, -2],
173174
]: Rectangle {
174-
y: (r * 105px) + 105px;
175+
y: (r * 52px) + 52px;
175176
width: 100%;
176-
height: 170px;
177+
height: 85px;
177178

178179
HorizontalLayout {
179-
spacing: 10px;
180+
spacing: 5px;
180181
for num[c] in row-model: ArmButton {
181182
label: num;
182183
clicked => {
@@ -198,11 +199,11 @@ export component Alarm inherits Control {
198199
x: 0;
199200
VerticalLayout {
200201
alignment: end;
201-
spacing: 5px;
202-
padding: 5px;
202+
spacing: 2px;
203+
padding: 2px;
203204

204205
controls := Rectangle {
205-
border-radius: 20px;
206+
border-radius: 10px;
206207
width: 95%;
207208
height: self.preferred-height;
208209
background: Palette.music-gradient.transparentize(0.2);
@@ -212,8 +213,8 @@ export component Alarm inherits Control {
212213
}
213214
HorizontalLayout {
214215
alignment: space-around;
215-
padding-top: 15px;
216-
padding-bottom: 15px;
216+
padding-top: 8px;
217+
padding-bottom: 8px;
217218
}
218219
}
219220
}
@@ -227,10 +228,10 @@ export component Alarm inherits Control {
227228
}
228229
source: @image-url("../images/reduce.svg");
229230
colorize: white;
230-
x: root.width - self.width - 30px;
231-
y: 30px;
232-
width: 60px;
233-
height: 60px;
231+
x: root.width - self.width - self.y;
232+
y: 15px;
233+
width: 30px;
234+
height: 30px;
234235
TouchArea {
235236
enabled: closeButton.opacity > 0.1;
236237
clicked => {

‎demos/home-automation/ui/components/appliance.slint‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,47 +30,47 @@ export component Appliance {
3030
if (root.width > Measurements.small-width-tile): Image {
3131
width: parent.width;
3232
height: image-size;
33-
y: -80px;
33+
y: -40px;
3434
image-fit: cover;
3535
source: appliance-image;
3636
}
3737
}
3838

3939
VerticalLayout {
40-
padding: (tile.height > Measurements.small-height-tile) ? 36px : 18px;
40+
padding: (tile.height > Measurements.small-height-tile) ? 18px : 9px;
4141
width: 100%;
4242
height: 100%;
4343
alignment: start;
4444
HaText {
4545
text: "Appliance";
46-
font-size: 16pt;
46+
font-size: 8pt;
4747
font-weight: 400;
4848
color: Palette.appliance-alternate-foreground;
4949
}
5050

5151
HaText {
5252
text: root.name;
53-
font-size: 20pt;
53+
font-size: 10pt;
5454
font-weight: 400;
5555
color: Palette.appliance-foreground;
5656
}
5757

5858
Rectangle {
59-
height: 10px;
59+
height: 5px;
6060
}
6161

6262
VerticalLayout {
63-
spacing: -10px;
63+
spacing: -5px;
6464
HaText {
6565
text: "Time Remaining: ";
66-
font-size: 16pt;
66+
font-size: 8pt;
6767
font-weight: 400;
6868
color: Palette.appliance-foreground;
6969
}
7070

7171
HaText {
7272
text: root.time-remaining;
73-
font-size: 30pt;
73+
font-size: 15pt;
7474
font-weight: 500;
7575
color: Palette.appliance-foreground;
7676
}

‎demos/home-automation/ui/components/camera.slint‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ export component Camera inherits Control {
6262
Image {
6363
source: @image-url("../images/enlarge.svg");
6464
opacity: root.full-screen ? 0 : 1;
65-
width: 40px;
65+
width: 20px;
6666
colorize: Colors.white;
67-
x: root.width - self.width - 30px;
68-
y: 30px;
67+
x: root.width - self.width - 15px;
68+
y: 15px;
6969
animate opacity {
7070
duration: 500ms;
7171
easing: ease-in-out-sine;
@@ -80,10 +80,10 @@ export component Camera inherits Control {
8080
}
8181
source: @image-url("../images/reduce.svg");
8282
colorize: white;
83-
x: root.width - self.width - 30px;
84-
y: 30px;
85-
width: 60px;
86-
height: 60px;
83+
x: root.width - self.width - 15px;
84+
y: 15px;
85+
width: 30px;
86+
height: 30px;
8787
}
8888

8989
TouchArea {

‎demos/home-automation/ui/components/control.slint‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export component Control inherits Rectangle {
1212
in property <bool> name-label: true;
1313
in property <bool> full-screen: false;
1414
in property <bool> control-label: true;
15-
in property <length> control-label-position: 5px;
15+
in property <length> control-label-position: 2.5px;
1616
in property <int> index;
1717
in property <length> tile-shadow-blur: Measurements.tile-shadow-blur;
1818
in property <brush> tile-background: Palette.control-background;
@@ -38,7 +38,7 @@ export component Control inherits Rectangle {
3838
@children
3939
if show-label: Rectangle {
4040
x: control-label-position;
41-
y: 5px;
41+
y: 2.5px;
4242
border-radius: Measurements.tile-radius;
4343
background: Colors.black.transparentize(0.7);
4444
width: self.preferred-width;
@@ -55,7 +55,7 @@ export component Control inherits Rectangle {
5555

5656
Text {
5757
text: root.name;
58-
font-size: 20pt;
58+
font-size: 10pt;
5959
font-weight: 400;
6060
color: Palette.control-foreground;
6161
}

0 commit comments

Comments
 (0)