ImageView

Table of contents

An element which is used to display an image. We can also generate inline-images from application resources using the InlineImageFromResource function, but this should only be used in WebAssembly applications due to potential performance issues with some browsers. The ImageView interface allows to display different images based on screen density by setting the "fit" property. It also provides methods for retrieving information about the displayed image such as its source URL, original size and it triggers events when an image is loaded or if there's an error during loading

Create from source

func NewImageView(session Session, params Params) ImageView

Create new image view object and returns its interface

Create from resource

ImageView {
    id = imageView,
    src = "icon.svg",
}

Interface description

Inherit methods, properties and events from View

CurrentSource() string

Return the full URL of the image currently visible in the ImageView. If the image hasn't been loaded yet or an load error has occurred, then "" is returned.

NaturalSize() (float64, float64)

Returns the intrinsic, density-corrected size (width, height) of the image in pixels. If the image hasn't been loaded yet or an load error has occurred, then (0, 0) is returned.

Properties

"alt-text"

Set a description of the image

Constant: AltText

Types: string

Examples

ImageView {
    width = 10em,
    height = 10em,
    fit = contain,
    alt-text = "Example",
    src = "example.png",
}

image := rui.NewImageView(session, rui.Params{
    rui.Width:   rui.Em(10),
    rui.Height:  rui.Em(10),
    rui.Fit:     rui.ContainFit,
    rui.AltText: "Example",
    rui.Source:  "example.png",
})

"fit"

Defines the image scaling parameters

Constant: Fit

Types: int, string

Values

int string Description
0(NoneFit) "none" The image is not resized
1(ContainFit) "contain" The image is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box
2(CoverFit) "cover" The image is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit
3(FillFit) "fill" The image to fill the element’s content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit
4(ScaleDownFit) "scale-down" The image is sized as if NoneFit or ContainFit were specified, whichever would result in a smaller concrete object size

"image-horizontal-align"

Sets the horizontal alignment of the image relative to its bounds

Constant: ImageHorizontalAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment

"image-vertical-align"

Sets the vertical alignment of the image relative to its bounds

Constant: ImageVerticalAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment

"src"

Set either the name of the image in the "images" folder of the resources, or the URL of the image or inline-image. An inline-image is the content of an image file encoded in base64 format

Constant: Source

Types: string

Examples

ImageView {
    width = 10em,
    height = 10em,
    fit = contain,
    src = "example.png",
}

ImageView {
    width = 10em,
    height = 10em,
    fit = contain,
    src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
}

image := rui.NewImageView(session, rui.Params{
    rui.Width:   rui.Em(10),
    rui.Height:  rui.Em(10),
    rui.Fit:     rui.ContainFit,
    rui.Source:  "example.png",
})

image := rui.NewImageView(session, rui.Params{
    rui.Width:   rui.Em(10),
    rui.Height:  rui.Em(10),
    rui.Fit:     rui.ContainFit,
    rui.Source:  "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
})

"srcset"

String which identifies one or more image candidate strings, separated using comma(,) each specifying image resources to use under given screen density. This property is only used if building an application for js/wasm platform

Constant: SrcSet

Types: string

Examples

ImageView {
    src = "https://www.some-host.com/images/example_2x.png",
    srcset = "https://www.some-host.com/images/example_1x.png 1x, https://www.some-host.com/images/example_2x.png 2x",
}

image := rui.NewImageView(session, rui.Params{
    rui.Source:  "https://www.some-host.com/images/example_2x.png",
    rui.SrcSet: "https://www.some-host.com/images/example_1x.png 1x, https://www.some-host.com/images/example_2x.png 2x",
})

Events

"error-event"

Occur when the image loading has been failed

Constant: ErrorEvent

General listener format:

func(image rui.ImageView)

where: * image - Interface of an image view which generated this event

Allowed listener formats:

func()

"loaded-event"

Occur when the image has been loaded

Constant: LoadedEvent

General listener format:

func(iamge rui.ImageView)

where: * image - Interface of an image view which generated this event

Allowed listener formats:

func()

func GetImageViewAltText(view View, subviewID ...string) string

Returns an alternative text description of an ImageView subview. If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func GetImageViewFit(view View, subviewID ...string) int

Returns how the content of a replaced ImageView subview: NoneFit (0), ContainFit (1), CoverFit (2), FillFit (3) and ScaleDownFit (4). If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func GetImageViewHorizontalAlign(view View, subviewID ...string) int

Return the vertical align of an ImageView subview: LeftAlign (0), RightAlign (1), CenterAlign (2). If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func GetImageViewSource(view View, subviewID ...string) string

Returns the image URL of an ImageView subview. If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func GetImageViewVerticalAlign(view View, subviewID ...string) int

Return the vertical align of an ImageView subview: TopAlign (0), BottomAlign (1), CenterAlign (2). If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func ImageViewByID(rootView View, id string) ImageView

Return an ImageView with id equal to the argument of the function or nil if there is no such View or View is not an ImageView

func InlineImageFromResource(filename string) (string, bool)

Reads image from resources and converts it to an inline image. Supported png, jpeg, gif and svg files

func LoadImage(url string, onLoaded func(Image), session Session) Image

Starts the async image loading by url

© Alxanosoft inc.