WEBCORE Problem with DPI

[Stapel_Andreas]

Project15.zip (95.2 KB)

I have a problem with the WEBCORE WEBPaintBox and screen DPI.
I load an image with a floor into the WEBPaintBox. With a mouse click in one of the rooms on the floor, I start a procedure that determines the four corners of the room and then draws a rectangle in the room.
This works perfectly as long as I work with 96 DPI.
If I change the screen resolution with a different DPI (for example, 144 DPI), my routine no longer works.
I have already tested various routines from the Internet. But they were not successful.
Or do I have to use to Javascript in that case.
I would like to be able to use it on the desktop as well as on a tablet.

[brunofierens]

I could not allocate time to completely decipher your algorithm.

As you show the same image in 96DPI and 144DPI, when you have the same visual size, the image is scaled up x1.5 in the 144DPI case. This causes that it has x1.5 more pixels horizontal and x1.5 more pixels vertical.

I suggest you start with the basics, i.e.
step 1:
ensure you use the proper coordinates to read the pixel under the mouse, so you properly take the scaling in account.

step 2:
ensure you can update the correct pixel under the mouse, i.e. to correctly map your mouse coordinate to the coordinate of the canvas to draw the pixel at the mouse position

When these basics are right, I would assume your algorithm will work regardless of scaling.
I cannot see a reason for switching to JavaScript, as this would basically use the same strategy.

[brunofierens]

Moreover, it is not clear how you expect

if dpi<>96 then
    begin
      result.X:=x*(dpi div 96);
      result.Y:=y*(dpi div 96);
    end;

to work properly.
I would rather expect something like

if dpi<>96 then
    begin
      result.X:=Round(x*dpi/96);
      result.Y:=Round(y*dpi/96);
    end;

[Stapel_Andreas]

Hello Bruno,
Thank you for your quick and extensive help.
But I still don't get any further.
I have changed my function for determining the pixels as you wrote it to me in your 2nd answer.
Still, I don't get the correct result.
I once wrote a small program in which I load an image into the WEBPaintBox and then change all colors that are dark to an orange tone. It runs with 96 DPI, but if I deviate from it (e.g. with 144 DPI) everything looks shifted.
I only change the magnification under Windows, not the resolution itself. it remains at 2560 x 1440 pixels.

Picture after color changing with 144 DPI

Picture with 96 DPI

I have testet it on diffent machines. also on Tablet.
with the same result.

here are the functions:

//---------------------------------------------------------
// Find dark Pixel
//---------------------------------------------------------
function TForm14.RGBColorIsDark(x,y: integer): boolean;
var
c1: TColor;
c: double;
begin
result:=false;
c1:=ColorToRGB(wpbPreview.Canvas.Pixels[x,y]);
c := (0.299 * GetRValue(c1))
+(0.587 * GetGValue(c1))
+(0.114 * GetBValue(c1)); // set grayscale color
Result := (c<160); // if color of point dark
end;
//---------------------------------------------------------

function TForm14.GetPixels(x,y: integer): TPoint;
var
dpi: integer;
begin
result.x:=x;
result.Y:=y;

dpi := GetScreenDPI;
if dpi>96 then
begin
result.x:=round(x * dpi / 96);
result.y:=round(y * dpi / 96);
end;
end;

// --------------------------------------------------
// look at all pixels in picture and check the color value
// ---------------------------------------------------
procedure TForm14.SetPixelColor(c: TColor);
var
x,y: integer;
xc,yc : integer;
begin
for x:=0 to wpbPreview.ClientWidth do
for y := 0 to wpbPreview.ClientHeight do
begin
xc:=GetPixels(x,y).x;
yc:=GetPixels(x,y).y;
if RGBColorIsDark(xc,yc) then
wpbPreview.Canvas.Pixels[xc,yc]:= c;
end;
end;

[Stapel_Andreas]

Hello Bruno,
I have now been able to solve the problem. It wasn't the routine as such that miscalculated the position of the pixels, but my approach. The screen has 144 DPI. The image I had loaded has 96 DPI in the original. So I converted the image to 144 DPI after loading. Lo and behold, the positions of the pixels matched and the rectangles are drawn correctly within the spaces.
Thank you again for your patience and help.