From 9bbda28ed334152ade18bc2792ce588465b2cf78 Mon Sep 17 00:00:00 2001 From: Avii Date: Fri, 7 Aug 2026 15:02:43 +0200 Subject: [PATCH] 1786107763 --- ui/main.slint | 166 ++++++++++++++++++-------------------------------- 1 file changed, 60 insertions(+), 106 deletions(-) diff --git a/ui/main.slint b/ui/main.slint index 2ff600b..c854afa 100644 --- a/ui/main.slint +++ b/ui/main.slint @@ -1,3 +1,7 @@ +export global Settings { + in-out property 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 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 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 updated-text: "WAITING FOR HOME ASSISTANT"; in property action-status: "TAP A ROOM TO CONTROL"; in property lights-summary: "LOADING LIGHTS"; - in-out property sleeping: false; + in-out property 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(); - } - } - } }