slint/demos/home-automation/ui/components/weatherInfo.slint
Nigel Breslaw 31677e3714
Demos: Update home-auto demo to use new scale properties. (#9639)
This remove the use of a 'scale' property.
Where it makes sense the new scale-x and scale-y are used. However this demo does it's own 'special' scaling which means many items don't scale in size, but adjust their width and height based on available space.
2025-10-06 14:31:04 +03:00

136 lines
4.1 KiB
Text

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Style } from "../common.slint";
import { Info } from "info.slint";
import { HaText } from "./general/haText.slint";
import { Api, WeatherData, WeatherCondition } from "../api.slint";
import { AppState } from "../appState.slint";
export component Day inherits Rectangle {
property <length> default-width: 50px;
in property <length> special-height;
width: default-width;
in property <WeatherData> weather-data;
in property <bool> highlight: false;
in property <brush> tint: #2e1248;
Rectangle {
width: default-width;
height: special-height;
border-color: #ffffff4a;
border-width: 2px;
border-radius: self.width / 2;
background: root.tint;
}
VerticalLayout {
alignment: center;
width: default-width;
spacing: 10px;
HaText {
text: weather-data.day;
horizontal-alignment: center;
color: Palette.info-foreground;
font-size: Style.H4-font-size;
}
property <length> icon-size: 40px;
pure function weather-icon-source() -> image {
if weather-data.condition == WeatherCondition.sunny {
return @image-url("../images/weather/sunny.png");
}
if weather-data.condition == WeatherCondition.rainy {
return @image-url("../images/weather/rainy.png");
}
if weather-data.condition == WeatherCondition.cloudy {
return @image-url("../images/weather/cloudy.png");
}
if weather-data.condition == WeatherCondition.sunny-cloudy {
return @image-url("../images/weather/sunny-cloudy.png");
}
if weather-data.condition == WeatherCondition.sunny-rainy {
return @image-url("../images/weather/sunny-rainy.png");
}
// default
return @image-url("../images/weather/sunny.png");
}
Rectangle {
height: 38px;
Image {
width: AppState.graphics-accelerator-available ? self.source.width * 1px : self.source.width * 1px;
source: weather-icon-source();
}
}
HorizontalLayout {
alignment: center;
HaText {
text: weather-data.temperature;
horizontal-alignment: center;
color: Palette.info-foreground;
font-size: Style.H3-font-size;
vertical-alignment: center;
}
Text {
text: "°C";
color: white;
font-size: 8px;
vertical-alignment: center;
}
}
}
}
export component WeatherInfo {
in property <int> index;
property <length> margin: 16px;
in property <string> name;
in property <string> id;
in property <bool> full-screen: false;
property <length> special-height: Math.min(180px, root.height);
Rectangle {
y: 1px;
width: 220px;
height: parent.height - 2px;
HorizontalLayout {
alignment: space-between;
spacing: 6px;
width: 280px;
Day {
weather-data: Api.weather-forecast[0];
highlight: true;
tint: #391659;
special-height: root.special-height;
}
Day {
weather-data: Api.weather-forecast[1];
tint: #31134C;
special-height: root.special-height;
}
Day {
weather-data: Api.weather-forecast[2];
tint: #29103F;
special-height: root.special-height;
}
Day {
weather-data: Api.weather-forecast[3];
tint: #210D34;
special-height: root.special-height;
}
Day {
weather-data: Api.weather-forecast[4];
tint: #180925;
special-height: root.special-height;
}
}
}
}