Add a new GUI screen for sunrise and sunset.

__init__.py

@@ -19,6 +19,7 @@
 Selene.  The Selene API is also used to get geographical information about the
 city name provided in the request.
 """
+from datetime import datetime
 from multi_key_dict import multi_key_dict
 from time import sleep
 from typing import List, Tuple
@@ -523,6 +524,8 @@ def handle_sunrise(self, message: Message):
             dialog_args = intent_data, self.weather_config, intent_weather
             dialog = get_dialog_for_timeframe(intent_data.timeframe, dialog_args)
             dialog.build_sunrise_dialog()
+            if self.platform == MARK_II:
+                self._display_sunrise_sunset_mark_ii(intent_weather)
             self._speak_weather(dialog)
 
     @intent_handler(
@@ -545,21 +548,39 @@ def handle_sunset(self, message: Message):
             dialog_args = intent_data, self.weather_config, intent_weather
             dialog = get_dialog_for_timeframe(intent_data.timeframe, dialog_args)
             dialog.build_sunset_dialog()
+            if self.platform == MARK_II:
+                self._display_sunrise_sunset_mark_ii(intent_weather)
             self._speak_weather(dialog)
 
-    def _display_sunrise_sunset_mark_ii(
-            self, forecast: DailyWeather, intent_data: WeatherIntent
-    ):
+    def _display_sunrise_sunset_mark_ii(self, forecast: DailyWeather):
         """Display the sunrise and sunset.
 
         :param forecast: daily forecasts to display
         """
         self.gui.clear()
-        self.gui["sunrise"] = forecast.sunrise
-        self.gui["sunset"] = forecast.sunset
-        self.gui["ampm"] = True
+        self.gui["sunrise"] = self._format_sunrise_sunset_time(forecast.sunrise)
+        self.gui["sunset"] = self._format_sunrise_sunset_time(forecast.sunset)
+        self.gui["ampm"] = self.config_core["time_format"] == TWELVE_HOUR
         self.gui.show_page("sunrise_sunset_mark_ii.qml")
 
+    def _format_sunrise_sunset_time(self, date_time: datetime) -> str:
+        """Format a the sunrise or sunset datetime into a string for GUI display.
+
+        The datetime builtin returns hour in two character format.  Convert
+        to a integer and back again to remove the leading zero when present.
+
+        :param date_time: the sunrise or sunset
+        :return: the value to display on the screen.
+        """
+        if self.config_core["time_format"] == TWELVE_HOUR:
+            display_time = date_time.strftime("%I:%M")
+            if display_time.startswith("0"):
+                display_time = display_time[1:]
+        else:
+            display_time = date_time.strftime("%H:%M")
+
+        return display_time
+
     def _report_current_weather(self, message: Message):
         """Handles all requests for current weather conditions.
 
@@ -683,7 +704,6 @@ def _display_hourly_forecast(self, weather: WeatherReport):
                 continue
             if hour_count > 4:
                 break
-            # TODO: make the timeframe aware of language/location settings
             if self.config_core["time_format"] == TWELVE_HOUR:
                 # The datetime builtin returns hour in two character format.  Convert
                 # to a integer and back again to remove the leading zero when present.

ui/sunrise_sunset_mark_ii.qml

@@ -0,0 +1,105 @@
+// 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.
+
+/*
+Screen for showing the sunrise and snset.
+
+This code is specific to the Mark II device.  It uses a grid of 16x16 pixel
+squares for alignment of items.
+*/
+import QtQuick.Layouts 1.4
+import QtQuick 2.4
+import QtQuick.Controls 2.0
+
+WeatherDelegateMarkII {
+    id: root
+
+    Item {
+        // Bounding box for the content of the screen.
+        id: card
+        height: parent.height
+        width: parent.width
+
+        GridLayout {
+            id: sunriseSunset
+            anchors.left: parent.left
+            anchors.leftMargin: gridUnit * 2
+            anchors.top: parent.top
+            anchors.topMargin: gridUnit * 2
+            columns: 2
+            columnSpacing: gridUnit * 2
+            width: gridUnit * 20
+
+            Column {
+                // First column in grid
+                id: sunrise
+                height: gridUnit * 22
+                spacing: gridUnit * 2
+                width: parent.width
+
+                WeatherImage {
+                    id: sunriseImage
+                    heightUnits: 8
+                    imageSource: "images/sunrise.svg"
+                }
+
+                WeatherLabel {
+                    id: sunriseTime
+                    heightUnits: 6
+                    fontSize: 118
+                    fontStyle: "Bold"
+                    text: sessionData.sunrise
+                }
+
+                WeatherLabel {
+                    id: sunriseAm
+                    heightUnits: 4
+                    fontSize: 60
+                    fontStyle: "Regular"
+                    text: sessionData.ampm ? "AM" : ""
+                }
+            }
+
+            Column {
+                // Second column in grid
+                id: sunset
+                height: gridUnit * 22
+                spacing: gridUnit * 2
+                width: parent.width
+
+                WeatherImage {
+                    id: sunsetImage
+                    heightUnits: 8
+                    imageSource: "images/sunset.svg"
+                }
+
+                WeatherLabel {
+                    id: sunsetTime
+                    heightUnits: 6
+                    fontSize: 118
+                    fontStyle: "Bold"
+                    text: sessionData.sunset
+                }
+
+                WeatherLabel {
+                    id: sunsetPm
+                    heightUnits: 4
+                    fontSize: 60
+                    fontStyle: "Regular"
+                    text: sessionData.ampm ? "PM" : ""
+                }
+            }
+        }
+    }
+}