Improve tray icon visibility: Claude orange, full opacity, larger size
Starburst was nearly invisible at tray icon size due to white color at 50% alpha on a 128px canvas. Now renders in Claude brand orange (#E07B53) at full opacity on a 256px canvas with proportionally scaled geometry. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,10 +4,12 @@ import math
|
|||||||
|
|
||||||
from PIL import Image, ImageDraw
|
from PIL import Image, ImageDraw
|
||||||
|
|
||||||
SIZE = 128
|
SIZE = 256
|
||||||
CENTER = SIZE // 2
|
CENTER = SIZE // 2
|
||||||
ARC_WIDTH = 16
|
ARC_WIDTH = 28
|
||||||
ARC_RADIUS = (SIZE - ARC_WIDTH) // 2 # inner edge of arc
|
|
||||||
|
# Claude brand orange
|
||||||
|
_CLAUDE_ORANGE = (224, 123, 83) # #E07B53
|
||||||
|
|
||||||
# Color thresholds for the usage arc (10% increments)
|
# Color thresholds for the usage arc (10% increments)
|
||||||
_COLORS = [
|
_COLORS = [
|
||||||
@@ -37,26 +39,26 @@ def _arc_color(pct):
|
|||||||
|
|
||||||
|
|
||||||
def _draw_starburst(img):
|
def _draw_starburst(img):
|
||||||
"""Draw 8-petal starburst logo at 50% opacity."""
|
"""Draw 8-petal starburst logo in Claude orange, full opacity."""
|
||||||
layer = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0))
|
layer = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0))
|
||||||
draw = ImageDraw.Draw(layer)
|
draw = ImageDraw.Draw(layer)
|
||||||
|
|
||||||
|
color = (*_CLAUDE_ORANGE, 255)
|
||||||
|
|
||||||
num_petals = 8
|
num_petals = 8
|
||||||
# Petal geometry: elongated ellipse approximated as polygon
|
petal_length = SIZE * 0.38 # fill most of the icon
|
||||||
petal_length = 38
|
petal_width = SIZE * 0.10
|
||||||
petal_width = 10
|
|
||||||
|
|
||||||
for i in range(num_petals):
|
for i in range(num_petals):
|
||||||
angle = math.radians(i * (360 / num_petals))
|
angle = math.radians(i * (360 / num_petals))
|
||||||
|
|
||||||
# Build petal as 4-point diamond shape
|
|
||||||
# Tip of petal (far from center)
|
# Tip of petal (far from center)
|
||||||
tip_x = CENTER + math.cos(angle) * petal_length
|
tip_x = CENTER + math.cos(angle) * petal_length
|
||||||
tip_y = CENTER + math.sin(angle) * petal_length
|
tip_y = CENTER + math.sin(angle) * petal_length
|
||||||
|
|
||||||
# Base points (perpendicular to petal direction, near center)
|
# Base points (perpendicular to petal direction, near center)
|
||||||
perp = angle + math.pi / 2
|
perp = angle + math.pi / 2
|
||||||
base_offset = 6 # distance from center to base of petal
|
base_offset = SIZE * 0.05
|
||||||
bx = CENTER + math.cos(angle) * base_offset
|
bx = CENTER + math.cos(angle) * base_offset
|
||||||
by = CENTER + math.sin(angle) * base_offset
|
by = CENTER + math.sin(angle) * base_offset
|
||||||
|
|
||||||
@@ -66,17 +68,17 @@ def _draw_starburst(img):
|
|||||||
right_y = by - math.sin(perp) * (petal_width / 2)
|
right_y = by - math.sin(perp) * (petal_width / 2)
|
||||||
|
|
||||||
# Inner point (towards center, slight taper)
|
# Inner point (towards center, slight taper)
|
||||||
inner_x = CENTER - math.cos(angle) * 2
|
inner_x = CENTER - math.cos(angle) * (SIZE * 0.02)
|
||||||
inner_y = CENTER - math.sin(angle) * 2
|
inner_y = CENTER - math.sin(angle) * (SIZE * 0.02)
|
||||||
|
|
||||||
polygon = [(inner_x, inner_y), (left_x, left_y), (tip_x, tip_y), (right_x, right_y)]
|
polygon = [(inner_x, inner_y), (left_x, left_y), (tip_x, tip_y), (right_x, right_y)]
|
||||||
draw.polygon(polygon, fill=(255, 255, 255, 128))
|
draw.polygon(polygon, fill=color)
|
||||||
|
|
||||||
# Center dot
|
# Center dot
|
||||||
dot_r = 4
|
dot_r = SIZE * 0.04
|
||||||
draw.ellipse(
|
draw.ellipse(
|
||||||
[CENTER - dot_r, CENTER - dot_r, CENTER + dot_r, CENTER + dot_r],
|
[CENTER - dot_r, CENTER - dot_r, CENTER + dot_r, CENTER + dot_r],
|
||||||
fill=(255, 255, 255, 128),
|
fill=color,
|
||||||
)
|
)
|
||||||
|
|
||||||
img = Image.alpha_composite(img, layer)
|
img = Image.alpha_composite(img, layer)
|
||||||
@@ -94,10 +96,6 @@ def _draw_arc(img, pct):
|
|||||||
color = _hex_to_rgba(_arc_color(pct))
|
color = _hex_to_rgba(_arc_color(pct))
|
||||||
pct = min(pct, 100)
|
pct = min(pct, 100)
|
||||||
|
|
||||||
# Pillow arc: 0 = 3 o'clock, angles go counter-clockwise for arc()
|
|
||||||
# We want: start at 12 o'clock (-90), sweep clockwise
|
|
||||||
# Pillow draws counter-clockwise from start to end, so we use:
|
|
||||||
# start = -90, end = -90 + (pct/100)*360
|
|
||||||
start_angle = -90
|
start_angle = -90
|
||||||
end_angle = -90 + (pct / 100) * 360
|
end_angle = -90 + (pct / 100) * 360
|
||||||
|
|
||||||
@@ -110,7 +108,7 @@ def _draw_arc(img, pct):
|
|||||||
|
|
||||||
|
|
||||||
def render_icon(pct):
|
def render_icon(pct):
|
||||||
"""Render a 128x128 RGBA icon with starburst + usage arc.
|
"""Render a 256x256 RGBA icon with starburst + usage arc.
|
||||||
|
|
||||||
Args:
|
Args:
|
||||||
pct: Usage percentage (0-100). Arc is invisible at 0.
|
pct: Usage percentage (0-100). Arc is invisible at 0.
|
||||||
|
|||||||
Reference in New Issue
Block a user