diff --git a/README.md b/README.md
index ddf0853..c46ffca 100644
--- a/README.md
+++ b/README.md
@@ -115,16 +115,10 @@ cp /path/to/your/images/*.jpg static/backgrounds/
**Changing Image Rotation Interval:**
-Edit your `.env` file:
-```bash
-# Time in seconds (60 = 1 minute)
-IMAGE_ROTATION_INTERVAL=60
-```
-
-Or edit `static/js/app.js`:
+Edit `static/js/app.js`:
```javascript
const INTERVALS = {
- BACKGROUND: 60000, // Milliseconds (60000 = 1 minute)
+ BACKGROUND: 3600000, // Milliseconds (3600000 = 60 minutes)
...
};
```
@@ -175,27 +169,21 @@ sudo systemctl start calendar-display.service
### Configure Chromium Kiosk Mode
-Edit the autostart file:
+The Pi uses **labwc** (Wayland). Create the autostart entry:
```bash
-mkdir -p ~/.config/lxsession/LXDE-pi
-nano ~/.config/lxsession/LXDE-pi/autostart
+mkdir -p ~/.config/autostart
+nano ~/.config/autostart/chromium-kiosk.desktop
```
-Add these lines:
+Add the following:
-```bash
-@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):
-
-```bash
-sudo apt-get install unclutter
-echo "@unclutter -idle 0" >> ~/.config/lxsession/LXDE-pi/autostart
+```ini
+[Desktop Entry]
+Type=Application
+Name=Chromium Kiosk
+Exec=chromium-browser --ozone-platform=wayland --kiosk --noerrdialogs --incognito --disable-infobars --simulate-touch-screen --force-show-cursor http://localhost:5002
+X-GNOME-Autostart-enabled=true
```
### Reboot
@@ -206,6 +194,18 @@ sudo reboot
The display should now start automatically on boot!
+### Restarting Without Rebooting
+
+A helper script is included to restart both the Flask service and the Chromium kiosk without rebooting:
+
+```bash
+bash ~/restart-calendar.sh
+```
+
+This will:
+1. Restart the `calendar-display` systemd service
+2. Kill and relaunch Chromium in the correct Wayland session
+
## Configuration
### Environment Variables (`.env` file)
@@ -222,7 +222,6 @@ The display should now start automatically on boot!
- `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)
@@ -239,19 +238,18 @@ 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
+ BACKGROUND: 3600000, // 60 minutes
+ JOKE: 3600000 // 1 hour
};
```
**To change image rotation time:**
1. Open `static/js/app.js`
2. Find the `INTERVALS` object at the top
-3. Change `BACKGROUND: 60000` to your desired value in milliseconds
- - 30000 = 30 seconds
- - 60000 = 1 minute
- - 120000 = 2 minutes
+3. Change `BACKGROUND` to your desired value in milliseconds
- 300000 = 5 minutes
+ - 1800000 = 30 minutes
+ - 3600000 = 60 minutes (default)
## Project Structure
diff --git a/static/js/app.js b/static/js/app.js
index 85b2bf1..a3a0b3b 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -3,22 +3,15 @@ const INTERVALS = {
TIME: 1000, // 1 second
WEATHER: 900000, // 15 minutes
CALENDAR: 300000, // 5 minutes
- BACKGROUND: 60000, // 1 minute
+ BACKGROUND: 3600000, // 60 minutes
JOKE: 3600000 // 1 hour
};
-// Weather icon mapping (OpenWeatherMap icons to emoji or text)
-const WEATHER_ICONS = {
- '01d': '☀️', '01n': '🌙',
- '02d': '⛅', '02n': '☁️',
- '03d': '☁️', '03n': '☁️',
- '04d': '☁️', '04n': '☁️',
- '09d': '🌧️', '09n': '🌧️',
- '10d': '🌦️', '10n': '🌧️',
- '11d': '⛈️', '11n': '⛈️',
- '13d': '❄️', '13n': '❄️',
- '50d': '🌫️', '50n': '🌫️'
-};
+// Return an OWM icon image tag for a given icon code
+function weatherIcon(code) {
+ const src = `https://openweathermap.org/img/wn/${code}@2x.png`;
+ return ``;
+}
// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
@@ -69,7 +62,7 @@ async function updateWeather() {
const { current, forecast } = data;
document.getElementById('current-temp').textContent = `${current.temp}°`;
- document.getElementById('weather-icon').textContent = WEATHER_ICONS[current.icon] || '🌤️';
+ document.getElementById('weather-icon').innerHTML = weatherIcon(current.icon);
// Update 3-day forecast in header
const headerForecast = document.getElementById('header-forecast');
@@ -80,7 +73,7 @@ async function updateWeather() {
dayElement.className = 'forecast-item';
dayElement.innerHTML = `