Yandrik/kolibri-cyd-tester-app-embassy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: light-control and microwave ui using slint and lvgl

Browse Source
This commit is contained in:
Yandrik
2024-11-19 23:00:08 +01:00
parent 0bfcfd494a
commit d0b0de550b
20 changed files with 2910 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
slint-based/ui/app-window.slint
View File

@ -5,20 +5,6 @@ export component AppWindow inherits Window {
height: 240px;
in-out property <int> counter: 42;
callback request-increase-value();
VerticalBox {
alignment: start;
Text {
text: "Hello World!";
font-size: 24px;
horizontal-alignment: center;
}
}
Text {
text: "Counter App (Slint)";
}
VerticalBox {
Text {
text: "Counter: \{root.counter}";
@ -31,6 +17,6 @@ export component AppWindow inherits Window {
}
}
// AboutSlint { }
}
AboutSlint { }
}
}

164
slint-based/ui/lights-app.slint Normal file
View File

@ -0,0 +1,164 @@
import { Button, VerticalBox , AboutSlint, Slider, Switch } from "std-widgets.slint";
export struct Light {
name: string,
brightness: int,
on: bool,
}
export component LightsApp inherits Window {
width: 320px;
height: 240px;
in property <bool> show-start-timer: true;
in property <bool> show-stop-timer: false;
in property <bool> show-reset-timer: false;
property <[Light]> lights: [
{
name: "Bathroom",
brightness: 100,
on: true,
},
{
name: "Bedroom",
brightness: 200,
on: true,
},
{
name: "Living Room",
brightness: 50,
on: false,
},
{
name: "Front Door",
brightness: 250,
on: false,
},
{
name: "Porch",
brightness: 1,
on: true,
},
// {name: "Bathroom", brightness: 4, on: false, },
];
property <int> selected-light: 0;
property <bool> show-light-page: 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");
property <image> light-icon: @image-url("../img/play.png");
VerticalBox {
alignment: start;
Text {
text: show-light-page ? lights[selected-light].name : "Light Control App (Slint)";
font-size: 14px;
horizontal-alignment: center;
}
}
if !show-light-page: VerticalLayout {
alignment: center;
spacing: 5px;
padding-top: 25px;
// height: 200px;
HorizontalLayout {
alignment: LayoutAlignment.center;
spacing: 6px;
for i in 3: HorizontalLayout {
alignment: center;
height: 100px;
if i < lights.length:
Button {
width: 96px;
height: 96px;
// icon: light-icon;
text: lights[i].name;
clicked => {
selected-light = i;
show-light-page = true;
}
}
}
}
HorizontalLayout {
alignment: LayoutAlignment.center;
spacing: 6px;
for i in 3: HorizontalLayout {
alignment: center;
height: 100px;
if i + 3 < lights.length:
Button {
width: 96px;
height: 96px;
// icon: light-icon;
text: lights[i].name;
clicked => {
selected-light = i + 3;
show-light-page = true;
}
}
}
}
}
if show-light-page: Rectangle {
VerticalLayout {
alignment: LayoutAlignment.center;
width: 320px;
spacing: 4px;
HorizontalLayout {
alignment: LayoutAlignment.center;
Slider {
width: 250px;
maximum: 255;
value: lights[selected-light].brightness;
changed(f) => {
lights[selected-light].brightness = f
}
}
}
Text {
text: "Brightness";
horizontal-alignment: center;
}
Rectangle {
height: 16px;
}
HorizontalLayout {
alignment: LayoutAlignment.center;
Switch {
checked: lights[selected-light].on;
toggled => {
lights[selected-light].on = !lights[selected-light].on
}
}
}
Text {
text: "On / Off";
horizontal-alignment: center;
}
}
Button {
x: 10px;
y: 10px;
text: "<";
clicked => {
show-light-page = false;
}
}
}
}

146
slint-based/ui/microwave-ui.slint Normal file
View File

@ -0,0 +1,146 @@
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();
}
}
}
}
}
}

114
slint-based/ui/timer-app.slint Normal file
View File

@ -0,0 +1,114 @@
import { Button, VerticalBox , AboutSlint } from "std-widgets.slint";
export component TimerApp inherits Window {
width: 320px;
height: 240px;
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: "Timer App (Slint)";
font-size: 14px;
horizontal-alignment: center;
}
}
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();
}
}
}
}
}