Merge pull request 'fix/background-rotation-interval' (#3) from fix/background-rotation-interval into first

Reviewed-on: #3

README.md

@@ -115,16 +115,10 @@ cp /path/to/your/images/*.jpg static/backgrounds/
 
 **Changing Image Rotation Interval:**
 
-Edit your `.env` file:
+Edit `static/js/app.js`:
-```bash
-# Time in seconds (60 = 1 minute)
-IMAGE_ROTATION_INTERVAL=60
-```
-
-Or 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
+mkdir -p ~/.config/autostart
-nano ~/.config/lxsession/LXDE-pi/autostart
+nano ~/.config/autostart/chromium-kiosk.desktop
 ```
 
-Add these lines:
+Add the following:
 
-```bash
+```ini
-@xset s off
+[Desktop Entry]
-@xset -dpms
+Type=Application
-@xset s noblank
+Name=Chromium Kiosk
-@chromium-browser --kiosk --noerrdialogs --disable-infobars --disable-session-crashed-bubble http://localhost:5000
+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
-
-Disable screensaver and cursor (optional):
-
-```bash
-sudo apt-get install unclutter
-echo "@unclutter -idle 0" >> ~/.config/lxsession/LXDE-pi/autostart
 ```
 
 ### 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)
+    BACKGROUND: 3600000,     // 60 minutes
-    JOKE: 3600000           // 1 hour
+    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
+3. Change `BACKGROUND` to your desired value in milliseconds
-   - 30000 = 30 seconds
-   - 60000 = 1 minute
-   - 120000 = 2 minutes
    - 300000 = 5 minutes
+   - 1800000 = 30 minutes
+   - 3600000 = 60 minutes (default)
 
 ## Project Structure
 

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)
+// Return an OWM icon image tag for a given icon code
-const WEATHER_ICONS = {
+function weatherIcon(code) {
-    '01d': '☀️', '01n': '🌙',
+    const src = `https://openweathermap.org/img/wn/${code}@2x.png`;
-    '02d': '⛅', '02n': '☁️',
+    return `<img src="${src}" alt="${code}" class="owm-icon">`;
-    '03d': '☁️', '03n': '☁️',
+}
-    '04d': '☁️', '04n': '☁️',
-    '09d': '🌧️', '09n': '🌧️',
-    '10d': '🌦️', '10n': '🌧️',
-    '11d': '⛈️', '11n': '⛈️',
-    '13d': '❄️', '13n': '❄️',
-    '50d': '🌫️', '50n': '🌫️'
-};
 
 // 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 = `
                 <div class="weather-label">${day.date}</div>
-                <div class="forecast-icon">${WEATHER_ICONS[day.icon] || '🌤️'}</div>
+                <div class="forecast-icon">${weatherIcon(day.icon)}</div>
                 <div class="forecast-temps">
                     <span class="high">${day.temp_max}°</span>
                     <span class="low">${day.temp_min}°</span>