Struct Img 

pub struct Img { /* private fields */ }

A terminal-rendered image backing the <img> markup tag.

On the Kitty-placeholder graphics tier a PNG src renders as real pixels with no further setup: the source is interned process-wide, uploaded by the renderer on first reference, and placed in the cell box derived from w/h (aspect-derived when h is omitted). On every other tier, PNG and binary PPM sources decode to colored half-block cells. JPEG, GIF, and WebP sources are header-probed only: the component reserves their aspect-correct cell box and paints a themed placeholder. The trim flag crops fully transparent margins before half-block sampling (terminal compositors always show the full source), so padded logo sources stay visible even as tiny thumbnails.

Implementations

impl Img

pub fn new() -> Self

Creates an image with no source.

Examples found in repository

examples/companies.rs (line 120)

fn build_ui(viewport: Size, context: UiContext) -> Ui {
	let ids = PROVIDERS
		.iter()
		.enumerate()
		.map(|(index, provider)| {
			(format!("{ASSET_DIR}/{}.png", provider.id), u32::try_from(index + 1).unwrap())
		})
		.collect::<HashMap<_, _>>();
	let elements = Elements::builder()
		.with("logo", move |_: &str, props: Props, _: Vec<Cached>| {
			let source = props.str_of(Prop::Src).map_or("", |value| value.as_str());
			let id = ids.get(source).copied().unwrap_or(1);
			Box::new(
				Img::new()
					.with_str(Prop::Src, source)
					.with(Prop::W, 4_u16)
					.kitty(id, 2, 4),
			) as Box<dyn omp_tui::Component>
		})
		.build();
	let root = dom! {
		<col gap=1>
			<row gap=1>
				<i:log-in/>
				<text bold fg="accent..info">{"Choose a provider"}</text>
				<text dim>{format!("{} providers", PROVIDERS.len())}</text>
			</row>
			<scroll id={SCROLL_ID} h={scroll_height(viewport)}>
				<row wrap gap=1 justify=center>
					for provider in PROVIDERS.iter() {
						<box focus id={provider.id} w={CARD_W} border=round bc="muted..muted"
							hover="#38bdf8..#c084fc" lift=1 anim=220 ease=in-out
							align=center pad-x=1>
							<logo src={format!("{ASSET_DIR}/{}.png", provider.id)}/>
							<text bold truncate align=center>{provider.name}</text>
						</box>
					}
				</row>
			</scroll>
			<row gap=2>
				<text dim>{"↹/←→/↑↓ pick · ↵ login · wheel scroll · Ctrl-C quit"}</text>
				<text id={HUD_ID} dim>{"repaint: 0 cells"}</text>
			</row>
		</col>
	};
	let context = UiContext { elements, ..context };
	Ui::from_root(root, viewport.width, context)
}

pub fn with(self, prop: Prop, value: impl Into<PropValue>) -> Self

Sets one image property.

Examples found in repository

examples/companies.rs (line 122)

fn build_ui(viewport: Size, context: UiContext) -> Ui {
	let ids = PROVIDERS
		.iter()
		.enumerate()
		.map(|(index, provider)| {
			(format!("{ASSET_DIR}/{}.png", provider.id), u32::try_from(index + 1).unwrap())
		})
		.collect::<HashMap<_, _>>();
	let elements = Elements::builder()
		.with("logo", move |_: &str, props: Props, _: Vec<Cached>| {
			let source = props.str_of(Prop::Src).map_or("", |value| value.as_str());
			let id = ids.get(source).copied().unwrap_or(1);
			Box::new(
				Img::new()
					.with_str(Prop::Src, source)
					.with(Prop::W, 4_u16)
					.kitty(id, 2, 4),
			) as Box<dyn omp_tui::Component>
		})
		.build();
	let root = dom! {
		<col gap=1>
			<row gap=1>
				<i:log-in/>
				<text bold fg="accent..info">{"Choose a provider"}</text>
				<text dim>{format!("{} providers", PROVIDERS.len())}</text>
			</row>
			<scroll id={SCROLL_ID} h={scroll_height(viewport)}>
				<row wrap gap=1 justify=center>
					for provider in PROVIDERS.iter() {
						<box focus id={provider.id} w={CARD_W} border=round bc="muted..muted"
							hover="#38bdf8..#c084fc" lift=1 anim=220 ease=in-out
							align=center pad-x=1>
							<logo src={format!("{ASSET_DIR}/{}.png", provider.id)}/>
							<text bold truncate align=center>{provider.name}</text>
						</box>
					}
				</row>
			</scroll>
			<row gap=2>
				<text dim>{"↹/←→/↑↓ pick · ↵ login · wheel scroll · Ctrl-C quit"}</text>
				<text id={HUD_ID} dim>{"repaint: 0 cells"}</text>
			</row>
		</col>
	};
	let context = UiContext { elements, ..context };
	Ui::from_root(root, viewport.width, context)
}

pub fn with_str(self, prop: Prop, value: &str) -> Self

Sets one image property from a string.

Examples found in repository

examples/companies.rs (line 121)

fn build_ui(viewport: Size, context: UiContext) -> Ui {
	let ids = PROVIDERS
		.iter()
		.enumerate()
		.map(|(index, provider)| {
			(format!("{ASSET_DIR}/{}.png", provider.id), u32::try_from(index + 1).unwrap())
		})
		.collect::<HashMap<_, _>>();
	let elements = Elements::builder()
		.with("logo", move |_: &str, props: Props, _: Vec<Cached>| {
			let source = props.str_of(Prop::Src).map_or("", |value| value.as_str());
			let id = ids.get(source).copied().unwrap_or(1);
			Box::new(
				Img::new()
					.with_str(Prop::Src, source)
					.with(Prop::W, 4_u16)
					.kitty(id, 2, 4),
			) as Box<dyn omp_tui::Component>
		})
		.build();
	let root = dom! {
		<col gap=1>
			<row gap=1>
				<i:log-in/>
				<text bold fg="accent..info">{"Choose a provider"}</text>
				<text dim>{format!("{} providers", PROVIDERS.len())}</text>
			</row>
			<scroll id={SCROLL_ID} h={scroll_height(viewport)}>
				<row wrap gap=1 justify=center>
					for provider in PROVIDERS.iter() {
						<box focus id={provider.id} w={CARD_W} border=round bc="muted..muted"
							hover="#38bdf8..#c084fc" lift=1 anim=220 ease=in-out
							align=center pad-x=1>
							<logo src={format!("{ASSET_DIR}/{}.png", provider.id)}/>
							<text bold truncate align=center>{provider.name}</text>
						</box>
					}
				</row>
			</scroll>
			<row gap=2>
				<text dim>{"↹/←→/↑↓ pick · ↵ login · wheel scroll · Ctrl-C quit"}</text>
				<text id={HUD_ID} dim>{"repaint: 0 cells"}</text>
			</row>
		</col>
	};
	let context = UiContext { elements, ..context };
	Ui::from_root(root, viewport.width, context)
}

pub const fn kitty(self, id: u32, rows: u16, cols: u16) -> Self

Uses a renderer-registered image ID in a fixed cell box on every pixel-capable graphics tier, overriding the src placeholder path.

Pair with crate::Renderer::register_image. Rebuild the component with new dimensions after a resize. Dimensions beyond Kitty’s 297-entry coordinate table leave the component on its cell fallback.

Examples found in repository

examples/companies.rs (line 123)

fn build_ui(viewport: Size, context: UiContext) -> Ui {
	let ids = PROVIDERS
		.iter()
		.enumerate()
		.map(|(index, provider)| {
			(format!("{ASSET_DIR}/{}.png", provider.id), u32::try_from(index + 1).unwrap())
		})
		.collect::<HashMap<_, _>>();
	let elements = Elements::builder()
		.with("logo", move |_: &str, props: Props, _: Vec<Cached>| {
			let source = props.str_of(Prop::Src).map_or("", |value| value.as_str());
			let id = ids.get(source).copied().unwrap_or(1);
			Box::new(
				Img::new()
					.with_str(Prop::Src, source)
					.with(Prop::W, 4_u16)
					.kitty(id, 2, 4),
			) as Box<dyn omp_tui::Component>
		})
		.build();
	let root = dom! {
		<col gap=1>
			<row gap=1>
				<i:log-in/>
				<text bold fg="accent..info">{"Choose a provider"}</text>
				<text dim>{format!("{} providers", PROVIDERS.len())}</text>
			</row>
			<scroll id={SCROLL_ID} h={scroll_height(viewport)}>
				<row wrap gap=1 justify=center>
					for provider in PROVIDERS.iter() {
						<box focus id={provider.id} w={CARD_W} border=round bc="muted..muted"
							hover="#38bdf8..#c084fc" lift=1 anim=220 ease=in-out
							align=center pad-x=1>
							<logo src={format!("{ASSET_DIR}/{}.png", provider.id)}/>
							<text bold truncate align=center>{provider.name}</text>
						</box>
					}
				</row>
			</scroll>
			<row gap=2>
				<text dim>{"↹/←→/↑↓ pick · ↵ login · wheel scroll · Ctrl-C quit"}</text>
				<text id={HUD_ID} dim>{"repaint: 0 cells"}</text>
			</row>
		</col>
	};
	let context = UiContext { elements, ..context };
	Ui::from_root(root, viewport.width, context)
}

Trait Implementations

impl Component for Img

fn props(&self) -> &Props

Component properties.

fn props_mut(&mut self) -> &mut Props

Mutable component properties.

fn slot(&self) -> Slot

Stable identity.

fn measure(&mut self, ctx: &UiContext) -> (u16, u16)

Content width bounds, exclusive of this component’s chrome.

fn height(&mut self, ctx: &UiContext, width: u16) -> u16

Content height at the supplied content width.

fn place(&mut self, ctx: &UiContext, content: Rect)

Places children inside the supplied content rectangle.

fn paint(&mut self, pc: &mut PaintCtx<'_>, rect: Rect)

Paints content inside the supplied content rectangle.

fn kind(&self) -> &'static str

Concrete implementation name for debug tooling; defaults to the type’s full path via std::any::type_name. The OMP_TUI_DEBUG tree dump trims it to the trailing path segment.

fn children(&self) -> &[Cached]

Every owned child, including embedded inactive subtrees.

fn children_mut(&mut self) -> &mut [Cached]

Every owned child, including embedded inactive subtrees.

fn paints_border(&self) -> bool

Whether Cached should paint this component’s border property as chrome.

fn paints_background(&self) -> bool

Whether Cached should paint this component’s background property across its rectangle. Components that own a partial background fill opt out and paint it themselves.

fn gradient_bounds(&self, content: Rect) -> Option<Rect>

A narrowed projection frame for two-stop fg=/bg= ramps, given the painted content rectangle. None projects across the full chrome; content-sized leaves (crate::components::Pre) return their authored extent so the ramp completes across the glyphs instead of the stretched layout width.

fn resize_tail(&mut self) -> Option<ResizeTail<'_>>

Opt-in viewport-tail provider for resize drags: children a drag frame may compose bottom-up, with the vertical gap between them. None — the default — renders this component whole.

fn validation_error(&self) -> Option<String>

A validation error blocking submission — an unmet required or match= constraint owned by this component’s internal records; None when valid. Component-level props are checked by the caller.

fn stretch_in_row(&self) -> bool

Whether a row should stretch this component across its cross axis.

fn focusable(&self) -> bool

Whether this component contributes its own slot to the focus ring. The default honors the focus flag, so any container can opt into keyboard navigation from markup.

fn enter(&mut self, forward: bool)

Positions internal selection when focus enters from either direction.

fn ring(&self, out: &mut Vec<Slot>)

Appends focusable slots in document order.

fn key(&mut self, ec: &mut EventCtx<'_>, key: Key) -> Flow

Handles a keyboard event.

fn mouse( &mut self, ec: &mut EventCtx<'_>, tag: HitTag, at: (u16, u16), rect: Rect, mouse: Mouse, ) -> Flow

Handles a mouse gesture over one of this component’s hit regions.

fn paste(&mut self, ec: &mut EventCtx<'_>, text: &str) -> Flow

Pastes text into this component: Flow::Consumed repaints, Flow::Event additionally surfaces a crate::UiEvent, and Flow::Skip leaves the paste unhandled.

fn paste_raw(&mut self, ec: &mut EventCtx<'_>, text: &str) -> Flow

Pastes text verbatim, bypassing any smart-paste interpretation the component applies in Component::paste (drop classification, large-paste collapse). Defaults to Component::paste for components without such interpretation.

fn value(&self, out: &mut Map<String, Value>)

Adds this component’s named value to an output object.

fn set_text(&mut self, ctx: &UiContext, text: Str) -> bool

Replaces text content where supported.

impl Default for Img

fn default() -> Self

Returns the “default value” for a type.