Pangil Broadcast
Overlay Engine

Editable modular overlays for a 1920 × 1080 OBS scene.

Add an overlay to OBS

  1. Add a new Browser Source.
  2. Paste the published URL ending in the module filename, such as /overlays/weather.html.
  3. Set Width to 1920 and Height to 1080.
  4. Leave “Shutdown source when not visible” off for live weather and clock modules.

Edit content

Open public/data/config.js. It controls branding, sample weather, rotating messages, gear promo, timezone and the fallback song.

Now Playing

The card checks public/data/now-playing.json every three seconds. Update that file from your playlist helper with the current title, artist, album and artwork URL. Replace public/assets/album-art.png with your official Pangil Broadcast cover.

Weather

The supplied weather values are editable sample data. For automatic live weather, a small server-side weather connector should update the same values; never place a private API key directly inside an OBS page.

Module URLs

Album art: copy your final PNG to public/assets/album-art.png. Until then, the Now Playing card uses a built-in sunset design.