Canvas does not appear

[cibernicola]

When clicking on "Show hide canvas" nothing happens: This is what I see in dev console:

[TKoestlerx]

Good thing I forgot to remove the debug messages ;)

There are two possibilities why it does not show up.

1) There is no image in the img2img tab. (Or the script doesn't find it). 2) The image contains only "black".

If there is an image loaded in the img2img tab, and it contains data.. then i will need to add more debug messages to find the cause.

The canvas is just a convenience feature to be able to select the x/y directly in the image. It also works to set the coordinates directly in the sliders/numeric inputs. But of course the canvas is nicer.

[TKoestlerx]

If you are familiar with the console.... Enter these 3 Lines (one after another):

let grap = document.body.children[0]

let img2imgDiv = grap.shadowRoot.getElementById('img2img_image');

let imgB64 = img2imgDiv.children[2].children[0].children[1].src;

and the you can just enter:

imgB64;

If imgB64 ist not set, then thats the problem.

[cibernicola]

Cause of problem found: the start argument --gradio-img2img-tool color-sketch. This argument must modify something (I haven't checked what) that causes the canvas not to appear. When starting WebUI without the argument, it appears.

But it appears like this: Can't see half of the UI

What about this? https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3507

[TKoestlerx]

I made the "image-search" a little bit more robust, so it should work with the color sketch as well.

And yes, the canvas is sort of hacked in and more of a proof of concept than a final result. Although I don't understand why it has only half the height in the screenshot (set to height:100%?).

[cibernicola]

Correct, it already works with the --gradio-img2img-tool color-sketch argument, but it's not usable, it completely covers the action buttons :( Probably absurd but would there be any way to achieve a window that could be undocked from the main window?

As for the screenshot, it's taken of the whole window, the visible part (on my screen) is this one:

[TKoestlerx]

Ah, got it now. That makes sense.

And yes, with a bit of styling and some helper functions it should be possible to make the div containing the canvas into a floating, draggable, resizeable window. A title bar to drag it around and a close button should be all thats needed in regards to additional elements. But even in this case: Once you draw something in the src Image of img2img you will need to refresh/reopen the window because its only loading the data while opening. Well.. add "refresh" Button to the list of needed Elements... ;)

[TKoestlerx]

Yep, its possible.

[TKoestlerx]

I have added the (still basic and rough) windowed version of the canvas to a feature branch.

[TKoestlerx]

undocked 'may' be possible in the sense that its running in a different tab, which can be placed on a second monitor. If they are from the same origin communication should be possible.