slint/demos/home-automation/ui/components/weatherInfo.slint

// 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 * scale;
    in property <length> special-height;
    width: default-width;
    in property <WeatherData> weather-data;
    in property <bool> highlight: false;
    in property <float> scale: 1.0;
    in property <brush> tint: #2e1248;

    Rectangle {
        width: default-width;
        height: special-height * scale;
        border-color: #ffffff4a;
        border-width: 2px;
        border-radius: self.width / 2;
        background: root.tint;
    }

    VerticalLayout {
        alignment: center;
        width: default-width;
        spacing: 10px * scale;
        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 * scale * 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 <float> scaler: Math.min(1.0, root.width / 270px);
    property <length> special-height: Math.min(180px, root.height);

    Rectangle {
        y: 1px;
        width: 220px;
        height: parent.height - 2px;

        HorizontalLayout {
            alignment: space-between;
            spacing: 6px * scaler;
            width: 280px * scaler;
            Day {
                weather-data: Api.weather-forecast[0];
                highlight: true;
                tint: #391659;
                scale: root.scaler;
                special-height: root.special-height;
            }

            Day {
                weather-data: Api.weather-forecast[1];
                tint: #31134C;
                scale: root.scaler;
                special-height: root.special-height;
            }

            Day {
                weather-data: Api.weather-forecast[2];
                tint: #29103F;
                scale: root.scaler;
                special-height: root.special-height;
            }

            Day {
                weather-data: Api.weather-forecast[3];
                tint: #210D34;
                scale: root.scaler;
                special-height: root.special-height;
            }

            Day {
                weather-data: Api.weather-forecast[4];
                tint: #180925;
                scale: root.scaler;
                special-height: root.special-height;
            }
        }
    }
}