KeSp_controller/ui/components/keyboard_view.slint
Mae PUGIN 32ee3a6d26 feat: Complete KeSp Controller — Slint UI port
Full port of the KaSe/KeSp split keyboard configurator from egui to Slint:
- 6 tabs: Keymap, Advanced, Macros, Stats, Settings, Flash
- Responsive keyboard view with scale-to-fit and key rotations
- Key selector popup with categorized grid, MT/LT builders, hex input
- Combo key picker with inline keyboard visual
- Macro step builder with visual tags
- Serial communication via background threads + mpsc polling
- Heatmap overlay with blue-yellow-red gradient
- OTA flasher with prog port VID filtering and partition selector
- WPM polling, Tamagotchi, Autoshift controls
- Dracula theme matching egui version

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 20:40:34 +02:00

32 lines
1.2 KiB
Text

import { Theme } from "../theme.slint";
import { KeymapBridge, KeycapData } from "../globals.slint";
import { KeyButton } from "key_button.slint";
export component KeyboardView inherits Rectangle {
background: Theme.bg-surface;
border-radius: 8px;
min-height: 150px;
clip: true;
// Scale to fit: min(available / content) so it always fits
property <float> scale-x: self.width / KeymapBridge.content-width;
property <float> scale-y: self.height / KeymapBridge.content-height;
property <float> scale: min(root.scale-x, root.scale-y) * 0.95;
// Center offset
property <length> offset-x: (self.width - KeymapBridge.content-width * root.scale) / 2;
property <length> offset-y: (self.height - KeymapBridge.content-height * root.scale) / 2;
for keycap[idx] in KeymapBridge.keycaps : KeyButton {
x: root.offset-x + keycap.x * root.scale;
y: root.offset-y + keycap.y * root.scale;
width: keycap.w * root.scale;
height: keycap.h * root.scale;
scale: root.scale;
data: keycap;
clicked(key-index) => {
KeymapBridge.select-key(key-index);
KeymapBridge.selector-target = "keymap";
KeymapBridge.key-selector-open = true;
}
}
}