Get Device PPI

[Stapel_Andreas]

I want to include a Javascript function in my Delphi WEBCore application to determine the device screen PPI.
Here is the function:

function getPPI()
{
var div = document.createElement("div");
div.style.width = "1in";
document.body.appendChild(div);
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
document.body.removeChild(div);
return parseFloat(ppi);
}

in the project HTML file I added the following entry:

In the unit, I create a call to the javascript function:

procedure TForm24.GetPPI;
var
PPI: Double;
begin
asm
@PPI = getPPI();
end;
ShowMessage('The screen PPI is: ' + FloatToStr(PPI));
end;

In the WebForm create procedure, I then call the function and want to display the value:

procedure TForm24.WebFormCreate(Sender: TObject);
begin
GetPPI;
end;

But I don't see anything at program startup. Where is my error in thinking?
When I comment out the call to the function, the program runs.

[brunofierens]

When I use this code:

procedure TForm1.WebFormCreate(Sender: TObject);
var
  PPI: Double;
begin
  asm
    PPI = getPPI();
  end;
ShowMessage('The screen PPI is: ' + FloatToStr(PPI));

end;

this works as expected.

Also, do you add the script in the head section?

[Stapel_Andreas]

Hello Bruno,
yes, in the header section I include this line:

< script src="getDevicePPI.js">

[brunofierens]

You did not specify the script was loaded via a script link.
My guess is that script was not yet fully loaded when you invoke getPPI from the app.
I included the script directly in the main project HTML and it works.

[Stapel_Andreas]

I have now added the function to the project HTML file.

here is the HTML. but still doesn't work.

Your browser does not support JavaScript! TMS Web Project

[Stapel_Andreas]

I have now added the function to the project HTML file.

here is the HTML. but still doesn't work.

< !DOCTYPE html>
< html lang="en">
< head>
< meta http-equiv="Content-type" content="text/html; charset=utf-8" />
< meta name="viewport" content="width=device-width, initial-scale=1">
< meta $(ThemeColor)>
< noscript>Your browser does not support JavaScript!
< link rel="icon" href="data:;base64,=">
< meta $(Manifest)>
< link $(FavIcon)/>
< title>TMS Web Project

< script>
function getPPI()
{
var div = document.createElement("div");
div.style.width = "1in";
document.body.appendChild(div);
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
document.body.removeChild(div);
return parseFloat(ppi);
}
< /script>

< script type="text/javascript" src="$(ProjectName).js">
< style>
< /style>
< /head>
< body>
< meta $(BodyParameters)>
< /body>
< script type="text/javascript">
rtl.run();
< /script>
< /html>

[brunofierens]

What is "it doesn't work"? Errors in the browser console? Incorrect value? Anything else?

I cannot see any issue. It works right-away here.
Project3.zip (5.4 KB)

[Clark_John1 (Clark John)]

I use the following line of javascript to do calculations based on different screen resolutions and browser magnifications.

  px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

[Stapel_Andreas]

Hello Bruno,
I found the error why the program was not running. I have defined the variable PPI as a pointer variable (@PPI instead only PPI)

@Stapel_Andreas

procedure TForm24.GetPPI;
var
PPI: Double;
begin
asm
@PPI = getPPI(); <--- here is the mistake
end;
ShowMessage('The screen PPI is: ' + FloatToStr(PPI));
end;

Thanks for your help Bruno!