Nativescript: Ability to draw "real" pixels without native code?

Created on 4 Jul 2016 · 4Comments · Source: NativeScript/NativeScript

If I do CSS such as height: 1;, the view will render out 1 pixel according to device DPI. In real physical pixels this might be 2 pixels. If you set the height to 0.5, it will only make the view blurry, instead of rendering it with 1 real pixel.

Setting height to 0.5 with native code will however apply a real 1px. Doing this for every view I draw on the UI seems like an unnecessary task. I also have to make a Boolean variable to check whether this pixel adjustment has been addressed or not if I re-enter the page frame. In addition I need to write code for both iOS and Android in order for this to work on both platforms.

Shouldn't there be a way to do this with CSS or JS?

question

Source

NordlingDev

Most helpful comment

@NickIliev - Hi, reason why I need 1 real pixel is to achieve the same thinness as most apps have for borders around navigation and tab bar. See Instagram for instance. A 1 pixel border with DIP is visually too thick compared to what other apps achieve.

I will try using the screen.mainScreen.scale method you suggested. Thanks for the advice!

NordlingDev on 9 Jul 2016

👍3

All 4 comments

Hello @NordlingArt

CSS in NativeScript uses only DIP.
The question that comes to mind is why would you want to use "real" pixels instead of device independent pixels for your mobile applications. Each device has different resolution and screen metrics so using DIPs should be preferable and the right way to render UI for unknown user devices. Where your DP can be rendered as 2 pixels it could be 3.5 pixels on another device and it could be totally different value on other devices but the main idea is that they will look the same when using device independent metrics.

As mentioned in this discussion here there are some questions raised if we want to use pixels:

Would you expect in such cases to avoid antialiasing and also have a layout rounding? Should 5.5 inch 4x HD still use 1 px or it could scale up as 2 or 3 as long as it is perfectly snapped to real device pixels and doesn't get fuzzy?

And that kind of problems is easily avoided when using DIPs.
You can still use some "hacks" to force your DIP to render as 1 real pixel.
For example, you can get your device scale and render your UI accordingly.

to get your screen metrics use this in app.js

var platform = require("platform");

var screen = platform.screen;

console.log(screen.mainScreen.heightDIPs);
console.log(screen.mainScreen.heightPixels);
console.log(screen.mainScreen.scale); // this is actually =  pixels / DIPs
console.log(screen.mainScreen.widthDIPs);
console.log(screen.mainScreen.widthPixels);

From this point, you can use the device scale
var scale = screen.mainScreen.scale; (which is actually Pixels/DIP )
and use this information to force a 1 "real" pixel border for the specific device.

However using DIPs will save you additional work for creating a lot of different CSS files for each different scaled device and the better approach is to use DIPs with files for multiple screens where you can provide files with screen size qualifiers and use the same CSS for all looking exactly as expected without the extra work.