Avii/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1786107763

Browse Source
This commit is contained in:
Avii
2026-08-07 15:02:43 +02:00
parent 4b6ae55b7d
commit 9bbda28ed3
1 changed files with 60 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
ui/main.slint
View File

@@ -1,3 +1,7 @@
export global Settings {
in-out property <bool> dark-mode: true;
}
export struct ThermostatData {
name: string,
current: string,
@@ -26,8 +30,8 @@ component ControlButton inherits Rectangle {
callback activated();
border-width: 2px;
border-color: black;
background: root.enabled && (touch.pressed || root.active) ? black : white;
border-color: Settings.dark-mode ? #777777 : black;
background: root.enabled && (touch.pressed || root.active) ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
touch := TouchArea {
clicked => { if root.enabled { root.activated(); } }
@@ -35,7 +39,7 @@ component ControlButton inherits Rectangle {
Text {
text: root.label;
color: root.enabled && (touch.pressed || root.active) ? white : black;
color: root.enabled && (touch.pressed || root.active) ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: root.label == "−" || root.label == "+" ? 48px : 16px;
font-weight: 700;
horizontal-alignment: center;
@@ -49,8 +53,8 @@ component NavigationButton inherits Rectangle {
callback activated();
border-width: 2px;
border-color: black;
background: root.active || touch.pressed ? black : white;
border-color: Settings.dark-mode ? #777777 : black;
background: root.active || touch.pressed ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
touch := TouchArea {
clicked => { root.activated(); }
@@ -58,7 +62,7 @@ component NavigationButton inherits Rectangle {
Text {
text: root.label;
color: root.active || touch.pressed ? white : black;
color: root.active || touch.pressed ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
@@ -73,7 +77,7 @@ component ThermostatRow inherits Rectangle {
in property <bool> selected: false;
callback row-activated(int);
background: root.selected ? black : white;
background: root.selected ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
TouchArea {
clicked => { root.row-activated(root.row-index); }
@@ -84,7 +88,7 @@ component ThermostatRow inherits Rectangle {
y: parent.height - 1px;
width: parent.width;
height: 1px;
background: root.selected ? white : black;
background: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
}
Text {
@@ -93,7 +97,7 @@ component ThermostatRow inherits Rectangle {
width: 330px;
height: 34px;
text: root.room.name;
color: root.selected ? white : black;
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 25px;
font-weight: 700;
vertical-alignment: center;
@@ -105,7 +109,7 @@ component ThermostatRow inherits Rectangle {
width: 330px;
height: 20px;
text: root.room.available ? root.room.state : "UNAVAILABLE";
color: root.selected ? white : black;
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 14px;
font-weight: 700;
vertical-alignment: center;
@@ -117,7 +121,7 @@ component ThermostatRow inherits Rectangle {
width: 135px;
height: 70px;
text: root.room.current;
color: root.selected ? white : black;
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 52px;
font-weight: 700;
horizontal-alignment: center;
@@ -130,7 +134,7 @@ component ThermostatRow inherits Rectangle {
width: 136px;
height: 66px;
text: root.room.target;
color: root.selected ? white : black;
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 39px;
font-weight: 700;
horizontal-alignment: center;
@@ -144,8 +148,8 @@ component LightTile inherits Rectangle {
callback toggled(int);
border-width: 2px;
border-color: black;
background: root.light.on ? black : white;
border-color: Settings.dark-mode ? #777777 : black;
background: root.light.on ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
TouchArea {
clicked => { if root.light.available { root.toggled(root.light-index); } }
@@ -157,7 +161,7 @@ component LightTile inherits Rectangle {
width: parent.width - 88px;
height: 29px;
text: root.light.name;
color: root.light.on ? white : black;
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 18px;
font-weight: 700;
overflow: elide;
@@ -170,7 +174,7 @@ component LightTile inherits Rectangle {
width: parent.width - 88px;
height: 21px;
text: !root.light.available ? "UNAVAILABLE" : root.light.on ? "ON" : "OFF";
color: root.light.on ? white : black;
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 14px;
font-weight: 700;
vertical-alignment: center;
@@ -182,7 +186,7 @@ component LightTile inherits Rectangle {
width: 38px;
height: parent.height - 16px;
text: root.light.on ? "●" : "○";
color: root.light.on ? white : black;
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
font-size: 25px;
horizontal-alignment: center;
vertical-alignment: center;
@@ -192,14 +196,14 @@ component LightTile inherits Rectangle {
component CalendarRow inherits Rectangle {
in property <CalendarData> event;
background: white;
background: Settings.dark-mode ? black : white;
Rectangle {
x: 0;
y: parent.height - 2px;
width: parent.width;
height: 2px;
background: black;
background: Settings.dark-mode ? #777777 : black;
}
Text {
@@ -208,7 +212,7 @@ component CalendarRow inherits Rectangle {
width: 150px;
height: 27px;
text: root.event.date;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 18px;
font-weight: 700;
}
@@ -219,7 +223,7 @@ component CalendarRow inherits Rectangle {
width: 150px;
height: 24px;
text: root.event.time;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 16px;
font-weight: 700;
}
@@ -230,7 +234,7 @@ component CalendarRow inherits Rectangle {
width: parent.width - 175px;
height: 39px;
text: root.event.summary;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 24px;
font-weight: 700;
overflow: elide;
@@ -243,7 +247,7 @@ component CalendarRow inherits Rectangle {
width: parent.width - 175px;
height: 23px;
text: root.event.calendar;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 15px;
font-weight: 700;
vertical-alignment: center;
@@ -253,7 +257,7 @@ component CalendarRow inherits Rectangle {
export component AppWindow inherits Window {
width: 1024px;
height: 600px;
background: white;
background: Settings.dark-mode ? black : white;
in property <[ThermostatData]> thermostats;
in property <[LightData]> lights;
@@ -279,7 +283,7 @@ export component AppWindow inherits Window {
in property <string> updated-text: "WAITING FOR HOME ASSISTANT";
in property <string> action-status: "TAP A ROOM TO CONTROL";
in property <string> lights-summary: "LOADING LIGHTS";
in-out property <bool> sleeping: false;
in-out property <bool> dark-mode: false;
callback select-room(int);
callback change-target(int);
@@ -298,7 +302,7 @@ export component AppWindow inherits Window {
y: 0;
width: parent.width;
height: 5px;
background: black;
background: Settings.dark-mode ? #777777 : black;
}
TouchArea {
@@ -315,7 +319,7 @@ export component AppWindow inherits Window {
width: parent.width - 128px;
height: 18px;
text: root.next-event-label;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 14px;
font-weight: 700;
}
@@ -326,7 +330,7 @@ export component AppWindow inherits Window {
width: 390px;
height: 36px;
text: root.next-event-title;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 22px;
font-weight: 700;
overflow: elide;
@@ -339,7 +343,7 @@ export component AppWindow inherits Window {
width: 100px;
height: 36px;
text: root.next-event-time;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 18px;
font-weight: 700;
horizontal-alignment: right;
@@ -359,7 +363,7 @@ export component AppWindow inherits Window {
width: 66px;
height: 36px;
text: root.battery-level;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 17px;
font-weight: 700;
horizontal-alignment: right;
@@ -371,7 +375,7 @@ export component AppWindow inherits Window {
y: 84px;
width: root.width;
height: root.height - 84px;
background: white;
background: Settings.dark-mode ? black : white;
Text {
x: 38px;
@@ -379,7 +383,7 @@ export component AppWindow inherits Window {
width: 180px;
height: 21px;
text: "OUTSIDE";
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
@@ -391,7 +395,7 @@ export component AppWindow inherits Window {
width: 300px;
height: 116px;
text: root.outside-temperature;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 104px;
font-weight: 700;
vertical-alignment: center;
@@ -403,7 +407,7 @@ export component AppWindow inherits Window {
width: 150px;
height: 32px;
text: root.outside-high;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 20px;
font-weight: 700;
vertical-alignment: center;
@@ -426,18 +430,18 @@ export component AppWindow inherits Window {
width: parent.width - 430px;
height: 22px;
text: root.outside-condition;
color: black;
color: Settings.dark-mode ? #777777 : black;
font-size: 16px;
font-weight: 700;
horizontal-alignment: right;
}
Rectangle { x: 38px; y: 151px; width: parent.width - 76px; height: 3px; background: black; }
Rectangle { x: 38px; y: 151px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
Text { x: 38px; y: 173px; width: 260px; height: 24px; text: "THERMOSTATS"; color: black; font-size: 17px; font-weight: 700; letter-spacing: 2px; }
Text { x: 403px; y: 175px; width: 135px; height: 20px; text: "NOW"; color: black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
Text { x: 568px; y: 175px; width: 136px; height: 20px; text: "SET"; color: black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
Rectangle { x: 38px; y: 205px; width: parent.width - 76px; height: 1px; background: black; }
Text { x: 38px; y: 173px; width: 260px; height: 24px; text: "THERMOSTATS"; color: Settings.dark-mode ? #777777 : black; font-size: 17px; font-weight: 700; letter-spacing: 2px; }
Text { x: 403px; y: 175px; width: 135px; height: 20px; text: "NOW"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
Text { x: 568px; y: 175px; width: 136px; height: 20px; text: "SET"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
Rectangle { x: 38px; y: 205px; width: parent.width - 76px; height: 1px; background: Settings.dark-mode ? #777777 : black; }
for room[index] in root.thermostats: ThermostatRow {
x: 38px;
@@ -450,9 +454,9 @@ export component AppWindow inherits Window {
row-activated(index) => { root.user-activity(); root.select-room(index); }
}
Rectangle { x: 38px; y: 627px; width: parent.width - 76px; height: 4px; background: black; }
Text { x: 38px; y: 642px; width: 280px; height: 22px; text: root.selected-name + " / " + root.selected-mode; color: black; font-size: 15px; font-weight: 700; overflow: elide; }
Text { x: 34px; y: 661px; width: 190px; height: 78px; text: root.selected-target; color: black; font-size: 62px; font-weight: 700; vertical-alignment: center; }
Rectangle { x: 38px; y: 627px; width: parent.width - 76px; height: 4px; background: Settings.dark-mode ? #777777 : black; }
Text { x: 38px; y: 642px; width: 280px; height: 22px; text: root.selected-name + " / " + root.selected-mode; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; overflow: elide; }
Text { x: 34px; y: 661px; width: 190px; height: 78px; text: root.selected-target; color: Settings.dark-mode ? #777777 : black; font-size: 62px; font-weight: 700; vertical-alignment: center; }
ControlButton { x: 236px; y: 662px; width: 78px; height: 78px; label: "−"; activated => { root.user-activity(); root.change-target(-1); } }
ControlButton { x: 324px; y: 662px; width: 78px; height: 78px; label: "+"; activated => { root.user-activity(); root.change-target(1); } }
@@ -460,17 +464,17 @@ export component AppWindow inherits Window {
ControlButton { x: 514px; y: 662px; width: 92px; height: 78px; label: "COOL"; enabled: root.selected-supports-cool; active: root.selected-mode == "COOL" || root.selected-mode == "COOLING"; activated => { root.user-activity(); root.set-mode("cool"); } }
ControlButton { x: 616px; y: 662px; width: 104px; height: 78px; label: "OFF"; active: root.selected-mode == "OFF"; activated => { root.user-activity(); root.set-mode("off"); } }
Text { x: 38px; y: 754px; width: 92px; height: 54px; text: "FAN\nSPEED"; color: black; font-size: 14px; font-weight: 700; vertical-alignment: center; }
Text { x: 38px; y: 754px; width: 92px; height: 54px; text: "FAN\nSPEED"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; vertical-alignment: center; }
ControlButton { x: 138px; y: 752px; width: 76px; height: 58px; label: "AUTO"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "AUTO"; activated => { root.user-activity(); root.set-fan-mode("Auto"); } }
ControlButton { x: 222px; y: 752px; width: 76px; height: 58px; label: "LOW"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "LOW"; activated => { root.user-activity(); root.set-fan-mode("Low"); } }
ControlButton { x: 306px; y: 752px; width: 76px; height: 58px; label: "MED"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "MED"; activated => { root.user-activity(); root.set-fan-mode("Med"); } }
ControlButton { x: 390px; y: 752px; width: 76px; height: 58px; label: "HIGH"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "HIGH"; activated => { root.user-activity(); root.set-fan-mode("High"); } }
Text { x: 38px; y: 822px; width: 540px; height: 24px; text: root.action-status; color: black; font-size: 15px; font-weight: 700; overflow: elide; }
Text { x: 38px; y: 822px; width: 540px; height: 24px; text: root.action-status; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; overflow: elide; }
Rectangle {
x: parent.width - 152px; y: 814px; width: 114px; height: 40px; border-width: 2px; border-color: black; background: refresh-touch.pressed ? black : white;
x: parent.width - 152px; y: 814px; width: 114px; height: 40px; border-width: 2px; border-color: Settings.dark-mode ? #777777 : black; background: refresh-touch.pressed ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
refresh-touch := TouchArea { clicked => { root.user-activity(); root.refresh(); } }
Text { text: "REFRESH"; color: refresh-touch.pressed ? white : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; vertical-alignment: center; }
Text { text: "REFRESH"; color: refresh-touch.pressed ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; vertical-alignment: center; }
}
}
@@ -479,11 +483,11 @@ export component AppWindow inherits Window {
y: 84px;
width: root.width;
height: root.height - 84px;
background: white;
background: Settings.dark-mode ? black : white;
Text { x: 38px; y: 18px; width: 230px; height: 30px; text: "LIGHTS"; color: black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
Text { x: 330px; y: 21px; width: 390px; height: 24px; text: root.lights-summary; color: black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: black; }
Text { x: 38px; y: 18px; width: 230px; height: 30px; text: "LIGHTS"; color: Settings.dark-mode ? #777777 : black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
Text { x: 330px; y: 21px; width: 390px; height: 24px; text: root.lights-summary; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
for light[index] in root.lights: LightTile {
// x: index < 10 ? 38px : 390px;
@@ -503,11 +507,11 @@ export component AppWindow inherits Window {
y: 84px;
width: root.width;
height: root.height - 84px;
background: white;
background: Settings.dark-mode ? black : white;
Text { x: 38px; y: 18px; width: 260px; height: 30px; text: "CALENDAR"; color: black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
Text { x: 400px; y: 21px; width: 320px; height: 24px; text: "NEXT 30 DAYS"; color: black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: black; }
Text { x: 38px; y: 18px; width: 260px; height: 30px; text: "CALENDAR"; color: Settings.dark-mode ? #777777 : black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
Text { x: 400px; y: 21px; width: 320px; height: 24px; text: "NEXT 30 DAYS"; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
for event[index] in root.calendar-events: CalendarRow {
x: 38px;
@@ -518,61 +522,11 @@ export component AppWindow inherits Window {
}
if root.calendar-events.length == 0: Text {
x: 38px; y: 105px; width: parent.width - 76px; height: 50px; text: "NO UPCOMING EVENTS"; color: black; font-size: 24px; font-weight: 700;
x: 38px; y: 105px; width: parent.width - 76px; height: 50px; text: "NO UPCOMING EVENTS"; color: Settings.dark-mode ? #777777 : black; font-size: 24px; font-weight: 700;
}
}
NavigationButton { x: 38px; y: parent.height - 80px; width: 168px; height: 60px; label: "CLIMATE"; active: root.current-page == 0; activated => { root.user-activity(); root.current-page = 0; } }
NavigationButton { x: 222px; y: parent.height - 80px; width: 168px; height: 60px; label: "LIGHTS"; active: root.current-page == 1; activated => { root.user-activity(); root.current-page = 1; } }
NavigationButton { x: 406px; y: parent.height - 80px; width: 168px; height: 60px; label: "CALENDAR"; active: root.current-page == 2; activated => { root.user-activity(); root.current-page = 2; } }
if root.sleeping: Rectangle {
x: 0;
y: 0;
width: root.width;
height: root.height;
background: #eeeeee;
Rectangle {
x: 129px;
y: 400px;
width: 500px;
height: 224px;
background: white;
border-width: 3px;
border-color: black;
Text {
y: 48px;
width: parent.width;
height: 70px;
text: "DISPLAY RESTING";
color: black;
font-size: 34px;
font-weight: 800;
horizontal-alignment: center;
vertical-alignment: center;
}
Text {
y: 124px;
width: parent.width;
height: 48px;
text: "TAP TO WAKE";
color: black;
font-size: 22px;
font-weight: 600;
horizontal-alignment: center;
vertical-alignment: center;
}
}
TouchArea {
clicked => {
root.sleeping = false;
root.wake-from-sleep();
root.user-activity();
}
}
}
}