From a8197b5d9bf2d1f35188254f3d1959c81a2562fa Mon Sep 17 00:00:00 2001 From: Chris Veilleux Date: Wed, 5 May 2021 15:32:15 -0500 Subject: [PATCH] tweaks to GUI screens based on design changes --- __init__.py | 3 +- skill/weather.py | 3 +- ui/DailyColumn.qml | 8 ++-- ui/HourlyColumn.qml | 10 ++--- ui/WeatherDate.qml | 40 ++++++++++++++++++ ui/WeatherLocation.qml | 41 +++++++++++++++++++ ui/current_1_mark_ii.qml | 7 +--- ui/current_2_mark_ii.qml | 7 +--- ui/daily_mark_ii.qml | 7 +--- ui/hourly_mark_ii.qml | 7 +--- ...tial_clouds.svg => partial_clouds_day.svg} | 0 ui/images/partial_clouds_night.svg | 3 ++ ui/single_day_mark_ii.qml | 14 +------ ui/sunrise_sunset_mark_ii.qml | 32 +++++++-------- 14 files changed, 119 insertions(+), 63 deletions(-) create mode 100644 ui/WeatherDate.qml create mode 100644 ui/WeatherLocation.qml rename ui/images/{partial_clouds.svg => partial_clouds_day.svg} (100%) create mode 100644 ui/images/partial_clouds_night.svg diff --git a/__init__.py b/__init__.py index c7b59f37..7541630a 100644 --- a/__init__.py +++ b/__init__.py @@ -545,6 +545,7 @@ def _display_sunrise_sunset_mark_ii(self, forecast: DailyWeather, weather_locati :param forecast: daily forecasts to display """ self.gui.clear() + self.gui["weatherDate"] = forecast.date_time.strftime("%A %b %d") self.gui["weatherLocation"] = weather_location self.gui["sunrise"] = self._format_sunrise_sunset_time(forecast.sunrise) self.gui["sunset"] = self._format_sunrise_sunset_time(forecast.sunset) @@ -745,7 +746,7 @@ def _display_one_day_mark_ii( self.gui.clear() self.gui["weatherLocation"] = self._build_display_location(intent_data) self.gui["weatherCondition"] = forecast.condition.image - self.gui["weatherDate"] = forecast.date_time.strftime("%A %x") + self.gui["weatherDate"] = forecast.date_time.strftime("%A %b %d") self.gui["highTemperature"] = forecast.temperature.high self.gui["lowTemperature"] = forecast.temperature.low self.gui["chanceOfPrecipitation"] = str(forecast.chance_of_precipitation) diff --git a/skill/weather.py b/skill/weather.py index 0e6f112c..edf4cf08 100644 --- a/skill/weather.py +++ b/skill/weather.py @@ -41,7 +41,8 @@ (("01n",), "moon.svg"), (("04d", "04n"), "clouds.svg"), (("50d",), "fog.svg"), - (("02d", "03d", "02n", "03n"), "partial_clouds.svg"), + (("02d", "03d"), "partial_clouds_day.svg"), + (("02n", "03n"), "partial_clouds_night.svg"), (("09d", "10d"), "rain.svg"), (("13d",), "snow.svg"), (("11d",), "storm.svg"), diff --git a/ui/DailyColumn.qml b/ui/DailyColumn.qml index e0f2db65..b453b12e 100644 --- a/ui/DailyColumn.qml +++ b/ui/DailyColumn.qml @@ -27,7 +27,7 @@ import QtQuick.Controls 2.3 Column { id: dailyColumn - spacing: 1 + spacing: gridUnit * 2 width: gridUnit * 9 property var forecast @@ -40,7 +40,7 @@ Column { WeatherLabel { id: forecastDay - heightUnits: 4 + heightUnits: 2 fontSize: 47 fontStyle: "Regular" text: forecast.day @@ -48,7 +48,7 @@ Column { WeatherLabel { id: forecastHighTemperature - heightUnits: 5 + heightUnits: 3 fontSize: 72 fontStyle: "Bold" text: forecast.highTemperature + "°" @@ -56,7 +56,7 @@ Column { WeatherLabel { id: forecastLowTemperature - heightUnits: 5 + heightUnits: 3 fontSize: 72 fontStyle: "Light" text: forecast.lowTemperature + "°" diff --git a/ui/HourlyColumn.qml b/ui/HourlyColumn.qml index 89ff80d2..ab1c460f 100644 --- a/ui/HourlyColumn.qml +++ b/ui/HourlyColumn.qml @@ -27,20 +27,20 @@ import QtQuick.Controls 2.3 Column { id: hourlyColumn - spacing: gridUnit + spacing: gridUnit * 2 width: gridUnit * 9 property var forecast WeatherImage { id: forecastCondition - heightUnits: 3 + heightUnits: 4 imageSource: forecast.weatherCondition } WeatherLabel { id: forecastTime - heightUnits: 3 + heightUnits: 2 fontSize: 47 fontStyle: "Regular" text: forecast.time @@ -48,7 +48,7 @@ Column { WeatherLabel { id: forecastTemperature - heightUnits: 5 + heightUnits: 3 fontSize: 72 fontStyle: "Bold" text: forecast.temperature + "°" @@ -56,7 +56,7 @@ Column { WeatherLabel { id: forecastPrecipitation - heightUnits: 5 + heightUnits: 3 fontSize: 72 fontStyle: "Light" text: forecast.precipitation + "%" diff --git a/ui/WeatherDate.qml b/ui/WeatherDate.qml new file mode 100644 index 00000000..bdfe3b33 --- /dev/null +++ b/ui/WeatherDate.qml @@ -0,0 +1,40 @@ + // Copyright 2021, Mycroft AI Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/* +Abstract component for alphanunumeric values. + +The Mark II card design requires the ability to have a text field's baseline sit on one +of the 16 pixel grid lines. The benefit of this approach is consistent alignment of +text fields that disregards the extra space that can be included around the text for +ascenders and descenders. + +To implement this idea, a bounding box is defined around a label for alignment purposes. +The baseline of the text sits on the bottom of the bounding box and the value is +centered within the box. + +This code is specific to the Mark II device. It uses a grid of 16x16 pixel +squares for alignment of items. +*/ +import QtQuick 2.4 +import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.3 + +WeatherLabel { + // The date of the weather forecast being displayed + heightUnits: 4 + fontSize: 48 + fontStyle: "Medium" + text: sessionData.weatherDate +} diff --git a/ui/WeatherLocation.qml b/ui/WeatherLocation.qml new file mode 100644 index 00000000..f6438638 --- /dev/null +++ b/ui/WeatherLocation.qml @@ -0,0 +1,41 @@ + // Copyright 2021, Mycroft AI Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/* +Abstract component for alphanunumeric values. + +The Mark II card design requires the ability to have a text field's baseline sit on one +of the 16 pixel grid lines. The benefit of this approach is consistent alignment of +text fields that disregards the extra space that can be included around the text for +ascenders and descenders. + +To implement this idea, a bounding box is defined around a label for alignment purposes. +The baseline of the text sits on the bottom of the bounding box and the value is +centered within the box. + +This code is specific to the Mark II device. It uses a grid of 16x16 pixel +squares for alignment of items. +*/ +import QtQuick 2.4 +import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.3 + +WeatherLabel { + // City/state if in same country as device. City/country if in a different country + heightUnits: 4 + fontSize: 48 + fontStyle: "Medium" + text: sessionData.weatherLocation +} + diff --git a/ui/current_1_mark_ii.qml b/ui/current_1_mark_ii.qml index a0c1694f..94f63bad 100644 --- a/ui/current_1_mark_ii.qml +++ b/ui/current_1_mark_ii.qml @@ -34,13 +34,8 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherLocation { id: weatherLocation - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation } GridLayout { diff --git a/ui/current_2_mark_ii.qml b/ui/current_2_mark_ii.qml index 2209f334..42d2efc8 100644 --- a/ui/current_2_mark_ii.qml +++ b/ui/current_2_mark_ii.qml @@ -33,13 +33,8 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherLocation { id: weatherLocation - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation } GridLayout { diff --git a/ui/daily_mark_ii.qml b/ui/daily_mark_ii.qml index b82d8797..3e1e3a76 100644 --- a/ui/daily_mark_ii.qml +++ b/ui/daily_mark_ii.qml @@ -31,13 +31,8 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherLocation { id: weatherLocation - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation } RowLayout { diff --git a/ui/hourly_mark_ii.qml b/ui/hourly_mark_ii.qml index 72eb8a2a..87f03d28 100644 --- a/ui/hourly_mark_ii.qml +++ b/ui/hourly_mark_ii.qml @@ -35,13 +35,8 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherLocation { id: weatherLocation - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation } RowLayout { diff --git a/ui/images/partial_clouds.svg b/ui/images/partial_clouds_day.svg similarity index 100% rename from ui/images/partial_clouds.svg rename to ui/images/partial_clouds_day.svg diff --git a/ui/images/partial_clouds_night.svg b/ui/images/partial_clouds_night.svg new file mode 100644 index 00000000..3bf749f5 --- /dev/null +++ b/ui/images/partial_clouds_night.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/single_day_mark_ii.qml b/ui/single_day_mark_ii.qml index 0eb39c56..a7138d96 100644 --- a/ui/single_day_mark_ii.qml +++ b/ui/single_day_mark_ii.qml @@ -34,23 +34,13 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // The date of the weather forecast being displayed + WeatherDate { id: weatherDate - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherDate } - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherLocation { id: weatherLocation anchors.top: weatherDate.bottom - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation } GridLayout { diff --git a/ui/sunrise_sunset_mark_ii.qml b/ui/sunrise_sunset_mark_ii.qml index 66cf3004..f34b61ca 100644 --- a/ui/sunrise_sunset_mark_ii.qml +++ b/ui/sunrise_sunset_mark_ii.qml @@ -31,13 +31,13 @@ WeatherDelegateMarkII { height: parent.height width: parent.width - WeatherLabel { - // City/state if in same country as device. City/country if in a different country + WeatherDate { + id: weatherDate + } + + WeatherLocation { id: weatherLocation - heightUnits: 4 - fontSize: 48 - fontStyle: "Medium" - text: sessionData.weatherLocation + anchors.top: weatherDate.bottom } GridLayout { @@ -54,26 +54,26 @@ WeatherDelegateMarkII { // First column in grid id: sunrise height: gridUnit * 22 - spacing: gridUnit + spacing: gridUnit * 2 width: parent.width WeatherImage { id: sunriseImage - heightUnits: 6 + heightUnits: 5 imageSource: "images/sunrise.svg" } WeatherLabel { id: sunriseTime - heightUnits: 6 - fontSize: 118 + heightUnits: 4 + fontSize: 82 fontStyle: "Bold" text: sessionData.sunrise } WeatherLabel { id: sunriseAm - heightUnits: 4 + heightUnits: 2 fontSize: 60 fontStyle: "Regular" text: sessionData.ampm ? "AM" : "" @@ -84,26 +84,26 @@ WeatherDelegateMarkII { // Second column in grid id: sunset height: gridUnit * 22 - spacing: gridUnit + spacing: gridUnit * 2 width: parent.width WeatherImage { id: sunsetImage - heightUnits: 6 + heightUnits: 5 imageSource: "images/sunset.svg" } WeatherLabel { id: sunsetTime - heightUnits: 6 - fontSize: 118 + heightUnits: 4 + fontSize: 82 fontStyle: "Bold" text: sessionData.sunset } WeatherLabel { id: sunsetPm - heightUnits: 4 + heightUnits: 2 fontSize: 60 fontStyle: "Regular" text: sessionData.ampm ? "PM" : ""