OSRS Plugin API
    Preparing search index...

    Class Grid

    A styled container, which displays the stored UI elements in a grid-based layout.

    Implements

    Index

    Constructors

    constructor

    Properties

    border columns 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)
    columns: number

    Number of columns in the grid. Rows are automatically generated to fit the number of elements.

    3

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

    -- Create a new grid that has two columns 
    local grid = osrs.Ui.grid({columns = 2})

    -- Add 3 items to the grid
    for i = 1, 3 do 
        grid:addChild(osrs.Ui.textButton({text = tostring(i)}))
    end

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

    -- Add container to the canvas 
    osrs.Ui.canvas:addChild(newWindow)
    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