kolibri-cyd-tester-app-embassy/slint-based/ui/microwave-ui.slint

147 lines
3.9 KiB
Plaintext

import { Button, VerticalBox, HorizontalBox, AboutSlint } from "std-widgets.slint";
export component MicrowaveUI inherits Window {
width: 320px;
height: 240px;
property <[string]> wattages: ["180W", "220W", "360W", "480W", "620W", "800W"];
property <int> selected-wattage: 0;
callback add-10s();
callback sub-10s();
callback start-timer();
callback stop-timer();
callback reset-timer();
in property <bool> show-start-timer: true;
in property <bool> show-stop-timer: false;
in property <bool> show-reset-timer: false;
in property <string> timer-text: "00:00:000";
property <image> start-timer-icon: @image-url("../img/play.png");
property <image> stop-timer-icon: @image-url("../img/pause.png");
property <image> reset-timer-icon: @image-url("../img/xmark-square.png");
function multifunction-button-pressed() {
if (show-start-timer) {
start-timer();
}
if (show-stop-timer) {
stop-timer();
}
if (show-reset-timer) {
reset-timer();
}
}
function multifunction-button-icon() -> image {
if (show-start-timer) {
return start-timer-icon;
}
if (show-stop-timer) {
return stop-timer-icon;
}
if (show-reset-timer) {
return reset-timer-icon;
}
return start-timer-icon;
}
VerticalBox {
alignment: start;
Text {
text: " Microwave UI (Slint)";
font-size: 14px;
horizontal-alignment: center;
}
}
HorizontalBox {
VerticalBox {
padding-top: 15px;
padding-bottom: 20px;
Button {
enabled: (selected-wattage < wattages.length - 1) && show-start-timer;
text: "+";
clicked => {
selected-wattage += 1
}
}
Text {
font-size: 24px;
text: wattages[selected-wattage];
horizontal-alignment: center;
vertical-alignment: center;
}
Button {
enabled: !(selected-wattage <= 0) && show-start-timer;
text: "-";
clicked => {
selected-wattage -= 1
}
}
}
VerticalBox {
alignment: center;
Text {
text: timer-text;
font-size: 24px;
horizontal-alignment: center;
}
Rectangle {
height: 4px;
}
HorizontalLayout {
alignment: center;
spacing: 8px;
Button {
text: "+10s";
enabled: show-start-timer;
clicked => {
add-10s();
}
}
Text {
text: "Set Timer";
vertical-alignment: center;
}
Button {
text: "-10s";
enabled: show-start-timer;
clicked => {
sub-10s();
}
}
}
HorizontalLayout {
alignment: center;
spacing: 8px;
Button {
icon: @image-url("../img/restart.png");
clicked => {
reset-timer();
}
}
Button {
icon: multifunction-button-icon();
// visible: root.show_start_timer;
clicked => {
multifunction-button-pressed();
}
}
}
}
}
}