Make album art zoom and color scheme configurable

Zoom level is a dropdown (Off/Subtle/Moderate/Strong) controlling how far
the album art zooms in during its breathing effect; Off skips the
animation.Transformation entirely and just shows a static crop.

Color schemes now match SUB/WAVE's own web UI theme picker (Blueprint,
Classic Dark, Classic Light, Cyberpunk, Flare, Recon, Signal, Vinyl) so a
station can mirror its own site theme on the device, including a
background fill that was previously hardcoded to black.
This commit is contained in:
poprhythm committed 2026-09-29 19:33:19 -04:00
1 parent 6e346a0cf8
commit 4a01de30de
2 files changed
+158 -34

No files matched your search

+149 -31
View File
@@ -16,49 +16,127 @@ DEFAULT_STATION_URL = ""
NOWPLAYING_TTL = 20
COVER_TTL = 300
COLOR_TITLE = "#22d3ee" # cyan
COLOR_ARTIST = "#22d3ee" # cyan
COLOR_SEPARATOR = "#444444" # thin divider between artist and show/host
COLOR_SHOW = "#e0e0e0" # near-white
COLOR_HOST = "#ec4899" # magenta/pink
COLOR_META = "#888888" # muted gray, for the time/temp line
COLOR_BAR_FILLED = "#c026d3" # magenta/purple
COLOR_BAR_EMPTY = "#333333"
# These match SUB/WAVE's own web UI theme picker (Blueprint, Classic Dark,
# Classic Light, Cyberpunk, Flare, Recon, Signal, Vinyl), so a station's own
# site theme can be mirrored on the device. Each scheme sets a background
# fill, the main text color (title/artist/show), an accent (host/DJ name +
# progress bar fill), a muted meta color (time/temp), a separator, and the
# progress bar's empty-track color.
COLOR_SCHEMES = {
"blueprint": {
"background": "#0a1128",
"text": "#8ecae6",
"accent": "#4a90e2",
"meta": "#3f5a7a",
"separator": "#1f3a5f",
"bar_empty": "#12223d",
},
"classic_dark": {
"background": "#1a1a1a",
"text": "#f0e6d2",
"accent": "#d32f2f",
"meta": "#8a8070",
"separator": "#3a3a3a",
"bar_empty": "#2b2b2b",
},
"classic_light": {
"background": "#f0e6d2",
"text": "#1a1a1a",
"accent": "#e63946",
"meta": "#7a7062",
"separator": "#d8cdb8",
"bar_empty": "#ded2ba",
},
"cyberpunk": {
"background": "#0d0d0d",
"text": "#22d3ee",
"accent": "#ec4899",
"meta": "#7a7a8a",
"separator": "#2a2a35",
"bar_empty": "#241f2e",
},
"flare": {
"background": "#120a00",
"text": "#ff8c1a",
"accent": "#ff6600",
"meta": "#8a5a2a",
"separator": "#3a2000",
"bar_empty": "#2a1800",
},
"recon": {
"background": "#4a4331",
"text": "#f2ecd9",
"accent": "#ff8c3a",
"meta": "#a89f85",
"separator": "#2a2519",
"bar_empty": "#332e20",
},
"signal": {
"background": "#2b2b2b",
"text": "#d9d9d9",
"accent": "#9a9a9a",
"meta": "#6e6e6e",
"separator": "#3a3a3a",
"bar_empty": "#1e1e1e",
},
"vinyl": {
"background": "#3e2f23",
"text": "#e8d5b5",
"accent": "#c97d3d",
"meta": "#8a7358",
"separator": "#2a1f16",
"bar_empty": "#241b13",
},
}
DEFAULT_COLOR_SCHEME = "cyberpunk" # matches the station's own site theme
# How far in the album art zoom goes, relative to its fully-zoomed-out rest
# state (see _art_widget below for why scale never goes below 1.0).
ZOOM_LEVELS = {
"off": 1.0,
"subtle": 1.15,
"moderate": 1.4,
"strong": 1.7,
}
DEFAULT_ZOOM_LEVEL = "moderate"
def main(config):
station_url = config.get("station_url", DEFAULT_STATION_URL)
if station_url:
station_url = station_url.rstrip("/")
colors = COLOR_SCHEMES.get(config.get("color_scheme", DEFAULT_COLOR_SCHEME), COLOR_SCHEMES[DEFAULT_COLOR_SCHEME])
zoom_scale = ZOOM_LEVELS.get(config.get("zoom_level", DEFAULT_ZOOM_LEVEL), ZOOM_LEVELS[DEFAULT_ZOOM_LEVEL])
if not station_url:
return render.Root(child = _message_screen(["Set station URL", "in app settings"]))
return render.Root(child = _with_background(_message_screen(["Set station URL", "in app settings"], colors), colors))
now = _fetch_now_playing(station_url)
if now == None:
return render.Root(child = _message_screen(["Can't reach", "station"]))
return render.Root(child = _with_background(_message_screen(["Can't reach", "station"], colors), colors))
if not now["online"]:
return render.Root(child = _message_screen([now["station"], "offline"]))
return render.Root(child = _with_background(_message_screen([now["station"], "offline"], colors), colors))
art = _fetch_cover(station_url, now["subsonic_id"])
progress = _track_progress(now["subsonic_id"], now["duration"])
top_lines = [
render.Marquee(width = 32, child = render.Text(now["title"], color = COLOR_TITLE)),
render.Marquee(width = 32, child = render.Text(now["artist"], color = COLOR_ARTIST)),
render.Marquee(width = 32, child = render.Text(now["title"], color = colors["text"])),
render.Marquee(width = 32, child = render.Text(now["artist"], color = colors["text"])),
]
if now["show"]:
top_lines.append(render.Box(width = 32, height = 1, color = COLOR_SEPARATOR))
show_host_row = [render.Text(now["show"], font = "tom-thumb", color = COLOR_SHOW)]
top_lines.append(render.Box(width = 32, height = 1, color = colors["separator"]))
show_host_row = [render.Text(now["show"], font = "tom-thumb", color = colors["text"])]
if now["host"]:
show_host_row.append(render.Text(" " + now["host"], font = "tom-thumb", color = COLOR_HOST))
show_host_row.append(render.Text(" " + now["host"], font = "tom-thumb", color = colors["accent"]))
top_lines.append(render.Marquee(width = 32, child = render.Row(children = show_host_row)))
if now["time_temp"]:
top_lines.append(render.Marquee(width = 32, child = render.Text(now["time_temp"], font = "tom-thumb", color = COLOR_META)))
top_lines.append(render.Marquee(width = 32, child = render.Text(now["time_temp"], font = "tom-thumb", color = colors["meta"])))
children = [render.Column(children = top_lines)]
if progress != None:
children.append(_progress_bar(progress["fraction"], width = 32))
children.append(_progress_bar(progress["fraction"], colors, width = 32))
text_column = render.Box(
width = 32,
@@ -72,19 +150,25 @@ def main(config):
)
if art:
content = render.Row(children = [_art_widget(art), text_column])
content = render.Row(children = [_art_widget(art, zoom_scale), text_column])
else:
content = render.Column(
main_align = "center",
cross_align = "center",
expanded = True,
children = [
render.Marquee(width = 64, child = render.Text(now["title"], color = COLOR_TITLE)),
render.Marquee(width = 64, child = render.Text(now["artist"], color = COLOR_ARTIST)),
render.Marquee(width = 64, child = render.Text(now["title"], color = colors["text"])),
render.Marquee(width = 64, child = render.Text(now["artist"], color = colors["text"])),
],
)
return render.Root(child = content)
return render.Root(child = _with_background(content, colors))
def _with_background(child, colors):
return render.Stack(children = [
render.Box(width = 64, height = 32, color = colors["background"]),
child,
])
# Album art gets a slow "Ken Burns" breathing effect: starts and ends on
# the full frame, easing in to a zoomed-in crop at the midpoint, on a
@@ -117,14 +201,18 @@ def main(config):
# barely larger than ART_SLOT: at the safe floor of scale = 1.0, only
# ART_SLOT/ART_SIZE (~89%) of the image is visible, which reads as
# "fully zoomed out" (a sliver cropped off each edge, not noticeable) while
# leaving just enough headroom above 1.0 for a real zoom-in effect.
# leaving just enough headroom above 1.0 for a real zoom-in effect. The
# zoom-in amount itself (`zoom_scale`, from the ZOOM_LEVELS schema option)
# must stay >= 1.0 for the same reason.
ART_SIZE = 36
ART_SLOT = 32
ART_ZOOM_SCALE = 1.4 # how far in to zoom, relative to the rest state
ART_ZOOM_DURATION = 200 # 10s round-trip (5s in, 5s out) at the default 50ms/tick
def _art_widget(art_bytes):
def _art_widget(art_bytes, zoom_scale):
art = render.Image(src = art_bytes, width = ART_SIZE, height = ART_SIZE)
if zoom_scale <= 1.0:
return render.Box(width = ART_SLOT, height = ART_SLOT, child = art)
zoom = animation.Transformation(
child = art,
duration = ART_ZOOM_DURATION,
@@ -135,7 +223,7 @@ def _art_widget(art_bytes):
),
animation.Keyframe(
percentage = 0.5,
transforms = [animation.Scale(ART_ZOOM_SCALE, ART_ZOOM_SCALE)],
transforms = [animation.Scale(zoom_scale, zoom_scale)],
curve = "ease_in_out",
),
animation.Keyframe(
@@ -147,22 +235,22 @@ def _art_widget(art_bytes):
)
return render.Box(width = ART_SLOT, height = ART_SLOT, child = zoom)
def _message_screen(lines):
def _message_screen(lines, colors):
return render.Column(
main_align = "center",
cross_align = "center",
expanded = True,
children = [render.Text(line, font = "tom-thumb") for line in lines],
children = [render.Text(line, font = "tom-thumb", color = colors["text"]) for line in lines],
)
def _progress_bar(fraction, width = 32, height = 2):
def _progress_bar(fraction, colors, width = 32, height = 2):
filled = int(width * fraction + 0.5)
filled = max(0, min(filled, width))
children = []
if filled > 0:
children.append(render.Box(width = filled, height = height, color = COLOR_BAR_FILLED))
children.append(render.Box(width = filled, height = height, color = colors["accent"]))
if filled < width:
children.append(render.Box(width = width - filled, height = height, color = COLOR_BAR_EMPTY))
children.append(render.Box(width = width - filled, height = height, color = colors["bar_empty"]))
return render.Row(children = children)
def _fetch_now_playing(station_url):
@@ -252,5 +340,35 @@ def get_schema():
icon = "server",
default = DEFAULT_STATION_URL,
),
schema.Dropdown(
id = "color_scheme",
name = "Color scheme",
desc = "Matches SUB/WAVE's own web UI themes -- pick the one your station uses.",
icon = "palette",
default = DEFAULT_COLOR_SCHEME,
options = [
schema.Option(display = "Cyberpunk", value = "cyberpunk"),
schema.Option(display = "Blueprint", value = "blueprint"),
schema.Option(display = "Classic Dark", value = "classic_dark"),
schema.Option(display = "Classic Light", value = "classic_light"),
schema.Option(display = "Flare", value = "flare"),
schema.Option(display = "Recon", value = "recon"),
schema.Option(display = "Signal", value = "signal"),
schema.Option(display = "Vinyl", value = "vinyl"),
],
),
schema.Dropdown(
id = "zoom_level",
name = "Album art zoom",
desc = "How far the album art zooms in during its breathing effect.",
icon = "magnifyingGlass",
default = DEFAULT_ZOOM_LEVEL,
options = [
schema.Option(display = "Off", value = "off"),
schema.Option(display = "Subtle", value = "subtle"),
schema.Option(display = "Moderate", value = "moderate"),
schema.Option(display = "Strong", value = "strong"),
],
),
],
)
Reference in new issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.