top of page
Trimble_Logo.svg.png
SketchUp-Horizontal-RGB-120pxl_0.png

UI Scaling & High DPI

You mostly don't need to think about it, unless you draw a custom UI to the SketchUp view.

 

Physical and Logical Pixels

 

A long time ago all desktop computer displays had a similar pixel density. If you created an element on your website that was 200 px wide, it was roughly as wide for anyone viewing it. The pixel was the natural base unit to define all sizes in.

 

Then one day came the high DPI monitors, computer screens with much higher resolutions and thus much smaller pixels. On such a screen existing websites and UIs would be too small and hard to see if the old pixel measurements were used directly.

 

Instead a scaling was introduced. On a device with twice the conventional pixel density and 200% UI scaling, those 200 px gets interpreted to mean 400 physical pixels. The concepts of the physical and logical pixel were born!

Where are logical pixels used?

Logical pixels are typically used for things that should look about the same size regardless of screen resolution. Logical pixels is an abstraction that allows you to not care how screen resolution varies.

 

In the SketchUp Ruby API, logical pixels are used when you size and position HtmlDialogs, or when you set the line width for a tool or overlay. Basically measurements that are visible to the end user typically use logical pixels.

Where are physical pixels used?

Physical pixels are often used when you want to work closer to the hardware. After all, the hardware only knows about physical pixels. For instance, if you want to draw a line to the screen, using physical pixels allows it to be perfectly aligned with the screen and look crisper, wheras logical pixels bla bla bla

 

In the SketchUp Ruby API, physical pixels are used for coordinates in the model view, e.g. for Tool mouse events, Tool and Overlay drawing, and picking entities.

 

Also the depreciated legacy WebDialog class uses it. Something something. Save your sanity! Use HtmlDialog instead!

This sounds complicated!

Often this isn't as complicated as it may sound.

 

For Html Dialogs, logical pixels are used consistently and the sizes and positions can be expected to look the same for users as for you.

 

Tool mouse events give you coordinates in physical pixels. Also the methods these coordinates are typically fed to - converting to 3D model points, picking model entities, drawing 2D previews to the screen - expect values in the same physical pixels.

 

Line width for Tool and Overlay drawing on the other hand uses logical pixels. Again you can define a width that looks right on your screen and expect it to look roughly the same for your users.

 

Even when you convert pixel values to 3D model units to draw symbols similarly to the Rotate tool protractor or Solar North compass, logical pixels are used. Here too you can define a size that looks good on your screen and expect it to look similar for your users.

Exceptions

The cases when you really need to think about UI scaling is when you get values from parts of the API using one kind of pixels, and pass it to parts of the API using the other.

 

For instance, if you want to position a HtmlDialog to align with something in the model

 

Set line width to match length in 3d space

 

Drag and drop between HtmlDialog and model viewport

 

Drawing 2D HUD!

Chapters

bottom of page