Slider for preview image size (#767)

* Slider for preview image size
Add a slider to the system settings so that users can configure the max size of thumbnails

* Remove debug output

* Fix var definition

* Move slider to 'display settings' menu

* thumbnail slider CSS

ui/index.html

@@ -288,6 +288,20 @@
                 <div id="preview-tools">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
                     <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-download"></i> Download All Images</button>
+                    <div class="dropdown display-settings">
+                        <button class="dropbtn primaryButton">Display settings</button>
+                        <div class="dropdown-content">
+                            <div class="auto-scroll dropdown-item">
+                                <div class="input-toggle"><input id="auto_scroll" name="auto_scroll" type="checkbox"><label for="auto_scroll"></label></div>
+                                <label for="auto_scroll">Scroll to generated image</label>
+                            </div>
+                            <div class="dropdown-item">
+                                Preview image size limit:<br/>
+                                <input id="thumbnail_size" name="thumbnail_size" class="editor-slider" type="range" value="70" min="5" max="200" oninput="sliderUpdate(event)"> 
+                                <input id="thumbnail_size-input" name="thumbnail_size-input" size="3" value="70" pattern="^[0-9.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)">&nbsp;%
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

ui/media/css/main.css

@@ -403,9 +403,6 @@ div.img-preview img {
     position: absolute;
     z-index: 2;
 
-    background: var(--background-color4);
-    border: 2px solid var(--background-color2);
-    border-radius: 7px;
     padding: 5px;
     margin-bottom: 15px;
     box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
@@ -414,6 +411,28 @@ div.img-preview img {
     display: block;
 }
 
+.display-settings {
+    float: right;
+}
+
+.display-settings .dropdown-content {
+    right: 12px;
+}
+
+.dropdown-item {
+    padding: 4px;
+    background: var(--background-color4);
+    border: 2px solid var(--background-color2);
+}
+
+.dropdown-item:first-child {
+    border-radius: 7px 7px 0px 0px;
+}
+
+.dropdown-item:last-child {
+    border-radius: 0px 0px 7px 7px;
+}
+
 .imageTaskContainer {
     border: 1px solid var(--background-color2);
     margin-bottom: 10pt;

ui/media/js/auto-save.js

@@ -44,7 +44,8 @@ const SETTINGS_IDS_LIST = [
     "metadata_output_format",
     "auto_save_settings",
     "apply_color_correction",
-    "process_order_toggle"
+    "process_order_toggle",
+    "thumbnail_size"
 ]
 
 const IGNORE_BY_DEFAULT = [

ui/media/js/main.js

@@ -47,6 +47,7 @@ let blockNSFWField = document.querySelector('#block_nsfw')
 let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
 let updateBranchLabel = document.querySelector("#updateBranchLabel")
 let streamImageProgressField = document.querySelector("#stream_image_progress")
+let thumbnailSizeField = document.querySelector("#thumbnail_size")
 
 let makeImageBtn = document.querySelector('#makeImage')
 let stopImageBtn = document.querySelector('#stopImage')
@@ -1330,6 +1331,24 @@ outputFormatField.addEventListener('change', e => {
         outputQualityRow.style.display='table-row'
     }
 })
+/********************* Zoom Slider **********************/
+thumbnailSizeField.addEventListener('input', () => {
+    (function (s) {
+        for (var j =0; j < document.styleSheets.length; j++) {
+            let cssSheet = document.styleSheets[j]
+            for (var i = 0; i < cssSheet.cssRules.length; i++) {
+                var rule = cssSheet.cssRules[i];
+                if (rule.selectorText == "div.img-preview img") {
+                  rule.style['max-height'] = s+'vh';
+                  rule.style['max-width'] = s+'vw';
+                  return;
+                }
+            }
+        }
+    })(thumbnailSizeField.value)
+})
+
+
 
 function checkRandomSeed() {
     if (randomSeedField.checked) {

ui/media/js/parameters.js

@@ -7,6 +7,7 @@
     checkbox: "checkbox",
     select: "select",
     select_multiple: "select_multiple",
+    slider: "slider",
     custom: "custom",
 };
 
@@ -155,6 +156,17 @@ var PARAMETERS = [
         icon: "fa-gear",
         default: true,
     },
+    /* {
+        id: "thumbnail_size",
+        type: ParameterType.slider,
+        label: "Maximum image display size",
+        note: "Downscale large images to keep a better overview",
+        icon: "fa-compress",
+        slider_min: 1,
+        slider_max: 100,
+        slider_unit: "%",
+        default: 70
+    }, */
     {
         id: "confirm_dangerous_actions",
         type: ParameterType.checkbox,
@@ -199,6 +211,16 @@ function getParameterSettingsEntry(id) {
     return parameter[0].settingsEntry
 }
 
+function sliderUpdate(event) {
+    if (event.srcElement.id.endsWith('-input')) {
+        console.log(event.srcElement.value)
+        document.getElementById(event.srcElement.id.slice(0,-6)).value = event.srcElement.value
+    } else {
+        console.log(event.srcElement.value)
+        document.getElementById(event.srcElement.id+'-input').value = event.srcElement.value
+    }
+}
+
 function getParameterElement(parameter) {
     switch (parameter.type) {
         case ParameterType.checkbox:
@@ -209,6 +231,8 @@ function getParameterElement(parameter) {
             var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
             var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
             return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
+        case ParameterType.slider:
+            return `<input id="${parameter.id}" name="${parameter.id}" class="editor-slider" type="range" value="${parameter.default}" min="${parameter.slider_min}" max="${parameter.slider_max}" oninput="sliderUpdate(event)"> <input id="${parameter.id}-input" name="${parameter.id}-input" size="4" value="${parameter.default}" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)">&nbsp;${parameter.slider_unit}`
         case ParameterType.custom:
             return parameter.render(parameter)
         default:
@@ -461,3 +485,4 @@ saveSettingsBtn.addEventListener('click', function() {
     saveSettingsBtn.classList.add('active')
     asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
 })
+

ui/plugins/ui/Autoscroll.plugin.js

@@ -1,20 +1,6 @@
 (function () {
     "use strict"
 
-    var styleSheet = document.createElement("style");
-    styleSheet.textContent = `
-        .auto-scroll {
-            float: right;
-        }
-    `;
-    document.head.appendChild(styleSheet);
-    
-    const autoScrollControl = document.createElement('div');
-    autoScrollControl.innerHTML = `<input id="auto_scroll" name="auto_scroll" type="checkbox">
-                            <label for="auto_scroll">Scroll to generated image</label>`
-    autoScrollControl.className = "auto-scroll"
-    clearAllPreviewsBtn.parentNode.insertBefore(autoScrollControl, clearAllPreviewsBtn.nextSibling)
-    prettifyInputs(document);
     let autoScroll = document.querySelector("#auto_scroll")
     
     // save/restore the toggle state