1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Button, StyleMetrics } from "std-widgets.slint";
5
6import { Icons } from "icons.slint";
7
8component VirtualKeyboardButton {
9 in property <string> key;
10 in property <image> icon;
11
12 callback key-pressed(/* key */ string);
13
14 min-width: 32px;
15 min-height: 32px;
16 horizontal-stretch: 0;
17
18 states [
19 pressed when i-touch-area.pressed : {
20 i-state-area.opacity: 0.5;
21 }
22 ]
23
24 i-container := Rectangle {
25 border-radius: 4px;
26 background: StyleMetrics.dark-color-scheme ? #373737 : #ffffff;
27
28 HorizontalLayout {
29 padding: 8px;
30
31 if (root.key != "") : Text {
32 text: root.key;
33 color: StyleMetrics.dark-color-scheme ? #ffffff : #000000;
34 font-size: 12px;
35 vertical-alignment: center;
36 horizontal-alignment: center;
37 }
38
39 if (root.key == "") : Image {
40 y: (parent.height - self.height) / 2;
41 source: root.icon;
42 height: 18px;
43 colorize: StyleMetrics.dark-color-scheme ? #ffffff : #000000;
44 }
45 }
46 }
47
48 i-state-area := Rectangle {
49 border-radius: i-container.border-radius;
50 opacity: 0;
51 background: #000000;
52
53 animate opacity { duration: 150ms; }
54 }
55
56 i-touch-area := TouchArea {
57 pointer-event(event) => {
58 if(event.kind == PointerEventKind.down) {
59 root.key-pressed(key);
60 }
61 }
62 }
63}
64
65export struct KeyModel {
66 key: string,
67 shift-key: string,
68}
69
70export global VirtualKeyboardHandler {
71 in property <[[[KeyModel]]]> default-key-sets: [
72 [
73 [
74 { key: "q", shift-key: "Q" },
75 { key: "w", shift-key: "W" },
76 { key: "e", shift-key: "E" },
77 { key: "r", shift-key: "R" },
78 { key: "t", shift-key: "T" },
79 { key: "y", shift-key: "Y" },
80 { key: "u", shift-key: "U" },
81 { key: "i", shift-key: "I" },
82 { key: "o", shift-key: "O" },
83 { key: "p", shift-key: "P" }
84 ],
85 [
86 { key: "a", shift-key: "A" },
87 { key: "s", shift-key: "S" },
88 { key: "d", shift-key: "D" },
89 { key: "f", shift-key: "F" },
90 { key: "g", shift-key: "G" },
91 { key: "h", shift-key: "H" },
92 { key: "j", shift-key: "J" },
93 { key: "k", shift-key: "K" },
94 { key: "l", shift-key: "L" }
95 ],
96 [
97 { key: "z", shift-key: "Z" },
98 { key: "x", shift-key: "X" },
99 { key: "c", shift-key: "C" },
100 { key: "v", shift-key: "V" },
101 { key: "b", shift-key: "B" },
102 { key: "n", shift-key: "N" },
103 { key: "m", shift-key: "M" },
104 { key: ",", shift-key: ";" },
105 { key: ".", shift-key: ":" },
106 { key: "?", shift-key: "?" }
107 ],
108 ],
109 [
110 [
111 { key: "1", shift-key: "[" },
112 { key: "2", shift-key: "]" },
113 { key: "3", shift-key: "{" },
114 { key: "4", shift-key: "}" },
115 { key: "5", shift-key: "#" },
116 { key: "6", shift-key: "%" },
117 { key: "7", shift-key: "^" },
118 { key: "8", shift-key: "*" },
119 { key: "9", shift-key: "+" },
120 { key: "0", shift-key: "=" }
121 ],
122 [
123 { key: "-", shift-key: "_" },
124 { key: "/", shift-key: "\\" },
125 { key: ":", shift-key: "|" },
126 { key: ";", shift-key: "~" },
127 { key: "(", shift-key: "<" },
128 { key: ")", shift-key: ">" },
129 { key: "€", shift-key: "$" },
130 { key: "&", shift-key: "€" },
131 { key: "@", shift-key: "°" },
132 { key: "'", shift-key: "#" },
133 ],
134 [
135 { key: ".", shift-key: "." },
136 { key: ",", shift-key: "," },
137 { key: "?", shift-key: "?" },
138 { key: "!", shift-key: "!" },
139 { key: "'", shift-key: "'" },
140 ],
141 ]
142 ];
143
144 out property <int> current-key-set;
145 out property <[[KeyModel]]> keys: default-key-sets[self.current-key-set];
146 in-out property <bool> open;
147
148 callback key_pressed(/* key */ string);
149
150 public function switch-keyboard() {
151 if (self.current-key-set < self.default-key-sets.length - 1) {
152 self.current-key-set += 1;
153 } else {
154 self.current-key-set -= 1;
155 }
156
157 self.current-key-set = min(self.default-key-sets.length - 1, max(0, self.current-key-set))
158 }
159}
160
161export component VirtualKeyboard {
162 private property <bool> shift;
163
164 preferred-width: 100%;
165
166 Rectangle {
167 background: StyleMetrics.dark-color-scheme ? #1c1c1c : #d4d4d4;
168 height: 100%;
169 }
170
171 i-layout := VerticalLayout {
172 padding: 8px;
173 spacing: 4px;
174
175 for row[index] in VirtualKeyboardHandler.keys : HorizontalLayout {
176 spacing: 4px;
177
178 if (index == 0) : VirtualKeyboardButton {
179 key: "ESC";
180
181 key-pressed => {
182 VirtualKeyboardHandler.key-pressed(Key.Escape);
183 }
184 }
185
186 if (index == 1) : VirtualKeyboardButton {
187 key: "Tab";
188
189 key-pressed => {
190 VirtualKeyboardHandler.key-pressed(Key.Tab);
191 }
192 }
193
194 // shift
195 if (index == 2) : VirtualKeyboardButton {
196 icon: Icons.arrow-up;
197
198 key-pressed => {
199 root.shift = !root.shift;
200 }
201 }
202
203 for km in row : VirtualKeyboardButton {
204 key: root.shift ? km.shift-key : km.key;
205
206 key-pressed(key) => {
207 VirtualKeyboardHandler.key-pressed(key);
208 root.shift = false;
209 }
210 }
211
212 if (index == 0) : VirtualKeyboardButton {
213 icon: Icons.chevron-left;
214
215 key-pressed => {
216 VirtualKeyboardHandler.key-pressed(Key.Backspace);
217 }
218 }
219
220 if (index == 1) : VirtualKeyboardButton {
221 icon: Icons.arrow-circle-o-left;
222
223 key-pressed => {
224 VirtualKeyboardHandler.key-pressed(Key.Return);
225 }
226 }
227
228 // shift
229 if (index == 2) : VirtualKeyboardButton {
230 icon: Icons.arrow-up;
231
232 key-pressed => {
233 root.shift = !root.shift;
234 }
235 }
236 }
237
238 HorizontalLayout {
239 spacing: 4px;
240
241 VirtualKeyboardButton {
242 icon: Icons.globe;
243
244 key-pressed(key) => {
245 VirtualKeyboardHandler.switch-keyboard();
246 }
247 }
248 VirtualKeyboardButton {
249 horizontal-stretch: 1;
250 key: " ";
251
252 key-pressed(key) => {
253 root.shift = false;
254 VirtualKeyboardHandler.key-pressed(key);
255 }
256 }
257 VirtualKeyboardButton {
258 icon: Icons.arrow-left;
259
260 key-pressed(key) => {
261 VirtualKeyboardHandler.key-pressed(Key.LeftArrow);
262 }
263 }
264 VirtualKeyboardButton {
265 icon: Icons.arrow-right;
266
267 key-pressed(key) => {
268 VirtualKeyboardHandler.key-pressed(Key.RightArrow);
269 }
270 }
271 }
272
273
274 }
275
276 animate y { duration: 500ms; easing: cubic-bezier(0.05, 0.7, 0.1, 1.0); }
277}