Skip to content

UI.ImageButton

Name Mandatory Description Default Type
⬅️ Input The value that will be passed to the Action shards of the button. ImageGFX.Texture2D
Output ➡️ Indicates whether the button was clicked during this frame. Bool
Action No The shards to execute when the button is pressed. none NoneShard[Shard]
Scale No Scaling to apply to the source image. @f2(1 1) Float2Var(Float2)
Size No The size to render the image at. none Float2Var(Float2)
ScalingAware No When set to true, this image's pixels will be rendered 1:1 regardless of UI context point size. none BoolVar(Bool)None
Selected No Indicates whether the button is selected. none BoolVar(Bool)None

Clickable button with image.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
GFX.MainWindow(Contents: {
  ; Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  ; UI
  UI({
    UI.CentralPanel({
      LoadImage("../../assets/ShardsLogo.png") = image
      image | UI.ImageButton(Scale: @f2(0.1 0.1) Action: {Msg("Clicked")})
    })
  })

  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,
}
[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[warning] Context has 8 commandBuffers at release (0 released, 0 kept)
[warning] Context has 4 buffers at release (2 released, 4 kept)
[warning] Context has 13 textures at release (1 released, 13 kept)
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
GFX.MainWindow(Contents: {
  ; Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  ; UI
  UI({
    UI.CentralPanel({
      ; Setup
      LoadImage("data/ShardsLogo.png") >= image
      GFX.Texture >= texture
      ; Draw UI image by loading the image into graphics memory when needed
      image | UI.ImageButton(Scale: @f2(0.1 0.1))
      ; Draw UI image directly from a texture
      texture | UI.ImageButton(Scale: @f2(0.1 0.1))
    })
  })

  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,
}
[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[warning] Context has 8 commandBuffers at release (0 released, 0 kept)
[warning] Context has 8 buffers at release (2 released, 8 kept)
[warning] Context has 14 textures at release (2 released, 14 kept)