Modernize the UI of Your Eclipse Application

As today's displays have a high resolution (Retina / 4K / 5K) Eclipse applications also have to provide high resolution graphics. Otherwise the existing (low resolution) graphics are scaled up by SWT and look blurry. Let’s see where Eclipse application use graphics and how we can provide high resolution versions of them.

Transcript

1. Today’s displays are not 92 DPI any more Matthias Becker (ma.becker@sap.com) SAP SE
2. HIGH RES GRAPHICS Today’s displays are not 92 dpi any more
3. HERE
4. HOW • Vector Graphics • High Resolution Raster Graphics
5. • Encoded as list of pixels • Fast to read but not very flexible • Get blurry when scaled up Raster Images
6. • Encoded as drawing operations • Slow to read by very flexible • Stay crisp when scaled up Vector Images
7. • SWT does not support SVG • (Re-) Draw icons as SVG • Generate PNGs in multiple resolutions <command commandId=”…" icon="icons/full/elcl16/new.png" label="%Views.NewPropertySheet" style="push"/> Icons https://bugs.eclipse.org/bugs/show_bug.cgi?id=468945
8. <img src="../../images/arch-npi.svg"> Documentation I • Use SVGs directly https://bugs.eclipse.org/bugs/show_bug.cgi?id=548008
9. <img src="../select_pers.png" width="350"> Documentation II • Don’t use screenshots! • Make high resolution screenshots • Scale down in HTML code https://bugs.eclipse.org/bugs/show_bug.cgi?id=559498 https://bugs.eclipse.org/bugs/show_bug.cgi?id=566988
10. <extensionContent id="…" > <group label="Java Development"> <link id="hello-world" > <text>…</text> </link> </group> a#hello-world img {background-image:url("../javaapp48.svg");} Welcome Page • Use SVGs directly https://bugs.eclipse.org/bugs/show_bug.cgi?id=560465
11. Icons – Pixel Alignment • Align at exact pixel borders • Enable page grid • Use “snap” function
12. Icons – Level of Detail • Not too much detail • Stroke size 1 px
13. Icons – Consistent Language • Use existing elements • Same color palette