search

mitmedialab / Vida_Modeling

User Interface and Simulation Platform for a System Dynamics Model
MIT License
6 stars 2 forks source link

Fix geometry of each widget so that sizes are relative to monitor dimensions and resolutions #19

Closed jackreid closed 3 years ago

seamuslo commented 4 years ago

A new wrinkle in this issue - even with the settings that previously worked for my monitor, I cannot see the "clear simulation button at the bottom". Adjusting figsize does not move these buttons up as I had hoped, it just makes the graphs smaller.

I think the relevant portion of this code is in the "generate control frame" section, correct? Is there a way to change the location of these buttons within the overall frame? @jackreid

jackreid commented 4 years ago

I am working on a fix for this now. I think it has to do with the frame size settings. We can probably do without those, so I am in the process of getting rid of them. Will update shortly.

jackreid commented 4 years ago

Just pushed changes on this front. Let me know if they work.

seamuslo commented 4 years ago

Unfortunately they don't. See my most recent email for screenshots of what it looks like. large monitor larger monitor small monitor smaller monitor

jackreid commented 4 years ago

Okay, so I think I know what the problem is. The graphs, log, and map are scaling proportionately to monitor size, as intended. The various tkinter buttons, labels, and text are not, however, since they each just have a manually input font size, usually 24. One solution is to set a default font size that propagates to all the buttons and labels and whatnot, then have that default be based on the screen size (physical dimensions, pixels, and resolution). I will probably give this a try tomorrow.

For reference, for both of your monitors used here, what is (a) the dimensions in inches, (b) the dimensions in pixels, and (c) the pixels per inch (I can calculate that last one myself, if need be)?

seamuslo commented 4 years ago

Large monitor: 21.5", 1920x1080, PPI = ~102

small monitor: 15.6", 1920x1080, PPI = ~141

jackreid commented 4 years ago

Okay, I have made another attempt and committed the changed. Changes can be described as:

(1) Tkinter was not handling my dual monitor set-up in a weird way and misreading the resolution of my monitor, which was part of why things that scaled fine for me, didn't for you. I have addressed this, though it required the import of a new package "screeninfo".

(2) Font sizes now should scale with monitor size. I made them slightly smaller (24 to 20 on my screen) as well.

Check it out and see if it works fine on both your setups. If fonts are too big or too large, try adjusting the scaling factor, which can be found on line 135. It is currently set to "20/7.634", which is just linear scaling from (0,0) to (7.634 inches of screen height, 20 pt font).

seamuslo commented 4 years ago

I came home to NY yesterday evening, so I don't have my larger monitor setup yet, but I just pulled your changes and installed screeninfo and this is what it looks like on my smaller monitor (still no luck) image

jackreid commented 4 years ago

Darn. Would you mind posting the values that your small monitor gives you for the following variables?

    UI.screenwidth
    UI.screenheight
    UI.inch_width 
    UI.inch_height
    UI.dpi

These are in lines 128-132, for reference.

seamuslo commented 4 years ago

for print(self.screenwidth) print(self.screenheight) print(self.inch_width) print(self.inch_height) print(self.dpi)

I got: 1366 768 13.5433144 7.6377994 100.86157344172709

jackreid commented 4 years ago

I wonder why the pixel dimensions are different than what we would expect.

Would you mind messing around with some of the dimensions so that it fits properly on yours and then I can test and see if it works on mine?

Font size is controlled by "fontsize" on line 135 of SD_UI Graph size is controlled by "figsize" on line 528 of SD_UI Map size is controlled by by "self.screenwidth" an "self.screenheight" on lines 55 and 56 of MapWindow

seamuslo commented 3 years ago

Here's what the app looks like on my smaller monitor after some modifications. The settings that work for me have been uploaded to Git and commented so you can mess around with them. image

jackreid commented 3 years ago

Most of this looked like a good size to me, but the font was too small. I changed the fontsize formula to be based on pixel screen height, not inch height. I used the numbers from your earlier comment to make it so that the fontsize should be unchanged on your smaller monitor, but should adapt better to other monitors. It looks fine for me now, but you should test it to confirm that I didn't mess it up.