Scaling SWT on high-resolution screens
description
Transcript of Scaling SWT on high-resolution screens
![Page 1: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/1.jpg)
Scaling SWT on high-res screens
Christian Campo, ECE 2014
![Page 2: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/2.jpg)
• High resolution Displays • „Windows“ based Scaling • Desktop Applications based Scaling
› Layout (Size, Gap) › Icons › SVG
• Use Eclipse Riena as an example
Overview
![Page 3: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/3.jpg)
Growing Resolutions
3840 x 2160 * taken from Wikipedia
![Page 4: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/4.jpg)
Growing Displaysizes
* taken from Commons Wikimedia
![Page 5: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/5.jpg)
30 2560 x 1600
Example Displaysizes 24 1920 x 1080
27 2560 x 1440
13 2560 x 1600
![Page 6: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/6.jpg)
Resolution vs Size
![Page 7: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/7.jpg)
Riena Example 1300 x 800
![Page 8: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/8.jpg)
30 2560 x 1600
24 1920 x 1080
Riena Example
13 2560 x 1600
![Page 9: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/9.jpg)
Resolution
› 3840*2160
![Page 10: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/10.jpg)
• Smartphones › Scaling Up is very common › Same UI on different resolution / sizes
• „Windows“ › no automatic scaling › Ability for the user to define a scaling
Scaling Up
![Page 11: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/11.jpg)
• „Make text and other items larger or smaller“ • Applied after Logoff and Login • Change of „Logical DPI“ not „Physical DPI“ • 100 % = 96 DPI
Scaling Up in „Windows“
![Page 12: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/12.jpg)
Eclipse IDE - Resolution
› 3840*2160– Skalierung 100 %
![Page 13: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/13.jpg)
Eclipse IDE - Resolution
› 3840*2160 – Skalierung 150 % (Standard)
![Page 14: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/14.jpg)
Eclipse IDE - Resolution
› 3840*2160 – Skalierung 200 %
![Page 15: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/15.jpg)
• Doesnt work well with all applications • Problems
› Widgets or text are not scaled › Blury Icons, Images › Icons are upscaled
Scaling Up in „Windows“
![Page 16: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/16.jpg)
VLC
100 % 150 %
• Buttons DONT scale • Text scales
![Page 17: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/17.jpg)
GLIPS
100 % 150 %
- Menu blurry (Icon, Text)
![Page 18: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/18.jpg)
Adobe Reader
![Page 19: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/19.jpg)
Notepad
500 %
Too small Gap Menu
![Page 20: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/20.jpg)
Control Panel -> Display
500 %
![Page 21: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/21.jpg)
• Change „DPI“ in „Windows“ • Application should adapt Scaling:
› Windows size › Navigationpanel size (if exists) › Icon size, Toolbars, Menus › Fonts, Textfield length › Tree › Etc.
The Goal
![Page 22: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/22.jpg)
SWT
› SWT Standard-Widgets › native Widgets of the Operation System › Fonts are scaled › Sizes (mostly) correct ?? › Images are partially scaled
› OS Images are scaled (e.g. Button with Arrow)
› Custom Images (gif, png) are NOT scaled (e.g. Tree Images)
› SWT Standard-Layouts (i.e. GridLayout, FormLayout etc.)
› Uses information from the SWT Widgets › Sizes are not scaled
› i.e. widthHint, horizontalIndent
![Page 23: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/23.jpg)
Eclipse
100 % 150 %
- Size Icon in Tree - Size Toolbar Icon
![Page 24: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/24.jpg)
Eclipse
Windows 7 Windows 8.1
100 % 500 %
- Tree icons - Toolbar icons
![Page 25: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/25.jpg)
Eclipse
500 %
![Page 26: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/26.jpg)
SWT
› Eclipse
![Page 27: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/27.jpg)
Eclipse
150 %
![Page 28: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/28.jpg)
Eclipse
150 %
![Page 29: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/29.jpg)
SWT
› JFace › Dialog
› convertHorizontalDLUsToPixels(int dlus)
› PixelConverter › Uses static methods
from Dialog class
![Page 30: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/30.jpg)
SWT
› Eclipse Riena › Framework for Enterprise Client/Server Application › Based on OSGi, RCP, SWT › Enduser Driven Navigation Concept
› Navigationtree › Widgets / Ridgets Abstraktion
![Page 31: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/31.jpg)
Riena (before)
Image Size
Width Textfield
Width Text
150 %
![Page 32: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/32.jpg)
Step 1 (Utility)
• SwtUtilities › Point getDpi()
› Display.getDpi() › getDpiFactors() › convertXToDpi(int) › …
• Converts absolute to DPI scaled
![Page 33: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/33.jpg)
• DPI factors
SWT (Utility)
100 % = 96 DPI = 1.0. 125 % = 120 DPI = 1.25 133 % = 128 DPI = 1.33 150 % = 144 DPI = 1.5 200 % = 192 DPI = 2.0 300 % = 288 DPI = 3.0
Note: DPI Factors could be different for X and Y but the Windows API underneath always delivers the same values for X and Y.
![Page 34: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/34.jpg)
Step 2 (Layout)
• GridLayout › DpiGridLayout
› Copy of GridLayout* › Scales values internally - widthHint - horizontalIndent - marginWidth - …
› GridData (internally converted to DpiGridData)
› Swap GridLayout with DpiGridLayout in Riena Applications
› DpiGridLayoutFactory
Note: *GridLayout is final -> Eclipse Bug #443008
![Page 35: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/35.jpg)
Step 2 (Layout - example)
setLayoutData(GridData data)
• On „parent.layout()“ the DpiGridlayout converts GridData into DpiGridData and stores it with setData(..., DpiGridData x)
![Page 36: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/36.jpg)
Step 2 (Layout)
› Layout › Other scalable Layouts
› DpiTableColumnLayout › AbstractDpiColumnLayout extends AbstractColumnLayout
› DpiTableLayout extends TableLayout
› Not yet implemented scaling › RowLayout › FormLayout › FillLayout › …
![Page 37: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/37.jpg)
Layout
![Page 38: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/38.jpg)
Step3 (Icons and Images)
› Images › „Scaling“
› One Image – several Scaling Levels
› One PNG per Level
Skalierung Größe Suffix
100 % 16x16 px 00
125 % 20x20 px 01
133 % 21x21 px 02
150 % 24x24 px 03
![Page 39: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/39.jpg)
Step3 (Icons and Images)
• ImageStore.getImage(„0022a“); • getDpiFactor() -> 1 -> suffix = „00“ • Search for „0022a00.png“ • Return SWT Image object
Note: ImageStore is a class in Riena // always „png“ if no extension is given
![Page 40: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/40.jpg)
Step3 (Images „extended“)
0022a_p_00.png
Actual image names can be more complex in Riena
0022 = image name a = image size(a=16x16, b=22x22 etc.) _p_ = image state (_p_= „pressed“, _d_ = „disabled“ 00 = dpi scale factor (00 = 100% etc)
id = iconManager.getIconID(„0022“, IconSize.A16, IconState.PRESSED); image = ImageStore.getInstance().getImage(id); // implicit adds dpi scale factor „00“
![Page 41: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/41.jpg)
Riena (after)
150 %
![Page 42: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/42.jpg)
Riena internal
› Width and Height of Shell › Width of Navigationtree › Checkboxes in tables (not in column 1) › Statusbar › PopupList with UIProcess (Jobs) › InfoFlyout
![Page 43: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/43.jpg)
• DPI Factors get larger and larger • Many different images for the various levels • Use vector graphics and scale at runtime ? • SVG ?
Step 4: More Scaling
![Page 44: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/44.jpg)
• Image as SVG › Vectorgraphics – stepless – limitless › Not directly supported by SWT › Using SVG Salamander
› https://svgsalamander.java.net/ › SVG -> AWT Image › AWT Image -> SWT Image › converted SWT Images are cached
Step 4: More Scaling
![Page 45: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/45.jpg)
• Image as SVG › Can be used for
› Image Sizes (a,b,c,d,e,f) › Image Scaling (00,01,02,03)
› ONE Image per State
Step 4: More Scaling
id = iconManager.getIconID(„cloud“, IconSize.A16); image = ImageStore.getInstance().getImage(id);
![Page 46: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/46.jpg)
Pitfalls
› Getting the DPI factor › Only in UI Thread
› Rounding problems when scaling › Round up / down
› Distinguish scaled numbers from unscaled numbers
› E.g. Layout › GridData.widthHint › DpiGridLayout
![Page 47: Scaling SWT on high-resolution screens](https://reader034.fdocuments.in/reader034/viewer/2022052201/559755e61a28abbc238b4615/html5/thumbnails/47.jpg)
Roundup
SWTUtilities Riena
Scaling
Layouts DpiGridLayout Images
Icons
Scaling Levels
SVG
DpiTableColumnLayout
ImageFactory
Thank you