🕒 SSMB Announcements TV

The live event display for the TV screens at Shree Swaminarayan Mandir Bhuj – Auckland.

Live page: ssmbauckland.github.io/announcements-tv

The whole display is one file, index.html. When it changes on main, the website updates automatically and the TVs are told to reload.

---

📋 Contents

1. What's on the screen
2. How updates reach the TVs
3. Previewing a date
4. Adding or changing events
5. Publishing a change
6. Troubleshooting
7. Changelog

---

📺 What's on the screen

Area	What it shows
Header	Mandir crest and name, a large clock (with seconds), and today's date.
Today at the Mandir	Today's events with times and notes, and the festival's message. When there are both Mandal programme items and festivals, the programme is shown as a timetable card on the left and festivals on the right ("Also today"). The event in progress is tagged "On now"; finished ones move to a small "Earlier today" line. On big festivals the title becomes a greeting, e.g. "Happy Diwali!".
Shlok band	A Shikshapatri shlok that changes every 2 minutes. Long shloks are shown in parts.
Upcoming Events	The next day with events in full, plus up to three more days as short rows.
Festival countdown	For the 21 days before a big festival, a "Countdown to …" card.

Each day gets its own colour theme, and big festivals have their own colours. Festivals are listed first within each day, then scheduled programmes.

The page is self-contained (fonts and images are built in), so it works without loading anything else.

---

🔄 How updates reach the TVs

Edit index.html on main  →  GitHub Pages updates the website  →  GitHub Action tells Yodeck to reload the screens

The action is .github/workflows/refresh-yodeck.yml. It runs on every push to main and needs the YODECK_API_KEY repository secret. It usually finishes within about a minute; you can watch it in the Actions tab.

---

👀 Previewing a date

To see how the screen will look on any day:

• Click the date card (top right) on the live page to open the preview calendar, or
• Add ?previewDate=YYYY-MM-DD to the address, e.g. …/announcements-tv/?previewDate=2026-11-08
• Add &previewTime=HH:MM (24-hour) to see which events show as "On now" or "Earlier today" at that time, e.g. ?previewDate=2026-10-10&previewTime=19:30

Previews only affect your browser; the TVs always show today.

---

📅 Automatic calendar sync

Every Monday at 6 am (NZ time) a GitHub Action (.github/workflows/calendar-sync.yml) reads the Bhuj Mandir "Australia and New Zealand Utsav" Google Calendar and adds any new events to the display, then refreshes the website and the TVs and writes a line in CHANGELOG.md.

• It only adds, never changes or removes. Anything edited by hand (times, notes, Mandal programmes) is safe.
• It skips the same things the screen never showed: daily observances (Pradosh Vrat, Masik Shivratri, Amas…), instructions for the pujaris, astronomical notes and individual Shraddh days. The rules are at the top of scripts/sync_calendar.py.
• Run it now: Actions tab → Weekly calendar sync → Run workflow.
• If a calendar event is later moved or cancelled, fix or delete it in index.html by hand (the sync won't).

---

💬 Updates approved on WhatsApp

When the admin team approves an announcement (or asks for a change) in their WhatsApp group, the WhatsApp update GitHub Action (.github/workflows/whatsapp-update.yml) changes the display:

• Event changes (add, update, remove) are applied by scripts/apply_update.py, without AI.
• Anything else (a festive theme, a design tweak) is done by Claude Code, following CLAUDE.md.
• Every change is checked at 1920×1080 by scripts/check_display.py before it's published, then the TVs are refreshed and a line is added to CHANGELOG.md.
• The instructions Claude follows when reading posters and requests are in automation/.

---

✏️ Adding or changing events

Events live in the EVENTS list near the top of the <script> section in index.html. Each event is one line:

{"date": "8/11/2026", "event": "Diwali", "time": "7:00 PM", "note": "Aarti • Fireworks", "quote": "May the light of bhakti…", "progress": false},

Field	Required	Meaning
date	✅	Day/month/year, e.g. 8/11/2026.
event	✅	Name shown on screen.
time		Shown under the name, e.g. 7:45 – 8:45 PM.
note		Extra lines; separate lines with •.
source		Small label above the name, e.g. Mandal Santos Schedule.
quote		Short festival message shown under today's events.
intro		A longer introduction shown under the event name.
progress		Leave as false unless told otherwise.
hideShlok		true hides the Shikshapatri shlok on that day, to give a full programme more room.
hidden		true keeps the entry in the data but off the screen (the weekly calendar sync won't add it back).
backgroundVideo		A video file in videos/ (WebM, with an MP4 of the same name beside it) that fills the whole screen that day; the garland along the top stays.
theme		A festival look from SPECIAL_PALETTES (colours, and scenery if it has art), e.g. diwali.
image		A picture shown with the event on its day, e.g. images/2026-10-31-lalji-maharajs-visit.jpg (see Pictures below).
video		An animation for the day, e.g. videos/2026-11-06-dhanteras.webm. It plays silently on a loop where a picture would go, with the event's image shown until it starts (and if it can't play). Make it with python3 scripts/prepare_video.py SOURCE videos/NAME.webm --crop X,Y,W,H --start SECONDS, which also writes the .mp4 beside it for phones.
imagePos

Pictures: put the file in images/ (JPEG, at most 1600 px on its longest side; python3 scripts/prepare_image.py SOURCE images/NAME.jpg --crop X,Y,W,H crops and shrinks it). Upright pictures (murtis, posters, portraits) stand on the right of the Today card and fade into it towards the text; wide ones (over 1.4:1) fill the top of the card and fade to dark behind the text under them. The text keeps its sizes, and the shlok gives way that day.

Big festivals (countdown, colour theme and greeting) are set in the FESTIVALS list. The event there must match the event name exactly.

💡 Tip: when only events change, edit just the EVENTS list rather than pasting a whole new file. Pasting a full AI-generated file can silently undo earlier fixes.

---

🚀 Publishing a change

⚠️ The file must be named exactly index.html (all lowercase) and stay in the top folder.

Method A: Edit in GitHub (recommended)

1. Open index.html in this repository and click the pencil icon (✏️).
2. Make your change (or select all, delete, and paste the full new code).
3. Click Commit changes…, then Commit changes again.

Method B: Upload a file

1. Rename the file on your computer to index.html.
2. In this repository, click Add file → Upload files and drop it in.
3. Click Commit changes.

Then:

1. Open the live page after a minute or two and check it looks right.
2. Add a line to CHANGELOG.md describing what changed.

---

🛠️ Troubleshooting

Problem	What to do
Website hasn't changed	Wait 2–3 minutes and hard-refresh (Ctrl + Shift + R / Cmd + Shift + R). Check the Actions tab for a failed run.
Website is right but a TV isn't	Reload the player from the Yodeck dashboard, or unplug the Yodeck box behind the TV, wait 10 seconds, and plug it back in.
Blank page or error	The file was probably cut off when pasting. Check it is named index.html and the full code was pasted, or restore the previous version from the commit history.
"No further events are listed yet"	The EVENTS list has run out; add the next set of dates.
Yodeck action fails	Check the YODECK_API_KEY secret under Settings → Secrets and variables → Actions.

---

📝 Changelog

All changes to the display are recorded in CHANGELOG.md, newest first. Please add an entry whenever you publish a new index.html.