App's UI is not working perfectly

[RivanParmar]

I downloaded the v5 (Beta) version and ran it on my Windows 10 laptop and here's how it looks:

The first photo's background is white only, however on taking screenshot, it shows black. The second photo is of dark mode. The third photo is after disabling dark mode, in which also the background is white but in screenshot it is black.
I am running Windows 10 Version 21H1.

[HuyHung1408]

Can you try v4 one? I think it's the blurwindow issue, does the acrylic effects works? Btw thanks for your feedback. I guess I will need to try this on another machine too

[RivanParmar]

Yes, the UI is working perfectly in v4. Also the acrylic effect is working in v5.

[HuyHung1408]

Thanks for the information, what screenshot program did you use?

[RivanParmar]

I am using Windows' own program, i.e., Xbox Game Bar to capture the screenshots.

[HuyHung1408]

Ok, thank you. I just tested, it only have a black background when capturing the app, in normal condition it's still good. I think this occurs because the app's background was transparent and blurwindow draw an Acrylic as the background of the app. Thanks for your information!

[RivanParmar]

By the way, do you want to use Mica effect in the app or the Acrylic effect? Also should I suggest reverting back to how the original theming worked without importing the sv_ttk theme? As it used to work great. However, now, there are white spaces left around the corners of the buttons as you can see in the 1st and 2nd photo that I had posted earlier.

[HuyHung1408]

By the way, do you want to use Mica effect in the app or the Acrylic effect? Also should I suggest reverting back to how the original theming worked without importing the sv_ttk theme? As it used to work great. However, now, there are white spaces left around the corners of the buttons as you can see in the 1st and 2nd photo that I had posted earlier.

Yes, I planned to revert back to the old one because the new method can't change to .exe file. The square corners should be fixed in up coming version! May be I will keep the Acrylic as the default one (because Windows 10 doesn't support Mica). Thanks a lot!

[HuyHung1408]

New:

Old:

[RivanParmar]

By the way, do you want to use Mica effect in the app or the Acrylic effect? Also should I suggest reverting back to how the original theming worked without importing the sv_ttk theme? As it used to work great. However, now, there are white spaces left around the corners of the buttons as you can see in the 1st and 2nd photo that I had posted earlier.

Yes, I planned to revert back to the old one because the new method can't change to .exe file. The square corners should be fixed in up coming version! May be I will keep the Acrylic as the default one (because Windows 10 doesn't support Mica). Thanks a lot!

Ok. You're welcome!

[HuyHung1408]

using png instead of gif make the button slow or not respond. But use gif make the program looks like your first screenshot. This is the biggest issue that stop me from develop new features. Do you have any idea about it?

[RivanParmar]

I also don't have any idea why such a thing is happening. All the tutorials online use .png format only and yet they seem to work fine. I haven't seen any tutorials that use .gif format files for theming in tkinter. But I think there isn't any lag in button click but since we are setting the background to be transparent, that is why it is happening. For example when setting the background to be transparent, I can focus on buttons from other apps that are behind the calculator and so the buttons in the calculator works only when clicked on the area that isn't transparent.

[HuyHung1408]

Yeah, you're right. Not sure if I can do anything to solve this, kinda annoying

[RivanParmar]

Also the blue images in the light mode that are used on "M", "C" and "=" buttons have got white spaces around their corners which is why white spaces are seen when switching to light mode as seen in screenshots 1 and 3. However there are no white spaces around the blue buttons in dark mode so as seen in screenshot 2 above, they seem perfect. I will try to edit them or create new ones like that and will create a pull request as soon as I have finished. EDIT: Even in dark mode there are black spaces left around the corners of the blue buttons.

[RivanParmar]

So what should we do now about the Acrylic effect? Does it work perfectly in Windows 11? If yes, then we could remove that effect if the app is run on Windows 10 so that it's layout would be just as before. And if we do that, then instead of Acrylic effect we might use Mica effect. Or if you still want to have Acrylic effect on Windows 10, then I have found an answer to such a question on StackOverflow, however I haven't checked if it works. Here's the link to the answer: https://stackoverflow.com/a/70379149

[HuyHung1408]

Acrylic works good in Windows 11 and I agree with you that we should use Mica effects in Windows 11 as it match Windows 11 more!

[RivanParmar]

And what about Acrylic effect on Windows 10? Should we try and add it as shown in the answer or should we just remove it completely?

[HuyHung1408]

And what about Acrylic effect on Windows 10? Should we try and add it as shown in the answer or should we just remove it completely?

I will not remove it, I'm thinking about making a different version for it, like one file is for Windows 11, another is for Windows 10. Btw I think why the button needs to click multiple times to make them responsive and it's only happens in light mode because the buttons on light mode when clicked is transparent while dark is not!

[RivanParmar]

There is no need to create a different file for Windows 10 and 11, you can simply just check the system's version and only add Acrylic or Mica if it is Windows 11. While on Windows 10, let the background remain as in v4 and only add rounded corners around the window which would look good. To add rounded corners to window here is something that I have found and will try to implement: https://stackoverflow.com/a/68890935/15545774 And to check the Windows version, here is another answer: https://stackoverflow.com/a/66554956/15545774

[HuyHung1408]

Will check that too, thanks!

[HuyHung1408]

@RivanParmar can you check if the icon in backspace button shows up?

[RivanParmar]

The icon in the backspace is showing perfectly. I have also tried implementing rounded corners to the window, however there isn't any effect of it on the window. I am creating a pull request with some image edits again and I have commented out the BlurWindow codes for Windows 10 as it isn't working properly and isn't looking good. Moreover, I am also upgrading to Windows 11 in some time and so I won't be able to see the UI on Windows 10. However, I will still try to add rounded corners to window until I am on Windows 10.

[HuyHung1408]

Ah, thanks a lot for your efforts

[HuyHung1408]

Version 1 may be coming in a few hours or a few days!

[RivanParmar]

Version 1 may be coming in a few hours or a few days!

That's a great news!

[RivanParmar]

Here's how it's looking on Windows 10 :
In light mode:

In dark mode:

And one more note, the themes aren't changing when I change Windows 10's theme to dark when the application is running. The dark mode change occurs only when I close the app and reopen it again.

[RivanParmar]

Have upgraded to Windows 11 and the app's looking awesome on it! You can close this issue now.

[HuyHung1408]

Ah thanks a lot!