From f864d43888ae7368ab1480a82cb423a50b8a5795 Mon Sep 17 00:00:00 2001 From: jim kolpack Date: Mon, 28 Sep 2026 23:19:35 -0400 Subject: [PATCH] Fix Marquee desync bug; add time/temp footer with progress bar at full width --- README.md | 28 +++++++++---- subwave_nowplaying.star | 92 +++++++++++++++++++++++++++++++---------- 2 files changed, 91 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 6d83339..3a6f947 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # subwave-nowplaying Tronbyt/Tidbyt app showing the current track on a [SUB/WAVE](https://github.com/perminder-klair/subwave) -internet radio station: album art, track title, artist, the current show -and host, and a progress bar for the track pinned to the bottom, with -title/artist/show scrolling if they don't fit. Color scheme (cyan -title/artist, gray label, white show name, magenta host/progress bar) is +internet radio station: album art, track title/artist (scrolling), a thin +separator, the current show and host, and a full-width footer with +time/temperature and a track progress bar pinned to the bottom edge. Color +scheme (cyan title/artist, white show name, magenta host/progress bar) is loosely modeled on SUB/WAVE's own web now-playing display. Not tied to any specific station — set your own station's base URL in the @@ -27,9 +27,23 @@ app's config when adding it to a device. instead of stale track info. - If a track has no `subsonic_id`, or the cover fetch fails, falls back to a full-width layout with no art rather than a broken image. -- Shows a "-- Show --" label, the current show name - (`context.activeShow.name`), and host name (`dj.name`) below the artist, - and a track progress bar pinned to the very bottom. +- Shows the current show name (`context.activeShow.name`) and host name + (`dj.name`) below the artist, separated by a thin divider line. +- Shows the local time and temperature (`context.clock`/`context.weather`) + and the track progress bar as a full-width (64px) footer overlaid on the + bottom of the layout — not confined to the 32px-wide text column, which + gives roughly 2x the character budget for the time/temp line (at the cost + of covering the bottom ~9px of the album art with a translucent bar). + +**Why show/host/time-temp are plain Text, not Marquee:** pixlet's Marquee +runs its own internal scroll-cycle animation regardless of whether the text +actually needs to scroll, and combining multiple Marquees with very +different cycle lengths in one Root desyncs them — confirmed via an +isolated repro where a short Marquee'd line intermittently collapsed to a +single character on frames where the long title/artist marquees were +mid-cycle. Only title/artist (which actually benefit from scrolling for +long names) use Marquee; the shorter supplementary fields use plain +Text/Row and just clip if too wide, which is an acceptable tradeoff. **Progress bar caveat:** the now-playing API reports track `duration` but not elapsed/remaining time, so the app tracks playback position itself — diff --git a/subwave_nowplaying.star b/subwave_nowplaying.star index 084ac99..fca7bc2 100644 --- a/subwave_nowplaying.star +++ b/subwave_nowplaying.star @@ -1,7 +1,7 @@ """ Applet: SUB/WAVE Now Playing Summary: Shows what's playing on a SUB/WAVE station -Description: Configure with your SUB/WAVE (github.com/perminder-klair/subwave) station's base URL to display the current track, artist, show, host, album art, and a progress bar. +Description: Configure with your SUB/WAVE (github.com/perminder-klair/subwave) station's base URL to display the current track, artist, show, host, album art, time/temp, and a progress bar. Author: poprhythm """ @@ -17,9 +17,10 @@ COVER_TTL = 300 COLOR_TITLE = "#22d3ee" # cyan COLOR_ARTIST = "#22d3ee" # cyan -COLOR_LABEL = "#888888" # muted gray, for the "-- Show --" label +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 footer COLOR_BAR_FILLED = "#c026d3" # magenta/purple COLOR_BAR_EMPTY = "#333333" @@ -45,32 +46,27 @@ def main(config): render.Marquee(width = 32, child = render.Text(now["title"], color = COLOR_TITLE)), render.Marquee(width = 32, child = render.Text(now["artist"], color = COLOR_ARTIST)), ] + # Note: show/host is plain Text/Row, not Marquee. Pixlet's Marquee runs + # its own internal scroll-cycle animation regardless of whether the text + # actually needs to scroll, and combining multiple Marquees with very + # different cycle lengths in one Root desyncs them -- confirmed via an + # isolated repro where a short Marquee'd line intermittently collapsed to + # a single character on frames where the long title/artist marquees were + # mid-cycle. Plain Text just clips if too wide, an acceptable tradeoff + # for this short field. if now["show"]: - top_lines.append(render.Text("-- Show --", font = "tom-thumb", color = COLOR_LABEL)) + 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)] if now["host"]: show_host_row.append(render.Text(" " + now["host"], font = "tom-thumb", color = COLOR_HOST)) - top_lines.append(render.Marquee(width = 32, child = render.Row(children = show_host_row))) + top_lines.append(render.Row(children = show_host_row)) - children = [render.Column(children = top_lines)] - if progress != None: - children.append(_progress_bar(progress["fraction"], width = 32)) - - text_column = render.Box( - width = 32, - height = 32, - child = render.Column( - main_align = "space_between", - cross_align = "start", - expanded = True, - children = children, - ), - ) + text_column = render.Column(children = top_lines) if art: - content = render.Row(children = [render.Image(src = art, width = 32, height = 32), text_column]) + base = render.Row(children = [render.Image(src = art, width = 32, height = 32), text_column]) else: - content = render.Column( + base = render.Column( main_align = "center", cross_align = "center", expanded = True, @@ -80,7 +76,44 @@ def main(config): ], ) - return render.Root(child = content) + # Time/temp and the progress bar are rendered as a full-width (64px) + # footer overlaid on top of the base layout via Stack, rather than + # squeezed into the 32px-wide text column -- gives roughly 2x the + # character budget for the time/temp line, at the cost of covering the + # bottom ~9px of the album art with a translucent bar. + footer_children = [] + if now["time_temp"]: + footer_children.append( + render.Box( + width = 64, + height = 7, + color = "#000000cc", + child = render.Row( + expanded = True, + main_align = "center", + cross_align = "center", + children = [render.Text(now["time_temp"], font = "tom-thumb", color = COLOR_META)], + ), + ), + ) + if progress != None: + footer_children.append(_progress_bar(progress["fraction"], width = 64)) + + if not footer_children: + return render.Root(child = base) + + footer = render.Box( + width = 64, + height = 32, + child = render.Column( + main_align = "end", + cross_align = "start", + expanded = True, + children = [render.Column(children = footer_children)], + ), + ) + + return render.Root(child = render.Stack(children = [base, footer])) def _message_screen(lines): return render.Column( @@ -108,7 +141,8 @@ def _fetch_now_playing(station_url): data = rep.json() np = data.get("nowPlaying", {}) dj = data.get("dj", {}) - active_show = data.get("context", {}).get("activeShow", {}) + context = data.get("context", {}) + active_show = context.get("activeShow", {}) return { "title": np.get("title", "Unknown title"), @@ -118,9 +152,23 @@ def _fetch_now_playing(station_url): "station": dj.get("station", "SUB/WAVE"), "show": active_show.get("name", ""), "host": dj.get("name", ""), + "time_temp": _format_time_temp(context.get("clock", {}), context.get("weather", {})), "online": bool(data.get("streamOnline", False)), } +def _format_time_temp(clock, weather): + parts = [] + display_time = clock.get("display", "") + if display_time: + parts.append(display_time) + + temp = weather.get("temp", None) + unit = weather.get("tempUnit", "") + if temp != None: + parts.append("%d°%s" % (int(temp), unit)) + + return " · ".join(parts) + def _fetch_cover(station_url, subsonic_id): if not subsonic_id: return None