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>
8.6 KiB
Family Calendar Display
A smart display application for Raspberry Pi that shows time, weather, calendar events, and rotating background images.
Project created: February 14, 2026
Features
- 🕐 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)
Requirements
- Python 3.8+
- Raspberry Pi (tested on Pi 3/4) or any Linux system
- Google Calendar API credentials
- OpenWeatherMap API key (free tier)
Quick Start
1. Clone the Repository
git clone ssh://git@gitea.meyfamily.co.nz:2222/luddie/Calender.git
cd Calender
2. Install Dependencies
python3 -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txt
3. Configure Environment Variables
cp .env.example .env
Edit .env and add your API keys:
# Get your OpenWeatherMap API key from: https://openweathermap.org/api
OPENWEATHER_API_KEY=your_api_key_here
# Your Google Calendar ID (found in Google Calendar settings)
GOOGLE_CALENDAR_ID=your_calendar_id@group.calendar.google.com
# Generate a secret key for Flask
FLASK_SECRET_KEY=your_random_secret_key
4. Get OpenWeatherMap API Key
- Go to OpenWeatherMap
- Sign up for a free account
- Navigate to "API keys" section
- Copy your API key
- Add it to your
.envfile asOPENWEATHER_API_KEY
Find Your Location Coordinates:
- Go to LatLong.net
- Search for your city
- Copy the latitude and longitude values
- Add them to your
.envfile asWEATHER_LATandWEATHER_LON
5. Set Up Google Calendar
Option 1: Public iCal Feed (Easiest - No Authentication)
- Open Google Calendar
- Go to Settings (⚙️ gear icon)
- Select the calendar you want to display
- Scroll down to "Integrate calendar"
- Copy the "Public URL to this calendar" in iCal format
- The URL looks like:
https://calendar.google.com/calendar/ical/...@group.calendar.google.com/public/basic.ics
- The URL looks like:
- Add this URL to your
.envfile asGOOGLE_CALENDAR_ICAL_URL - Also copy the Calendar ID (looks like
abc123...@group.calendar.google.com) - Add it to your
.envfile asGOOGLE_CALENDAR_ID
Note: Your calendar must be set to "Public" for this method to work.
Option 2: Google Calendar API with Credentials (Advanced)
If you prefer to use private calendars with authentication:
- Go to Google Cloud Console
- Create a new project or select existing one
- Enable the Google Calendar API
- Create credentials (Service Account)
- Download the credentials JSON file
- Save it as
credentials/google_calendar_credentials.json - Share your calendar with the service account email
6. Add Background Images
Place your images in the static/backgrounds/ directory:
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 your .env file:
# Time in seconds (60 = 1 minute)
IMAGE_ROTATION_INTERVAL=60
Or edit static/js/app.js:
const INTERVALS = {
BACKGROUND: 60000, // Milliseconds (60000 = 1 minute)
...
};
7. Run the Application
python app.py
Visit http://localhost:5000 in your browser.
Raspberry Pi Deployment
Auto-start Flask Application
Create a systemd service:
sudo nano /etc/systemd/system/calendar-display.service
Add the following content:
[Unit]
Description=Calendar Display Flask App
After=network.target
[Service]
User=pi
WorkingDirectory=/home/pi/Calender
ExecStart=/home/pi/Calender/venv/bin/python app.py
Restart=always
Environment="PATH=/home/pi/Calender/venv/bin"
[Install]
WantedBy=multi-user.target
Enable and start the service:
sudo systemctl daemon-reload
sudo systemctl enable calendar-display.service
sudo systemctl start calendar-display.service
Configure Chromium Kiosk Mode
Edit the autostart file:
mkdir -p ~/.config/lxsession/LXDE-pi
nano ~/.config/lxsession/LXDE-pi/autostart
Add these lines:
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --noerrdialogs --disable-infobars --disable-session-crashed-bubble http://localhost:5000
Disable screensaver and cursor (optional):
sudo apt-get install unclutter
echo "@unclutter -idle 0" >> ~/.config/lxsession/LXDE-pi/autostart
Reboot
sudo reboot
The display should now start automatically on boot!
Configuration
Environment Variables (.env file)
Weather Settings:
OPENWEATHER_API_KEY- Your OpenWeatherMap API keyWEATHER_LOCATION- City name and country code (e.g., "London,UK")WEATHER_LAT- Latitude of your locationWEATHER_LON- Longitude of your location
Calendar Settings:
GOOGLE_CALENDAR_ID- Your calendar IDGOOGLE_CALENDAR_ICAL_URL- Public iCal feed URL (easiest method)CALENDAR_DAYS_AHEAD- Number of days ahead to show events (default: 5)
Update Intervals (in seconds):
IMAGE_ROTATION_INTERVAL- Background image rotation (default: 60)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
JavaScript Configuration (static/js/app.js)
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: 60000, // 1 minute (change this for image rotation)
JOKE: 3600000 // 1 hour
};
To change image rotation time:
- Open
static/js/app.js - Find the
INTERVALSobject at the top - Change
BACKGROUND: 60000to your desired value in milliseconds- 30000 = 30 seconds
- 60000 = 1 minute
- 120000 = 2 minutes
- 300000 = 5 minutes
Project Structure
Calender/
├── app.py # Main Flask application
├── config.py # Configuration management
├── requirements.txt # Python dependencies
├── .env # Environment variables (create from .env.example)
├── .env.example # Environment template
├── static/
│ ├── css/style.css # Styling
│ ├── js/app.js # Frontend JavaScript
│ └── backgrounds/ # Background images directory
├── templates/
│ └── index.html # Main display template
└── credentials/
└── google_calendar_credentials.json # Google API credentials
API Endpoints
GET /- Main display pageGET /api/weather- Weather data (cached for 15 min)GET /api/calendar- Calendar events (cached for 5 min)GET /api/background- Random background imageGET /api/joke- Dad joke (cached for 1 hour)
Troubleshooting
Weather not loading
- Check your OpenWeatherMap API key is valid
- 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
- Check the calendar ID is correct
- Ensure the service account has access to the calendar
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/
- Check file permissions:
chmod 644 static/backgrounds/*
Contributing
Feel free to submit issues or pull requests!
License
MIT License - Feel free to use and modify for personal use.
Credits
Built with:
- Flask - Web framework
- OpenWeatherMap API - Weather data
- Google Calendar API - Calendar integration
- icanhazdadjoke - Dad jokes API