Image assets (2/3): Angular client — ImageAssetService + Image widget

[dillan]

Image assets (2/3) — Angular client: ImageAssetService + Image widget

Part 2 of 3 adding user-uploaded image assets to KIP dashboards. This PR adds the client service and the Image widget that displays a server-stored image, scaled to fit its container while preserving aspect ratio.

Depends on PR 1 (server, #1080) at runtime — the widget fetches bytes from the plugin's /plugins/kip/images endpoints. The code compiles and unit-tests on its own; it just won't display anything until the server side is present. The widget config UI (upload + gallery + settings cache card) is PR 3.

What it does

• ImageAssetService (providedIn: 'root') — resolves the plugin base URL from the SK connection endpoint and exposes upload() (FormData + progress events), list(), delete(), cacheStats(), purgeCache(), and urlFor(id, cssWidth, dpr) which snaps the requested width to the server's allow-list so a small widget never downloads a full-resolution image. All calls are auto-authenticated by the existing JWT interceptor.
• resolveKipPluginBaseUrl / snapImageWidth helper (core/utils/kip-plugin-url.util.ts) — small, unit-tested URL/width logic extracted so it's testable in isolation.
• widget-image — zoneless/signals widget. Reads its config via WidgetRuntimeDirective, derives the image URL from ImageAssetService.urlFor(...) using a ResizeObserver to request the container-matched variant, and renders <img [style.object-fit]> (contain | cover) over a configurable solid or transparent background. Shows an empty state when no image is selected. No data streams (static widget).
• Registered in widget.service.ts as an Image widget (Component category) so it appears in Add Widgets.

Display behavior

Scales to fit (contain) or fill (cover) preserving aspect ratio; background defaults to transparent (the dashboard shows through the letterbox area), or a user-chosen color (set in PR 3's config UI).

Tests

image-asset.service.spec.ts (URL/variant resolution, FormData upload, cache calls), kip-plugin-url.util.spec.ts (base-URL + width snapping), widget-image.component.spec.ts (empty state, URL derivation, object-fit, transparent default). Vitest/zoneless.

Status / gates

• App build (npm run build:dev) clean; ng lint clean; the 3 image specs (12 tests) pass.

Stacking / dependency

• Part 2 of a 3-PR stack. Needs PR 1 (server, Image assets (1/3): Signal K plugin — secure upload, processing, worker pool, cache #1080) at runtime. The widget's options editor (upload / shared-library picker / fit / background) is in PR 3 — this PR registers the widget and renders a selected image, but a user can't pick one until PR 3 lands. Review/merge the stack together (or PR 3 immediately after), or treat this PR + PR 3 as a unit.

---

📚 3-PR stack (review/merge in order)

1. Image assets (1/3): Signal K plugin — secure upload, processing, worker pool, cache #1080 — Signal K plugin: secure upload, processing, worker pool, cache (server)
2. Image assets (2/3): Angular client — ImageAssetService + Image widget #1081 — Angular client: ImageAssetService + Image widget
3. Image assets (3/3): widget config UI + settings image-cache card #1082 — Widget config UI + settings image-cache card

PR 2 needs PR 1 at runtime; PR 3 is stacked on PR 2. Together they add the full image-assets feature.

You are viewing PR 2 of 3.

[dillan]

Superseded by #1120, which re-points the client at the standalone sk-image plugin and consolidates the widget + config UI into a single PR. Closing.