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 89b6bf2..a3a0b3b 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -7,18 +7,11 @@ const INTERVALS = { 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 `${code}`; +} // 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 = `
${day.date}
-
${WEATHER_ICONS[day.icon] || '🌤️'}
+
${weatherIcon(day.icon)}
${day.temp_max}° ${day.temp_min}°