Changing current.src immediately triggered the new image to render while
the element was still mid-opacity-transition (partially visible), causing
the next queued photo to briefly flash through the crossfade. Now we wait
for the transitionend event before setting the new preload src.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previously the active class was applied via requestAnimationFrame
before the image had decoded, causing a brief blank-then-flash.
Now loadSlide waits for onload before transitioning, and advanceSlide
checks complete/naturalWidth (or waits for onload) on the preloaded
slot before doing the swap.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previously fetched once at page load — if photos were added after the
service started they wouldn't appear until a restart. Now fetches on
every slideshow activation so new photos show up immediately.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Show 6 days in a 3x2 grid (3 columns, 2 rows) with info panel
spanning the full right column
- Day columns explicitly grid-placed to prevent auto-flow into panel column
- Larger fonts throughout: event cards 14px, day number 26px, clock 52px
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Fetch from 7 days back so events that started before today (e.g.
weekly chore rotation starting last Sunday) are included
- All-day multi-day events now appear on every day they cover, not just
their start date (using iCal's exclusive-end convention correctly)
- Timed events continue to show only on their start date
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previously took min/max from only the first 3-hour entry of each day,
giving a near-flat range. Now aggregates all slots for each date and
uses the midday slot for icon/description.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- New 'Boys' member with beetroot color (#6B1040 / #D4A8C0) — any event
containing the word "Boys" gets this color
- Mom/Dad were already matched via fuzzy alias detection (no change needed)
- Event card font sizes increased by 1px (12.5px body, 11.5px time, 11px member)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Fuzzy name matching: if a member's name appears anywhere in the event
title (word boundary, case-insensitive), it gets their color — no
[prefix] required. e.g. "Daniel's Week" → green, "Jason Karate" → blue
- More vibrant card color palette (deeper pastels, stronger border accent)
- Bolder event title text and slightly thicker left border for clarity
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- After 1 hour of inactivity the screen switches to a fullscreen
crossfade slideshow of photos from static/photos/
- Touch anywhere on screen to dismiss and return to the calendar
- /api/photos endpoint serves a shuffled list of images from static/photos/
- Two-slot A/B image swap for smooth 1.5s crossfades; next image preloads
in the background while current is displayed (15s per photo)
- Slideshow only activates if static/photos/ contains at least one image
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Show today + next 4 days instead of a fixed Sun-Sat week grid
- Replace Next Week column with a right-side info panel (live clock,
date, current weather + 3-day forecast)
- Simplify topbar to just the view pill, date range, and member filter
- Adjust grid to repeat(5, 1fr) 190px
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace scrolling event list + photo background with a Sun–Sat week grid
plus a "Next Week" preview column; Prev/Next navigation and per-member filter
- Add [Name] event title prefix convention for color-coded family member cards
(Ludwig/Dad=blue, Michelle/Mom=pink, Jason=green, Daniel=yellow)
- /api/calendar now accepts ?start=YYYY-MM-DD, returns bucketed week payload
with member/color metadata; fetches 14 days to populate Next Week column
- Drop rotating background photo and dad joke from the display (endpoints kept)
- Update README with new UI overview, prefix convention, and API docs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace emoji weather icons with OWM icon images to fix rendering
issues on Linux displays (e.g. ⛅ showing as a rectangle)
- Fix forecast daily max/min to use true high/low across all 3-hour
slots instead of just the first entry of the day
- Update README: correct BACKGROUND interval (60 min), update kiosk
setup for labwc/Wayland, add restart-calendar.sh instructions
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
BACKGROUND interval was set to 60000ms (1 minute) instead of
3600000ms (60 minutes) as intended.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove personal information and improve setup documentation:
**Code Generalization:**
- Updated .env.example with placeholder values
- Removed personal API keys and calendar IDs
- Removed all personal background images (15 images deleted)
- Added backgrounds directory README with usage instructions
- Updated .gitignore to exclude background images
**Documentation Improvements:**
- Added comprehensive Weather API setup instructions
- How to get OpenWeatherMap API key
- How to find location coordinates using LatLong.net
- Added detailed Google Calendar setup instructions
- Public iCal feed method (easiest, no auth required)
- Alternative Google Calendar API method
- Added background image specifications
- Supported formats, recommended resolution
- Where to add images and how to change rotation interval
- Added configuration section explaining all settings
- Environment variables documentation
- JavaScript intervals configuration
- How to change image rotation time in both .env and app.js
- Added dynamic text color feature to feature list
**Setup Instructions Now Include:**
- Step-by-step Weather API key acquisition
- Google Calendar public iCal URL setup
- Background image guidelines and rotation configuration
- All configuration options clearly documented
Users can now easily set up their own calendar display without any personal information in the codebase.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Automatically adjusts text color for optimal readability:
- Bright backgrounds: Text switches to dark color (#1a1a1a)
- Dark backgrounds: Text remains white (#ffffff)
- Uses luminance formula (0.299×R + 0.587×G + 0.114×B) for accurate brightness detection
- Analyzes images using canvas to sample 100x100 pixels
- Smooth color transitions (0.5s) between background changes
- Adjusts text shadows for better contrast in each mode
- Event time color adapts (#0066cc for light, #4a9eff for dark)
Technical implementation:
- Added calculateImageBrightness() function in app.js
- Modified updateBackground() to analyze and apply appropriate CSS class
- Added .light-bg and .dark-bg CSS classes for text color themes
- Brightness threshold set at 140 (out of 255)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Increased time display from 3rem to 4.5rem with font-weight 600
- Increased date from 1.1rem to 1.6rem with font-weight 500
- Increased current temperature from 2rem to 3rem with font-weight 600
- Increased weather labels from 0.85rem to 1.2rem with font-weight 600
- Increased weather icons from 1.8rem to 2.5rem
- Increased forecast icons from 1.5rem to 2.2rem
- Increased forecast temps from 0.9rem to 1.3rem with high temps at font-weight 700
- Increased section headers from 1.3rem to 2rem with font-weight 700
- Increased day names from 1rem to 1.5rem with font-weight 700
- Increased day dates from 0.85rem to 1.2rem with font-weight 600
- Increased event times from 0.75rem to 1.1rem with font-weight 700
- Increased event titles from 0.9rem to 1.3rem with font-weight 600
- Increased event locations from 0.85rem to 1.1rem with font-weight 500
- Increased joke text from 0.9rem to 1.3rem with font-weight 500
- Added new background images
- Removed old background images
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add -webkit-backdrop-filter for Safari/Chromium (e.g. Raspberry Pi)
- Use rgba(0,0,0,0.15) so header, section and footer show background through
Co-authored-by: Cursor <cursoragent@cursor.com>
- Added timezone support (Pacific/Auckland) for calendar events
- Implemented recurring event handling using recurring_ical_events library
- Created horizontal 5-day column layout for calendar display
- Fixed multi-day event rendering to show events across all active days
- Updated calendar to show next 5 days (today + 4)
- Reduced font sizes and padding for compact display
- Changed image rotation interval to 60 seconds
- Added pytz and recurring_ical_events dependencies
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major improvements to the calendar display application:
- Redesigned weather display: moved forecast to header alongside time
- Added 3-day forecast with icons and high/low temps in header
- Simplified main layout: removed separate weather section, calendar now full-width
- Made layout more compact to fit on one screen without scrolling
- Added 2 new background images for rotation
- Updated image rotation interval to 1 minute
- Improved responsive design and spacing
The display now shows:
- Header: Time/date on left, current weather + 3-day forecast on right
- Main: Full-width calendar events section
- Footer: Dad joke
All elements now fit on a single screen with a clean, readable layout.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Built a full-featured smart display app with Flask backend and responsive frontend.
Features:
- Real-time clock display
- Weather integration (OpenWeatherMap API) for Hamilton, NZ
- Google Calendar integration (placeholder, needs credentials)
- Rotating background images from local directory
- Dad jokes display (icanhazdadjoke API)
Technical stack:
- Backend: Python Flask with API endpoints
- Frontend: HTML/CSS/JavaScript with auto-updating data
- Caching system to avoid API rate limits
- Responsive design for various screen sizes
Deployment ready for Raspberry Pi with systemd service and Chromium kiosk mode setup instructions.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
