Button types

The two main button kinds in OpenTag are Events (the moments you're tagging) and Attributes (the labels that describe those moments). Within Attributes you can turn on Activator behaviour to make pressing the attribute itself ALSO tag an event — that's how one button = one full tagged clip works. Here's the cheat sheet.

Connecting cameras (USB & IP)

OpenTag runs entirely in your browser, and that shapes what it can take a live feed from. The short version: USB and capture devices work directly; IP cameras need a small bridge, because browsers can't speak the protocol most IP cameras use (RTSP). Here's the honest map.

1. USB webcams & capture sticks — works today

   In the Code tab, click Connect USB Camera and pick the device. Any UVC webcam works — and so does any HDMI/SDI → USB capture stick (Elgato Cam Link, Magewell, etc.): your match camera or vision mixer plugs into the stick, which appears to OpenTag as a webcam. This is the simplest reliable live input.

   Multiple cameras at once: one live camera at a time for now. Simultaneous multi-camera live is on the roadmap — today the multi-angle view works for loaded video files, not live feeds.

2. Why IP cameras aren't plug-and-play

   Most IP cameras stream over RTSP (rtsp://…), and no browser can open an RTSP connection — web pages have no raw network sockets, so it's blocked before any video even arrives. It's a browser security limit, not an OpenTag gap (VLC, a native app, can; a web page can't). The fix is to bridge the stream into something the browser understands.

3. Route A — turn the IP camera into a "webcam" (works today)

   Run software that pulls the RTSP stream and republishes it as a virtual UVC camera on your computer — e.g. OBS Studio (add the camera as a Media Source, then Start Virtual Camera), or go2rtc. OpenTag then lists it under Connect USB Camera like any other device. No new OpenTag feature needed, and it sidesteps the HTTPS catch below.

4. Route B — a media bridge (MediaMTX)

   MediaMTX (free) connects to the camera and converts RTSP into browser-friendly WebRTC (low latency) or HLS. Minimal config:

   paths:
     mycamera:
       source: rtsp://user:pass@192.168.1.100/stream

   Loading a MediaMTX stream URL directly in OpenTag is on the roadmap; until then, pair MediaMTX (or OBS) with Route A's virtual camera.

5. The HTTPS catch — read this before you debug for an hour

   opentag.studio is served over HTTPS, and browsers block an HTTPS page from loading an insecure http:// or ws:// stream from your LAN (this is called "mixed content"). So a raw http://192.168.x.x camera URL gets refused. Workarounds: give the bridge a TLS certificate so it serves https/wss, or run OpenTag locally from http://localhost. Route A (virtual camera) avoids this completely, which is why it's the easiest path today.

Live scoreboard

Name a button +1 and pressing it adds 1 to the group's running total. No dialog, no flag, no setup tick-boxes — the naming IS the declaration. Built for the speed of live broadcast tagging.

1. Create the score events

   Setup → Add Event → name Home Goal, pick a colour. Repeat for Away Goal. (Point events — single timestamps.)

2. Create the "+1" attributes

   Setup → Add Attribute → name +1, group Home Score, link to the Home Goal event. Repeat with group Away Score linked to the Away Goal event. The leading + + number makes it numeric automatically.

3. Tag a goal — one press

   Code → press the +1 Home button. OpenTag tags a Home Goal event AND silently records the value 1 against the Home Score group. No prompt. Press again and the total climbs to 2. Tick "Starts the linked event" in the attribute editor if you want one button to do both jobs in one press.

4. Watch the running totals in the Code panel

   A Totals strip appears under the status line showing Home Score: +3 · Away Score: +1 live as you tag. Click any chip to play the goals that contributed to that total.

5. Build a Hero Counter tile per team

   Dashboard (Pro) → + Add tile → Counter → title HOME → Event = Home Goal → Aggregate = Sum of Home Score → tick Scorecard style. Apply. Repeat for Away. Drag side-by-side; turn on Transparent tiles in Settings for a clean broadcast look.

6. Add a session-title text tile

   Text tile above the scores → content {home} v {away} → big font. The names fill in from Setup → Session Details automatically.

Momentum chart

A swing-state metric (one team's pressure relative to the other) plotted as a cumulative line — starts at 0, climbs with positive presses, dips with negative ones — so the story of the match reads at a glance.

1. Create a "Momentum" group with +/- buttons

   Setup → Add Attribute → group Momentum. Add as many buttons as you need with names like +1, +2, +3, -1, -2, -3. (Some frameworks rate small advantages as +1 and big chances as +3 — name the buttons to match whatever scoring rubric you use.) No checkbox needed; the +/- in the name is enough.

2. Tag through the match — one click each

   Press a +1 when the home side has a small advantage, +3 for a clear-cut chance, -2 when they're being battered. The Code panel's Totals strip ticks live so you can see where things stand.

3. Build the cumulative line chart

   Dashboard (Pro) → + Add tile → Line → Event = (your linked event, or All events) → Time bin = 30 seconds → Aggregate = Sum of Momentum → Chart mode = Cumulative (running total from 0). Pick green above 0 and red below.

4. Read the chart

   The line is the running total at each moment — bumps above 0 = home momentum; dips below = away. Click any dot to play the events in that bin. Tells the story of the half in one glance.

Personalise dashboards

Type variables into a Text tile and OpenTag swaps them for your session's Sport, Home / Away, Date, etc. — so the same dashboard layout produces a different-looking report for every match.

1. Fill in Session Details

   Setup → Session Details panel → Sport, Date, Venue, Home, Away, Competition, Notes. A compact breadcrumb appears below the header confirming which session you're tagging.

2. Add a Text tile with variables

   Dashboard → + Add tile → Text → type something like:

   {home} v {away}
   {competition} · {date}
   {venue}

   Available variables: {sport} {date} {venue} {home} {away} {comp} (or {competition}) {notes}.

3. Style it

   Use the font / size / weight / colour / alignment controls in the same modal — big bold display font for headers, smaller weight for sub-lines. Make it a transparent tile (Settings → Transparent tiles) for a floating label look.

4. Reuse the dashboard layout

   Save the dashboard as JSON. Next match: load the JSON in a fresh session, change Sport / Home / Away in Session Details, the text tile updates automatically. One layout, many reports.

Dashboard PDF report

Use the Print / PDF button to produce a clean, single-column report — banner up top with your session details, every tile flowing down the page, no app chrome. Saves to PDF via your browser's standard Print dialog.

1. Finish the dashboard you want to share

   Make sure Session Details (Sport / Home / Away / Date) are filled in — they appear in the PDF banner.

2. Click 🖨 Print / PDF

   The page swaps into print mode (single-column tile layout, big banner at top) and the browser's Print dialog opens.

3. Save as PDF

   In the destination dropdown, pick Save as PDF (Chrome, Edge, Safari, Firefox all support this — usually labelled "Microsoft Print to PDF" on Windows or "Save as PDF" on Mac). Save the file. Optionally pick a paper size — A4 portrait or US Letter both work.

4. The view restores automatically

   Whether you printed, saved, or cancelled, the dashboard goes back to normal when the dialog closes.

Live-code a match

OpenTag's live mode lets you tag events as they happen from the touchline, with no video pane needed. You watch the actual match on the pitch, click your event buttons in real time, and the Dashboard updates live. After the match, load whatever you filmed it with (phone, GoPro, DSLR, any camera) and align the recording to your tags in one click.

1. Prepare your dashboard ahead of time

   In Setup, define your events + attribute groups. Open the Dashboard tab and add the tiles you want to glance at during the match — a scoreboard (Counter), running totals, a bar chart, whatever fits. Tiles render empty until events are tagged, which is fine — they'll fill in live.

2. At kickoff — Session menu → Start live session

   On the Code page, open the Session ▾ menu in the video controls row and click Start live session. The video area turns into a dark panel with a big clock counting up from 0:00. Tap your event buttons as the match plays — each tag is timestamped against the elapsed clock.

   Spacebar pauses and resumes the timer (use for half-time). Pause time doesn't count toward elapsed — the clock freezes and restarts cleanly from where it left off.

3. Glance at stats during the match

   Tap the Dashboard tab at any time to see your prepared tiles updating live. Tap back to Code to keep tagging. Switching tabs doesn't pause the live timer.

4. Final whistle — End session

   Click End session in the live pane. Your tags are saved with their elapsed-time timestamps. A toast confirms how many tags landed and reminds you to load the recording for sync.

5. Load the recorded video

   Use 📁 Change video to load whatever filmed the match — phone clip, GoPro file, DSLR card, anything that plays in a browser. A reminder toast appears: "Live tags ready to sync — scrub to kickoff and open Session menu → Sync to video".

6. Sync to kickoff

   Scrub the loaded video to the moment that was t=0 in your live session — usually the kickoff whistle, or whichever moment you started the live timer. Open Session ▾ → Sync to video… and click Set as t=0. The chip turns blue and shows the offset (e.g. Sync +1:34). All your tags now align perfectly to the video. Click-to-play from any cell, dashboard tile, or log row works as normal; clip export uses the right segments.

Snapshot a frame

Click the 📸 button on the video to capture the current paused frame as a JPG. The file downloads to your computer for use anywhere — slides, email, post-match summary. Pro users also get the snapshot dropped onto the Dashboard automatically as an Image tile, pre-titled with the event + timestamp context.

1. Pause on the frame you want

   Code tab → scrub or arrow-key to the moment. Pause. The cleaner the frame (no scrub motion blur, no auto-pause mid-frame), the cleaner the snapshot.

2. Click 📸 on the video

   Top-right of the video, next to the fullscreen button. Captures at the video's native resolution.

3. JPG downloads to your computer

   File name is auto-generated from the most recent event + timestamp (e.g. shot-12-34.jpg). 85% JPEG quality keeps the file ~150–300 KB for a 1080p still.

4. (Pro) Tile lands on the Dashboard

   If you have Pro, the same snapshot becomes a new Image tile on the Dashboard, titled "{event name} @ {timestamp}". Drag it to position, resize, set it as a transparent or carded tile in Settings. Save the dashboard JSON to keep it.

Radar profile

A radar (spider) chart with one axis per metric. Each axis is a count of matching events; an optional threshold ring marks the target value. The polygon shows actual values; vertices are clickable to play the contributing events. Use it for player profiles, team scorecards, before/after comparisons.

1. Decide your axes

   Pick 4–8 metrics that tell the story of the role. E.g. for a midfielder: Passes · Tackles · Interceptions · Shots · Distance · Saves. Each one is a count of matching events.

2. Add a Radar tile

   Dashboard → + Add tile → Radar. The modal opens with 3 default axis rows. Use + Add axis to add more.

3. Fill in each axis

   Per row: Label (e.g. "Tackles"), Event (Tackle), optionally Filter group = value (e.g. Player = Player 7), Colour for the axis label, Threshold (optional target — drawn as a dashed reference polygon).

4. Apply and read

   The radar fills based on the current session's events. Each axis label appears at its tip in its own colour. The polygon fills with a semi-transparent accent. Where your polygon extends BEYOND the dashed threshold ring you're above target; where it sits inside, below target.

5. Click any vertex to play matching clips

   Hover for a tooltip showing value vs target. Click → all events matching that axis play through the standard playlist overlay.

Drawing tools

OpenTag's Draw tab adds shapes, paths, and animations on top of the video for tactical analysis and player feedback. Every tool here is free; only the burn-into-clip export step is Pro. Use the keyboard shortcut listed for each tool to switch fast, and remember that after placing any shape OpenTag auto-flips to Select so you can drag corners / handles immediately.

Event locations on a pitch

Add a sport-specific pitch to your code window and tag the location of each event. The heatmap and (Pro) zone-breakdown table in Insights show patterns of play that totals alone hide.

1. Drop a pitch on the Setup canvas

   Setup tab → drag the Pitch card from the left sidebar onto the canvas. Pick the sport from the dropdown (see the supported list below), optionally link it to specific events (so it only appears in the Code panel when you've tagged one of them), set rotation if your camera is sideline-mounted, and label it.

2. Resize & reposition

   Drag the label strip or the pitch face to move. Corner-drag the bottom-right handle to resize — aspect-ratio is locked by default, hold Shift to free-resize. Hover for ↻ rotate, ✎ edit, ✕ delete.

3. (Pro) Add zones

   Hover the pitch, click ⛶. In the zone editor, either apply a preset pack (e.g. Football Thirds, Cricket 8 fielding zones) or draw your own rectangles and polygons. Rename inline by double-clicking a zone name in the right-hand list.

4. Tag locations while coding

   Code tab → tag an event with a button → click the pitch in the Coding Panel where it happened. A coloured dot lands at the click point. Click again to overwrite. Tag the next event and the marker resets.

5. See the patterns in Insights

   Insights tab → scroll past the event totals and cross-tabs → you'll find a per-pitch heatmap card showing every click as a KDE-style density blob. Pick a colour palette in the Insights header (Classic, Fire, Viridis, Cool, Mono). Pro users also see a zone-breakdown table on the right with count + % for each zone (plus an Outside any zone row for clicks that didn't land in any zone).

6. Exports carry the location

   CSV gains 4 columns (LocationPitch, LocationX, LocationY, LocationZones). Timeline XML gains a <location> block inside each <instance>. Session JSON includes locations automatically.

Supported sports

OpenTag ships pitches for the following sports. Each entry below lists the surface(s) you can drop on the canvas.

Export MP4 clips

Generate one MP4 per event — or one merged highlight reel — without leaving OpenTag. Runs entirely in your browser via ffmpeg.wasm; your video file never uploads anywhere. Free users get a 1-clip preview; Pro unlocks full export, the filter, merged mode, and text overlay.

1. Code your session

   Same as any session: load your video in the Code tab, tag events. For Point events set sensible pre/post-roll (Setup → hover → Edit) so each clip includes the lead-in and follow-through. Typical: 3 seconds before, 5 seconds after.

2. Open the export dialog

   Either: Export ↓ → Video clips ✂ in the top bar, or Export video clips ✂ at the top of Insights. Both open the same dialog.

3. Filter the events you want

   Show [Event ▼] where [Group ▼] = [Value ▼]. Matched count updates live. Then untick any individual events you want to skip (or use the Tick all / Untick all toggle).

4. Pick output mode

   Individual files: one MP4 per event, downloaded one by one (filename pattern {video}_{event}_{HH-MM-SS}.mp4). Single merged video: every selected clip spliced into one MP4 with a 1-second title card before each clip showing "Clip N of M" + the event details.

5. Optional: add a text overlay

   Tick Add event + attributes as text overlay to burn the event name and attribute values into the bottom of each clip. Useful when sharing without context. Re-encodes (slower than stream copy).

6. Start export and wait

   First-time use downloads ffmpeg.wasm (~25MB, one-time, cached afterwards). Then each clip takes ~1-2 seconds (stream copy) or ~real-time (re-encode if overlay is on). The status panel inside the dialog shows progress.

7. Share

   Drop the resulting MP4(s) into Google Drive / Dropbox / WeTransfer / Slack. Each clip is a standard MP4 that plays anywhere — no platform sign-up, no video service fees.

Share clips with players

The desktop-app path — works without the browser-based MP4 export, no Pro required. Handy if you've got huge source videos, want lossless desktop-speed cuts, or just prefer LosslessCut's segment-list UI.

1. Code your session

   In the Code tab, load your video and tag events with the buttons you set up. Make sure each event has a sensible pre-roll and post-roll (Setup → hover the button → Edit) so clips include the lead-in and follow-through. Typical: 3 seconds before, 5 seconds after.

2. Export the EDL

   In the top bar click Export ↓ → EDL. This downloads opentag-export.edl.csv — a list of clip in/out times paired with event labels.

3. Open LosslessCut

   Free, open-source video editor. Download from mifi.no/losslesscut — runs on Mac, Windows, and Linux without admin install.

4. Load your video

   Drag the original video file into LosslessCut.

5. Import the EDL

   File → Import segments → pick the opentag-export.edl.csv you just downloaded. Each tagged event becomes a coloured segment on the LosslessCut timeline.

6. Filter (optional)

   In LosslessCut's segment list, hide or delete segments you don't want to export. For example, keep only Player 1's events, or only successful shots — whatever each player needs.

7. Export clips

   Click Export. LosslessCut writes one video file per segment, named with the event label. Because there's no re-encoding this is fast (seconds, not minutes) and lossless.

8. Share

   Drop the clip files into a Google Drive / Dropbox / WeTransfer folder, share the link. Each player gets just the clips relevant to them — no platform sign-up, no video service fees.

Activator pattern

When you don't want to think about pressing the Event then a description — just press one button and have the system create the clip for you. Useful for "shot at goal" review where each press should make a clean 10-second clip.

1. Setup the Event button

   Drag an Event onto the canvas. Name it Shot, set Mode: Point ◆, Pre-roll: 3, Post-roll: 7. Save.

2. Setup the Attribute that does the work

   Drag an Attribute. Name it Successful shot at goal, group Outcome. In the chips, link to Shot. Tick Starts the linked event(s). Save.

3. Tag while watching

   In the Code tab with a video loaded, just press Successful shot at goal when you see one. OpenTag automatically creates a Shot event at that timestamp, includes the 3s pre + 7s post in the clip range, and attaches Outcome = Successful shot at goal. You never have to press the Shot button.

4. The 2-second recency window

   If you also press the Shot button manually and then press a Starts-event attribute within 2 seconds, the attribute attaches to the existing Shot rather than creating a new one. Lets you mix manual tagging with shortcuts cleanly.

Track possession

For things that have a real length — possession, half, power play, a player on the pitch. The event runs from press one to press two; any attribute pressed in between attaches to it.

1. Create the Toggle events

   Drag an Event, name it Possession — Home, set Mode: Toggle ⏵⏸. Save. Repeat for Possession — Away. (Pre/post-roll fields are hidden in Toggle mode — the start and end are the on/off presses.)

2. (Optional) Add an attribute that "swaps" possession

   Drag an Attribute called Lost it, group Transition, linked to both Possession events, tick both Starts the linked event(s) and Ends the linked event(s). Pressing it ends a running Possession and is recorded against the closed range. You'd then start the opposite team's possession with one press of its button.

3. Tag a half

   In the Code tab, press Possession — Home when Home wins the ball. The button fills with colour and pulses. The status bar shows ● 1 active: Possession — Home 0:12. The session timeline draws a diagonal-stripe bar growing as the video plays.

4. End the range

   Press Possession — Home again at the moment they lose the ball. The bar locks at that endpoint. The event's duration appears in the Log table's Clip In/Clip Out columns.

5. Watch the totals

   Insights → Overview → Event Totals now shows a Mean duration column. After enough possessions you can see average possession length per team at a glance.

End event with attribute

For a Shot where the outcome is the natural close — Score / Miss / Wide. You start the Shot, fill in details (location, player, type), then press the outcome and the whole Shot wraps in one motion.

1. Setup the Shot event

   Shot, Mode: Toggle ⏵⏸. Save.

2. Setup describing attributes (default behaviour)

   Location group (Left / Right / Middle), Player group (1–11, Allow multiple values on), Type group (Free kick / Header / Open play). All linked to Shot. Leave both Starts/Ends checkboxes off — these just label the running event.

3. Setup the outcome group as Toggle

   Outcome group: Score, Miss, Wide. For each, link to Shot, tick Ends the linked event(s). Pressing any of these on a running Shot will end it (and attach the outcome to the closed range).

4. Tag a shot in one flow

   Press Shot → it starts running (1 active). Press Left → attached. Press Player 7 → attached. Press Header → attached. Press Score → Shot ends here, Outcome = Score is attached to the closed range. Status bar drops to "Last: Shot at 0:32" and you're ready for the next one.

Reveal follow-up buttons

Tag an event and have its follow-up buttons pop up right next to it — no hunting across the panel. It's authored on the attribute's link, so there's no round-trip back to the event.

1. Make the event and its follow-up attributes

   e.g. a Shot event, plus an Outcome group of Goal / Saved / Wide attributes.

2. Link + tick Reveal on each follow-up

   Edit each Outcome attribute → Event links section → link it to Shot and tick Reveal as follow-up ⭐ Pro. Save. (Needs at least one linked event.)

3. Tag in one flow

   In Code, press Shot. A small popover opens beside the button with Goal / Saved / Wide grouped under "Outcome". Click one → it attaches to the Shot you just made and the popover closes. Press Esc or click away to dismiss without choosing.

Hide link-only events

When an event is only ever started/ended by linked attributes — you never click it directly — hide its button to free up coding-panel space. It stays fully tracked.

1. Tick Hide on coding panel

   Edit the event → Behaviour section → tick Hide on coding panel. Save.

2. Setup vs Code

   On the Setup canvas the button stays visible but faded with a dashed outline and a "🚫 hidden while coding" label, so you can still move and edit it. On the Code page it's gone.

3. Drive it with attributes

   Link your attributes to the hidden event and tick Starts / Ends (and optionally Reveal as follow-up). e.g. a hidden Shot driven entirely by Goal / Saved / Wide — press an outcome and the Shot is created, ended, and tagged in one motion.

Tag multiple players

Shot deflected from Player 1 to Player 2, scored by Player 3 — all on one event without duplicating Shots.

1. Make the Player group multi-value

   Setup → edit any Player attribute. Tick Allow multiple values per event. This applies to the whole Player group (one attribute = the same setting for all its peers).

2. Code naturally

   Press Shot at 0:30. Press Player 1, Player 2, Player 3 — all three light up and all attach. Press Player 2 again to remove (toggle off). The Coding Panel group label now reads Player [multi] so the behaviour is discoverable.

3. Insights handle it

   The cross-tab counts each player separately ("once per player"). Total Shots stays accurate. Query Builder Breakdowns include each value with the same "once per player" semantic. CSV exports get pipe-delimited values (1|2|3). Timeline XML emits one <label> per (group, value) pair.

Per-player clip handoff

Quick variant of the EDL workflow above. Use the timeline filter to keep only the clips relevant to one player before exporting.

1. Code the session as normal

   Make sure Player is a multi-value attribute group (so multi-player events still match).

2. Filter the timeline

   In the Code tab session view, set Player → 7. Everything that doesn't involve Player 7 dims; the count updates "Showing 8 of 23". Click any block to verify it's a Player 7 moment.

3. Export EDL (or CSV) and proceed

   Filter currently affects the timeline only — the full EDL still exports everything. For Player 7-only clips, manually remove the others in LosslessCut after import using the segment list (matched up with the filter chips you saw). A future update will let the EDL export honour the active filter directly.

Share session online

Coach uploads the video once to their own storage (Dropbox, Cloudflare R2, YouTube unlisted), shares the session JSON + the video URL with players, and players see a filtered, read-only timeline in their browser. No video file ever crosses OpenTag's hands.

This workflow needs the Load from URL feature, which is on the build list. Status will update here when it ships.