feat(image_duration): implement per-image display duration settings and greatly image config page

Author: chvvkumar

ESP32-P4-Allsky-Display.ino

@@ -1977,7 +1977,9 @@ void loop() {
 
     // Only auto-cycle if not in single image refresh mode and not paused for editing
     if (cyclingEnabled && imageSourceCount > 1 && !imageProcessing && !singleImageRefreshMode && !cyclingPausedForEditing) {
-        if (currentTime - lastCycleTime >= currentCycleInterval || lastCycleTime == 0) {
+        // Use per-image duration instead of global cycle interval
+        unsigned long currentImageDuration = configStorage.getImageDuration(currentImageIndex) * 1000;  // Convert seconds to milliseconds
+        if (currentTime - lastCycleTime >= currentImageDuration || lastCycleTime == 0) {
             shouldCycle = true;
             lastCycleTime = currentTime;
             Serial.println("DEBUG: Time to cycle to next image source");

build_info.h

@@ -9,8 +9,8 @@
 #define BUILD_TIME __TIME__
 
 // Git information (updated by compile script)
-#define GIT_COMMIT_HASH "cebc9ea"
-#define GIT_COMMIT_FULL "cebc9ea294c822c18672f6882e0596724af79cdc"
+#define GIT_COMMIT_HASH "c57d2ec"
+#define GIT_COMMIT_FULL "c57d2ec9b40f7458eabb245a109f631a5ec66b48"
 #define GIT_BRANCH "snd"
 
 #endif // BUILD_INFO_H

config_storage.cpp

@@ -49,11 +49,13 @@ void ConfigStorage::setDefaults() {
   for (int i = 0; i < DEFAULT_IMAGE_SOURCE_COUNT && i < 10; i++) {
     config.imageSources[i] = String(DEFAULT_IMAGE_SOURCES[i]);
     config.imageEnabled[i] = true;  // All images enabled by default
+    config.imageDurations[i] = 30;  // Default 30 seconds per image
   }
   // Clear remaining slots
   for (int i = DEFAULT_IMAGE_SOURCE_COUNT; i < 10; i++) {
     config.imageSources[i] = "";
     config.imageEnabled[i] = true;  // Default to enabled
+    config.imageDurations[i] = 30;  // Default 30 seconds per image
   }
 
   // Initialize per-image transformation settings with global defaults
@@ -72,6 +74,7 @@ void ConfigStorage::setDefaults() {
   config.defaultOffsetX = DEFAULT_OFFSET_X;
   config.defaultOffsetY = DEFAULT_OFFSET_Y;
   config.defaultRotation = DEFAULT_ROTATION;
+  config.defaultImageDuration = 30; // Default 30 seconds for new images
   config.backlightFreq = BACKLIGHT_FREQ;
   config.backlightResolution = BACKLIGHT_RESOLUTION;
 
@@ -156,6 +159,9 @@ void ConfigStorage::loadConfig() {
       String enabledKey = "img_en_" + String(i);
       config.imageEnabled[i] =
           preferences.getBool(enabledKey.c_str(), true);  // Default to enabled
+      String durationKey = "img_dur_" + String(i);
+      config.imageDurations[i] =
+          preferences.getULong(durationKey.c_str(), 30);  // Default to 30 seconds
     }
 
     // Load per-image transform settings
@@ -187,6 +193,8 @@ void ConfigStorage::loadConfig() {
         preferences.getInt("def_off_y", config.defaultOffsetY);
     config.defaultRotation =
         preferences.getFloat("def_rot", config.defaultRotation);
+    config.defaultImageDuration =
+        preferences.getULong("def_img_dur", config.defaultImageDuration);
     config.backlightFreq = preferences.getInt("bl_freq", config.backlightFreq);
     config.backlightResolution =
         preferences.getInt("bl_res", config.backlightResolution);
@@ -268,6 +276,8 @@ void ConfigStorage::saveConfig() {
     preferences.putString(key.c_str(), config.imageSources[i]);
     String enabledKey = "img_en_" + String(i);
     preferences.putBool(enabledKey.c_str(), config.imageEnabled[i]);
+    String durationKey = "img_dur_" + String(i);
+    preferences.putULong(durationKey.c_str(), config.imageDurations[i]);
   }
 
   // Save per-image transform settings
@@ -292,6 +302,7 @@ void ConfigStorage::saveConfig() {
   preferences.putInt("def_off_x", config.defaultOffsetX);
   preferences.putInt("def_off_y", config.defaultOffsetY);
   preferences.putFloat("def_rot", config.defaultRotation);
+  preferences.putULong("def_img_dur", config.defaultImageDuration);
   preferences.putInt("bl_freq", config.backlightFreq);
   preferences.putInt("bl_res", config.backlightResolution);
 
@@ -485,6 +496,12 @@ void ConfigStorage::setDefaultRotation(float rotation) {
     _dirty = true;
   }
 }
+void ConfigStorage::setDefaultImageDuration(unsigned long duration) {
+  if (config.defaultImageDuration != duration) {
+    config.defaultImageDuration = duration;
+    _dirty = true;
+  }
+}
 void ConfigStorage::setBacklightFreq(int freq) {
   if (config.backlightFreq != freq) {
     config.backlightFreq = freq;
@@ -553,6 +570,7 @@ float ConfigStorage::getDefaultScaleY() { return config.defaultScaleY; }
 int ConfigStorage::getDefaultOffsetX() { return config.defaultOffsetX; }
 int ConfigStorage::getDefaultOffsetY() { return config.defaultOffsetY; }
 float ConfigStorage::getDefaultRotation() { return config.defaultRotation; }
+unsigned long ConfigStorage::getDefaultImageDuration() { return config.defaultImageDuration; }
 int ConfigStorage::getBacklightFreq() { return config.backlightFreq; }
 int ConfigStorage::getBacklightResolution() {
   return config.backlightResolution;
@@ -621,6 +639,7 @@ void ConfigStorage::addImageSource(const String &url) {
   if (config.imageSourceCount < 10) {
     config.imageSources[config.imageSourceCount] = url;
     config.imageEnabled[config.imageSourceCount] = true;  // New images enabled by default
+    config.imageDurations[config.imageSourceCount] = config.defaultImageDuration;  // Use default duration for new images
     config.imageSourceCount++;
     _dirty = true;
   }
@@ -997,6 +1016,22 @@ bool ConfigStorage::isImageEnabled(int index) {
   return true;  // Default to enabled if index out of range
 }
 
+void ConfigStorage::setImageDuration(int index, unsigned long duration) {
+  if (index >= 0 && index < 10) {
+    if (config.imageDurations[index] != duration) {
+      config.imageDurations[index] = duration;
+      _dirty = true;
+    }
+  }
+}
+
+unsigned long ConfigStorage::getImageDuration(int index) {
+  if (index >= 0 && index < 10) {
+    return config.imageDurations[index];
+  }
+  return 30;  // Default to 30 seconds if index out of range
+}
+
 // Home Assistant REST Control getters
 String ConfigStorage::getHABaseUrl() { return config.haBaseUrl; }
 String ConfigStorage::getHAAccessToken() { return config.haAccessToken; }

config_storage.h

@@ -48,6 +48,7 @@ class ConfigStorage {
     void setDefaultOffsetX(int offset);
     void setDefaultOffsetY(int offset);
     void setDefaultRotation(float rotation);
+    void setDefaultImageDuration(unsigned long duration);
     void setBacklightFreq(int freq);
     void setBacklightResolution(int resolution);
     void setWatchdogTimeout(unsigned long timeout);
@@ -66,6 +67,8 @@ class ConfigStorage {
     void clearImageSources();
     void setImageEnabled(int index, bool enabled);
     bool isImageEnabled(int index);
+    void setImageDuration(int index, unsigned long duration);
+    unsigned long getImageDuration(int index);
 
     // Individual parameter getters
     String getWiFiSSID();
@@ -92,6 +95,7 @@ class ConfigStorage {
     int getDefaultOffsetX();
     int getDefaultOffsetY();
     float getDefaultRotation();
+    unsigned long getDefaultImageDuration();
     int getBacklightFreq();
     int getBacklightResolution();
     unsigned long getWatchdogTimeout();
@@ -213,6 +217,7 @@ class ConfigStorage {
         int imageSourceCount;
         String imageSources[10];  // Array of image source URLs (MAX_IMAGE_SOURCES)
         bool imageEnabled[10];  // Array of enabled/disabled states for each image source
+        unsigned long imageDurations[10];  // Display duration in seconds for each image source
 
         // Per-image transformation settings
         ImageTransform imageTransforms[10];  // Transformation settings for each image source
@@ -225,6 +230,7 @@ class ConfigStorage {
         int defaultOffsetX;
         int defaultOffsetY;
         float defaultRotation;
+        unsigned long defaultImageDuration;
         int backlightFreq;
         int backlightResolution;
 

docs/API_REFERENCE.md

@@ -1054,6 +1054,71 @@ float getImageRotation(int index);
 void copyDefaultsToImageTransform(int index);
 ```
 
+#### Per-Image Duration Settings
+
+```cpp
+/**
+ * @brief Set display duration for specific image.
+ * @param index Image index (0-9)
+ * @param duration Display time in seconds (5-3600)
+ * 
+ * Sets how long this specific image will be displayed before switching
+ * to the next image in the cycle.
+ */
+void setImageDuration(int index, unsigned long duration);
+
+/**
+ * @brief Get display duration for specific image.
+ * @param index Image index (0-9)
+ * @return Duration in seconds, or default (30) if index invalid
+ */
+unsigned long getImageDuration(int index);
+
+/**
+ * @brief Set default duration for newly added images.
+ * @param duration Default display time in seconds (5-3600)
+ * 
+ * When new images are added via addImageSource(), they will use this
+ * default duration value.
+ */
+void setDefaultImageDuration(unsigned long duration);
+
+/**
+ * @brief Get default duration for newly added images.
+ * @return Default duration in seconds (default: 30)
+ */
+unsigned long getDefaultImageDuration();
+```
+
+#### Image Enable/Disable
+
+```cpp
+/**
+ * @brief Enable or disable specific image in cycling order.
+ * @param index Image index (0-9)
+ * @param enabled true to include in cycle, false to skip
+ * 
+ * Disabled images are not displayed during auto-cycling but remain
+ * in the configuration and can be re-enabled later.
+ */
+void setImageEnabled(int index, bool enabled);
+
+/**
+ * @brief Check if image is enabled in cycling order.
+ * @param index Image index (0-9)
+ * @return true if enabled, false if disabled or index invalid
+ */
+bool isImageEnabled(int index);
+
+/**
+ * @brief Get count of enabled images.
+ * @return Number of images with enabled=true
+ * 
+ * Useful for determining if cycling should occur (needs >1 enabled).
+ */
+int getEnabledImageCount();
+```
+
 ---
 
 ## SystemMonitor

web_config.cpp

@@ -54,6 +54,7 @@ bool WebConfig::begin(int port) {
         server->on("/api/toggle-image-enabled", HTTP_POST, [this]() { handleToggleImageEnabled(); });
         server->on("/api/select-image", HTTP_POST, [this]() { handleSelectImage(); });
         server->on("/api/clear-editing-state", HTTP_POST, [this]() { handleClearEditingState(); });
+        server->on("/api/update-image-duration", HTTP_POST, [this]() { handleUpdateImageDuration(); });
         server->on("/api/restart", HTTP_POST, [this]() { handleRestart(); });
         server->on("/api/factory-reset", HTTP_POST, [this]() { handleFactoryReset(); });
         server->on("/api/set-log-severity", HTTP_POST, [this]() { handleSetLogSeverity(); });

web_config.h

@@ -58,6 +58,7 @@ class WebConfig {
     void handleToggleImageEnabled();
     void handleSelectImage();
     void handleClearEditingState();
+    void handleUpdateImageDuration();
     void handleRestart();
     void handleFactoryReset();
     void handleSetLogSeverity();

web_config_api.cpp

@@ -126,6 +126,10 @@ void WebConfig::handleSaveConfig() {
             unsigned long interval = value.toInt() * 1000UL;
             configStorage.setCycleInterval(interval);
         }
+        else if (name == "default_image_duration") {
+            unsigned long duration = value.toInt();
+            configStorage.setDefaultImageDuration(duration);
+        }
 
         // Advanced settings
         else if (name == "update_interval") {
@@ -699,6 +703,32 @@ void WebConfig::handleClearEditingState() {
     sendResponse(200, "application/json", "{\"status\":\"success\"}");
 }
 
+void WebConfig::handleUpdateImageDuration() {
+    if (!server->hasArg("index") || !server->hasArg("duration")) {
+        sendResponse(400, "application/json", "{\"status\":\"error\",\"message\":\"Missing parameters\"}");
+        return;
+    }
+    
+    int index = server->arg("index").toInt();
+    unsigned long duration = server->arg("duration").toInt();
+    
+    if (index < 0 || index >= configStorage.getImageSourceCount()) {
+        sendResponse(400, "application/json", "{\"status\":\"error\",\"message\":\"Invalid index\"}");
+        return;
+    }
+    
+    if (duration < 5 || duration > 3600) {
+        sendResponse(400, "application/json", "{\"status\":\"error\",\"message\":\"Duration must be between 5 and 3600 seconds\"}");
+        return;
+    }
+    
+    LOG_INFO_F("[WebAPI] Updating image #%d duration to %lu seconds\n", index + 1, duration);
+    configStorage.setImageDuration(index, duration);
+    configStorage.saveConfig();
+    
+    sendResponse(200, "application/json", "{\"status\":\"success\"}");
+}
+
 void WebConfig::handleFactoryReset() {
     LOG_WARNING("[WebAPI] Factory reset requested via web interface");
     configStorage.resetToDefaults();
@@ -894,6 +924,7 @@ void WebConfig::handleGetAllInfo() {
 
     if (configStorage.getCyclingEnabled()) {
         json += "\"cycle_interval\":" + String(configStorage.getCycleInterval()) + ",";
+        json += "\"default_image_duration\":" + String(configStorage.getDefaultImageDuration()) + ",";
         json += "\"random_order\":" + String(configStorage.getRandomOrder() ? "true" : "false") + ",";
         json += "\"current_index\":" + String(configStorage.getCurrentImageIndex()) + ",";
         json += "\"source_count\":" + String(configStorage.getImageSourceCount()) + ",";

web_config_html.h

@@ -154,6 +154,7 @@ function toggleSelectAll(checked){const checkboxes=document.querySelectorAll('.i
 function updateBulkDeleteButton(){const checkboxes=document.querySelectorAll('.image-select-checkbox');const selected=Array.from(checkboxes).filter(cb=>cb.checked);const count=selected.length;const countSpan=document.getElementById('selectedCount');const bulkBtn=document.getElementById('bulkDeleteBtn');const selectAllCb=document.getElementById('selectAllImages');if(countSpan)countSpan.textContent=count;if(bulkBtn)bulkBtn.style.display=count>0?'inline-flex':'none';if(selectAllCb)selectAllCb.checked=(count>0&&count===checkboxes.length)}
 function bulkDeleteSelected(btn){const checkboxes=document.querySelectorAll('.image-select-checkbox');const selected=Array.from(checkboxes).filter(cb=>cb.checked);const indices=selected.map(cb=>parseInt(cb.getAttribute('data-index')));if(indices.length===0){showToast('No images selected','warning');return}const total=checkboxes.length;if(indices.length===total){showToast('Cannot delete all sources. At least one must remain.','error');return}showConfirmModal('🗑️ Delete Selected Images','Are you sure you want to delete '+indices.length+' selected image source(s)?',()=>{showButtonFeedback(btn,'loading','Deleting...');const formData=new FormData();formData.append('indices',JSON.stringify(indices));fetch('/api/bulk-delete-sources',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status==='success'){showButtonFeedback(btn,'success','Deleted!');showToast(data.message||'Selected sources deleted','success');setTimeout(()=>location.reload(),1000)}else{showButtonFeedback(btn,'error','Error');showToast('Error: '+data.message,'error')}}).catch(error=>{showButtonFeedback(btn,'error','Failed');showToast('Network error','error')})})}
 function toggleImageEnabled(index,btn){const formData=new FormData();formData.append('index',index);fetch('/api/toggle-image-enabled',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status==='success'){showToast(data.enabled?'Image enabled':'Image disabled','success');setTimeout(()=>location.reload(),500)}else{showToast('Failed to toggle image state','error')}}).catch(error=>{showToast('Network error','error')})}
+function updateImageDuration(index,input){const duration=parseInt(input.value);if(duration<5||duration>3600){showToast('Duration must be between 5 and 3600 seconds','error');return}const formData=new FormData();formData.append('index',index);formData.append('duration',duration);fetch('/api/update-image-duration',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status==='success'){showToast('Duration updated','success')}else{showToast('Failed to update duration','error')}}).catch(error=>{showToast('Network error','error')})}
 function selectImageForEditing(index,btn){showButtonFeedback(btn,'loading','Loading...');const formData=new FormData();formData.append('index',index);fetch('/api/select-image',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status==='success'){showToast('Switched to image #'+(index+1),'success');if(typeof resetCycleTimer==='function')resetCycleTimer();location.reload()}else{showToast('Failed to switch image','error');showButtonFeedback(btn,'error','Error')}}).catch(error=>{showToast('Network error','error');showButtonFeedback(btn,'error','Failed')})}
 function updateSelectedImageTransform(property,value){const index=parseInt(document.getElementById('selectedImageNumber').textContent)-1;const formData=new FormData();formData.append('index',index);formData.append('property',property);formData.append('value',value);fetch('/api/update-transform',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status!=='success'){showToast('Failed to update '+property,'error')}else{if(typeof resetCycleTimer==='function')resetCycleTimer()}}).catch(error=>{showToast('Network error','error')})}
 function copyDefaultsToSelectedImage(btn){const index=parseInt(document.getElementById('selectedImageNumber').textContent)-1;showConfirmModal('📋 Copy Global Defaults','Copy global default transformation settings to Image #'+(index+1)+'?',()=>{showButtonFeedback(btn,'loading','Copying...');const formData=new FormData();formData.append('index',index);fetch('/api/copy-defaults',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.status==='success'){showButtonFeedback(btn,'success','Copied!');showToast('Defaults copied','success');setTimeout(()=>location.reload(),1000)}else{showButtonFeedback(btn,'error','Error');showToast('Failed to copy defaults','error')}}).catch(error=>{showButtonFeedback(btn,'error','Failed');showToast('Network error','error')})})}