Canvas size inside a container

Just starting out? Need help? Post your questions and find answers here.
Mesa
Enthusiast
Enthusiast
Posts: 460
Joined: Fri Feb 24, 2012 10:19 am

Canvas size inside a container

Post 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.
PeDe
Enthusiast
Enthusiast
Posts: 331
Joined: Sun Nov 26, 2017 3:13 pm

Re: Canvas size inside a container

Post 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
User avatar
moulder61
Enthusiast
Enthusiast
Posts: 212
Joined: Sun Sep 19, 2021 6:16 pm
Location: U.K.

Re: Canvas size inside a container

Post 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.
"If it ain't broke, fix it until it is!

This message is brought to you thanks to SenselessComments.com

My PB stuff for Linux: "https://u.pcloud.link/publink/show?code ... z3MR0T3jyV
PureLust
Enthusiast
Enthusiast
Posts: 486
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: Canvas size inside a container

Post 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
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
User avatar
ChrisR
Addict
Addict
Posts: 1503
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: Canvas size inside a container

Post 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
Post Reply