adp-show-graphics

Event selector

• Switch events from the top dropdown — each event has an isolated image library and layouts
• + Event → add a new event with a unique slug-based ID (used in output URLs as ?event=ID)

⚙ Settings

• Set canvas resolution for H and V independently per event (presets: 4K / 1440p / 1080p / 720p or custom)
• vMix V vertical: use 1215 × 2160 (crops 4K canvas to practical pixel area)
• Also shows Worker URL and API key entry on first run

Manip. GFX / Manip. Bug tabs

• Manip. GFX → controls affect the Graphics layer; buttons & sliders highlighted red
• Manip. Bug → controls affect the Bug/QR layer; highlighted blue
• Both layers always visible in the composite canvas preview; inactive controls are dimmed
• Click the active tab again to deactivate (all controls dimmed)

Canvas — drag to reposition

• Drag the image in the preview canvas to set X/Y position
• Content can be dragged off-frame (partially or fully outside the output area)
• Position is sent to output on next poll (~1.5 s)
• Drag updates are paused during drag and resume 2 s after release to avoid snap-back

Scale & Rotate sliders

• Scale 10–300% — click the % value label to reset to 100%
• Rotate −180° to +180° — click the ° value label to reset to 0°
• Both are applied in gallery preview and on the output pages

Contain / Cover

• Contain — image is scaled & positioned; may have transparent edges
• Cover — image always fills the full frame (zoom-in only, no transparent edges); position/scale ignored

Grid

• Toggle grid overlay on the canvas preview
• Grid size selector: 10×10 / 20×20 / 25×25 / 40×40 / 50×40 / 80×80
• Snap checkbox — snaps drag movements to grid intersections
• Grid is gallery-only; never appears on output pages

BG Ref (Background Reference)

• Loads a slide or screen reference image behind the graphic in gallery preview
• Gallery only — never sent to output or visible in vMix
• Opacity slider adjusts reference transparency
• Reference images are uploaded via the BG References section (tagged background)

Output URL bar

• Shows the GFX and Bug output URLs for this slot (H or V)
• ↗ Open — opens the output page in a new tab
• 📋 Copy — copies URL to clipboard
• Add as Browser Input in vMix at the matching resolution (H: 3840×2160, V: 1215×2160)

Output monitors (right column)

• Live iframe previews of each output page — GFX, Bug/QR, Credits for H and V
• Click any monitor → magnifies to full-screen modal; click anywhere to close
• Monitors poll at the same 1.5 s rate as the output pages

Preview toggles

• Bug H / Bug V / GFX H / GFX V — show or hide each layer in the canvas preview independently
• Does not affect output — preview-only

SEND LIVE buttons

• Grey = slot empty · Green = image loaded, not on air · Red = ON AIR
• Individual H / V buttons, plus H+V combined for Bug and GFX
• Click a red button to go transparent (same toggle)
• Selecting an image from the library only assigns it — it does not go live until SEND LIVE is clicked

Credits LIVE

• Sends Credits H / V output live (credits-h.html / credits-v.html output pages)
• Credits windows are separate from GFX and Bug — open them independently in vMix

CLEAR buttons

• GFX H × / GFX V × / Bug H × / Bug V × — removes the image from that slot and goes transparent immediately
• Equivalent to going live with an empty slot

Upload

• Click 📤 Upload (in the Processed Images section or image toolbar)
• Or drag files from Finder anywhere onto the gallery window
• During upload: select category tags and add extra tags (comma-separated)
• Auto-tag rules: set keyword → category mappings in Tag Management; applied automatically on upload based on filename

Image tiles

• Thumbnail · Name (click ✏ to open editor/rename modal) · Tag chips
• GFX H / GFX V / Bug H / Bug V slot buttons — highlighted = currently assigned to that slot; click to assign/remove
• 🏷 button → tag dropdown (click same button again to close)
• ✏ button → Image Editor · 🗑 button → delete (with confirmation)
• Drag cards to reorder (order is saved)

Rotation, Crop, BG Knock-Out

• Rotation −180° to +180° — live canvas preview; output auto-resizes to bounding box
• Crop/Trim — Top / Bottom / Left / Right as % of source image; removes edges before rotation
• Click ° or % labels to reset to 0
• Background Knock-Out — enable checkbox, pick a colour, set tolerance → matching pixels become transparent
• Pick button → EyeDropper colour picker (Chrome 95+; falls back to centre pixel if not supported)

Save as Copy

• Name field auto-fills with "original name copy" — rename before saving
• Button is enabled as soon as the source image finishes loading
• Exports the canvas preview as PNG and uploads it as a new image tagged edited
• Original image is unchanged
• After save the editor closes and the library reloads — find the copy in the Processed Images section

Layouts

• + Save Current → saves all 4 slots (GFX H/V, Bug H/V) and live state as a named layout
• Click a layout card to recall — restores all slots and live state instantly
• Delete → removes the layout (does not affect images)

vMix quick trigger

Set and go live in one HTTP call — no gallery interaction needed:

Usable from vMix scripting, Bitfocus Companion, or any HTTP trigger. Image key shown in the preview modal.