CUI

Components / Basics

Image

Shows a picture loaded from a file or made from your own pixels.

Functions: cui_image, cui_image_create, cui_image_destroy, cui_image_load

Usage

int w, h;
cui_texture tex = cui_image_load(ui, "photo.jpg", &w, &h);      /* PNG or JPEG */
cui_image(ui, tex, .width = CUI_PX(240), .height = CUI_PX(160), .radius = 12);
cui_texture raw = cui_image_create(ui, w, h, rgba_pixels);        /* from memory */
cui_image_destroy(ui, tex);

cui_image_load returns a cui_texture, or 0 when the file cannot be read or decoded. Call it once, not on every frame, keep the texture for as long as you draw it, and free it with cui_image_destroy. cui_image_create takes w * h pixels of four bytes each, red, green, blue and alpha, and copies them. cui_image returns nothing and stretches the texture over the box given by width and height, 64 by 64 points when they are not set, so work the height out from the pixel size to keep the proportions.

PNG and JPEG are decoded out of the box. Configure with -DCUI_IMAGE_ALL_FORMATS=ON to add BMP, GIF and TGA, or -DCUI_STB_IMAGE=OFF to leave decoding out and upload your own pixels with cui_image_create.

Options of cui_image

OptionTypeDefaultDescription
.widthcui_sizeWidth: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.heightcui_sizeHeight: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.radiusfloatcorner radius in points
.tintcui_colorcolor the image is multiplied by; unset draws it as it is

Related

  • Card and metric: A card is a surface that groups content. A metric shows one number with its change and an optional sparkline.
  • Badge, avatar and keycap: Small labels: a badge for a status or a count, an avatar for a person, and a keycap for a keyboard key.
  • Icons: The Lucide icon set embedded as a font, used by name through CUI_ICON_* constants.
  • Text: Headings, body text, labels, links and inline code, with wrapping that avoids a lone last word.