Skip to content

Refactory of sp_button_action management to generalise it, addition of copy metadata to history tab #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: separate-outpaint
Choose a base branch
from
Open

Refactory of sp_button_action management to generalise it, addition of copy metadata to history tab #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
645f67d
Refactored Thumbnail management to generalise sp_button addition
adunato Jan 27, 2023
085296f
Added history copy metadata button
adunato Jan 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 21 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
max-height:100%;
max-width:100%;
}
.viewer-image-button {
.thumbnail-image-button {
display: none;
/* background-color: #495b79; */
color: white;
Expand All @@ -102,16 +102,13 @@
max-height:100%;
max-width:100%;
}
/* .viewer-image-button:hover {
background-color: #333f52;
} */
.viewer-image-container {
.thumbnail-image-container {
position: relative;
width: 100px;
height: 100px;
margin: 0;
}
.viewer-image-container:hover .viewer-image-button {
.thumbnail-image-container:hover .thumbnail-image-button {
display: flex;
}
.viewer-container {
Expand Down Expand Up @@ -536,7 +533,7 @@
<button class="btnSquare" id="btnImageSearch">Image Search</button>
<button class="btnSquare" id="btnLoadHistory">Load Previous Generations</button>
</div>
<div class="" id="divHistoryImagesContainer">
<div class="viewer-container" id="divHistoryImagesContainer">
<img class="history-image" id="history_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' />


Expand Down Expand Up @@ -673,13 +670,13 @@
<div>


<!-- icon only svg button -->
<sp-action-button id ="svg_sp_btn" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
<div slot="icon" style="fill: currentColor">
<svg viewBox="0 0 36 36" style="width: 18px; height: 18px;">
<path d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"/>
</svg>
</div>
<!-- icon only svg button -->
<sp-action-button id ="svg_sp_btn" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
<div slot="icon" style="fill: currentColor">
<svg viewBox="0 0 36 36" style="width: 18px; height: 18px;">
<path d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"/>
</svg>
</div>
</sp-action-button>

<!-- icon with svg button -->
Expand All @@ -692,6 +689,16 @@
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>
Expand Down
27 changes: 16 additions & 11 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2941,17 +2941,9 @@ document.getElementById('btnLoadHistory').addEventListener('click',async functio
img.dataset.path =`${output_dir_relative}/${image_path}`
img.className = "history-image"
img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
container.appendChild(img)
img.addEventListener('click',async (e)=>{
const metadata_json = JSON.parse(e.target.dataset.metadata_json_string)
console.log("metadata_json: ",metadata_json)
// document.querySelector('#tiSeed').value = metadata_json.Seed
document.querySelector('#historySeedLabel').textContent = metadata_json.Seed
autoFillInSettings(metadata_json)
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)
})
img_container = viewer.Thumbnail.wrapImgInContainer(img, "thumbnail-image-container")
viewer.Thumbnail.addSPButtonToContainer(img_container, "svg_sp_btn_datadownload", "Copy Meta Data", loadMetaData, img)
container.appendChild(img_container)
i++
}

Expand All @@ -2961,6 +2953,19 @@ document.getElementById('btnLoadHistory').addEventListener('click',async functio

})

async function loadMetaData(img){
debugger
const metadata_json = JSON.parse(img.dataset.metadata_json_string)
console.log("metadata_json: ",metadata_json)
// document.querySelector('#tiSeed').value = metadata_json.Seed
document.querySelector('#historySeedLabel').textContent = metadata_json.Seed
autoFillInSettings(metadata_json)
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)
}


document.getElementById('btnImageSearch').addEventListener('click',async function(){
try{

Expand Down
76 changes: 38 additions & 38 deletions viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,51 +152,27 @@ class ViewerImage {
}
}

AddButtonHtml(){

addButtonHtml(){
// Create new container element
const container = document.createElement('div');


container.className = "viewer-image-container";


const elem = document.getElementById('svg_sp_btn');

// Create a copy of it
const clone = elem.cloneNode(true);
const button = clone
button.style.display = null
button.setAttribute('title',"use this image to generate more variance like it")

// Create button element
// const button = document.createElement('sp-button');
button.className = "viewer-image-button";
// button.innerHTML = "Button";

button.addEventListener('click', async ()=> {
//set init image event listener, use when settion is active
const layer = await app.activeDocument.activeLayers[0]
const image_name = await psapi.setInitImage(layer, random_session_id)
const path = `./server/python_server/init_images/${image_name}`
g_viewer_manager.addInitImageLayers(layer,path,false)

})

const container = Thumbnail.wrapImgInContainer(this.img_html, "thumbnail-image-container")

Thumbnail.addSPButtonToContainer(container, "svg_sp_btn", "use this image to generate more variance like it", addImageToLayer, this)


// Append elements to container
container.appendChild(this.img_html);
container.appendChild(button);



this.img_html = container;
}


}

async function addImageToLayer(e){
//set init image event listener, use when settion is active
const layer = await app.activeDocument.activeLayers[0]
const image_name = await psapi.setInitImage(layer, random_session_id)
const path = `./server/python_server/init_images/${image_name}`
g_viewer_manager.addInitImageLayers(layer,path,false)
}


class OutputImage extends ViewerImage {
constructor (layer, path) {
super()
Expand Down Expand Up @@ -628,10 +604,34 @@ class InitMaskImage extends ViewerImage {
}
}

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.setAttribute('title',title)

// Create button element
button.className = "thumbnail-image-button";
button.addEventListener('click', () => callbackFunction(param1))
container.appendChild(button)
}

}

module.exports = {
OutputImage,
InitImage,
InitMaskImage,
ViewerObjState,
ViewerManager
ViewerManager,
Thumbnail
}