UI improvements: bordered feedback, centered titles, cloud animation, Tesla margins

This commit is contained in:
Joan
2025-12-31 13:38:03 +01:00
parent 21b82129f2
commit 1bd8a1a264
2 changed files with 74 additions and 32 deletions

View File

@@ -225,9 +225,16 @@ class Matrix64Display(SampleBase):
time_font, data_font, small_font = fonts
time_color, humidity_color, hdd_color, label_color, line_color = colors
for y in range(24, 44):
# Black background
for y in range(22, 46):
graphics.DrawLine(canvas, 0, y, 63, y, graphics.Color(0, 0, 0))
# Border lines
border_color = graphics.Color(60, 60, 60)
graphics.DrawLine(canvas, 0, 22, 63, 22, border_color)
graphics.DrawLine(canvas, 0, 45, 63, 45, border_color)
# Message
msg_color = graphics.Color(0, 255, 100)
msg_len = len(self.feedback_message) * 7
x = (64 - msg_len) // 2
@@ -241,8 +248,9 @@ class Matrix64Display(SampleBase):
now = datetime.datetime.now()
time_str = f"{now.hour:02d}:{now.minute:02d}:{now.second:02d}"
anim_offset = int(math.sin(self.animation_frame * 0.3) * 2)
draw_weather_icon(canvas, anim_offset, 0, self.weather_desc)
# Weather Icon (cloud moves, sun/icon stays fixed)
cloud_offset = int(math.sin(self.animation_frame * 0.3) * 2)
draw_weather_icon(canvas, 0, 0, self.weather_desc, cloud_offset)
graphics.DrawLine(canvas, 28, 0, 28, 25, line_color)
@@ -279,25 +287,29 @@ class Matrix64Display(SampleBase):
time_font, data_font, small_font = fonts
time_color, humidity_color, hdd_color, label_color, line_color = colors
graphics.DrawText(canvas, data_font, 4, 8, time_color, "Discos")
# Centered title
title = "Discos"
title_len = len(title) * 5
title_x = (64 - title_len) // 2
graphics.DrawText(canvas, data_font, title_x, 8, time_color, title)
graphics.DrawLine(canvas, 0, 10, 63, 10, line_color)
if self.hdd_temps and len(self.hdd_temps) > 1:
temps = [(i+1, int(t[0])) for i, t in enumerate(self.hdd_temps[1:7]) if t]
y = 20
y = 22
for idx, (num, temp_val) in enumerate(temps[:3]):
temp_color = get_hdd_color(temp_val)
graphics.DrawText(canvas, data_font, 0, y, label_color, f"{num}:")
graphics.DrawText(canvas, data_font, 14, y, temp_color, f"{temp_val}C")
y += 10
graphics.DrawText(canvas, data_font, 2, y, label_color, f"{num}:")
graphics.DrawText(canvas, data_font, 16, y, temp_color, f"{temp_val}C")
y += 11
y = 20
y = 22
for idx, (num, temp_val) in enumerate(temps[3:6]):
temp_color = get_hdd_color(temp_val)
graphics.DrawText(canvas, data_font, 34, y, label_color, f"{num}:")
graphics.DrawText(canvas, data_font, 48, y, temp_color, f"{temp_val}C")
y += 10
y += 11
if self.auto_cycle:
graphics.DrawText(canvas, small_font, 58, 62, label_color, "A")
@@ -323,8 +335,9 @@ class Matrix64Display(SampleBase):
graphics.DrawLine(canvas, 0, 30, 63, 30, line_color)
anim_offset = int(math.sin(self.animation_frame * 0.3) * 2)
draw_weather_icon(canvas, 4 + anim_offset, 34, self.weather_desc)
# Weather icon (cloud animates, position fixed)
cloud_offset = int(math.sin(self.animation_frame * 0.3) * 2)
draw_weather_icon(canvas, 4, 34, self.weather_desc, cloud_offset)
if self.temperature is not None:
temp_color = get_temperature_color(self.temperature)
@@ -338,25 +351,28 @@ class Matrix64Display(SampleBase):
time_font, data_font, small_font = fonts
time_color, humidity_color, hdd_color, label_color, line_color = colors
# Title
graphics.DrawText(canvas, data_font, 14, 8, time_color, "Tesla")
# Centered title
title = "Tesla"
title_len = len(title) * 5
title_x = (64 - title_len) // 2
graphics.DrawText(canvas, data_font, title_x, 8, time_color, title)
graphics.DrawLine(canvas, 0, 10, 63, 10, line_color)
if self.tesla:
# Battery
# Battery (with margin)
battery = self.tesla.get("battery")
if battery is not None:
battery_color = graphics.Color(0, 255, 80) if battery > 20 else graphics.Color(255, 50, 50)
graphics.DrawText(canvas, data_font, 0, 22, label_color, "Bat:")
graphics.DrawText(canvas, time_font, 24, 24, battery_color, f"{battery}%")
graphics.DrawText(canvas, data_font, 4, 24, label_color, "Bat")
graphics.DrawText(canvas, time_font, 26, 26, battery_color, f"{battery}%")
# Range
# Range (with margin)
range_km = self.tesla.get("range")
if range_km is not None:
graphics.DrawText(canvas, data_font, 0, 36, label_color, "Km:")
graphics.DrawText(canvas, time_font, 20, 38, time_color, f"{range_km}")
graphics.DrawText(canvas, data_font, 4, 38, label_color, "Km")
graphics.DrawText(canvas, time_font, 22, 40, time_color, f"{range_km}")
# Status
# Status (centered)
charging = self.tesla.get("charging", False)
plugged = self.tesla.get("plugged", False)
@@ -370,7 +386,9 @@ class Matrix64Display(SampleBase):
status = "Listo"
status_color = graphics.Color(100, 100, 100)
graphics.DrawText(canvas, data_font, 4, 54, status_color, status)
status_len = len(status) * 5
status_x = (64 - status_len) // 2
graphics.DrawText(canvas, data_font, status_x, 56, status_color, status)
else:
graphics.DrawText(canvas, data_font, 4, 32, label_color, "Sin datos")

View File

@@ -54,31 +54,31 @@ def _draw_cloud_shape(canvas, x, y, color):
graphics.DrawCircle(canvas, x + 12, y + 7, r, color)
def draw_partly_cloudy(canvas, x, y):
"""Draw sun partially covered by cloud."""
def draw_partly_cloudy(canvas, x, y, cloud_offset=0):
"""Draw sun partially covered by cloud. Cloud can be animated."""
sun_color = graphics.Color(255, 200, 0)
ray_color = graphics.Color(255, 140, 0)
cloud_color = graphics.Color(220, 220, 220)
# Draw partial sun
# Draw partial sun (stays in place)
graphics.DrawLine(canvas, x + 8, y + 2, x + 8, y + 4, ray_color)
graphics.DrawLine(canvas, x + 2, y + 8, x + 4, y + 8, ray_color)
graphics.DrawLine(canvas, x + 3, y + 3, x + 5, y + 5, ray_color)
for r in range(4, 0, -1):
graphics.DrawCircle(canvas, x + 8, y + 8, r, sun_color)
# Draw cloud
_draw_cloud_shape(canvas, x + 6, y + 10, cloud_color)
# Draw cloud (with animation offset)
_draw_cloud_shape(canvas, x + 6 + cloud_offset, y + 10, cloud_color)
def draw_partly_cloudy_night(canvas, x, y):
def draw_partly_cloudy_night(canvas, x, y, cloud_offset=0):
"""Draw moon partially covered by cloud."""
moon_color = graphics.Color(255, 255, 200)
cloud_color = graphics.Color(180, 180, 200)
for r in range(4, 0, -1):
graphics.DrawCircle(canvas, x + 8, y + 8, r, moon_color)
_draw_cloud_shape(canvas, x + 6, y + 10, cloud_color)
_draw_cloud_shape(canvas, x + 6 + cloud_offset, y + 10, cloud_color)
def draw_cloudy(canvas, x, y):
@@ -218,16 +218,40 @@ WEATHER_ICONS = {
}
def draw_weather_icon(canvas, x, y, weather_state):
"""Draw weather icon based on state string."""
def draw_weather_icon(canvas, x, y, weather_state, cloud_offset=0):
"""Draw weather icon based on state string.
Args:
canvas: The LED matrix canvas
x, y: Position to draw at
weather_state: Weather condition string
cloud_offset: Animation offset for cloud movement (optional)
"""
weather_lower = weather_state.lower() if weather_state else ''
# Try exact match
# Icons with cloud animation support
ANIMATED_ICONS = {
'partlycloudy': draw_partly_cloudy,
'partly-cloudy-day': draw_partly_cloudy,
'partly-cloudy-night': draw_partly_cloudy_night,
}
# Try animated icons first
if weather_lower in ANIMATED_ICONS:
ANIMATED_ICONS[weather_lower](canvas, x, y, cloud_offset)
return
# Try exact match for static icons
if weather_lower in WEATHER_ICONS:
WEATHER_ICONS[weather_lower](canvas, x, y)
return
# Try partial match
for key, draw_func in ANIMATED_ICONS.items():
if key in weather_lower or weather_lower in key:
draw_func(canvas, x, y, cloud_offset)
return
for key, draw_func in WEATHER_ICONS.items():
if key in weather_lower or weather_lower in key:
draw_func(canvas, x, y)