System overview

Show Graphics is a browser-source overlay system for vMix. The operator places images on two transparent canvases — H (16:9 / 3840×2160) and V (9:16 / 2160×3840) — and vMix picks them up live via browser source, no reload needed.

Slot previews (top)

• Set H / Set V on any image card → assigns it to that slot
• Drag inside the preview to reposition the image
• Scale slider — 100% = fills canvas; double-click the number to reset
• Fit = show all (letterbox) · Fill = crop to fill
• Clear removes the image from the slot
• vMix picks up changes within ~1.5 s — no reload
• The URL below each slot header is clickable — click it to copy to clipboard. ↗ Open opens in a new tab, 📋 Copy also copies.

BG reference images

• Upload a vMix layout screenshot via 📤 Upload BG in the Background References section
• Click Set BG H / Set BG V to show it as a semi-transparent layer behind the active graphic in the slot preview
• Use the toggle switch and opacity slider in the slot panel to show/hide and adjust
• BG images can be selected and batch-deleted like any other image
• BG references are gallery-only — never shown in vMix

Grid overlay

• ◉ Grid toggle — show/hide the positioning grid
• Grid fineness selector: Off / 2×2 up to 100×100 (default 20×20)
• Snap to grid — drag snaps to nearest grid intersection
• Grid settings persist across page reloads

vMix setup

• Add two Browser inputs in vMix
• graphic-h.html at 3840×2160 — enable Transparent Background
• graphic-v.html at 2160×3840 — enable Transparent Background
• Position/scale/fit set in the gallery is reflected live

Upload images

• 📤 Upload button in the toolbar — modal supports single and multi-file
• Drag files from Finder anywhere onto the gallery — uploads immediately
• If a category filter is active, it is auto-applied to dropped files
• Researchers can also use the standalone upload.html page

Categories

• Expand Category Management to create, rename or delete categories
• Assign images via the 📁 button on each card, or drag a card onto a category button in the filter bar
• Filter the library using the All / Uncategorized / [category] buttons

Auto-tagging by filename

• In Category Management, type a keyword next to a category and press Enter
• Example: keyword ATEM under "ATEM Switchers" → any file with "ATEM" in the name gets that category automatically on upload
• Multiple keywords per category, multiple categories per image
• Auto-detection runs in the upload modal (chips shown pre-checked) and on window drag-and-drop

Saved layouts

• Name a layout → 💾 Save H, 💾 Save V or 💾 Save Both
• ↩ H / ↩ V / ↩ Both recalls the layout to the slot(s)
• Layouts store exact position, scale and fit — shared across all operators
• Drag-to-reorder layout cards

Preview & enlarge

• Click any tile thumbnail (all sections) to open the full preview — Image Library, Processed Images, BG References, Saved Layouts
• In select mode, clicking a tile toggles the checkbox instead
• The 🔍 button always opens the preview regardless of select mode

Select & delete

• Click ☑ Select in the toolbar to enter selection mode
• Click any tile to toggle its selection checkbox
• The floating bar at the bottom shows the count and Delete button — always reachable without scrolling
• Works for images, BG references, and layouts in one batch

Edit images

• ✏️ opens the edit modal: crop, trim sides, background knock-out
• 💾 Save as new image uploads the result tagged edited → appears in Processed Images
• Original is never overwritten