Pose overlay

Overview

Render tracked anatomy, keypoints and regions of interest over imagery. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Pose overlay when you need to render tracked anatomy, keypoints and regions of interest over imagery. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<figure class="he-pose-overlay"><svg viewBox="0 0 100 56" role="img" aria-label="Cow pose with six tracked points"><path d="M18 31 34 22 52 21 72 27 83 20 M34 22 30 43 M52 21 55 44 M72 27 75 46"></path><circle cx="18" cy="31" r="2"></circle><circle cx="34" cy="22" r="2"></circle><circle cx="52" cy="21" r="2"></circle><circle cx="72" cy="27" r="2"></circle></svg></figure>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Pair the visual overlay with a structured text summary of tracked subject, quality and detected events.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components