Revision control
++ // Copyright (C) 2017 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
++
++ pragma ComponentBehavior: Bound
++ import QtQuick
++ import QtQuick.Shapes
++ import QtQuick.Effects
++ import QtQuick.Layouts
++
++ //! [0]
++ Window {
++ id: window
++ //! [0]
++ width: 360
++ height: 640
++ visible: true
++
++ Shape {//Shape because Rectangle does not support diagonal gradient
++ preferredRendererType: Shape.CurveRenderer
++
++ ShapePath {
++ strokeWidth: 0
++ startX: 0; startY: 0
++
++ PathLine { x: window.width; y: 0 }
++ PathLine { x: window.width; y: window.height }
++ PathLine { x: 0; y: window.height }
++ fillGradient: LinearGradient {
++ x1: 0; y1: window.height / 4
++ x2: window.width; y2: window.height / 4 * 3
++ GradientStop { position: 0.0; color: "#2CDE85" }
++ GradientStop { position: 1.0; color: "#9747FF" }
++ }
++ }
++ }
++
++ Rectangle {
++ anchors.horizontalCenter: parent.horizontalCenter
++ anchors.top: parent.top
++ anchors.topMargin: parent.width / 2
++ width: window.height > window.width * 1.5 ? window.height : window.width * 1.5
++ height: width
++ radius: width / 2
++ color: "#000000"
++ opacity: 0.15
++ }
++
++ Item {
++ id: statesItem
++ visible: false
++ state: "loading"
++ states: [
++ State {
++ name: "loading"
++ PropertyChanges { main.opacity: 0 }
++ PropertyChanges { wait.opacity: 1 }
++ },
++ State {
++ name: "ready"
++ PropertyChanges { main.opacity: 1 }
++ PropertyChanges { wait.opacity: 0 }
++ }
++ ]
++ }
++
++ //! [1]
++ AppModel {
++ id: appModel
++ onReadyChanged: {
++ if (appModel.ready)
++ statesItem.state = "ready"
++ else
++ statesItem.state = "loading"
++ }
++ }
++ //! [1]
++ Item {
++ id: wait
++ anchors.fill: parent
++
++ Text {
++ text: "Loading weather data..."
++ anchors.centerIn: parent
++ font.pointSize: 18
++ }
++ }
++
++ Item {
++ id: main
++ anchors.fill: parent
++
++ ColumnLayout {
++ id: layout
++ spacing: 4
++
++ anchors {
++ fill: parent
++ topMargin: 6; bottomMargin: 6; leftMargin: 6; rightMargin: 6
++ }
++
++ Item {
++ Layout.preferredHeight: cityButton.height
++ Layout.fillWidth: true
++
++ Rectangle {
++ id: cityButton
++ property int margins: 10
++ anchors.centerIn: parent
++ width: cityName.contentWidth + cityIcon.width + 3 * margins
++ height: cityName.contentHeight + 2 * margins
++ radius: 8
++ color: "#3F000000"
++ visible: false
++
++ Text {
++ id: cityName
++ text: (appModel.hasValidCity ? appModel.city : "Unknown location")
++ + (appModel.useGps ? " (GPS)" : "")
++ anchors.left: parent.left
++ anchors.verticalCenter: parent.verticalCenter
++ anchors.margins: parent.margins
++ horizontalAlignment: Text.AlignHCenter
++ verticalAlignment: Text.AlignVCenter
++ font.pixelSize: 24
++ color: "white"
++ }
++
++ Image {
++ id: cityIcon
++ source: "icons/waypoint.svg"
++ height: cityName.font.pixelSize
++ width: implicitWidth * height / implicitHeight
++ anchors.left: cityName.right
++ anchors.margins: parent.margins
++ anchors.verticalCenter: cityName.verticalCenter
++ anchors.verticalCenterOffset: 2
++ visible: false
++ }
++ MultiEffect {
++ source: cityIcon
++ anchors.fill: cityIcon
++ brightness: 1 // make icons white, remove for dark icons
++ }
++
++ }
++
++ MultiEffect {
++ source: cityButton
++ anchors.fill: cityButton
++ shadowEnabled: true
++ shadowBlur: 0.5
++ shadowHorizontalOffset: 0
++ shadowVerticalOffset: 2
++ }
++
++ MouseArea {
++ anchors.fill: cityButton
++ onClicked: {
++ if (appModel.useGps) {
++ appModel.useGps = false
++ appModel.city = "Brisbane"
++ } else {
++ switch (appModel.city) {
++ case "Brisbane":
++ appModel.city = "Oslo"
++ break
++ case "Oslo":
++ appModel.city = "Helsinki"
++ break
++ case "Helsinki":
++ appModel.city = "New York"
++ break
++ case "New York":
++ appModel.useGps = true
++ break
++ }
++ }
++ }
++ }
++ }
++
++ //! [3]
++ BigForecastIcon {
++ id: current
++ Layout.fillWidth: true
++ Layout.fillHeight: true
++
++ weatherIcon: (appModel.hasValidWeather
++ ? appModel.weather.weatherIcon
++ : "sunny")
++ //! [3]
++ topText: (appModel.hasValidWeather
++ ? appModel.weather.temperature
++ : "??")
++ bottomText: (appModel.hasValidWeather
++ ? appModel.weather.weatherDescription
++ : "No weather data")
++ //! [4]
++ }
++ //! [4]
++
++ Item {
++ implicitWidth: iconRow.implicitWidth + 40
++ implicitHeight: iconRow.implicitHeight + 40
++
++ Layout.fillWidth: true
++
++ Rectangle {
++ id: forcastFrame
++
++ anchors.fill: parent
++ color: "#3F000000"
++ radius: 40
++
++ Row {
++ id: iconRow
++ anchors.centerIn: parent
++
++ property int daysCount: appModel.forecast.length
++ property real iconWidth: (daysCount > 0) ? ((forcastFrame.width - 20) / daysCount)
++ : forcastFrame.width
++
++ Repeater {
++ model: appModel.forecast
++ ForecastIcon {
++ required property string dayOfWeek
++ required property string temperature
++ required property string weatherIcon
++ id: forecast1
++ width: iconRow.iconWidth
++ topText: (appModel.hasValidWeather ? dayOfWeek : "??")
++ bottomText: (appModel.hasValidWeather ? temperature : ("??" + "/??"))
++ middleIcon: (appModel.hasValidWeather ? weatherIcon : "sunny")
++ }
++ }
++ }
++ visible: false
++ }
++
++ MultiEffect {
++ source: forcastFrame
++ anchors.fill: forcastFrame
++ shadowEnabled: true
++ shadowBlur: 0.5
++ shadowHorizontalOffset: 0
++ shadowVerticalOffset: 4
++ shadowOpacity: 0.6
++ }
++ }
++ }
++ }
++ //! [2]
++ }
++ //! [2]