stable-diffusion-webui icon indicating copy to clipboard operation
stable-diffusion-webui copied to clipboard

Published 20 hours ago • verified publisher icon AUTOMATIC1111

Add the ability to zoom and move the canvas

Open daswer123 opened this issue 2 years ago • 2 comments

Intro

Hi,I'm the developer of the canvas-zoom extension and I thought it would be cool if part of the extension was integrated into the main webui by default. I rewrote my script and left only the essentials, in my opinion.

Description

This js allows you to move the canvas with hotkeys, scale it and switch to full screen mode. Hotkeys only work inside the image area

  1. You can zoom with Shift+wheel hotkey in the image area, the zoom goes where the mouse pointer points

  2. You can move the canvas with the F key over the whole screen area

  3. There is a full screen S mode which automatically stretches the whole picture so that it would fit the width and height.

  4. Changing the size of a brush with a hotkey ( Ctr+wheel ). Quick and easy brush resizing

  5. There is a button O which allows you to overlap the elements (This is mostly done automatically, but you have the ability to manually remove if necessary, a technical button).

Regarding hotkeys, you may come up with a better system, I did not include the ability to configure them, as in my extension, I do it through the localStorage, but I think if you like PR, you can come up with how to implement the configuration of hotkeys in the webui settings.

I added only what I considered necessary, you can read more about all the features of the extension and propose what else can be added or removed. canvas-zoom extension

Screenshots/videos:

  1. Zoom canvas, zoom to where the mouse is pointing ( Shift + wheel )

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/f3b6191a-dc60-4cc7-84c1-92ac5725c611

  1. Reset Zoom ( R )

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/b221ccc6-a1b9-495c-9235-ec28a6a06db7

  1. Move canvas ( F )

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/fd2ead9c-490f-4a4a-aa97-67ce1fe66f4a

  1. Fullscreen mode ( S )

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/7f445f87-ae70-4f5c-8f4d-1668cd822617

  1. Adjust brush size ( Ctr+wheel )

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/0e3d2a8f-7844-42d4-b608-670db7578348

  1. An example of how the script works (sorry, I made it quickly, but the point should be clear)

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/6636b956-644a-4324-8906-9a7f9a70c6b1

Checklist:

daswer123 avatar May 27 '23 20:05 daswer123

UPD I thought about it and moved 2 important functions to this PR.

  1. If the width of the picture is large and has a scroll bar, then Fullscreen mod, will expand the canvas to the full width.

  2. In order not to change the width of the image and put it completely in the area when Reset Zoom, with the fitToElement function, I put the image right in the center, as in img2img

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/2b060ea2-fa9e-4ebb-bfad-6400f337d0c5

daswer123 avatar May 27 '23 22:05 daswer123

I've been using canvas-zoom, and it would be great if canvas-zoom could be a built-in feature

neavo avatar May 28 '23 09:05 neavo

That’s very cool idea!

alexbofa avatar May 30 '23 15:05 alexbofa

Hotkeys could theoretically be configured in UI, on a settings tab. You add a page with settings similarly to how pages are added in shared.py, and access settings in opts object in javascript.

That said, this would probably need a tooltip or some kind popup with explanation of controls in UI.

AUTOMATIC1111 avatar May 31 '23 15:05 AUTOMATIC1111

A very useful addition though, I had requests for something like this right from start.

AUTOMATIC1111 avatar May 31 '23 15:05 AUTOMATIC1111

Well, I've been too quick to merge again. Seems to be non-functional on Firefox - Pressing F starts dragging, and dragging never stops. Any hope you can fix it for Firefox?

AUTOMATIC1111 avatar May 31 '23 17:05 AUTOMATIC1111

@AUTOMATIC1111 Yeah, I think I'll figure it out .I'll get right on it. I'll make it out as PR, okay?

Working on the tooltip now, almost finished. What do you think, how well does it fit?

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/657abe46-c37c-4cf4-a8e3-78a1eac8ba81

daswer123 avatar May 31 '23 17:05 daswer123

On firefox this is solved by turning off "Automatically search the page text when typing" in the browser settings. Do I need to come up with a fix in the code for this?

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/ac312f6c-6faa-43d6-bd68-e56c194b690f

daswer123 avatar May 31 '23 18:05 daswer123

@AUTOMATIC1111 In general, fixed it, but the setting in Firefox that I said is better still turn off. I also finished the tooltip, now I will finish the details and make out the PR

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/22278673/78e0dc86-81e2-487b-acaf-cbe25bc2d6af

daswer123 avatar May 31 '23 19:05 daswer123

What do you think about exposing the applyZoomAndPan function so other extensions could utilize this? Related: https://github.com/Mikubill/sd-webui-controlnet/issues/1504

catboxanon avatar Jun 03 '23 14:06 catboxanon

Good thoughts. Authors of other extensions will be able to improve the canvas experience.

I think I will make 1 more PR and make this function global.

The authors of extensions just need to specify the ID of the entire editing area. For example #img2img_sketch or in case of controlNet #txt2img_controlnet_ControlNet_input_image

UPD There are bugs worth fixing. As soon as I figure them out, I'll reopen PR

UPD2 All fixed, opened a new PR

daswer123 avatar Jun 03 '23 15:06 daswer123