tweaks to GUI screens based on design changes

MycroftAI · May 12, 2021 · a8197b5 · a8197b5
1 parent b39098c
commit a8197b5
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 63 deletions.
diff --git 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
@@ -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
@@ -27,7 +27,7 @@ import QtQuick.Controls 2.3
 
 Column {
     id: dailyColumn
-    spacing: 1
+    spacing: gridUnit * 2
     width: gridUnit * 9
 
     property var forecast
@@ -40,23 +40,23 @@ Column {
 
     WeatherLabel {
         id: forecastDay
-        heightUnits: 4
+        heightUnits: 2
         fontSize: 47
         fontStyle: "Regular"
         text: forecast.day
     }
 
     WeatherLabel {
         id: forecastHighTemperature
-        heightUnits: 5
+        heightUnits: 3
         fontSize: 72
         fontStyle: "Bold"
         text: forecast.highTemperature + "°"
     }
 
     WeatherLabel {
         id: forecastLowTemperature
-        heightUnits: 5
+        heightUnits: 3
         fontSize: 72
         fontStyle: "Light"
         text: forecast.lowTemperature + "°"

diff --git a/ui/HourlyColumn.qml b/ui/HourlyColumn.qml
@@ -27,36 +27,36 @@ 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
     }
 
     WeatherLabel {
         id: forecastTemperature
-        heightUnits: 5
+        heightUnits: 3
         fontSize: 72
         fontStyle: "Bold"
         text: forecast.temperature + "°"
     }
 
     WeatherLabel {
         id: forecastPrecipitation
-        heightUnits: 5
+        heightUnits: 3
         fontSize: 72
         fontStyle: "Light"
         text: forecast.precipitation + "%"

diff --git a/ui/WeatherDate.qml 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → ui/images/partial_clouds_day.svg b/ui/images/partial_clouds.svg → ui/images/partial_clouds_day.svg
diff --git a/ui/images/partial_clouds_night.svg b/ui/images/partial_clouds_night.svg
diff --git 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
@@ -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" : ""