Calculating diagonal value

[zeeshanjan82]

How is the diagonal value calculated. Do we need to use hardcoded values for diagonal when passing to CalcDPi function?

[LeaVerou]

Diagonal in inches or pixels? Context?

[zeeshanjan82]

Actually I am trying to implement this requirement: The user will define the dimensions of the buttons on my web page in cm/mm (in database) and I need to display them in these dimensions but as far as I have read I need to have the DPI of the screen in order to convert cm/mm into pixels. In the dpi.js I have found that it needs to have the diagonal value hardcoded into the function which is something I do not want. I would like to have a function which could calculate the DPI or which could finally convert the cm/mm in pixels. I am trying to implement dynamic pagination on the screen and the application should display only those many buttons as there is a screen size available for that I need to first calculate the screensize in cm/mm and then I need to calculate how many buttons should I fetch from the backend.

[zeeshanjan82]

Following is my issue:

var dppx = window.devicePixelRatio ||
    (window.matchMedia && window.matchMedia("(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches? 2 : 1) ||
    1;

var w = screen.width * dppx;
var h = screen.height * dppx;
var d = Math.sqrt(w*w + h*h);
var dpi = d / 13.3;
console.log(w, h, d, dpi);

In the above code the value 13.3 needs to be hardcoded and that is something I would like to detect by code otherwise I need to hardcode it.

http://plnkr.co/edit/CxhFhlHIYWmetH3dSM0R?p=preview

[zeeshanjan82]

As per the formula https://en.wikipedia.org/wiki/Display_size I tried to calculate the diagonal size from the height and width but then the issue comes which I think is related to converting pixels to cm/mm which makes me feel I am running in circles :)

[trusktr]

@zeeshanjan82 I believe you are running in circles. There's no API in the web to get the physical size of a screen, so you must hard code 13.3. @LeaVerou Correct me if I'm wrong, but I've looked and looked, and there's no way to actually determine the PPI/DPI of a screen purely programmatically without hard coding numbers and storing them somewhere (as in the device list of this repo).

Native apps let you use EDID info from a screen in order to get the measurements of the screen, which, unfortunately, isn't exposed in web APIs.

[zeeshanjan82]

Thanks @trusktr I agree but I wanted to have something very similar to what the native api provides, it does not really make sense to hard code the value.

[trusktr]

@zeeshanjan82 I know, I completely agree. I made a discussion about it on Specification|Discourse a while back: http://discourse.wicg.io/t/exposing-hardware-pixel-density-and-other-screen-metrics-via-window-screen/709/15

That's a good place to talk about standards. If you could log in, and heart my topic, that could help make it eventually happen. :}

[zeeshanjan82]

Sure Thanks @trusktr

[LeaVerou]

@trusktr Sorry for the delay, but yes, you're correct. There is no API to get the physical size.

[trusktr]

Isn't that lame? Don't you wish there was a standard web API for that? I definitely do!

[LeaVerou]

Yes, it’s totally lame. The argument I've heard against it is that there is no reliable way to get that info from the OS, as the OS often doesn’t have it either.