Redesign UI as light-themed week-grid calendar matching Skylight-style device
- 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>
This commit is contained in:
85
README.md
85
README.md
@@ -1,17 +1,33 @@
|
||||
# Family Calendar Display
|
||||
|
||||
A smart display application for Raspberry Pi that shows time, weather, calendar events, and rotating background images.
|
||||
A smart display application for Raspberry Pi that shows a color-coded, week-view family calendar with live weather, styled after wall-mounted family calendar devices (e.g. Skylight).
|
||||
|
||||
**Project created:** February 14, 2026
|
||||
**UI redesigned:** June 30, 2026 — switched from a scrolling event list over a photo background to a light-themed week grid with per-person event colors.
|
||||
|
||||
## Features
|
||||
|
||||
- 📅 **Week-View Calendar** - Sunday–Saturday grid with a "Next Week" preview column, Prev/Next navigation
|
||||
- 👨👩👧👦 **Color-Coded Family Members** - Events tagged `[Name]` are shown in that person's color (see below)
|
||||
- 🔎 **Filter by Person** - Dropdown to show only one family member's events
|
||||
- 🌤️ **Weather** - Current temperature and icon in the header (OpenWeatherMap)
|
||||
- 🕐 **Real-time Clock** - Current time and date display
|
||||
- 🌤️ **Weather** - Current weather and 3-day forecast (OpenWeatherMap)
|
||||
- 📅 **Google Calendar** - Calendar events display (supports public iCal feeds)
|
||||
- 🖼️ **Rotating Backgrounds** - Beautiful images from local directory
|
||||
- 🎨 **Dynamic Text Color** - Automatically adjusts text color based on background brightness
|
||||
- 😄 **Dad Jokes** - Random jokes to brighten your day (optional)
|
||||
- 📌 **Read-only by design** - The "+" button is a visual affordance only; this app reads a public iCal feed and cannot write events back to Google Calendar. Add/edit events directly in Google Calendar.
|
||||
|
||||
> The previous rotating-background-photo and dad-joke features were dropped in the redesign to match the cleaner device look. The `/api/background` and `/api/joke` endpoints still exist server-side if you want to bring them back.
|
||||
|
||||
## Family Member Colors
|
||||
|
||||
Prefix an event title in Google Calendar with `[Name]` (case-insensitive) and the app will strip the prefix and color the event card accordingly. Unprefixed events fall back to a neutral gray "Family" color.
|
||||
|
||||
| Name / alias | Color |
|
||||
|---|---|
|
||||
| `[Ludwig]` or `[Dad]` | Blue |
|
||||
| `[Michelle]` or `[Mom]` | Pink |
|
||||
| `[Jason]` | Green |
|
||||
| `[Daniel]` | Yellow |
|
||||
|
||||
Example: an event titled `[Daniel] Football Practice` displays as **Football Practice** in Daniel's yellow card. Member names/aliases/colors are configured in `config.py` (`FAMILY_MEMBERS`).
|
||||
|
||||
## Requirements
|
||||
|
||||
@@ -98,30 +114,9 @@ If you prefer to use private calendars with authentication:
|
||||
6. Save it as `credentials/google_calendar_credentials.json`
|
||||
7. Share your calendar with the service account email
|
||||
|
||||
### 6. Add Background Images
|
||||
### 6. Set Up Family Member Colors (optional)
|
||||
|
||||
Place your images in the `static/backgrounds/` directory:
|
||||
|
||||
```bash
|
||||
cp /path/to/your/images/*.jpg static/backgrounds/
|
||||
```
|
||||
|
||||
**Supported formats:** JPG, JPEG, PNG, GIF, WebP
|
||||
|
||||
**Recommended specifications:**
|
||||
- Resolution: 1920x1080 or higher
|
||||
- Aspect ratio: 16:9 (for full-screen displays)
|
||||
- File size: Keep under 5MB for faster loading
|
||||
|
||||
**Changing Image Rotation Interval:**
|
||||
|
||||
Edit `static/js/app.js`:
|
||||
```javascript
|
||||
const INTERVALS = {
|
||||
BACKGROUND: 3600000, // Milliseconds (3600000 = 60 minutes)
|
||||
...
|
||||
};
|
||||
```
|
||||
Prefix event titles in your calendar with `[Name]` to color-code them per person — see [Family Member Colors](#family-member-colors) above. Edit `FAMILY_MEMBERS` in `config.py` to change names, aliases, or colors.
|
||||
|
||||
### 7. Run the Application
|
||||
|
||||
@@ -219,12 +214,11 @@ This will:
|
||||
**Calendar Settings:**
|
||||
- `GOOGLE_CALENDAR_ID` - Your calendar ID
|
||||
- `GOOGLE_CALENDAR_ICAL_URL` - Public iCal feed URL (easiest method)
|
||||
- `CALENDAR_DAYS_AHEAD` - Number of days ahead to show events (default: 5)
|
||||
- `CALENDAR_DAYS_AHEAD` - Used only by the legacy events fetch; the week view always fetches two weeks at a time
|
||||
|
||||
**Update Intervals (in seconds):**
|
||||
- `WEATHER_UPDATE_INTERVAL` - Weather refresh interval (default: 900)
|
||||
- `CALENDAR_UPDATE_INTERVAL` - Calendar refresh interval (default: 300)
|
||||
- `JOKE_UPDATE_INTERVAL` - Dad joke refresh interval (default: 3600)
|
||||
|
||||
**Other:**
|
||||
- `FLASK_SECRET_KEY` - Flask session secret key
|
||||
@@ -237,20 +231,10 @@ For more precise control over update intervals, edit the `INTERVALS` object:
|
||||
const INTERVALS = {
|
||||
TIME: 1000, // 1 second
|
||||
WEATHER: 900000, // 15 minutes
|
||||
CALENDAR: 300000, // 5 minutes
|
||||
BACKGROUND: 3600000, // 60 minutes
|
||||
JOKE: 3600000 // 1 hour
|
||||
CALENDAR: 300000 // 5 minutes
|
||||
};
|
||||
```
|
||||
|
||||
**To change image rotation time:**
|
||||
1. Open `static/js/app.js`
|
||||
2. Find the `INTERVALS` object at the top
|
||||
3. Change `BACKGROUND` to your desired value in milliseconds
|
||||
- 300000 = 5 minutes
|
||||
- 1800000 = 30 minutes
|
||||
- 3600000 = 60 minutes (default)
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
@@ -274,9 +258,9 @@ Calender/
|
||||
|
||||
- `GET /` - Main display page
|
||||
- `GET /api/weather` - Weather data (cached for 15 min)
|
||||
- `GET /api/calendar` - Calendar events (cached for 5 min)
|
||||
- `GET /api/background` - Random background image
|
||||
- `GET /api/joke` - Dad joke (cached for 1 hour)
|
||||
- `GET /api/calendar?start=YYYY-MM-DD` - Sunday-starting week of events plus a "Next Week" preview, color-coded by family member (cached per-week for 5 min). `start` defaults to the current week if omitted.
|
||||
- `GET /api/background` - Random background image (no longer used by the UI, kept for future use)
|
||||
- `GET /api/joke` - Dad joke (no longer used by the UI, kept for future use)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
@@ -285,18 +269,17 @@ Calender/
|
||||
- Ensure you're not exceeding the free tier rate limits (60 calls/min)
|
||||
|
||||
### Calendar not loading
|
||||
- Verify Google Calendar API credentials are set up correctly
|
||||
- Verify the iCal URL in `.env` is correct and the calendar is set to Public
|
||||
- Check the calendar ID is correct
|
||||
- Ensure the service account has access to the calendar
|
||||
|
||||
### Events showing the wrong color / "Family" instead of a person
|
||||
- The event title must start with `[Name]` exactly, e.g. `[Daniel] Football Practice`
|
||||
- Check `FAMILY_MEMBERS` in `config.py` for the recognized aliases
|
||||
|
||||
### Display not starting on boot
|
||||
- Check systemd service status: `sudo systemctl status calendar-display.service`
|
||||
- View logs: `sudo journalctl -u calendar-display.service -f`
|
||||
|
||||
### Background images not showing
|
||||
- Ensure images are in [static/backgrounds/](static/backgrounds/)
|
||||
- Check file permissions: `chmod 644 static/backgrounds/*`
|
||||
|
||||
## Contributing
|
||||
|
||||
Feel free to submit issues or pull requests!
|
||||
|
||||
Reference in New Issue
Block a user