feat(weather): new weather icons

gallery/easel/route/view/weather/filters.py

@@ -1,48 +1,49 @@
-from gallery.sketch.weather.model import (
-    Cloudness,
-    Precipitation,
-    Sky,
-    WindDirection,
-    WindDirectionDeg,
-)
+import datetime
+
+from gallery.sketch.weather.model import Cloudness, Precipitation, Sky, WindDirection, WindDirectionDeg
 
 
 def wind_direction_icon(wind_direction_deg: float) -> str:
     wind_direction = WindDirectionDeg(wind_direction_deg).direction
-    return {
-        WindDirection.N: "⬇️",
-        WindDirection.NE: "↙️",
-        WindDirection.E: "⬅️",
-        WindDirection.SE: "↖️",
-        WindDirection.S: "⬆️",
-        WindDirection.SW: "↗️",
-        WindDirection.W: "➡️",
-        WindDirection.NW: "↘️",
-        WindDirection.CALM: "",
-    }.get(wind_direction, wind_direction)
+    if wind_direction == WindDirection.CALM:
+        return "wind-calm"
+    else:
+      return f"wind-from-{wind_direction.name.lower()}"
 
 
-def cloudness_icon(sky: Sky) -> list[str]:
+def cloudness_icon(sky: Sky, date: datetime.datetime, period: str) -> list[str]:
+    day = (3 < date.hour < 22) if period == "day" else True
+    day_prefix = "day" if day else "night-alt"
     main_icon = ""
     if sky.thunder:
-        if sky.cloudness == Cloudness.CLEAR:
-            main_icon = "🌩️"
-        if sky.precipitation == Precipitation.NO:
-            main_icon = "⚡"
-        else:
-            main_icon = "⛈️"
+        main_icon = {
+            Precipitation.NO: "lightning",
+            Precipitation.SMALL_RAIN: "storm-showers",
+            Precipitation.RAIN: "thunderstorm",
+            Precipitation.HEAVY_RAIN: "thunderstorm",
+            Precipitation.SHOWER: "thunderstorm",
+            Precipitation.SNOW: "storm-showers",
+            Precipitation.HEAVY_SNOW: "storm-showers",
+        }[sky.precipitation]
+        if sky.cloudness == Cloudness.PARTLY_CLOUDY:
+            main_icon = f"{day_prefix}-{main_icon}"
     elif sky.precipitation == Precipitation.NO:
         main_icon = {
-            Cloudness.CLEAR: "☀️",
-            Cloudness.PARTLY_CLOUDY: "🌤️",
-            Cloudness.CLOUDY: "⛅",
-            Cloudness.MAINLY_CLOUDY: "☁️",
+            Cloudness.CLEAR: "day-sunny" if day else "night-clear",
+            Cloudness.PARTLY_CLOUDY: f"{day_prefix}-cloudy",
+            Cloudness.CLOUDY: "cloud",
+            Cloudness.MAINLY_CLOUDY: "cloudy",
         }[sky.cloudness]
-    elif sky.precipitation in [Precipitation.SNOW, Precipitation.HEAVY_SNOW]:
-        main_icon = "🌨️"
     else:
-        main_icon = "🌧️"
+        main_icon = {
+            Precipitation.SMALL_RAIN: "showers",
+            Precipitation.RAIN: "rain-mix",
+            Precipitation.HEAVY_RAIN: "rain",
+            Precipitation.SHOWER: "rain",
+            Precipitation.SNOW: "snow",
+            Precipitation.HEAVY_SNOW: "snow",
+        }[sky.precipitation]
+        if sky.cloudness == Cloudness.PARTLY_CLOUDY:
+            main_icon = f"{day_prefix}-{main_icon}"
     icons = [main_icon]
-    if sky.fog:
-        icons.append("🌫️")
     return icons

gallery/easel/route/view/weather/templates/weather.html

@@ -54,9 +54,12 @@
       </tr>
       <tr>
         {% for value in response.values %}
-        <td class="cloudness" data-bs-toggle="tooltip" data-bs-title="{{ value.sky }}">
-          {% for icon in value.sky | cloudness_icon %}
-          <div class="icon">{{icon}}</div>
+        <td class="cloudness"
+            data-bs-toggle="tooltip"
+            data-bs-title="{{ value.sky }}">
+          {% for icon in value.sky | cloudness_icon(value.date, response.period) %}
+          <div class="wi wi-{{icon}} text-primary"
+               style="font-size: 3.5rem;"></div>
           {% endfor %}
         </td>
         {% endfor %}
@@ -89,8 +92,10 @@
       </tr>
       <tr>
         {% for value in response.values %}
-        <td class="wind">
-          <span class="icon">{{value.wind_direction | wind_direction_icon}}</span>
+        <td class="wind"
+            data-bs-toggle="tooltip"
+            data-bs-title="{{ value.wind_direction }}">
+          <div class="wi wi-wind-deg wi-{{value.wind_direction | wind_direction_icon}} fs-1 text-primary"></div>
         </td>
         {% endfor %}
       </tr>