2f53119178
mix() was not rendering correctly. Replaced with stepped thresholds: - >80%: bright red (#ff0000) - >60%: red-orange (#ff4400) - >40%: orange (#ff8800) - >20%: yellow (#ffcc00) - >5%: cool blue (#446688) - <=5%: very cold (#2d2d44) Dark text when heat > 20%. Removed debug eprintln. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
2.1 KiB
Text
62 lines
2.1 KiB
Text
import { Theme } from "../theme.slint";
|
|
import { KeycapData, KeymapBridge } from "../globals.slint";
|
|
|
|
export component KeyButton inherits Rectangle {
|
|
in property <KeycapData> data;
|
|
in property <float> scale: 1.0;
|
|
callback clicked(int);
|
|
|
|
// Heat color: stepped gradient for clarity
|
|
property <color> heat-color:
|
|
data.heat > 0.8 ? #ff0000 // bright red
|
|
: data.heat > 0.6 ? #ff4400 // red-orange
|
|
: data.heat > 0.4 ? #ff8800 // orange
|
|
: data.heat > 0.2 ? #ffcc00 // yellow
|
|
: data.heat > 0.05 ? #446688 // cool blue
|
|
: #2d2d44; // very cold
|
|
|
|
property <bool> is-heatmap: KeymapBridge.heatmap-enabled && data.heat > 0;
|
|
property <color> base-color: root.is-heatmap ? root.heat-color : data.color;
|
|
property <color> text-color: root.is-heatmap && data.heat > 0.2 ? #1a1a2e : Theme.fg-primary;
|
|
|
|
width: data.w;
|
|
height: data.h;
|
|
background: transparent;
|
|
|
|
inner := Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
background: data.selected ? Theme.accent-purple : root.base-color;
|
|
border-width: 1px;
|
|
border-color: data.selected ? Theme.accent-cyan : Theme.bg-primary;
|
|
transform-rotation: data.rotation * 1deg;
|
|
transform-origin: {
|
|
x: self.width / 2,
|
|
y: self.height / 2,
|
|
};
|
|
|
|
Text {
|
|
text: data.label;
|
|
color: root.text-color;
|
|
font-size: max(7px, 11px * root.scale);
|
|
font-weight: root.is-heatmap ? 700 : 400;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
if data.sublabel != "" : Text {
|
|
y: parent.height - 14px * root.scale;
|
|
text: data.sublabel;
|
|
color: root.is-heatmap ? root.text-color.with-alpha(0.7) : Theme.fg-secondary;
|
|
font-size: max(5px, 8px * root.scale);
|
|
horizontal-alignment: center;
|
|
width: 100%;
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => { root.clicked(data.index); }
|
|
mouse-cursor: pointer;
|
|
}
|
|
}
|
|
}
|