表盘显示逐小时天气

README.md

@@ -59,6 +59,15 @@ QWEATHER_APIKEY = xxx
 QWEATHER_APITYPE = 0
 ```
 
+## 逐小时显示类型 可选配置 环境变量
+
+1 = 平铺 (默认值)
+2 = 表盘
+
+```
+QWEATHER_HOURLYSTYLE = 1
+```
+
 ## 逐小时类型 可选配置 环境变量
 
 1 = 未来12小时 (默认值)

nonebot_plugin_heweather/config.py

@@ -2,18 +2,20 @@
 from nonebot import get_driver
 from pydantic import Extra, BaseModel
 
-from .model import HourlyType
+from .model import HourlyStyle, HourlyType
 
 
 class Config(BaseModel, extra=Extra.ignore):
     qweather_apikey: Optional[str] = None
     qweather_apitype: Optional[str] = None
     qweather_hourlytype: Optional[HourlyType] = HourlyType.current_12h
+    qweather_hourlystyle: Optional[HourlyStyle] = HourlyStyle.bar
     debug: bool = False
 
 
 plugin_config = Config.parse_obj(get_driver().config)
 QWEATHER_APIKEY = plugin_config.qweather_apikey
 QWEATHER_APITYPE = plugin_config.qweather_apitype
 QWEATHER_HOURLYTYPE = plugin_config.qweather_hourlytype
+QWEATHER_HOURLYSTYLE = plugin_config.qweather_hourlystyle
 DEBUG = plugin_config.debug

nonebot_plugin_heweather/model.py

@@ -73,7 +73,9 @@ class Hourly(BaseModel, extra=Extra.allow):
     temp: str
     icon: str
     text: str
+    pop: str
     temp_percent: Optional[str]
+    hour_key: int = 0
 
 
 class HourlyApi(BaseModel, extra=Extra.allow):
@@ -84,3 +86,8 @@ class HourlyApi(BaseModel, extra=Extra.allow):
 class HourlyType(IntEnum):
     current_12h = 1
     current_24h = 2
+
+
+class HourlyStyle(IntEnum):
+    bar = 1
+    clock = 2

nonebot_plugin_heweather/render_pic.py

@@ -1,3 +1,4 @@
+import platform
 from datetime import datetime
 from typing import List
 from pathlib import Path
@@ -8,8 +9,8 @@
 
 from nonebot_plugin_htmlrender import template_to_pic
 
-from .config import QWEATHER_HOURLYTYPE
-from .model import Air, Daily, Hourly, HourlyType
+from .config import QWEATHER_HOURLYSTYLE, QWEATHER_HOURLYTYPE
+from .model import Air, Daily, Hourly, HourlyStyle, HourlyType
 from .weather_data import Weather
 
 
@@ -31,6 +32,10 @@ async def render(weather: Weather) -> bytes:
             "warning": weather.warning,
             "air": air,
             "hours": add_hour_data(weather.hourly.hourly),
+            "hourly_style": QWEATHER_HOURLYSTYLE,
+            "curr_hour": int(
+                datetime.fromisoformat(weather.now.now.obsTime).strftime("%I")
+            ),
         },
         pages={
             "viewport": {"width": 1000, "height": 300},
@@ -44,13 +49,20 @@ def add_hour_data(hourly: List[Hourly]):
     high = max([int(hour.temp) for hour in hourly])
     low = int(min_temp - (high - min_temp))
     for hour in hourly:
-        date_time = datetime.fromisoformat(hour.fxTime)  # 2023-08-09 23:00:00+08:00
-        hour.hour = date_time.strftime("%H:%M")
+        date_time = datetime.fromisoformat(hour.fxTime)
+        if platform.system() == "Windows":
+            hour.hour = date_time.strftime("%#I%p")
+        else:
+            hour.hour = date_time.strftime("%-I%p")
         hour.temp_percent = f"{int((int(hour.temp) - low) / (high - low) * 100)}px"
-    if QWEATHER_HOURLYTYPE == HourlyType.current_12h:
-        hourly = hourly[:12]
-    if QWEATHER_HOURLYTYPE == HourlyType.current_24h:
-        hourly = hourly[::2]
+        hour.hour_key = int(date_time.strftime("%I"))
+    if QWEATHER_HOURLYSTYLE == HourlyStyle.clock:
+        hourly.sort(key=lambda x: x.hour_key)
+    else:
+        if QWEATHER_HOURLYTYPE == HourlyType.current_12h:
+            hourly = hourly[:12]
+        if QWEATHER_HOURLYTYPE == HourlyType.current_24h:
+            hourly = hourly[::2]
     return hourly
 
 

nonebot_plugin_heweather/templates/css/weather.css

@@ -72,6 +72,10 @@ p.realtime-text {
   font-size: 60px;
 }
 
+.hour-icon-size {
+  font-size: 85px;
+}
+
 .date {
   color: rgba(232, 230, 227, 0.55);
   font-size: 20px;
@@ -128,6 +132,7 @@ p.realtime-text {
   background-image: linear-gradient(225deg, #b78c579d, #f2d5b2b6);
   margin-top: 20px;
 }
+
 .warning-side {
   display: flex;
   align-items: center;
@@ -141,9 +146,11 @@ p.realtime-text {
   font-size: 20px;
   color: rgba(255, 255, 255, 0.55);
 }
+
 .warning-info {
   padding: 20px;
 }
+
 .tem-text {
   width: 120px;
   text-align: right;
@@ -166,9 +173,12 @@ p.realtime-text {
 
 .air-tag {
   display: inline-block;
-  width: intrinsic; /* Safari/WebKit 使用了非标准的名称 */
-  width: -moz-max-content; /* Firefox/Gecko */
-  width: -webkit-max-content; /* Chrome */
+  width: intrinsic;
+  /* Safari/WebKit 使用了非标准的名称 */
+  width: -moz-max-content;
+  /* Firefox/Gecko */
+  width: -webkit-max-content;
+  /* Chrome */
   padding: 4px 32px;
   font-size: 30px;
   line-height: 32px;
@@ -213,7 +223,7 @@ meter {
 .tem-vert-line {
   width: 10px;
   border-radius: 10px;
-  background:  #427bff;
+  background: #427bff;
   margin: 0 auto;
   bottom: 0;
   left: 0;
@@ -225,3 +235,113 @@ meter {
   text-align: center;
   width: 60px;
 }
+
+.container {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  width: 300px;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.info .icon {
+  height: 30px;
+}
+
+.info .location {
+  color: #4e82a2;
+  fill: #4e82a2;
+}
+
+.info .spacer {
+  flex-grow: 1;
+}
+
+.info .time {
+  color: #419192;
+  fill: #419192;
+}
+
+.info .time .splitter {
+  animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.clock {
+  overflow: hidden;
+  position: relative;
+}
+
+.clock .hour-hand {
+  position: relative;
+  top: 0;
+  left: 0;
+  transform-origin: 50% 50%;
+  animation-delay: 0s;
+}
+
+.clock .number {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.clock .number text>tspan {
+  font-style: normal;
+  font-variant: normal;
+  font-weight: bold;
+  font-stretch: normal;
+  font-size: 50px;
+  font-family: sans-serif;
+  font-variant-ligatures: normal;
+  font-variant-caps: normal;
+  font-variant-numeric: normal;
+  font-variant-east-asian: normal;
+  display: inline;
+  fill: #ccc;
+  fill-opacity: 1;
+}
+
+.clock .degree {
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 2.5rem;
+  color: #a3a3a3;
+  transform: translate(-50%, -60%);
+}
+
+g#layer-pop .pop-data {
+  font-size: 100px;
+}
+
+g#layer-pop .pop-text {
+  color: rgba(232, 230, 227, 0.55);
+  font-size: 30px;
+  text-size-adjust: 100%;
+}