search

vignetteapp / vignette

The open source VTuber software. ❤
https://www.vignetteapp.org
Other
512 stars 33 forks source link

Refactor User Interface #231

Closed LeNitrous closed 3 years ago

LeNitrous commented 3 years ago

First and foremost, this is the awaited UI refresh which now sports a sidebar instead of a full screen menu. This also sports updated styling on several components and updates osu!framework and Fluent System Icons. Backdrops (backgrounds) get a significant update as well now allowing video and images as a target.

Under the hood, I have refactored themeing and keybind management (UI is again to follow). Themes can now be edited on the fly but only the export button works. Applying live will follow. I've also laid down the foundation to avatar, recognition, and camera settings but only as hollow controls that don't do anything.

sr229 commented 3 years ago

Have you verified the new theme is satisfactory for this refactor?

LeNitrous commented 3 years ago

Not yet. There's a few more things missing as well.

Speykious commented 3 years ago

Forgot to review the UI changes yesterday... I guess I will today then.

adryzz commented 3 years ago

When you open a sub-menu, like the debug settings, you can only go back using the back arrow.

That is fine, but if the categories of the previous menu (icons on the right) are still visible (even if disabled), one will try clicking them instead to go back.

image

So, either hiding them or making it so you go back when you click that area is a better idea, for the user's perspective.

Also, i don't know if this is known or not, but the text box control (and i assume all the controls) does not support unicode. I'll look more into this to see if it was an issue before this PR, but i discovered it now.

image

The rest looks good to me

EDIT: Even if it can't display Unicode, it will still internally work with the path, so it's just a displaying issue image

EDIT 2: If you change the video path while playing, it will crash

[runtime] 2021-09-08 08:33:26 [error]: An unhandled error has occurred.
[runtime] 2021-09-08 08:33:26 [error]: System.ObjectDisposedException: Cannot access a closed file.
[runtime] 2021-09-08 08:33:26 [error]: at System.IO.FileStream.ValidateReadWriteArgs(Byte[] array, Int32 offset, Int32 count)
[runtime] 2021-09-08 08:33:26 [error]: at System.IO.FileStream.Read(Byte[] array, Int32 offset, Int32 count)
[runtime] 2021-09-08 08:33:26 [error]: at osu.Framework.Graphics.Video.VideoDecoder.readPacket(Void* opaque, Byte* bufferPtr, Int32 bufferSize)
Unhandled exception. System.ObjectDisposedException: Cannot access a closed file.
   at System.IO.FileStream.ValidateReadWriteArgs(Byte[] array, Int32 offset, Int32 count)
   at System.IO.FileStream.Read(Byte[] array, Int32 offset, Int32 count)
   at osu.Framework.Graphics.Video.VideoDecoder.readPacket(Void* opaque, Byte* bufferPtr, Int32 bufferSize)
LeNitrous commented 3 years ago

@adryzz

  1. Made it so clicking the navigation buttons closes all open sub panels and scrolls to the desired section.
  2. That's because the font doesn't really support unicode unfortunately.
  3. The playback safely stops on Windows, seems to be crashing for Linux. Should be fixed. @sr229 @Speykious will need your reviews on this
adryzz commented 3 years ago
  1. Made it so clicking the navigation buttons closes all open sub panels and scrolls to the desired section.
  2. That's because the font doesn't really support unicode unfortunately.
  3. The playback safely stops on Windows, seems to be crashing for Linux. Should be fixed.

Tested all 3. Looks good so far.

LeNitrous commented 3 years ago

Just a note, I added file extension filters to only support PNG and JPG for images while MP4 for videos. It is possible to load in other formats and can be supported by the framework, but for sanity's sake, those are the defaults for now until there is demand for others.

sr229 commented 3 years ago

Keep in mind I am unavailable for two weeks while my residence is currently evaluating how much repairs will be needed due to the typhoon. Only merge if the current participants are satisfied with the changes.

adryzz commented 3 years ago

Just a note, I added file extension filters to only support PNG and JPG for images while MP4 for videos. It is possible to load in other formats and can be supported by the framework, but for sanity's sake, those are the defaults for now until there is demand for others.

MKV videos don't work framework side from my testing, tried with H264 and HEVC, but they are working on adding hardware accelerated video playback to o!f anyway (at least for Windows and Mac... VAAPI is hard to use)

Speykious commented 3 years ago

Tested the background feature, and it's great!

I clicked on "Open theme designer" and the app crashed, I don't know if that's expected. vignette.stdout.log vignette.stderr.log

Speykious commented 3 years ago

The light theme still lacks contrast in some places imo. I highlighted the good contrast in green, the bad ones in red, and the one I'm unsure of in yellow. image

The dark theme is almost perfect, except for the placeholder text from the search bar. I think if it had the same wolor as the subtitles like General down there the theme would become very solid. image

adryzz commented 3 years ago

@Speykious it does work on my end

Speykious commented 3 years ago

@Speykious it does work on my end

For me, it remembers whether it is resizable or not, but not the resolution when in resizable mode.

Speykious commented 3 years ago

TL;DR: there's a resizable bug but it can be addressed in a separate pull request. For now, when it comes to the design, the dark mode is almost perfect, but the light mode requires a bit more work to be comfortable.

sr229 commented 3 years ago

TL;DR: there's a resizable bug but it can be addressed in a separate pull request. For now, when it comes to the design, the dark mode is almost perfect, but the light mode requires a bit more work to be comfortable.

This is only within the limitations of the current Fluent theme designer, we can't change the colors anymore since it already is within the acceptable contrast guidelines.

sr229 commented 3 years ago

I can't tell where exactly in the code, but Vignette doesn't remember the proper size of the window when it's resizable. It seems to take the resolution from the resolution config instead. I always make my window maximized, yet each time I open Vignette, it opens it like this: image

All good besides that though.

That's something we cannot fix since the last saved resolution is provided by your WM, not us.

LeNitrous commented 3 years ago

Should be ready for review. Keep in mind that this is about the side panel itself. Specifics such as Live2D, Backdrop, Themeing and other features will have to be addressed in separate PRs.

Speykious commented 3 years ago

I can't tell where exactly in the code, but Vignette doesn't remember the proper size of the window when it's resizable. It seems to take the resolution from the resolution config instead. I always make my window maximized, yet each time I open Vignette, it opens it like this: image All good besides that though.

That's something we cannot fix since the last saved resolution is provided by your WM, not us.

Oh... Yeah that makes sense