Display Issue on MacOS- Game Board and Info Panel Do Not Fill Entire Window

matthieu-lapeyre commented 6 months ago

Hello,

Excellent AI you have trained here !

But unfortunately, I have a display issue when executing gui.py from the repo (branch master 46d3ed317cc63b92ecc02ef3cf059581c49fdf6c).

Bug Description

There appears to be an issue (on my computer, check system information below) with how the game board and the information panel are displayed within the application window. The game board is displayed correctly, but the information panel does not extend to fill the window, resulting in the UI occupying only about a quarter of the space.

I am attaching a screenshot of the issue for reference.

Any help in resolving this would be greatly appreciated as it impacts the user experience significantly.

Thank you!

System information

>>> sw_vers
ProductName:        macOS
ProductVersion:     13.3.1

>>>  python --version
Python 3.11.9

>>> dot -V
dot - graphviz version 10.0.1 (20240210.2158)

>>> pip freeze
absl-py==2.1.0
astunparse==1.6.3
certifi==2024.2.2
charset-normalizer==3.3.2
contourpy==1.2.1
cycler==0.12.1
Cython==3.0.10
docutils==0.21.1
flatbuffers==24.3.25
fonttools==4.51.0
gast==0.5.4
google-pasta==0.2.0
graphviz==0.20.3
grpcio==1.62.2
h5py==3.11.0
idna==3.7
joblib==1.4.0
keras==3.2.1
Kivy==2.3.0
Kivy-Garden==0.1.5
kiwisolver==1.4.5
libclang==18.1.1
Markdown==3.6
markdown-it-py==3.0.0
MarkupSafe==2.1.5
matplotlib==3.8.4
mdurl==0.1.2
ml-dtypes==0.3.2
namex==0.0.8
numpy==1.26.4
opt-einsum==3.3.0
optree==0.11.0
packaging==24.0
pandas==2.2.2
pillow==10.3.0
protobuf==4.25.3
Pygments==2.17.2
pyparsing==3.1.2
python-dateutil==2.9.0.post0
pytz==2024.1
requests==2.31.0
rich==13.7.1
scikit-learn==1.4.2
scipy==1.13.0
six==1.16.0
tensorboard==2.16.2
tensorboard-data-server==0.7.2
tensorflow==2.16.1
tensorflow-io-gcs-filesystem==0.36.0
termcolor==2.4.0
threadpoolctl==3.4.0
tqdm==4.66.2
typing_extensions==4.11.0
tzdata==2024.1
-e git+https://github.com/sugiyama2718/Quoridor.git@46d3ed317cc63b92ecc02ef3cf059581c49fdf6c#egg=UNKNOWN
urllib3==2.2.1
Werkzeug==3.0.2
wrapt==1.16.0

sugiyama2718 commented 6 months ago

Thank you for the report!
Unfortunately, I do not have a Mac, so I cannot reproduce this bug.
It would be helpful if there were an engineer who has a Mac...

sugiyama2718 commented 6 months ago

I chatgpted it. I hope this helps you.

There are several potential reasons why a Kivy application might be displaying at a quarter size of the window on a Mac, as shown in the attachment, while it operates normally on Windows:

Retina Display Resolution: Macs have Retina displays with very high pixel densities, which can result in a mismatch between the number of 'pixels' the application recognizes and the number of 'points' actually drawn on the display.
OpenGL Scaling: Kivy uses OpenGL for rendering, and if the OpenGL settings on Mac are different from Windows, this could cause scaling issues.
Kivy Configuration: In Kivy, you can adjust window size and graphics settings through the ~/.kivy/config.ini file or within the application settings. It might be necessary to have Mac-specific configurations.
Platform-Specific Bugs: There may be bugs in Kivy that only occur with certain OS versions or display settings on Mac. In this case, checking the Kivy Issue Tracker or community forums to see if similar issues have been reported would be advisable.
Dependency Issues: If the version of Kivy or its dependent libraries is outdated or missing, it may not function correctly. Updating dependencies could potentially resolve the issue.

To troubleshoot this issue, it's recommended to start by checking Kivy's settings and examining the application's log output for any clues. Additionally, searching the Kivy documentation and forums for solutions to Mac-specific issues could also be effective.

matthieu-lapeyre commented 6 months ago

Thank you for your insights. The Retina display might indeed be the source of the problem, given its 4x ratio of physical pixels to logical points.

I tested the application on an external non-Retina screen, and it displayed correctly, which confirms that the issue is likely related to the Retina display on my Mac.

I'm an engineer with a Mac but without much experience in Kivy. If you could provide more guidance on where in the code I should look to resolve this, I'd be glad to investigate and try to implement a fix.

To address this, I'm planning to investigate Kivy's handling of Retina displays. Are there any specific configurations or common pitfalls related to Retina displays in Kivy that I should be aware of? Could you suggest any documentation or resources that might help me resolve this issue?

Thank you for your assistance; I'm eager to contribute on a solution.

sugiyama2718 commented 6 months ago

That's great!

Yes, I can provide guidance on where in the code you should look to resolve this: First, in the initial 10 lines of GUI.py, the window size is specified. Next, from line 787 of GUI.py (https://github.com/sugiyama2718/Quoridor/blob/d949d83ea752e95ce99260aca82740b95579d287/GUI.py#L787 ), the sizes and positions of each element are hardcoded. These are not separated into a .kv file because doing so did not work well when creating an executable with pyinstaller. For other parts of the code, the implementation describes the operation of the app, so probably no modifications are needed there.

Additionally, there is also a game_analyzer.py file that I would ideally like to revise as well.

Are there any specific configurations or common pitfalls related to Retina displays in Kivy that I should be aware of? Could you suggest any documentation or resources that might help me resolve this issue?

I'm sorry but I don't know about these. Please refer to the official Kivy website etc.

sugiyama2718 commented 6 months ago

I chatgpted again.

When investigating Kivy’s handling of Retina displays, there are a few key considerations and configurations you might want to look into:

Configuration File: Kivy has a configuration file which sets the default behavior of applications. You might need to adjust settings related to graphics or window size, for example. Changes to the configuration should ideally be made before importing other Kivy modules, as they control the initialization of the application.

Environment Variables: Since version 1.11.0 of Kivy, you can alter the configuration using environment variables, which will take precedence over the settings in config.ini. This could be a convenient way to adjust settings for Retina display support on a per-application basis.

Graphics Settings: In the graphics section of the configuration, there are tokens that might affect how Kivy behaves on Retina displays. For instance, settings related to borderless windows or custom_titlebar may impact how your app looks on a high-resolution screen.

Scaling Issues: On Retina displays, you may encounter UI scaling issues, such as inconsistent sizing when moving windows between Retina and non-Retina displays. This is something to keep in mind as you test and configure your application.

For detailed guidance and the full list of available configuration tokens, you can refer to the Kivy documentation on their official website, specifically the sections related to configuration and graphics. Additionally, common issues and questions about Kivy, including those related to Retina displays, may be addressed in the FAQ section.

By adjusting these configurations and understanding how they affect your app, you should be able to better manage how your Kivy app runs on Retina displays.

matthieu-lapeyre commented 6 months ago

I have made some progress, it seems using https://kivy.org/doc/stable/api-kivy.metrics.html help dealing with higher dpi screen. So adding dp(xx) on all absolute pixel value modify it accordingly to the pixel density.

I started adding dp() everywhere, it's kind of working, the display is filling the window. But it is not yet working properly, you may have forgotten few numbers somewhere and maybe sometimes we should keep the value in physical pixel ... For exemple the selection is not done where my cursor is.

Still work to do

matthieu-lapeyre commented 6 months ago

By the way what is root ?

I do not see how i can turn a root.Bx value in dp

sugiyama2718 commented 6 months ago

Sounds good.

You can reference the class variable values of the class Quoridor(Widget) through root. For example, if you assign a value to self.Bx like https://github.com/sugiyama2718/Quoridor/blob/12c27f855b0e6f2ef979cef8d282538a32fad9fd/GUI.py#L639 , it means that this value will go into root.Bx as shown in the image you attached.

sugiyama2718 commented 6 months ago

For, example, changing self.Bx = int(15 + (stateBx + 0.5) / 9 (BOARD_LEN - 30)) into self.Bx = dp(int(15 + (stateBx + 0.5) / 9 (BOARD_LEN - 30))) may work?

sugiyama2718 commented 6 months ago

I merged the pull request. Thank you for your contribution!

sugiyama2718 / Quoridor

Display Issue on MacOS- Game Board and Info Panel Do Not Fill Entire Window #4

Bug Description

System information