search

zavolokas / InpaintingSite

Web app for inpainting
GNU Affero General Public License v3.0
5 stars 4 forks source link

Improve drawing #18

Closed ferib closed 3 years ago

ferib commented 3 years ago

The dot is back! Not sure if it is 100% working on mobile since the Chrome Mobile simulation uses both Mouse & Touch events. I haven't been able to test on a real mobile device (yet).

Also, I have updated the CSS with a cool background and I have added a media query to the CSS for optimizing mobile. The mobile CSS removes all borders/paddings/margins so the drawing area of the image can be used optimally.

As of now, I have no clue what to do with the button UI part. Should I add the newly added parameters? Add a different button/radio button for the upcoming Seam Carving algorithm?

Suggestions are welcome!

zavolokas commented 3 years ago

Should I add the newly added parameters?

that might be a good thing to have(maybe hidden in a collapsible panel with advanced settings not to overwhelm user)

Add a different button/radio button for the upcoming Seam Carving algorithm?

yep! good idea to have a switch for which method to use.

ferib commented 3 years ago

Updated the UI, what a nightmare to work with those sliders! image

There are 3 sliders added to the front-end, the max settings of them are not synced with those of the backend. The sliders do work, their values will be submitted when doing a request.

zavolokas commented 3 years ago

@ferib yeah I can imagine :-D

What can we do to make it clear:

ferib commented 3 years ago

@zavolokas I was thinking about replacing the boring gray image placeholder with 'instructions'. Something like a small legend where the colors get mapped to a string to indicate what the slider represents.

Combine that with a tooltip on each slider that shows the keyword for the variable it represents so the user can get a short reminder of what the slider stands for.

For the max/min values I recommend adding labels next to the sliders to indicate the range they have. But those damn sliders are kinda out of my league so I suggest forking this result into a different branch while I look into adding Seam Carving into the backend.

zavolokas commented 3 years ago

@ferib currently it is difficult to use since it is not clear what do they mean and the default values don't lead to any reasonable results... For instance - I don't know how to set patch size to 11.

ferib commented 3 years ago

@zavolokas I have added a color legend to indicate what each slider means, the color legend also shows the current value of the slider.

The values are hardcoded and do not use api/settings to set the min/max values. I was thinking of applying changes to the backend before updating the UI, the changes I have in mind are to add both Seam Carving and Inpainting into the same API and having universal settings so the UI 'loads' the min/max values for the currently selected algorithm (inpainting/seam carving).

zavolokas commented 3 years ago

@ferib That looks really great! Thank you very much for your contributions! ;)