Skip to content

resolution independent display (support 4k scaling) - #78

Merged
kylerisse merged 14 commits into
masterfrom
kr/20260821013724
Sep 1, 2026
Merged

resolution independent display (support 4k scaling)#78
kylerisse merged 14 commits into
masterfrom
kr/20260821013724

Conversation

@kylerisse

Copy link
Copy Markdown
Member

Description of PR

Frontend react-display scales cleanly across 16:9 resolutions, upgrades sponsor logo assets to match, and bumps the Go/npm/nix toolchains. Clean up react components to pass stricter linting and just better state management in general.

A live version of this version can be viewed at https://signs.scalenoc.org - running off this commit currently kylerisse/nixcfg@master...kr/20260827011449

Previous Behavior

  • Didn't look great at any resolution other than 1080p
  • Older versions of dependencies

New Behavior

  • Root font size is now calc(100vh / 67.5) (16px at 1080p), so every rem-based Tailwind utility scales proportionally with viewport height.
  • Sponsor logos regenerated at 440×440 (was 220×220) so they still look good at higher resolutions.
  • scripts/update_sponsors.sh updated and manager_test.go adjusted for the new dimensions.
  • README updated to describe 16:9 resolution independence (non-16:9 aspect ratios remain unsupported).
  • npm dependency bumps: React 19.2, Vite 8, TypeScript 6, ESLint 10, eslint-plugin-react-hooks 7, Tailwind 4.3.
  • Go modules and nixpkgs bumped; net.Dialer.DialDialContext to clear a deprecation warning.

To pass stricter linting after npm bumps

  • TimeProvider: compute the URL time offset once and lazy-initialize clock state.
  • Clock: render from TimeContext directly instead of mirroring it into local state.
  • SponsorProvider / SponsorBanner / SponsorItem: fetch the sponsor list inside the mount effect, working cross-fade without setState in effects; drops the unused refreshSponsors from the context API.
  • ScheduleProvider / ScheduleCarousel: run the refresh loop inside the effect; getCurrentAndUpcomingSessions now takes now: Date so the carousel list is derived from the shared clock rather than internal state; drops refreshSchedule from the context API.

Tests

  • Visually verified at 720p, 1080p, 1440p, and 4K.

@sarcasticadmin sarcasticadmin left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kylerisse this looks great!

Confirming on my own system 2560x1080 21:9 (which I realize is outside the 16:9 expectation). No 4K atm but overall is still renderers nicely:

$ make ci-test
$ ./result/scale-signs-linux-amd64 -port 8080 -refresh 10

Utilizing the time shift http://127.0.0.1:8080/??year=2026&month=3&day=7&hour=10

Image

Comment thread docs/ROADMAP.md
- Resolution independent scaling (focus on 720P -> 4k)
- TUI client

## 0.4 - Phantom Phreak

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Phanton Phreak looking good

Comment thread README.md
A [DEMO](https://signs.scalenoc.org) of this application is available online. It leverages the [SCaLE Simulator](./docs/SIMULATOR.md) and supports [time override](#time-override) URL parameters for any scale between 13x and 22x in addition to a simulated "current" SCaLE that is always active.

> Please note that `scale-signs` is currently meant to be displayed at 1080p only. Responsive design to support 720p -> 4k is planned for a later release.
> `scale-signs` is resolution-independent for 16:9 displays (tested 720p -> 4k). The entire design scales proportionally with viewport height, so it looks identical at any 16:9 resolution. Non-16:9 aspect ratios (e.g. portrait or narrow browser windows) may wrap text differently and are not a supported display target.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@kylerisse
kylerisse merged commit 6bb1949 into master Sep 1, 2026
1 check passed
@kylerisse
kylerisse deleted the kr/20260821013724 branch September 1, 2026 05:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants