OSRS Plugin API
    Preparing search index...

    Class Pane

    A stylable UI view, which displays as a scrollable rectangle and may contain other components. Note that when adding multiple panes to a container, the first pane will take up the entire available space by default unless manually sized.

    Hierarchy (View Summary)

    Implements

    Implemented by

    Index

    Constructors

    constructor

    Properties

    border height heightRatio positionMode sameLine scrollable scrollPosition sizeMode style visible width widthRatio x xRatio y yRatio

    Methods

    addChild child childCount insertChild removeChild removeChildAt

    Constructors

    Properties

    border: boolean

    Whether this pane should have a visible border.

    true

    -- Create new containers
    local window1 = osrs.Ui.window({title = "No Border"})
    local window2 = osrs.Ui.window({title = "Border"})

    -- Create new pane without a border
    local pane1 = osrs.Ui.pane(
        {
            border = false, 
            sizeMode = 1, 
            width = 100, 
            height = 100
        }
    )

    -- Create a pane with a border, on by default
    local pane2 = osrs.Ui.pane(
       {
            sizeMode = 1, 
            width = 100, 
            height = 100
        }
    )

    -- Add panes to containers 
    window1:addChild(pane1)
    window2:addChild(pane2)

    -- Add containers to the canvas 
    osrs.Ui.canvas:addChild(window1)
    osrs.Ui.canvas:addChild(window2)
    height: number

    The height of this element, in UI coordinate space.

    -- Create a window that has a set height
    local window = osrs.Ui.window({title = "Example Window", sizeMode = 1, height = 200})

    -- Add window to the canvas 
    osrs.Ui.canvas:addChild(window)
    heightRatio: number

    The percentage height of the screen this element should take up when sizeMode is set to LayoutMode.PROPORTIONAL. The number needs to be a decimal.

    -- Create new container with a set widthRatio and heightRatio
    local newWindow = osrs.Ui.window({title = "Example Window", sizeMode = 2, widthRatio = 0.7, heightRatio = .2})

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)
    positionMode: LayoutMode

    How this element should position itself.

    LayoutMode.AUTOMATIC

    -- Create a window that has automatic position mode, this is default
    local window1 = osrs.Ui.window({title = "Automatic Position Mode"})

    -- Create a window that has manual position mode 
    local window2 = osrs.Ui.window(
        {
            title = "Manual Position Mode", 
            positionMode = osrs.Ui.LayoutMode.MANUAL
        }
    )

    -- Add the windows to the canvas 
    osrs.Ui.canvas:addChild(window1)
    osrs.Ui.canvas:addChild(window2)
    sameLine: boolean

    Flag to control whether this element should be placed on the same line as the previous element.

    false

    -- Create a container
    local window = osrs.Ui.window({title = "Example Window"})

    -- Create three buttons, with two of them on the same line
    local button1 = osrs.Ui.textButton({text = "Button 1"})
    local button2 = osrs.Ui.textButton({text = "Button 2"})
    local button3 = osrs.Ui.textButton({text = "Button 3", sameLine = true})

    -- Add buttons to the container
    window:addChild(button1)
    window:addChild(button2)
    window:addChild(button3)

    -- Add container to the canvas
    osrs.Ui.canvas:addChild(window)
    scrollable: boolean

    Whether this pane should allow scrolling.

    true

    -- Create new containers
    local window1 = osrs.Ui.window({title = "Not Scrollable"})
    local window2 = osrs.Ui.window({title = "Scrollable"})

    -- Create new pane that is not scrollable
    local pane1 = osrs.Ui.pane({scrollable = false})

    -- Create a pane that is scrollable, on by default
    local pane2 = osrs.Ui.pane()

    -- Add a bunch of UI elemets to each pane 
    for i = 1, 10 do
        local button = osrs.Ui.textButton({text = "Button"})
        pane1:addChild(button)
        pane2:addChild(button)
    end

    -- Add panes to containers 
    window1:addChild(pane1)
    window2:addChild(pane2)

    -- Add containers to the canvas 
    osrs.Ui.canvas:addChild(window1)
    osrs.Ui.canvas:addChild(window2)
    scrollPosition: Vector2

    The current position of the scrolled content within this pane.

    (0,0)

    -- Create new container
    local newWindow = osrs.Ui.window(
        {
            title = "Example Window", 
            sizeMode = 1, 
            width = 200, 
            height = 100
        }
    )

    -- Create new pane with a new scroll position
    local pane = osrs.Ui.pane()
    pane.scrollPosition.x = 50
    pane.scrollPosition.y = 50

    -- Add a bunch of UI elemets to the pane 
    for i = 1, 10 do
        local button = osrs.Ui.textButton({text = "Button"})
        pane:addChild(button)
    end

    -- Add pane to the container
    newWindow:addChild(pane)

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)
    sizeMode: LayoutMode

    How this element should size itself.

    LayoutMode::AUTOMATIC

    -- Create a window that has automatic size mode, this is default
    local window1 = osrs.Ui.window({title = "Automatic Size Mode"})

    -- Create a window that has manual size mode 
    local window2 = osrs.Ui.window(
        {
            title = "Manual Size Mode", 
            sizeMode = osrs.Ui.LayoutMode.MANUAL, 
            height = 200, 
            width = 200
        }
    )

    -- Add the windows to the canvas 
    osrs.Ui.canvas:addChild(window1)
    osrs.Ui.canvas:addChild(window2)
    style: StyleTable

    The style, if any, that should be applied to this element.

    visible: boolean

    Determins if the container is visible or not.

    true

    -- Create new container that is visible
    local visibleWindow = osrs.Ui.window({title = "Visible Window"})

    -- Create new container that is not visible
    local notVisibleWindow = osrs.Ui.window({title = "Not visible Window", visible = false})

    -- Add the containers to the canvas 
    osrs.Ui.canvas:addChild(visibleWindow)
    osrs.Ui.canvas:addChild(notVisibleWindow)
    width: number

    The width of this element, in UI coordinate space.

    -- Create a window that has a set width
    local window = osrs.Ui.window({title = "Example Window", sizeMode = 1, width = 200})

    -- Add window to the canvas 
    osrs.Ui.canvas:addChild(window)
    widthRatio: number

    The percentage width of the screen this element should take up when sizeMode is set to LayoutMode.PROPORTIONAL. The number needs to be a decimal.

    -- Create new container with a set widthRatio and heightRatio
    local newWindow = osrs.Ui.window({title = "Example Window", sizeMode = 2, widthRatio = 0.7, heightRatio = .2})

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)
    x: number

    The horizontal component of this element's position, in UI coordinate space.

    -- Create a window with a set x position
    local window = osrs.Ui.window({title = "Example Window", positionMode = 1, x = 100})

    -- Add window to the canvas
    osrs.Ui.canvas:addChild(window)
    xRatio: number

    The percentage distance from the left side of the screen that this element's top-left corner should be placed at when positionMode is set to LayoutMode.PROPORTIONAL. The number needs to be a decimal.

    -- Create new container with a set xRatio and yRatio
    local newWindow = osrs.Ui.window({title = "Example Window", positionMode = 2, xRatio = 0.7, yRatio = .2})

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)
    y: number

    The vertical component of this element's position, in UI coordinate space.

    -- Create a window with a set y position
    local window = osrs.Ui.window({title = "Example Window", positionMode = 1, y = 100})

    -- Add window to the canvas
    osrs.Ui.canvas:addChild(window)
    yRatio: number

    The percentage distance from the top side of the screen that this element's top-left corner should be placed at when positionMode is set to LayoutMode.PROPORTIONAL. The number needs to be a decimal.

    -- Create new container with a set xRatio and yRatio
    local newWindow = osrs.Ui.window({title = "Example Window", positionMode = 2, xRatio = 0.7, yRatio = .2})

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)

    Methods

    • Adds an ImGUI element to the container.

      Parameters

      Returns void

      -- Create new container
      local newWindow = osrs.Ui.window({title = "Example Window"})

      -- Add new button to container
      newWindow:addChild(osrs.Ui.textButton({text = "test"}))

      -- Add container to the canvas 
      osrs.Ui.canvas:addChild(newWindow)

    • Retrieves the ImGUI element at the specified index.

      Parameters

      • index: number

        The index of the element to retrieve.

      Returns UiPrimitive

      -- Create new container
      local newWindow = osrs.Ui.window({title="Example Window"})

      -- Add a button to the container
      newWindow:addChild(osrs.Ui.textButton({text = "test"}))

      -- Set the example button as the button in the container
      local exampleButton = newWindow:child(0)

      -- See how the example button has the same text as the container button
      if exampleButton.text == "test" then 
          osrs.print("Example button coppied correctly")
      end

    • Returns the number of elements in the container.

      Returns number

      the number of childen in the container.

      -- Create new container
      local newWindow = osrs.Ui.window({title="Example Window"})

      -- Add two buttons to the container 
      newWindow:addChild(osrs.Ui.textButton({text = "Button 1"}))
      newWindow:addChild(osrs.Ui.textButton({text = "Button 2"}))

      -- Print how many elements are in the container 
      osrs.print(tostring(newWindow:childCount()))

    • Inserts an ImGUI element to the container to the specified index. If the size of the ImGUI list is smaller, it will be inseted at the end.

      Parameters

      • index: number

        The index to insert the element at.

      • obj: UiPrimitive

        The element to insert.

      Returns void

      -- Create new container
      local newWindow = osrs.Ui.window({title="Example Window"})

      -- Inserts a button to index 2 of the container
      newWindow:insertChild(2, osrs.Ui.textButton({text = "Button 1"}))

      -- See how the button gets moved to the end of the ImGUI list
      if newWindow:child(0).text == "Button 1" and newWindow:child(2) == nil then  
          osrs.print("Button 1 added to end of ImGUI list")
      end

      -- Inserts a button to index 0 of the container
      newWindow:insertChild(0, osrs.Ui.textButton({text = "Button 2"}))

      -- See how Button 2 button gets added at index 0 and Button 1 button gets moved to index 1
      if newWindow:child(0).text == "Button 2" and newWindow:child(1).text == "Button 1" then 
          osrs.print("Button 2 added to index 0, Button 1 moved to index 1")
      end

      -- Add container to the canvas 
      osrs.Ui.canvas:addChild(newWindow)

    • Removes the first instance of the specified ImGUI element in the container. No-op if not in element not present in container.

      Parameters

      Returns boolean

      -- Create new container
      local newWindow = osrs.Ui.window({title="Example Window"})

      -- Add two buttons to the container 
      newWindow:addChild(osrs.Ui.textButton({text = "Button 1"}))
      newWindow:addChild(osrs.Ui.textButton({text = "Button 2"}))

      -- Set the example button as the first button in the container
      local exampleButton = newWindow:child(0)

      -- Remove the first button 
      newWindow:removeChild(exampleButton)

      -- Add container to canvas and see how Button 2 is the only button in the container 
      osrs.Ui.canvas:addChild(newWindow)

    • Removes the element at the specified index in the container. Returns false if index is not present in container.

      Parameters

      • index: number

        The index of the element to remove.

      Returns boolean

      boolean indicating success of removal.

      -- Create new container
      local newWindow = osrs.Ui.window({title="Example Window"})

      -- Add two buttons to the container 
      newWindow:addChild(osrs.Ui.textButton({text = "Button 1"}))
      newWindow:addChild(osrs.Ui.textButton({text = "Button 2"}))

      -- Remove the first button 
      newWindow:removeChildAt(0, exampleButton)

      -- Add container to canvas and see how Button 2 is the only button in the container 
      osrs.Ui.canvas:addChild(newWindow)

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods