Arduino IDE window really small on High DPI Dispay?

I try to adjust preferences.txt but no luck. One thing that really help that using external editor. Icons is really small.

Long-term, I believe the transition to 4K displays with much higher than 100 DPI resolution is going to require a lot of work in the Arduino IDE.

The editor font can scale. Java is responsible for rendering the menus. But the toolbar is fixed bitmaps. Significant programming work is going to be needed inside the IDE to truly make everything scale well to high-res 4K displays.

High DPI displays are just going to get more and more common, so I hope someone is working on a plan to fix this. You should be able to display fonts based on point size and absolute size rather depending on pixels for dimensions. It's not just the toolbars which are the improper height, it is other parts of the window as well. Changing the font size only fixes the editor. I've attached a screenshot which I have scaled down so hopefully those of you on lower DPI displays can see what it looks like.

Using: Windows 8 Lenovo laptop 2560x1440

Would anyone like to try to read "About Arduino" on my screen? It comes out rendered about 1.75" wide and 1.5" high. Good luck!

I successfully changed the font and font size in preferences.txt but this has no effect in the About dialog box.

editor.font=Consolas,plain,28

The default fonts were one or two pixels wide. Nearly invisible. Thanks to another forum writer I changed to Consolas and can now read the screen without straining.

Best regards

If anyone is working on this problem, they haven't said anything on the Arduino Developers Mail List. There's no apparent work happening on any of the branches or commits on Arduino's github repository.

Internally, Arduino does use fixed bitmaps and pixel coordinates for some things, like the blue/green toolbar. It would seem all those code would need to be redesigned.

Is there a github issue reported for the problem?

Yup. Arduino IDE on High DPI · Issue #2532 · arduino/Arduino · GitHub

Also Swing is not yet capable of handling HighDPI Displays (i.e. read Windows Scaling value) - a problem that is not on the feature-list of the next Java Version. So it might take a long time until this is adressed by Java/Swing.

I have an 4k Display, too with the same problems mentioned above.
One solution can be (I do it that way in Java):

1: Read the current (X-)resolution of the current screen where Arduino is displayed (important not to use the absolute resolution to adress multiscreen configurations).

2: if it is higher than 1920x1080 (I only use the X-resolution) then calculate the factor
the current resolution is higher than 1920x1080.

3: Iterate all children of JFrame and resize them (including the images used) by that factor.

It will take about 100 lines of code and it will work at least on Linux and Windows (I have no Mac to test it there).

the-fallen:
2: if it is higher than 1920x1080 (I only use the X-resolution) then calculate the factor
the current resolution is higher than 1920x1080.

That decision might not be so popular with people who use 27 inch and 30 inch monitors, which display 2560x1440 and 2560x1600 resolution. They have similar same pixel density as the smaller, more common consumer screens using 1920x1080 and 1366x768 and other low resolutions.

It will take about 100 lines of code and it will work at least on Linux and Windows

Really, only 100 lines?

You might be right, but you might also be underestimating the number of places in the Arduino IDE that have fixed pixel coordinates.

Maybe you ought to jump into this and write some of those 100 lines? I'll be really impressed if you manage to pull it off with so little code.

I never worked with the Arduino Source. But I just downloaded CygWin and the latest code but it may take a long while until I have a clue where to start within that code.
But here is some code I used for another Project. Maybe someone more experienced with the Arduino/Processing GUI would try to implement it.

Note: this particular code is taken from a wrapper tool I wrote that loads the original software (available as jar-file) and then accesses the JFrame component (which was not protected) and iterates all child-components. The software that I loaded with this wrapper has several "specialities" (code with fixed sizes, fixed fonts, and so on) so there is a lot of code that takes care of certain UI-elements. But the general idea should be clear.
I just translated my commentary to English - I hope they are understandable.

For the Arduino IDE I guess the only components that need to be adressed are those in the toolbar as well as the tabs and the status bar. Everything else just scales fine or can be set (e.g. the editor's font size).
Chances to have it done within 100 lines are not that small (I hope - even if not it does not matter as long as it will work).

I just found that you can change some UI attributes within the "theme.txt" (\lib\theme)

Unfortunately the UI-Elements do not read other attributes but font-style, fgcolor and bgcolor.
But at least you (who uses a HighDPI screen) can enlarge the font sizes a bit. This already helps (e.g. for the Tab names and status bar)

So another (and maybe better) approach could be to patch the sources of
EditorStatus,
EditorHeader and
EditorToolbar
(maybe others, too)

so that the size of Buttons and Panels can be set via theme.txt.

The theme loader (Theme.class) seems to be able to read those attributes from the theme.txt (is written quite generic).

Just found that using a Java Decompiler on pde.jar. I'll try to find that in the original source as soon as I managed it to compile Arduino from source.

Here is what I managed to do:

Code Changes:

EditorToolbar.java lines 52-58

  static final int BUTTON_WIDTH  = 27 * Theme.getInteger("gui.scalefactor");
  /** Height of each toolbar button. */
  static final int BUTTON_HEIGHT = 32 * Theme.getInteger("gui.scalefactor");
  /** The amount of space between groups of buttons on the toolbar. */
  static final int BUTTON_GAP    = 5 * Theme.getInteger("gui.scalefactor");
  /** Size of the button image being chopped up. */
  static final int BUTTON_IMAGE_SIZE = 33 * Theme.getInteger("gui.scalefactor");

EditorToolbar.java line 397

    return new Dimension(3000 * Theme.getInteger("gui.scalefactor"), BUTTON_HEIGHT);

Preferences.java line 208

  static final int GRID_SIZE     = 33 * Theme.getInteger("gui.scalefactor");

Then you have to change the theme:

  • Scale all images by 200%.
  • Set all font sizes to the double size in themes.txt.
  • add the following lines to themes.txt:
#GUI generic
gui.scalefactor = 2

That's all :slight_smile:

Result:

Left side: patched Version on 4k Monitor
Right side: original version on 4k Monitor

Patched pde.jar and theme:

(contains both, resized theme and patched pde.jar. Replace file and folder in \lib, make a backup before).

Only tested with Windows-version of Arduino.

So the idea could be either to autodetect HighDPI screens and select a matching theme or let the user chose between original and highdpi theme.

Note: the code above is not suitable for a release version. ArduinoIDE will baldy fail to load if theme does not provide the scalingfactor. There have to be additional sanity checks to set scalingfactor to "1" if parameter is not provided.

Ok, and wow, that is a LOT simpler than I'd imagined. I'll give it a try here.... on Linux

I'm playing with this now, and trying to extend it to automatically adjust the fonts and images....

So far, it's working pretty well. But perhaps more edits are needed for the white tab background and the bottom status bar?

Looks like you have not scaled your Images in the theme-folder.

Yes, the statusbar looks strange. For me it worked good (as seen on the screenshots) but maybe I just did not tested it well enough (e.g. set abnormal high font sizes).

I can do more testing tomorrow (it's 21:30 here - need to prepare for bed and work now :slight_smile: ) if wished.
But great that you play with that code so there may be something useful at the end.

I'm making more progress... I've added code to automatically scale the fonts and images.

Some more things that should be edited:

EditorHeader.java lines 393-396

    if (OSUtils.isMacOS()) {
      return new Dimension(3000 * Theme.getInteger("gui.scalefactor"), Preferences.GRID_SIZE);
    }
    return new Dimension(3000 * Theme.getInteger("gui.scalefactor"), Preferences.GRID_SIZE - 1);

This will set the tab-panel on the upper toolbar as large as the Button panel (in case that you enlarge the window very wide).

Just checked the problem with the status bar - if I set a font size around 50 and higher it looks as strange as on your screenshot.
But I am not sure if this is a "problem" at all - at least the font size there does not need to be that high. (a size of 24 really works fine). To solve that the status bar panel needs to resize depending on its content. Not sure if this will have more aftermaths than wished.

I'll mount myself to bed now. I am very curious what you'll find out.

Edit:
Auto-Scaling is also a great solution. It's part of the Idea posted first (see page 1 of this thread).

Oh, I see the last bit I missed.... linestatus.height is a fixed number in the theme.

Ok, I think I've got all the stuff scaling from a single number. I changed it to percentage, so you can scale by 150%, for example.

200% scaling:

150% scaling:

I've created a pull request.