Thumbnail class and history image buttons
Daniele
parent
1d672ecf52
commit
fb7d85a621
57
index.html
57
index.html
|
|
@ -97,9 +97,6 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* .viewer-image-button:hover {
|
||||
background-color: #333f52;
|
||||
} */
|
||||
.viewer-image-container {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
|
@ -111,11 +108,52 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.viewer-image-container:hover .thumbnail-image-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumbnail-image-button{
|
||||
display: none;
|
||||
/* background-color: #495b79; */
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
/* bottom: 0;
|
||||
left: 0; */
|
||||
width: 100%;
|
||||
/* height: 20px; */
|
||||
margin: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.thumbnail-image-button:nth-child(2) {
|
||||
border-color:green;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
.thumbnail-image-button:nth-child(3) {
|
||||
border-color:pink;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
.thumbnail-image-button:nth-child(4) {
|
||||
border-color:yellow;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
.thumbnail-image-button:nth-child(5) {
|
||||
border-color:red;
|
||||
top:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1244,7 +1282,18 @@
|
|||
</div>
|
||||
Edit Text
|
||||
</sp-action-button>
|
||||
|
||||
<sp-action-button id="svg_sp_btn_datadownload" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
|
||||
<div slot="icon" style="fill: currentColor">
|
||||
<svg viewBox="0 0 18 18" style="width: 18px; height: 18px;">
|
||||
<path
|
||||
d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z" />
|
||||
<path d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z" />
|
||||
<path
|
||||
d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z" />
|
||||
<path d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</sp-action-button>
|
||||
<!-- <img width="15px" height="15px" src="./icon/ftcopy.svg"> -->
|
||||
</div>
|
||||
<img
|
||||
|
|
|
|||
62
index.js
62
index.js
|
|
@ -37,6 +37,7 @@ const horde_native = require('./utility/sdapi/horde_native')
|
|||
const io = require('./utility/io')
|
||||
const dummy = require('./utility/dummy')
|
||||
const general = require('./utility/general')
|
||||
const thumbnail = require('./thumbnail')
|
||||
let g_horde_generator = new horde_native.hordeGenerator()
|
||||
|
||||
//REFACTOR: move to session.js
|
||||
|
|
@ -3646,34 +3647,11 @@ document
|
|||
metadata_jsons[i]
|
||||
)
|
||||
console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
|
||||
const img_container = html_manip.addHistoryButtonsHtml(img)
|
||||
container.appendChild(img_container)
|
||||
|
||||
// container.appendChild(img)
|
||||
img.addEventListener('click', async (e) => {
|
||||
//auto fill the ui with metadata
|
||||
const metadata_json = JSON.parse(
|
||||
e.target.dataset.metadata_json_string
|
||||
)
|
||||
console.log('metadata_json: ', metadata_json)
|
||||
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
||||
|
||||
//extract auto_metadata into the preset metadata
|
||||
function convertAutoMetadataToPresset(metadata_json) {
|
||||
metadata_json['seed'] =
|
||||
metadata_json?.auto_metadata?.Seed
|
||||
}
|
||||
convertAutoMetadataToPresset(metadata_json)
|
||||
document.querySelector('#historySeedLabel').textContent =
|
||||
metadata_json?.seed
|
||||
// autoFillInSettings(metadata_json)
|
||||
g_ui_settings.autoFillInSettings(metadata_json)
|
||||
|
||||
//load the image onto the canvas
|
||||
// let image_path = img.dataset.path
|
||||
// const image_path_escape = image_path.replace(/\o/g,"/o") //escape string "\o" in "\output"
|
||||
// await placeEmbedded(image_path_escape)
|
||||
})
|
||||
const img_container = thumbnail.Thumbnail.wrapImgInContainer(img,'viewer-image-container')
|
||||
thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn', 'place the image on the canvas', moveHistoryImageToLayer, img)
|
||||
thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn_datadownload', 'download history data to current settings', getHistoryMetadata, img)
|
||||
container.appendChild(img_container)
|
||||
i++
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
@ -3681,6 +3659,36 @@ document
|
|||
}
|
||||
})
|
||||
|
||||
function getHistoryMetadata(img){
|
||||
debugger
|
||||
//auto fill the ui with metadata
|
||||
const metadata_json = JSON.parse(
|
||||
img.dataset.metadata_json_string
|
||||
)
|
||||
console.log('metadata_json: ', metadata_json)
|
||||
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
||||
|
||||
//extract auto_metadata into the preset metadata
|
||||
function convertAutoMetadataToPresset(metadata_json) {
|
||||
metadata_json['seed'] =
|
||||
metadata_json?.auto_metadata?.Seed
|
||||
}
|
||||
convertAutoMetadataToPresset(metadata_json)
|
||||
document.querySelector('#historySeedLabel').textContent =
|
||||
metadata_json?.seed
|
||||
// autoFillInSettings(metadata_json)
|
||||
g_ui_settings.autoFillInSettings(metadata_json)
|
||||
}
|
||||
|
||||
async function moveHistoryImageToLayer(img){
|
||||
let image_path = img.dataset.path
|
||||
const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
|
||||
|
||||
// load the image from "data:image/png;base64," base64_str
|
||||
const base64_image = img.src.replace('data:image/png;base64,', '')
|
||||
await base64ToFile(base64_image)
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById('btnImageSearch')
|
||||
.addEventListener('click', async function () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
class Thumbnail {
|
||||
static wrapImgInContainer(img, container_style_class) {
|
||||
const container = document.createElement('div');
|
||||
container.className = container_style_class;
|
||||
container.appendChild(img);
|
||||
return container;
|
||||
}
|
||||
|
||||
static addSPButtonToContainer(container, button_id, title, callbackFunction, param1) {
|
||||
const elem = document.getElementById(button_id);
|
||||
const clone = elem.cloneNode(true);
|
||||
const button = clone
|
||||
button.style.display = null
|
||||
button.removeAttribute('id')
|
||||
button.setAttribute('title', title)
|
||||
|
||||
// Create button element
|
||||
button.className = "thumbnail-image-button";
|
||||
button.addEventListener('click', () => callbackFunction(param1))
|
||||
container.appendChild(button)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
Thumbnail,
|
||||
}
|
||||
Loading…
Reference in New Issue