Page 1 of 1

Canvas size inside a container

Posted: Sat Dec 06, 2025 10:33 am
by Mesa
On Windows, depending on the container's border, the canvas is cropped by 0, -2, -4, or -6 pixels.

Could you tell me what the values ​​are on Linux and macOS?
Thank you.
(Use the code under to do that)

Code: Select all

Procedure draw()
  StartDrawing(CanvasOutput(1))
  Box(0, 0, 300, 200, #White)
  LineXY(GetGadgetState(20), 0, GetGadgetState(20), 199, #Red)
  LineXY(0, GetGadgetState(21), 300, GetGadgetState(21), #Green)
  StopDrawing()
  StartDrawing(CanvasOutput(3))
  Box(0, 0, 300, 200, #White)
  LineXY(GetGadgetState(20), 0, GetGadgetState(20), 199, #Red)
  LineXY(0, GetGadgetState(21), 300, GetGadgetState(21), #Green)
  StopDrawing()
  StartDrawing(CanvasOutput(5))
  Box(0, 0, 300, 200, #White)
  LineXY(GetGadgetState(20), 0, GetGadgetState(20), 199, #Red)
  LineXY(0, GetGadgetState(21), 300, GetGadgetState(21), #Green)
  StopDrawing()
  StartDrawing(CanvasOutput(7))
  Box(0, 0, 300, 200, #White)
  LineXY(GetGadgetState(20), 0, GetGadgetState(20), 199, #Red)
  LineXY(0, GetGadgetState(21), 300, GetGadgetState(21), #Green)
  StopDrawing()
  StartDrawing(CanvasOutput(9))
  Box(0, 0, 300, 200, #White)
  LineXY(GetGadgetState(20), 0, GetGadgetState(20), 199, #Red)
  LineXY(0, GetGadgetState(21), 300, GetGadgetState(21), #Green)
  StopDrawing()
EndProcedure


If OpenWindow(0, 0, 0, 1000, 600, "ContainerGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  
  ContainerGadget(0, 10, 10, 300, 200, #PB_Container_BorderLess)
  w = 300
  CanvasGadget(1, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(2, 20 + w, 10, 300, 200, #PB_Container_Flat)
  CanvasGadget(3, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(4, 40 + w + w, 10, 300, 200, #PB_Container_Raised)
  CanvasGadget(5, 0, 0, w, 200)
  CloseGadgetList()
  
  TextGadget(30, 10, 230, 900, 30, "Decrease the values ​​of the spingadgets to reveal the limits of the canvasgadget within all containers. The canvasgadgets and containers all measure 300x200")
  
  ContainerGadget(6, 0, 320, 300, 200, #PB_Container_Single)
  CanvasGadget(7, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(8, 20 + w, 320, 300, 200, #PB_Container_Double)
  CanvasGadget(9, 0, 0, w, 200)
  CloseGadgetList()
  
  SpinGadget(20, 70, 260, 80, 30, 0, 330, #PB_Spin_Numeric )
  SetGadgetState(20, 299)
  SpinGadget(21, 170, 260, 80, 30, 0, 330, #PB_Spin_Numeric )
  SetGadgetState(21, 199)
  
  draw()
  
  Repeat
    Event = WaitWindowEvent()
    
    Select Event
      Case #PB_Event_Gadget
        Select EventGadget()
          Case 20, 21
            If EventType() = #PB_EventType_Change
              draw()
            EndIf
        EndSelect
        
    EndSelect
  Until Event = #PB_Event_CloseWindow
  
EndIf

M.

Re: Canvas size inside a container

Posted: Sat Dec 06, 2025 12:09 pm
by PeDe
PB v6.30b4 arm64, Raspberry Pi OS (Trixie, Wayland)

The green and red lines are still visible at:
Container_Borderless: 299, 199
all others, they all look the same: 297, 197

Peter

Re: Canvas size inside a container

Posted: Sat Dec 06, 2025 1:56 pm
by moulder61
On Void Linux using PB 621 and PB 630b2 it's the same as PeDe says.

I'm using amd64 and X11 though, not Wayland.

Moulder.

Re: Canvas size inside a container

Posted: Sat Dec 06, 2025 2:19 pm
by PureLust
You should also consider the Desktop-scaling.

The Gadgets will be generated with the scaled Size (e.g.: if Scaling = 150%, a 300 Pixel wide Gadget will be 450 Pixel wide),
but the drawing inside the Canvas is always without scaling.

So, on my PC (with 150% scaling), the Gadgets are 450x300 Pixel in size and your drawing is only 2/3 the size of the Gadget.

You can use the following commands to get the scalingvalues and recalculate the needed real Gadgetsize:

Code: Select all

  Debug "Desktop DPI 'x' Faktor: " + DesktopResolutionX()
  Debug "Desktop DPI 'y' Faktor: " + DesktopResolutionY()

  Debug "Desktop DPI 'x' skalierter Wert von 300: " + DesktopScaledX(300)
  Debug "Desktop DPI 'y' skalierter Wert von 200: " + DesktopScaledY(200)

  Debug "Desktop DPI 'x' unskalierter Wert von 450: " + DesktopUnscaledX(450)
  Debug "Desktop DPI 'y' unskalierter Wert von 300: " + DesktopUnscaledY(300)

Greeting and have a nice Day,
PureLust

Re: Canvas size inside a container

Posted: Sat Dec 06, 2025 8:14 pm
by ChrisR
I calculate the borders like this for Windows.
For Linux and Mac, it should work for the left and top borders, but I don't know the equivalent of the GetClientRect() API to calculate the inner size, and thus the right and bottom borders.

Code: Select all

Structure StOffSet
  Left.i
  Top.i
  Right.i
  Bottom.i
  InnerWidth.i
  InnerHeight.i
EndStructure

Procedure ContainerOffset(Container, *OffSet.StOffSet)
  Protected DummyGadget
  If IsGadget(Container)
    ; Here an ex for Container and Canvas Container
    OpenGadgetList(Container)
    DummyGadget  = TextGadget(#PB_Any, 0, 0, 0, 0, "")
    *OffSet\Left = GadgetX(DummyGadget, #PB_Gadget_ScreenCoordinate) - GadgetX(Container, #PB_Gadget_ScreenCoordinate)
    *OffSet\Top  = GadgetY(DummyGadget, #PB_Gadget_ScreenCoordinate) - GadgetY(Container, #PB_Gadget_ScreenCoordinate)
    FreeGadget(DummyGadget)
    CloseGadgetList()
    
    CompilerSelect #PB_Compiler_OS
      CompilerCase #PB_OS_Windows
        Protected rcClient.RECT  
        GetClientRect_(GadgetID(Container), @rcClient)
        *OffSet\InnerWidth  = DesktopUnscaledX(rcClient\right)
        *OffSet\InnerHeight = DesktopUnscaledY(rcClient\bottom)
        *OffSet\Right       = GadgetWidth(Container)  - *OffSet\InnerWidth - *OffSet\Left
        *OffSet\Bottom      = GadgetHeight(Container) - *OffSet\InnerHeight - *OffSet\Top
      CompilerCase #PB_OS_Linux
        ; ??? GetClientRect for Linux
      CompilerCase #PB_OS_MacOS
        ; ??? GetClientRect for MacOS
    CompilerEndSelect
  EndIf
EndProcedure

Procedure draw()
  Protected OffSet.StOffSet
  ContainerOffset(0, @OffSet)
  Debug " OffSet Left=" + OffSet\Left + ", Top=" + OffSet\Top  + ", Right=" + OffSet\Right  + ", Bottom=" + OffSet\Bottom
  StartDrawing(CanvasOutput(1))
  Box(0, 0, 300, 200, #White)
  LineXY(DesktopScaledX(OffSet\InnerWidth)-1, 0, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Red)
  LineXY(0, DesktopScaledY(OffSet\InnerHeight)-1, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Green)
  StopDrawing()
  
  ContainerOffset(2, @OffSet)
  Debug " OffSet Left=" + OffSet\Left + ", Top=" + OffSet\Top  + ", Right=" + OffSet\Right  + ", Bottom=" + OffSet\Bottom
  StartDrawing(CanvasOutput(3))
  Box(0, 0, 300, 200, #White)
  LineXY(DesktopScaledX(OffSet\InnerWidth)-1, 0, DesktopScaledX(OffSet\InnerWidth)-1,  DesktopScaledY(OffSet\InnerHeight)-1, #Red)
  LineXY(0, DesktopScaledY(OffSet\InnerHeight)-1, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Green)
  StopDrawing()
  
  ContainerOffset(4, @OffSet)
  Debug " OffSet Left=" + OffSet\Left + ", Top=" + OffSet\Top  + ", Right=" + OffSet\Right  + ", Bottom=" + OffSet\Bottom
  StartDrawing(CanvasOutput(5))
  Box(0, 0, 300, 200, #White)
  LineXY(DesktopScaledX(OffSet\InnerWidth)-1, 0, DesktopScaledX(OffSet\InnerWidth)-1,  DesktopScaledY(OffSet\InnerHeight)-1, #Red)
  LineXY(0, DesktopScaledY(OffSet\InnerHeight)-1, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Green)
  StopDrawing()
  
  ContainerOffset(6, @OffSet)
  Debug " OffSet Left=" + OffSet\Left + ", Top=" + OffSet\Top  + ", Right=" + OffSet\Right  + ", Bottom=" + OffSet\Bottom
  StartDrawing(CanvasOutput(7))
  Box(0, 0, 300, 200, #White)
  LineXY(DesktopScaledX(OffSet\InnerWidth)-1, 0, DesktopScaledX(OffSet\InnerWidth)-1,  DesktopScaledY(OffSet\InnerHeight)-1, #Red)
  LineXY(0, DesktopScaledY(OffSet\InnerHeight)-1, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Green)
  StopDrawing()
  
  ContainerOffset(8, @OffSet)
  Debug " OffSet Left=" + OffSet\Left + ", Top=" + OffSet\Top  + ", Right=" + OffSet\Right  + ", Bottom=" + OffSet\Bottom
  StartDrawing(CanvasOutput(9))
  Box(0, 0, 300, 200, #White)
  LineXY(DesktopScaledX(OffSet\InnerWidth)-1, 0, DesktopScaledX(OffSet\InnerWidth)-1,  DesktopScaledY(OffSet\InnerHeight)-1, #Red)
  LineXY(0, DesktopScaledY(OffSet\InnerHeight)-1, DesktopScaledX(OffSet\InnerWidth)-1, DesktopScaledY(OffSet\InnerHeight)-1, #Green)
  StopDrawing()
EndProcedure


If OpenWindow(0, 0, 0, 1000, 600, "ContainerGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ContainerGadget(0, 10, 10, 300, 200, #PB_Container_BorderLess)
  w = 300
  CanvasGadget(1, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(2, 30 + w, 10, 300, 200, #PB_Container_Flat)
  CanvasGadget(3, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(4, 50 + w + w, 10, 300, 200, #PB_Container_Raised)
  CanvasGadget(5, 0, 0, w, 200)
  CloseGadgetList()
  
  TextGadget(30, 10, 230, 900, 30, "Decrease the values ​​of the spingadgets to reveal the limits of the canvasgadget within all containers. The canvasgadgets and containers all measure 300x200")
  
  ContainerGadget(6, 10, 320, 300, 200, #PB_Container_Single)
  CanvasGadget(7, 0, 0, w, 200)
  CloseGadgetList()
  
  ContainerGadget(8, 30 + w, 320, 300, 200, #PB_Container_Double)
  CanvasGadget(9, 0, 0, w, 200)
  CloseGadgetList()
  
  SpinGadget(20, 70, 260, 80, 30, 0, 330, #PB_Spin_Numeric )
  SetGadgetState(20, 299)
  SpinGadget(21, 170, 260, 80, 30, 0, 330, #PB_Spin_Numeric )
  SetGadgetState(21, 199)
  
  draw()
  
  Repeat
    Event = WaitWindowEvent()
    
    Select Event
      Case #PB_Event_Gadget
        Select EventGadget()
          Case 20, 21
            If EventType() = #PB_EventType_Change
              draw()
            EndIf
        EndSelect
        
    EndSelect
  Until Event = #PB_Event_CloseWindow
  
EndIf