Enhancement Loop UX Overhaul - drag-to-set loops.

[byrongamatos]

Restored from slopsmith/slopsmith#396 — original issue, opened by @RonnieK68 on 2026-05-25.
[restored-from: slopsmith/slopsmith#396]

Enhancement: Loop UX overhaul — drag-to-set loop on seek bar and Tab View, plus seek bar visibility

Labels: enhancement, plugin
Affects: byrongamatos/slopsmith (seek bar) · byrongamatos/slopsmith-plugin-tabview (Tab View)

---

Summary

The A-B loop system works well under the hood, but it has three UX gaps that make it harder to use than it should be:

1. No visual feedback on the seek bar — when a loop is active, the top bar shows nothing. You can only tell a loop is set by squinting at the A/B buttons in the control strip.
2. The seek bar is too thin to interact with comfortably — it is difficult to target precisely, especially when trying to set a loop region.
3. No way to set a loop visually from the Tab View — the Tab View (alphaTab) is the best place to identify exactly which notes or measures you want to practice, but there is currently no way to drag-select a region there and have it set the loop.

All three of these are related. The proposal below addresses them together as a coherent loop UX improvement.

Proposal would render looking something like these screens when looping. They would be drag and drop loops.

---

Motivation

When practicing a difficult passage, the typical workflow is:

1. Open the Tab View to read the notation and identify the exact measures you want to drill or click on the section bar at the top of the 3d view.
2. Switch to the 3D Highway to play along with the loop running

Right now, step 1 provides no way to set the loop — you have to switch back to the highway, play the song until you reach roughly the right spot, hit A and B by ear, and hope you landed on the right notes. This is imprecise and disruptive to the practice workflow.

The screenshots below show the current state. A loop is active (visible in the A/B buttons, time range 1:33–1:44), but there is no visual indication anywhere — not on the seek bar at the top, and not in the Tab View.

(Screenshots attached — see images in this issue)

---

Proposed Changes

1. Seek bar: taller hit area and loop region highlight

Where: byrongamatos/slopsmith — static/player.html / CSS

• Increase the seek bar's interactive hit area to approximately 20–24px tall (the visible track can stay proportionally smaller, expanding on hover as YouTube/Spotify do)
• When a loop is active, render a colored highlight band on the bar spanning the loop region (loopA to loopB), similar to how YouTube shows a chapter or clip region
• The highlight should update in real time when the loop is changed or cleared
• The highlight reads from window.slopsmith.getLoop() on song:loaded and listens for loop changes to stay in sync

This benefits all users regardless of which view they are using.

---

2. Seek bar: drag-to-set loop

Where: byrongamatos/slopsmith — static/app.js

• Click-drag on the seek bar sets the loop: mousedown records loopA, drag shows a live preview of the region being selected, mouseup commits by calling window.slopsmith.setLoop(loopA, loopB) and seeks to loopA
• A plain click (no drag, threshold ~5px) continues to seek as it does today — existing behavior is preserved
• Right-click on the seek bar (or clicking outside the highlighted loop region) calls window.slopsmith.clearLoop()
• All three of setLoop, clearLoop, and getLoop are already exposed on window.slopsmith as of v0.2.8, so no backend changes are needed

---

3. Tab View: drag-to-set loop from the tablature

Where: byrongamatos/slopsmith-plugin-tabview — screen.js

This is the core of the proposal. When the Tab View is open, the guitarist can see the music laid out note-by-note and measure-by-measure. It is the ideal place to define a practice loop precisely.

Proposed interaction:

• Click and drag across the tablature to select a range of beats/measures
• alphaTab exposes beatMouseDown, beatMouseMove, and beatMouseUp events that fire with the beat object (including its tick position) — no coordinate math is needed
• On drag start, record the tick of the first beat and highlight the selection as the drag extends (alphaTab supports range selection rendering natively)
• On drag end, convert the start and end ticks to seconds using alphaTab.api.tickToTime() and call window.slopsmith.setLoop(loopA, loopB)
• The existing cyan cursor that tracks playback position would remain unchanged
• Right-click on the tab canvas clears the loop via window.slopsmith.clearLoop()

Why this is the right place to set a loop:
The Tab View shows the music as notation — fret numbers, measure numbers, technique markings. A guitarist can look at the tab, see "I want to drill measures 29–31", and drag exactly that region. This is far more precise than the A/B key approach (which requires playing through the song and hitting keys by ear at the right moment).

Cross-view consistency:
Because the loop state lives in window.slopsmith (not in the Tab View or the highway), a loop set in the Tab View is immediately active when the user switches back to the 3D Highway. The loop highlight on the seek bar (change #338 above) would also reflect the selection. No coordination between plugins is needed — it all flows through the existing shared loop API.

---

4. Tab View: show active loop region as a highlight overlay

Where: byrongamatos/slopsmith-plugin-tabview — screen.js

When a loop is already active (set from the seek bar, A/B keys, or the Tab View drag), the Tab View should show the loop region visually — a translucent colored band or selection highlight spanning the loop measures.

• On song:loaded, check window.slopsmith.getLoop() and render the highlight if a loop is already set
• Listen for loop changes and re-render accordingly
• This closes the feedback loop: a user who sets a loop in the highway and then opens Tab View to review the passage can immediately see which measures are looped

---

Implementation notes

• The alphaTab beat mouse events are documented at https://alphatab.net/docs/reference/api/beatmousedown/
• window.slopsmith.setLoop, clearLoop, and getLoop are available as of v0.2.8 (Feature Request: Native Linux Support for Legacy Rock Band 2/3 Drums via Raw USB (libusb) Parsing #200)
• window.slopsmith.getTime() and highway.getAudioElement() provide the time data needed for seek bar coordinate conversion
• Changes 1 and 2 are core changes; changes 3 and 4 are self-contained to the tabview plugin repo
• I am willing to implement all four changes and submit PRs to the respective repos — posting this first to confirm the approach and check whether there are any in-progress changes to these files I should be aware of (notably PR highway.js draw-gate starves an active custom renderer's draw() on an override-hide (setVisible(false)) #293 which is adding type checking to app.js)

---

Questions for the maintainer

1. Is this direction welcome? Any preference on whether the seek bar changes go into core or as a desktop-renderer overlay in slopsmith-desktop/src/renderer/?
2. Any concerns about the alphaTab beat mouse event approach for the Tab View drag interaction?
3. Should the loop region highlight on the seek bar use an existing CSS variable / color token, or is there a preferred color for loop indicators?
4. I am not an expert coder. If anyone else wants to take this on or collaborate that is fine with me.

NOTE: I had Claude Code analyze what was going on here in the code and help write this proposal. .