SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
HOW TO MAKE YOUR ECLIPSE
APPLICATION HI-DPI READY!
Lakshmi P Shanmugam
Eclipse Platform Committer & Co-lead
IBM India
AGENDA
• Introduction to HiDPI
• Autoscaling
• Steps to make the application Hi-DPI ready
• Using high resolution images
• Using new Image constructors
• Using HiDPI APIs
• Missing pieces
WHAT IS HI-DPI?
• DPI - Dots Per Inch / PPI - Pixels Per Inch
• Measure of pixel density
• Default DPI - Windows & Linux-GTK - 96, Mac - 72
• HiDPI Display - Display with higher pixel density
HAVE HIGH PIXEL DENSITY
HI-DPI DISPLAYS
INCREASES LEGIBILITY/CLARITY/SHARPNESS OF UI ELEMENTS
WHY HI-DPI DISPLAYS?
EXISTING CODE AND APPLICATIONS ARE NOT DPI AWARE.
CURRENT PROBLEM
• Increasing DPI makes UI elements appear smaller on Windows &
Linux/GTK
100% zoom 200% zoom
on Hi-DPI monitoron non-Hi-DPI monitor
• On Mac, increasing DPI scales the UI elements and make them
appear blur
on non-Retina on Retina
DPI AWARE APPLICATION
WHAT IS A HI-DPI READY APPLICATION?
• UI is resolution independent
• UI elements appear the same size and are sharp on both standard and
high resolution
• Hi-DPI support provided by SWT is platform independent
• SWT APIs now use point geometry - Display, Graphics API, events use
points - clients need to work only with points and don't have to deal
with pixels
• SWT internally uses pixels for OS calls
LEVERAGE THE SUPPORT PROVIDED BY ECLIPSE
HOW TO MAKE THE APPLICATION HI-DPI
READY?
AUTOMATIC SCALING OF IMAGES & LAYOUT
AUTOSCALING
• Required when high resolution images are not available
• Mac provides native autoscaling of Images on Retina displays
• Text is scaled automatically by the OS on all platforms
• SWT provides automatic scaling of Images & layout on Windows &
Linux based on the OS zoom factor
• Available in Eclipse since Neon (4.6)
AUTOSCALING IN ACTION
TWEAKING SWT’S AUTOSCALING
• On Windows and GTK, SWT's auto-scaling can be configured using
the swt.autoScale Java property.
• swt.autoscale options: default is integer200
• false: scale factor is set to 100% (no scaling)
• integer200: scale factor depends on the current display
resolution, but only uses integer multiples of 100%. The detected
native zoom is generally rounded down (e.g. at 150%, will use
100%), unless close to the next integer multiple (currently at
175%, will use 200%). Maximal zoom level is 200%.
• experimental options - integer, quarter, exact, <value>
USE HI-RESOLUTION IMAGES
STEP 1:
USING HIGH RESOLUTION IMAGES IN YOUR
APPLICATION
• Out of the box support for icon images created using
org.eclipse.jface.resource.ImageDescriptor.createFromURL(URL)
• Append "@2x" to the file name and place into the same folder as
the original icon
• For OSGi bundles, you can also put the icons into a fragment that
contains the same folder structure
2x images in org.eclipse.jface
plugin
Example code
GENERATING HIGH RESOLUTION ICONS
• Create an SVG Image (Scalable Vector Graphics (SVG) is an XML-
based vector image format)
• Generate 1x and 2x png images
• eclipse.platform.images repo
• org.eclipse.images has platform images - svg, 1x, 2x png, gif
• org.eclipse.images.renderer has the generator
• Generator can be used to generate png images of different sizes
from SVG images
CREATE HI-DPI AWARE IMAGES
STEP 2:
USING NEW IMAGE CONSTRUCTORS
CREATE DPI AWARE IMAGES
• SWT provides two new Image constructors that accept image-
provider callbacks that allow clients to supply resolution-
dependent versions of images
• Depending on the user's monitor configuration, SWT will request
images with the corresponding zoom level.
• Available since Eclipse Mars (4.5)
REPLACE WITH NEW IMAGE CONSTRUCTOR FOR IMAGE DATA
• ImageDataProvider provides a callback mechanism to get
ImageData at the required zoom level to be rendered.
• ImageDataProvider.getImageData() will be called by SWT during
the image rendering. Returns the ImageData for the given zoom
level.
Example Code for ImageDataProvider
REPLACE WITH NEW IMAGE CONSTRUCTOR FOR FILE NAME
• ImageFileNameProvider provides a callback mechanism to get
image file path for the required zoom level.
• ImageFileNameProvider.getImagePath() will be called by SWT
during the image rendering. Returns the image filePath for the
given zoom level.
Example Code for ImageFileNameProvider
USE HI-DPI AWARE APIS TO
WORK WITH IMAGES
STEP 3:
GETTING THE IMAGE DATA
It is deprecated as it doesn’t make sense in an environment having
multiple monitors with different DPIs
• It returns an ImageData for the given zoom level
• It is mainly intended to be used by custom implementations of
ImageDataProvider that draw a composite image at the requested
zoom level based on other images.
It returns the ImageData at 100% zoom level
CODE TO DRAW ARROW IN BREADCRUMB VIEW
Replace Image.getImageData() with Image.getImageData(zoom)
USING ImageDescriptor
• ImageDescriptor and CompositeImageDescriptor classes in
org.eclipse.jface.resource are fully ready for HiDPI images.
• An ImageDescriptor is an object that knows how to create an
SWT image.
• Using ImageDescriptor abstract class involves defining a concrete
subclass and re-implementing the getImageData(int) method.
• Legacy subclasses that are not HiDPI-aware used to override the
deprecated getImageData() method.
• Subclasses must re-implement exactly one of the getImageData
methods and they should not re-implement both.
CREATES HI-DPI AWARE IMAGES
Using ImageDescriptor Class
subclasses must
implement
deprecated
USING CompositeImageDescriptor
• An Abstract base class for ImageDescriptor that synthesize
an image from other images in order to simulate the effect of
custom drawing.
• Subclasses must implement getSize() and
drawCompositeImage(int, int).
• Subclasses of CompositeImageDescriptor will have to update
their implementation of drawCompositeImage(int, int) to
use the new drawImage(ImageDataProvider, int, int)
method to draw the elements of the composite image.
CREATES HI-DPI AWARE COMPOSITE IMAGES
Using CompositeImageDescriptor Class
subclasses must
implement
deprecated
use
protected void drawCompositeImage(int width, int height) {
// draw overlay in top-right corner:
ImageData imageData = myImageDescriptor.getImageData();
drawImage(imageData, width - imageData.width, 0);
}
protected void drawCompositeImage(int width, int height) {
// draw overlay in top-right corner:
CachedImageDataProvider provider =
createCachedImageDataProvider(myImageDescriptor);
drawImage(provider, width - provider.getWidth(), 0);
}
Old Code:
New Code:
DecorationOverlayIcon
• A DecorationOverlayIcon is an ImageDescriptor that can be used
to overlay decoration images on to the 4 corner quadrants of a
base image.
• Clients that use DecorationOverlayIcon will get HiDPI support for
free.
MISSING PIECES!!
DYNAMIC RESOLUTION SWITCHING
• Moving the application from one monitor to another of different
DPI
• Works well on Mac due to native support
• Not supported by Eclipse on Windows & GTK
• Windows 7 & GTK - support same DPI on all monitors
• Windows 10 & Wayland - support different DPI on connected
monitors.
SCALING PROBLEM OF IMAGES DRAWN USING
GC ON MAC
PROPOSED APIs
• API to getDPI for each display/Monitor
• API to support DPI aware Image drawing in GC
DEMO
How to make your Eclipse application HiDPI ready!
THANK YOU!
swt.autoscale arguments:
• false: scale factor is set to 100% (no scaling)
• integer: scale factor depends on the current display resolution, but only uses
integer multiples of 100%. The detected native zoom is generally rounded
down (e.g. at 150%, will use 100%), unless close to the next integer multiple
(currently at 175%, will use 200%).
• quarter: scale factor depends on the current display resolution, but only uses
integer multiples of 25%. The detected native zoom is rounded to the closest
permissible value. (This used to be the default in the last two pre-release
milestones.)
• exact: scale factor is set to the native zoom (with 1% as minimal step)
• <value>: scale factor uses the given integer value in percent as zoom level
default: integer
nearest
smooth
• The scaling method can be configured by setting the
swt.autoScale.method system property to:
• Default: nearest, except on GTK when the deviceZoom is not an integer
multiple of 100%.
• The smooth strategy currently doesn't work on Windows and Mac OS X.
nearest: nearest-
neighbor interpolation,
may look jagged
smooth: smooth edges,
may look blurry

Weitere ähnliche Inhalte

Was ist angesagt?

Implements Cascaded Shadow Maps with using Texture Array
Implements Cascaded Shadow Maps with using Texture ArrayImplements Cascaded Shadow Maps with using Texture Array
Implements Cascaded Shadow Maps with using Texture ArrayYEONG-CHEON YOU
 
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)Johan Andersson
 
2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑Sukwoo Lee
 
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile Games
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile GamesUnreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile Games
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile GamesEpic Games China
 
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019Unity Technologies
 
Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4Michał Kłoś
 
Five Rendering Ideas from Battlefield 3 & Need For Speed: The Run
Five Rendering Ideas from Battlefield 3 & Need For Speed: The RunFive Rendering Ideas from Battlefield 3 & Need For Speed: The Run
Five Rendering Ideas from Battlefield 3 & Need For Speed: The RunElectronic Arts / DICE
 
Tales from the Optimization Trenches - Unite Copenhagen 2019
Tales from the Optimization Trenches - Unite Copenhagen 2019Tales from the Optimization Trenches - Unite Copenhagen 2019
Tales from the Optimization Trenches - Unite Copenhagen 2019Unity Technologies
 
Shader Programming With Unity
Shader Programming With UnityShader Programming With Unity
Shader Programming With UnityMindstorm Studios
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리changehee lee
 
Grapics debugging with RenderDoc
Grapics debugging with RenderDocGrapics debugging with RenderDoc
Grapics debugging with RenderDocMatias Lavik
 
Unreal Engine Basics 01 - Game Framework
Unreal Engine Basics 01 - Game FrameworkUnreal Engine Basics 01 - Game Framework
Unreal Engine Basics 01 - Game FrameworkNick Pruehs
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016Mark Kilgard
 
Physically Based Lighting in Unreal Engine 4
Physically Based Lighting in Unreal Engine 4Physically Based Lighting in Unreal Engine 4
Physically Based Lighting in Unreal Engine 4Lukas Lang
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APITristan Lorach
 

Was ist angesagt? (20)

Implements Cascaded Shadow Maps with using Texture Array
Implements Cascaded Shadow Maps with using Texture ArrayImplements Cascaded Shadow Maps with using Texture Array
Implements Cascaded Shadow Maps with using Texture Array
 
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
 
2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑
 
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile Games
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile GamesUnreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile Games
Unreal Open Day 2017 UE4 for Mobile: The Future of High Quality Mobile Games
 
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
 
Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4
 
Five Rendering Ideas from Battlefield 3 & Need For Speed: The Run
Five Rendering Ideas from Battlefield 3 & Need For Speed: The RunFive Rendering Ideas from Battlefield 3 & Need For Speed: The Run
Five Rendering Ideas from Battlefield 3 & Need For Speed: The Run
 
Tales from the Optimization Trenches - Unite Copenhagen 2019
Tales from the Optimization Trenches - Unite Copenhagen 2019Tales from the Optimization Trenches - Unite Copenhagen 2019
Tales from the Optimization Trenches - Unite Copenhagen 2019
 
الويب ديزاين
الويب ديزاينالويب ديزاين
الويب ديزاين
 
Introduction to DirectX 11
Introduction to DirectX 11Introduction to DirectX 11
Introduction to DirectX 11
 
Shaders in Unity
Shaders in UnityShaders in Unity
Shaders in Unity
 
Shader Programming With Unity
Shader Programming With UnityShader Programming With Unity
Shader Programming With Unity
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
High dynamic range
High dynamic rangeHigh dynamic range
High dynamic range
 
Grapics debugging with RenderDoc
Grapics debugging with RenderDocGrapics debugging with RenderDoc
Grapics debugging with RenderDoc
 
Lighting you up in Battlefield 3
Lighting you up in Battlefield 3Lighting you up in Battlefield 3
Lighting you up in Battlefield 3
 
Unreal Engine Basics 01 - Game Framework
Unreal Engine Basics 01 - Game FrameworkUnreal Engine Basics 01 - Game Framework
Unreal Engine Basics 01 - Game Framework
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016
 
Physically Based Lighting in Unreal Engine 4
Physically Based Lighting in Unreal Engine 4Physically Based Lighting in Unreal Engine 4
Physically Based Lighting in Unreal Engine 4
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan API
 

Ähnlich wie How to make your Eclipse application HiDPI ready!

Synapse india reviews on i phone and android os
Synapse india reviews on i phone and android osSynapse india reviews on i phone and android os
Synapse india reviews on i phone and android ossaritasingh19866
 
How to deal with Fragmentation on Android
How to deal with Fragmentation on AndroidHow to deal with Fragmentation on Android
How to deal with Fragmentation on AndroidSittiphol Phanvilai
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesRami Sayar
 
GIMP Designer Certification
GIMP Designer CertificationGIMP Designer Certification
GIMP Designer CertificationVskills
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernFITC
 
Android programming
Android programmingAndroid programming
Android programmingvijay_uttam
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldJoe Pairman
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the GoGil Irizarry
 
Working with camera and imaging on Nokia Asha software platform 1.0
Working with camera and imaging on Nokia Asha software platform 1.0Working with camera and imaging on Nokia Asha software platform 1.0
Working with camera and imaging on Nokia Asha software platform 1.0Microsoft Mobile Developer
 
Building Applications with the Microsoft Kinect SDK
Building Applications with the Microsoft Kinect SDKBuilding Applications with the Microsoft Kinect SDK
Building Applications with the Microsoft Kinect SDKDataLeader.io
 
Wids datathon slides_vanim
Wids datathon slides_vanimWids datathon slides_vanim
Wids datathon slides_vanimVani Mandava
 
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente FuentesImages blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente FuentesWey Wey Web
 
Wids datathon slides_vanim (updated)
Wids datathon slides_vanim (updated)Wids datathon slides_vanim (updated)
Wids datathon slides_vanim (updated)Vani Mandava
 
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...FELGO SDK
 
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksDeep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksAmazon Web Services
 
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksDeep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksAmazon Web Services
 
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0Microsoft Mobile Developer
 

Ähnlich wie How to make your Eclipse application HiDPI ready! (20)

Android - Graphics Animation in Android
Android - Graphics Animation in AndroidAndroid - Graphics Animation in Android
Android - Graphics Animation in Android
 
Synapse india reviews on i phone and android os
Synapse india reviews on i phone and android osSynapse india reviews on i phone and android os
Synapse india reviews on i phone and android os
 
Synapse india mobile apps update
Synapse india mobile apps updateSynapse india mobile apps update
Synapse india mobile apps update
 
How to deal with Fragmentation on Android
How to deal with Fragmentation on AndroidHow to deal with Fragmentation on Android
How to deal with Fragmentation on Android
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
 
GIMP Designer Certification
GIMP Designer CertificationGIMP Designer Certification
GIMP Designer Certification
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
Android programming
Android programmingAndroid programming
Android programming
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen World
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
 
Working with camera and imaging on Nokia Asha software platform 1.0
Working with camera and imaging on Nokia Asha software platform 1.0Working with camera and imaging on Nokia Asha software platform 1.0
Working with camera and imaging on Nokia Asha software platform 1.0
 
Building Applications with the Microsoft Kinect SDK
Building Applications with the Microsoft Kinect SDKBuilding Applications with the Microsoft Kinect SDK
Building Applications with the Microsoft Kinect SDK
 
Wids datathon slides_vanim
Wids datathon slides_vanimWids datathon slides_vanim
Wids datathon slides_vanim
 
Intro to auto_desk_maya2015
Intro to auto_desk_maya2015Intro to auto_desk_maya2015
Intro to auto_desk_maya2015
 
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente FuentesImages blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
 
Wids datathon slides_vanim (updated)
Wids datathon slides_vanim (updated)Wids datathon slides_vanim (updated)
Wids datathon slides_vanim (updated)
 
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
 
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksDeep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive: Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
 
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech TalksDeep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
Deep Dive on Amazon EC2 Elastic GPUs - May 2017 AWS Online Tech Talks
 
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
 

Mehr von Lakshmi Priya

Ece2020 tips&amp;tricks-with-shortcuts
Ece2020 tips&amp;tricks-with-shortcutsEce2020 tips&amp;tricks-with-shortcuts
Ece2020 tips&amp;tricks-with-shortcutsLakshmi Priya
 
EGit Essentials, Tips & Tricks
EGit Essentials, Tips & TricksEGit Essentials, Tips & Tricks
EGit Essentials, Tips & TricksLakshmi Priya
 
Eclipse Tips and Tricks
Eclipse Tips and TricksEclipse Tips and Tricks
Eclipse Tips and TricksLakshmi Priya
 
Eclipse Tips and Tricks
Eclipse Tips and TricksEclipse Tips and Tricks
Eclipse Tips and TricksLakshmi Priya
 
Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Lakshmi Priya
 
Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Lakshmi Priya
 
Whats new in Eclipse Photon!
Whats new in Eclipse Photon!Whats new in Eclipse Photon!
Whats new in Eclipse Photon!Lakshmi Priya
 
What's new in Eclipse Mars
What's new in Eclipse MarsWhat's new in Eclipse Mars
What's new in Eclipse MarsLakshmi Priya
 
Eclipse tips & tricks
Eclipse tips & tricksEclipse tips & tricks
Eclipse tips & tricksLakshmi Priya
 
Top 3 SWT Exceptions
Top 3 SWT ExceptionsTop 3 SWT Exceptions
Top 3 SWT ExceptionsLakshmi Priya
 

Mehr von Lakshmi Priya (10)

Ece2020 tips&amp;tricks-with-shortcuts
Ece2020 tips&amp;tricks-with-shortcutsEce2020 tips&amp;tricks-with-shortcuts
Ece2020 tips&amp;tricks-with-shortcuts
 
EGit Essentials, Tips & Tricks
EGit Essentials, Tips & TricksEGit Essentials, Tips & Tricks
EGit Essentials, Tips & Tricks
 
Eclipse Tips and Tricks
Eclipse Tips and TricksEclipse Tips and Tricks
Eclipse Tips and Tricks
 
Eclipse Tips and Tricks
Eclipse Tips and TricksEclipse Tips and Tricks
Eclipse Tips and Tricks
 
Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!
 
Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!Whats new in Eclipse Oxygen!
Whats new in Eclipse Oxygen!
 
Whats new in Eclipse Photon!
Whats new in Eclipse Photon!Whats new in Eclipse Photon!
Whats new in Eclipse Photon!
 
What's new in Eclipse Mars
What's new in Eclipse MarsWhat's new in Eclipse Mars
What's new in Eclipse Mars
 
Eclipse tips & tricks
Eclipse tips & tricksEclipse tips & tricks
Eclipse tips & tricks
 
Top 3 SWT Exceptions
Top 3 SWT ExceptionsTop 3 SWT Exceptions
Top 3 SWT Exceptions
 

Kürzlich hochgeladen

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 

Kürzlich hochgeladen (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

How to make your Eclipse application HiDPI ready!

  • 1. HOW TO MAKE YOUR ECLIPSE APPLICATION HI-DPI READY! Lakshmi P Shanmugam Eclipse Platform Committer & Co-lead IBM India
  • 2. AGENDA • Introduction to HiDPI • Autoscaling • Steps to make the application Hi-DPI ready • Using high resolution images • Using new Image constructors • Using HiDPI APIs • Missing pieces
  • 3. WHAT IS HI-DPI? • DPI - Dots Per Inch / PPI - Pixels Per Inch • Measure of pixel density • Default DPI - Windows & Linux-GTK - 96, Mac - 72 • HiDPI Display - Display with higher pixel density
  • 4. HAVE HIGH PIXEL DENSITY HI-DPI DISPLAYS
  • 5. INCREASES LEGIBILITY/CLARITY/SHARPNESS OF UI ELEMENTS WHY HI-DPI DISPLAYS?
  • 6. EXISTING CODE AND APPLICATIONS ARE NOT DPI AWARE. CURRENT PROBLEM • Increasing DPI makes UI elements appear smaller on Windows & Linux/GTK 100% zoom 200% zoom
  • 7. on Hi-DPI monitoron non-Hi-DPI monitor
  • 8. • On Mac, increasing DPI scales the UI elements and make them appear blur
  • 10. DPI AWARE APPLICATION WHAT IS A HI-DPI READY APPLICATION? • UI is resolution independent • UI elements appear the same size and are sharp on both standard and high resolution • Hi-DPI support provided by SWT is platform independent • SWT APIs now use point geometry - Display, Graphics API, events use points - clients need to work only with points and don't have to deal with pixels • SWT internally uses pixels for OS calls
  • 11. LEVERAGE THE SUPPORT PROVIDED BY ECLIPSE HOW TO MAKE THE APPLICATION HI-DPI READY?
  • 12. AUTOMATIC SCALING OF IMAGES & LAYOUT AUTOSCALING • Required when high resolution images are not available • Mac provides native autoscaling of Images on Retina displays • Text is scaled automatically by the OS on all platforms • SWT provides automatic scaling of Images & layout on Windows & Linux based on the OS zoom factor • Available in Eclipse since Neon (4.6)
  • 14. TWEAKING SWT’S AUTOSCALING • On Windows and GTK, SWT's auto-scaling can be configured using the swt.autoScale Java property. • swt.autoscale options: default is integer200 • false: scale factor is set to 100% (no scaling) • integer200: scale factor depends on the current display resolution, but only uses integer multiples of 100%. The detected native zoom is generally rounded down (e.g. at 150%, will use 100%), unless close to the next integer multiple (currently at 175%, will use 200%). Maximal zoom level is 200%. • experimental options - integer, quarter, exact, <value>
  • 16. USING HIGH RESOLUTION IMAGES IN YOUR APPLICATION • Out of the box support for icon images created using org.eclipse.jface.resource.ImageDescriptor.createFromURL(URL) • Append "@2x" to the file name and place into the same folder as the original icon • For OSGi bundles, you can also put the icons into a fragment that contains the same folder structure
  • 17. 2x images in org.eclipse.jface plugin Example code
  • 18. GENERATING HIGH RESOLUTION ICONS • Create an SVG Image (Scalable Vector Graphics (SVG) is an XML- based vector image format) • Generate 1x and 2x png images • eclipse.platform.images repo • org.eclipse.images has platform images - svg, 1x, 2x png, gif • org.eclipse.images.renderer has the generator • Generator can be used to generate png images of different sizes from SVG images
  • 19. CREATE HI-DPI AWARE IMAGES STEP 2:
  • 20. USING NEW IMAGE CONSTRUCTORS CREATE DPI AWARE IMAGES • SWT provides two new Image constructors that accept image- provider callbacks that allow clients to supply resolution- dependent versions of images • Depending on the user's monitor configuration, SWT will request images with the corresponding zoom level. • Available since Eclipse Mars (4.5)
  • 21. REPLACE WITH NEW IMAGE CONSTRUCTOR FOR IMAGE DATA • ImageDataProvider provides a callback mechanism to get ImageData at the required zoom level to be rendered. • ImageDataProvider.getImageData() will be called by SWT during the image rendering. Returns the ImageData for the given zoom level.
  • 22. Example Code for ImageDataProvider
  • 23. REPLACE WITH NEW IMAGE CONSTRUCTOR FOR FILE NAME • ImageFileNameProvider provides a callback mechanism to get image file path for the required zoom level. • ImageFileNameProvider.getImagePath() will be called by SWT during the image rendering. Returns the image filePath for the given zoom level.
  • 24. Example Code for ImageFileNameProvider
  • 25. USE HI-DPI AWARE APIS TO WORK WITH IMAGES STEP 3:
  • 26. GETTING THE IMAGE DATA It is deprecated as it doesn’t make sense in an environment having multiple monitors with different DPIs • It returns an ImageData for the given zoom level • It is mainly intended to be used by custom implementations of ImageDataProvider that draw a composite image at the requested zoom level based on other images. It returns the ImageData at 100% zoom level
  • 27. CODE TO DRAW ARROW IN BREADCRUMB VIEW Replace Image.getImageData() with Image.getImageData(zoom)
  • 28. USING ImageDescriptor • ImageDescriptor and CompositeImageDescriptor classes in org.eclipse.jface.resource are fully ready for HiDPI images. • An ImageDescriptor is an object that knows how to create an SWT image. • Using ImageDescriptor abstract class involves defining a concrete subclass and re-implementing the getImageData(int) method. • Legacy subclasses that are not HiDPI-aware used to override the deprecated getImageData() method. • Subclasses must re-implement exactly one of the getImageData methods and they should not re-implement both.
  • 29. CREATES HI-DPI AWARE IMAGES Using ImageDescriptor Class subclasses must implement deprecated
  • 30. USING CompositeImageDescriptor • An Abstract base class for ImageDescriptor that synthesize an image from other images in order to simulate the effect of custom drawing. • Subclasses must implement getSize() and drawCompositeImage(int, int). • Subclasses of CompositeImageDescriptor will have to update their implementation of drawCompositeImage(int, int) to use the new drawImage(ImageDataProvider, int, int) method to draw the elements of the composite image.
  • 31. CREATES HI-DPI AWARE COMPOSITE IMAGES Using CompositeImageDescriptor Class subclasses must implement deprecated use
  • 32. protected void drawCompositeImage(int width, int height) { // draw overlay in top-right corner: ImageData imageData = myImageDescriptor.getImageData(); drawImage(imageData, width - imageData.width, 0); } protected void drawCompositeImage(int width, int height) { // draw overlay in top-right corner: CachedImageDataProvider provider = createCachedImageDataProvider(myImageDescriptor); drawImage(provider, width - provider.getWidth(), 0); } Old Code: New Code:
  • 33. DecorationOverlayIcon • A DecorationOverlayIcon is an ImageDescriptor that can be used to overlay decoration images on to the 4 corner quadrants of a base image. • Clients that use DecorationOverlayIcon will get HiDPI support for free.
  • 35. DYNAMIC RESOLUTION SWITCHING • Moving the application from one monitor to another of different DPI • Works well on Mac due to native support • Not supported by Eclipse on Windows & GTK • Windows 7 & GTK - support same DPI on all monitors • Windows 10 & Wayland - support different DPI on connected monitors.
  • 36. SCALING PROBLEM OF IMAGES DRAWN USING GC ON MAC
  • 37. PROPOSED APIs • API to getDPI for each display/Monitor • API to support DPI aware Image drawing in GC
  • 38. DEMO
  • 41. swt.autoscale arguments: • false: scale factor is set to 100% (no scaling) • integer: scale factor depends on the current display resolution, but only uses integer multiples of 100%. The detected native zoom is generally rounded down (e.g. at 150%, will use 100%), unless close to the next integer multiple (currently at 175%, will use 200%). • quarter: scale factor depends on the current display resolution, but only uses integer multiples of 25%. The detected native zoom is rounded to the closest permissible value. (This used to be the default in the last two pre-release milestones.) • exact: scale factor is set to the native zoom (with 1% as minimal step) • <value>: scale factor uses the given integer value in percent as zoom level default: integer
  • 42. nearest smooth • The scaling method can be configured by setting the swt.autoScale.method system property to: • Default: nearest, except on GTK when the deviceZoom is not an integer multiple of 100%. • The smooth strategy currently doesn't work on Windows and Mac OS X. nearest: nearest- neighbor interpolation, may look jagged smooth: smooth edges, may look blurry