Using Hi-DPI icons in Eclipse Neon M7

EclipseCon France is taking place in a few weeks so I figured it’s about time I started working on my presentation and get distracted doing so. This year I’m talking about How Mylyn Docs can be a powerful tool. For the EclipseCon North America version of this talk I wrote a very basic LaTeX equation editor to show how you can easily integrate mathematical expressions into your PDF or EPUB using the Mylyn Docs API with a few extras. It has content assist and shows an icon illustrating the macro to the left of the text, as most of these implementations in Eclipse. Now rendering a more advanced mathematical operator or greek letter in 16×16 pixels just makes it look horrible, so I’ve been waiting for the day when I can use high(er) resolution images. That was only one of the reasons it was slightly embarrassing demonstrating that editor.

Support for high-DPI displays in Eclipse has been in the works for about four years. For those of us on a “retina” MacBook, the lack of it has not been much of a problem since fonts could be fixed with a simple setting and images are automatically scaled. Images appeared blurred, but that was it. However on Windows and Linux icons have been tiny, making Eclipse practically useless in some configurations.

Since Eclipse 4.6 milestone 6, presentation on high DPI monitors has improved. Images are now automatically scaled to the correct size also on Windows and Linux. The one bit that is missing is providing support for higher resolution icons, typically at 2x and 1.5x. I went digging through bug reports and code to see how this can be done. The bad news is that it’s not yet quite in place, the good news is that you can get it to work, and I guess it will be ready by the Neon release. There were a few bits that caught my attention:

  • The zoom level currently used by the operating system is exposed through the system property org.eclipse.swt.internal.deviceZoom. You should not have to care about that.
  • There is a SWT snippet for testing use of DPI-aware image constructors at the usual location.
  • There is a debug option to enable high-DPI images via the “@2x” filename convention. Yummy!

I’m really happy that the team behind the implementation chose this approach. It makes it so easy to add the new images and it does not break backwards compatibility. So I changed my target platform to use 4.6M7 and did some minor changes to the code in addition to generating the higher DPI image files. I used ImageDescriptor imageDescriptor = ImageDescriptor.createFromURL(url) to create the ImageDescriptor for each icon, as it appears that this is (only) the way to go. Earlier I was using the file path. That way the mechanism that detects the “@2x” suffix will be activated and the icon will be “magically” rendered correctly. I also added some debug options to my launch configuration to enable it:

Notice that in the screenshot above, the editor icon is also rendered in the 2x version. It was simply a matter of adding a new image in double the size with the “@2x” suffix. So we have icon.png, icon@1.5x.png and icon@2x.png.

For reference here is the 1x version:

equationwriter-intro-1x

I don’t know when we can officially use this feature and I am jumping the gun, but I think we should get started already and prepare our plug-ins. High DPI displays are here to stay. Thanks to everyone that has been working on this, you guys are awesome! I’m certainly looking forward to using Eclipse with beautifully rendered @2x-icons 😄

Oh, and if you want to learn about how to easily generate PDFs, EPUBs and more, including equations, using the Mylyn Docs API, meet me at EclipseCon France. And for those interested in the equation writer; there is a decent preview, utilizing MathJax for the LaTeX rendering.

equationwriter-intro-preview

Leave a Reply