UI.AutoGrid

Name	Mandatory	Description	Default	Type
⬅️ Input		The input of the shard, if any		[Any]
Output ➡️		The resulting output of the shard		[Any]
Contents	No	The UI contents to be generated and inserted in each column for each element in the given sequence.	none	NoneShard[Shard]
Striped	No	Whether to alternate a subtle background color to every other row.	false	BoolVar(Bool)None
MaxGridWidth	No	Maximum grid width.	none	FloatVar(Float)
ItemWidth	No	The width of each item.	none	FloatVar(Float)
ColumnSpacing	No	Spacing between columns.	none	FloatVar(Float)
RowSpacing	No	Spacing between rows.	none	FloatVar(Float)
MaxTileHeight	No	Maximum height of each tile for viewport culling.	none	FloatVar(Float)

Works like UI.Grid, but given a Sequence, it will, it each object in the Sequence, execute the Shard provided in its Contents and automatically wrap the generated contents when it exceeds the grid's width.

Examples

Code

GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.Window(
        Title: "Greetings"
        MinWidth: 200.0 ; Makes window resizable but with a minimum width of 200, allowing resizing window to manipulate number of rows in autogrid
        Contents: {
          [
            "Hello" "World" "Please" "Sort" "Me"
            "Hello" 2 "Please" 4 5.5
          ]
          | UI.AutoGrid(
            ItemWidth: 300.0
            Contents: {
              UI.Button(Label: "Test" Action: {
                | Log ; Logs the given sequence element
              })
            }
          ) 
          ; | Log ; Passthrough
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)

[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)

 

Code

GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.Window(
        Title: "Greetings"
        Contents: {
          [
            "Hello" "World" "Please" "Sort" "Me"
            "Hello" "World" "Please" "Sort" "Me"
          ]
          | UI.AutoGrid(
            ItemWidth: 300.0
            MaxGridWidth: 700.0 ; Since item size is 300, max grid width is 700, only two items allowed per row
            Contents: {
              UI.Button(Label: "Test" Action: {
                | Log ; Logs the given sequence element
              })
            }
          ) 
          ; | Log ; Passthrough
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)

[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)

 

Code

GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.Window(
        Title: "Greetings"
        Contents: {
          [
            "Hello" "World" "Please" "Sort" "Me"
            "Hello" "World" "Please" "Sort" "Me"
          ]
          | UI.AutoGrid(
            ItemWidth: 300.0
            MaxGridWidth: 700.0
            ColumnSpacing: 50.0 ; Spacing between columns, not included in MaxGridWidth
            RowSpacing: 30.0 ; Spacing between rows
            Contents: {
              UI.Button(Label: "Test" Action: {
                | Log
              })
            }
          ) 
        }
      )
    ) | UI.Render(ui-draw-queue
)

    GFX.Render(Steps: render-steps)
  }
)

[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)

 

---