Go Down

Topic: Arduino IDE window really small on High DPI Dispay? (Read 53326 times) previous topic - next topic


Mar 15, 2015, 04:45 pm Last Edit: Mar 15, 2015, 08:26 pm by the-fallen
I just found that you can change some UI attributes within the "theme.txt"  (<arduino-path>\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
EditorHeader and
(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.


Mar 15, 2015, 07:58 pm Last Edit: Mar 15, 2015, 08:04 pm by the-fallen
Here is what I managed to do:

Code Changes:

EditorToolbar.java lines 52-58
Code: [Select]

  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
Code: [Select]

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

Preferences.java line 208
Code: [Select]

  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:
Code: [Select]

#GUI generic
gui.scalefactor = 2

That's all :)


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 <ardinopath>\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.


Mar 15, 2015, 08:10 pm Last Edit: Mar 15, 2015, 08:10 pm by Paul Stoffregen
Ok, and wow, that is a LOT simpler than I'd imagined.  I'll give it a try here.... on Linux


Mar 15, 2015, 08:57 pm Last Edit: Mar 15, 2015, 08:58 pm by Paul Stoffregen
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 :) ) 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.


Mar 15, 2015, 09:53 pm Last Edit: Mar 15, 2015, 09:55 pm by the-fallen
Some more things that should be edited:

EditorHeader.java lines 393-396
Code: [Select]

    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.

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.


Mar 15, 2015, 10:00 pm Last Edit: Mar 15, 2015, 10:01 pm by Paul Stoffregen
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:



Oh great. I'll try that this afternoon.

Really funny is the part where they set the width of the panel to 3000px. Seems to be a relict from times where LayoutManagers did not existed. But it works.

Thanks a lot.


I've updated the pull request to fix the test system failure.

Hopefully soon pre-built testing copies will appear from ArduinoBot.  :)


Mar 16, 2015, 06:49 pm Last Edit: Mar 16, 2015, 07:08 pm by the-fallen
Works fine here.

I have played around with the
(components that are displayed below the Editor, e.g. if you create a new tab and ArduinoIDE asks you for the name).
Those can be found in EditorStatus.java.

If I scale them it somehow does not look pretty. It works well but simply does not look good :D
Somehow the JTextField and the Buttons look "too big".

So I would simply keep it as it is. On the other hand it might be a problem if pixel density will increase even more (maybe on an 8k display in a few years) so I am not sure if we should address that as well, now.


To anyone else reading this thread, please help test PR2776-BUILD221.


Those 5 files are complete copies of the Arduino IDE with this scaling stuff added.  After installing, edit lib/theme/theme.txt to change the scale factor.

This is a perfect way to contribute to improving Arduino, without actually editing Arduino's source code.  The Arduino devs do listen to feedback when people test those special builds, especially when it involves testing on different computers with different screen resolution and pixel density.  Features like this need testing before the Arduino devs can merge then into Arduino's code base.

Please post your fPR2776-BUILD221 feedback on the GitHub page.  That's where the Arduino devs will see it.


Where to put the feedback? here?

I tested arduino-PR-2776-BUILD-221 on Windows 8.1, 64 Bit 15.6inch UHD Display.
Tested with 100%, 150%, 200% and 250% scaling factor.
Starts and displays fine, button "animations" are as expected.

Go Up