Improve YouTube display layout: adjust logo size, text spacing, and add truncation for long channel names

This commit is contained in:
ChuckBuilds
2025-04-22 17:34:06 -05:00
parent 1e86df1d0c
commit 125bb9a1ea

View File

@@ -77,44 +77,50 @@ class YouTubeDisplay:
image = Image.new('RGB', (self.display_manager.matrix.width, self.display_manager.matrix.height)) image = Image.new('RGB', (self.display_manager.matrix.width, self.display_manager.matrix.height))
draw = ImageDraw.Draw(image) draw = ImageDraw.Draw(image)
# Resize YouTube logo to fill 75% of display height # Calculate logo dimensions - 60% of display height to ensure text fits
logo_height = int(self.display_manager.matrix.height * 0.75) logo_height = int(self.display_manager.matrix.height * 0.6)
logo_width = int(self.youtube_logo.width * (logo_height / self.youtube_logo.height)) logo_width = int(self.youtube_logo.width * (logo_height / self.youtube_logo.height))
resized_logo = self.youtube_logo.resize((logo_width, logo_height)) resized_logo = self.youtube_logo.resize((logo_width, logo_height))
# Position logo on the left # Position logo on the left with padding
logo_x = 2 # Small padding from left edge logo_x = 2 # Small padding from left edge
logo_y = (self.display_manager.matrix.height - logo_height) // 2 # Center vertically logo_y = (self.display_manager.matrix.height - logo_height) // 2 # Center vertically
# Paste the logo # Paste the logo
image.paste(resized_logo, (logo_x, logo_y)) image.paste(resized_logo, (logo_x, logo_y))
# Calculate right section width (remaining space after logo) # Calculate right section width and starting position
right_section_x = logo_x + logo_width + 5 # Start after logo with some padding right_section_x = logo_x + logo_width + 4 # Start after logo with some padding
# Draw channel name (top right) # Calculate text positions
line_height = 10 # Approximate line height for PressStart2P font at size 8
total_text_height = line_height * 3 # 3 lines of text
start_y = (self.display_manager.matrix.height - total_text_height) // 2
# Draw channel name (top)
channel_name = channel_stats['title'] channel_name = channel_stats['title']
# Truncate channel name if too long
max_chars = (self.display_manager.matrix.width - right_section_x - 4) // 8 # 8 pixels per character
if len(channel_name) > max_chars:
channel_name = channel_name[:max_chars-3] + "..."
name_bbox = draw.textbbox((0, 0), channel_name, font=self.font) name_bbox = draw.textbbox((0, 0), channel_name, font=self.font)
name_width = name_bbox[2] - name_bbox[0] name_width = name_bbox[2] - name_bbox[0]
name_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - name_width) // 2) name_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - name_width) // 2)
name_y = 5 # Small padding from top draw.text((name_x, start_y), channel_name, font=self.font, fill=(255, 255, 255))
draw.text((name_x, name_y), channel_name, font=self.font, fill=(255, 255, 255))
# Draw subscriber count (middle right) # Draw subscriber count (middle)
subs_text = f"{channel_stats['subscribers']:,} subscribers" subs_text = f"{channel_stats['subscribers']:,} subs"
subs_bbox = draw.textbbox((0, 0), subs_text, font=self.font) subs_bbox = draw.textbbox((0, 0), subs_text, font=self.font)
subs_width = subs_bbox[2] - subs_bbox[0] subs_width = subs_bbox[2] - subs_bbox[0]
subs_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - subs_width) // 2) subs_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - subs_width) // 2)
subs_y = name_y + 15 # Position below channel name draw.text((subs_x, start_y + line_height), subs_text, font=self.font, fill=(255, 255, 255))
draw.text((subs_x, subs_y), subs_text, font=self.font, fill=(255, 255, 255))
# Draw view count (bottom right) # Draw view count (bottom)
views_text = f"{channel_stats['views']:,} views" views_text = f"{channel_stats['views']:,} views"
views_bbox = draw.textbbox((0, 0), views_text, font=self.font) views_bbox = draw.textbbox((0, 0), views_text, font=self.font)
views_width = views_bbox[2] - views_bbox[0] views_width = views_bbox[2] - views_bbox[0]
views_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - views_width) // 2) views_x = right_section_x + ((self.display_manager.matrix.width - right_section_x - views_width) // 2)
views_y = subs_y + 15 # Position below subscriber count draw.text((views_x, start_y + (line_height * 2)), views_text, font=self.font, fill=(255, 255, 255))
draw.text((views_x, views_y), views_text, font=self.font, fill=(255, 255, 255))
return image return image