mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-12-23 23:49:11 +01:00
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
This commit is contained in:
JeLuF
GitHub
parent
4bc7bca60d
commit
1023f5f7cc
@ -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)"> %
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 = [
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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)"> ${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'))
|
||||
})
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user