indigo/UsdLayerManager
1
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

Timeline playback controls — transport icons, loop/bounce/rewind

Browse Source 
- Replace all text buttons with SVG icon buttons (skip-back, step-back,
  play-back, play, pause, step-forward, skip-end)
- Add rewind: separate play-backward button that flips direction
- Add loop mode button with submenu (Loop / Bounce / Off)
  - Loop wraps at boundaries; Bounce reflects direction (ping-pong)
- Start/end frames moved to flank the scrub slider as plain numbers
- New icons: play-back.svg, loop.svg (FA repeat), bounce.svg (FA exchange-alt)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
indigo
2026-06-13 13:36:07 +08:00
parent c4bf9673a8
commit 9ec9761dd7
7 changed files with 215 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/icons/bounce.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2021 Fonticons, Inc. --><path d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.9-32 40.971-16.971l80 80c8.994 8.994 9.055 23.508 0 32.781l-80 80C409.956 271.748 384 261.641 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.591-25.993-31.806-40.971-16.971l-80 80c-9.055 9.273-8.994 23.787 0 32.781l80 80C102.1 463.93 128 453.686 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

resources/icons/loop.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192v-32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448h160c88.4 0 160-71.6 160-160z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

resources/icons/play-back.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M 472 60 L 472 452 L 40 256 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 112 B

src/ui/IconManager.cpp
+5 -1
View File
@@ -50,10 +50,13 @@ static const char* IconFilename(Icon icon) {
case Icon::LayoutQuad: return "layout-quad.svg";
case Icon::SkipBack: return "skip-back.svg";
case Icon::StepBack: return "step-back.svg";
case Icon::PlayBack: return "play-back.svg";
case Icon::Play: return "play.svg";
case Icon::Pause: return "pause.svg";
case Icon::StepForward: return "step-forward.svg";
case Icon::SkipEnd: return "skip-end.svg";
case Icon::Loop: return "loop.svg";
case Icon::Bounce: return "bounce.svg";
default: return nullptr;
}
}
@@ -67,7 +70,8 @@ static constexpr Icon kAllIcons[] = {
Icon::ToolSelect, Icon::ToolMove, Icon::ToolRotate, Icon::ToolScale,
Icon::WorldSpace, Icon::LocalSpace, Icon::Grid, Icon::Antialias,
Icon::LayoutSingle, Icon::LayoutHSplit, Icon::LayoutVSplit, Icon::LayoutQuad,
Icon::SkipBack, Icon::StepBack, Icon::Play, Icon::Pause, Icon::StepForward, Icon::SkipEnd,
Icon::SkipBack, Icon::StepBack, Icon::PlayBack, Icon::Play, Icon::Pause,
Icon::StepForward, Icon::SkipEnd, Icon::Loop, Icon::Bounce,
};
// ---------------------------------------------------------------------------
src/ui/IconManager.h
+3
View File
@@ -43,10 +43,13 @@ enum class Icon {
// Timeline transport
SkipBack, // go to first frame (|◀)
StepBack, // previous frame (◀◀)
PlayBack, // play in reverse (◀)
Play, // play (▶)
Pause, // pause (⏸)
StepForward, // next frame (▶▶)
SkipEnd, // go to last frame (▶|)
Loop, // loop toggle (↻)
Bounce, // bounce/ping-pong (↔)
};
/// Loads SVG files from disk, rasterizes them with NanoSVG, uploads them as
src/ui/TimelinePanel.cpp
+186 -47
View File
@@ -13,6 +13,7 @@ void TimelinePanel::SetStage(pxr::UsdStageRefPtr stage)
{
m_stage = stage;
m_playing = false;
m_reversed = false;
m_startFrame = 1.0;
m_endFrame = 100.0;
@@ -27,8 +28,6 @@ void TimelinePanel::SetStage(pxr::UsdStageRefPtr stage)
}
if (m_endFrame < m_startFrame) m_endFrame = m_startFrame;
// Always notify on stage change so consumers pick up the new range,
// even when the numeric frame happens to be unchanged.
m_currentFrame = m_startFrame;
NotifyTimeChanged();
}
@@ -37,20 +36,61 @@ void TimelinePanel::SetStage(pxr::UsdStageRefPtr stage)
void TimelinePanel::Update(float deltaTime)
{
if (!m_playing) return;
double next = m_currentFrame + double(deltaTime) * m_fps;
if (next > m_endFrame) {
double span = m_endFrame - m_startFrame;
next = (span > 0.0)
? m_startFrame + std::fmod(next - m_startFrame, span)
: m_startFrame;
double playStart = m_startFrame;
double playEnd = m_endFrame;
double sign = m_reversed ? -1.0 : 1.0;
double next = m_currentFrame + sign * double(deltaTime) * m_fps;
if (m_reversed && next < playStart) {
switch (m_loopMode) {
case LoopMode::Loop: {
double span = playEnd - playStart;
next = (span > 0.0)
? playEnd - std::fmod(playStart - next, span)
: playEnd;
break;
}
case LoopMode::Bounce:
next = playStart + (playStart - next); // reflect
m_reversed = false;
break;
default:
next = playStart;
m_playing = false;
break;
}
} else if (!m_reversed && next > playEnd) {
switch (m_loopMode) {
case LoopMode::Loop: {
double span = playEnd - playStart;
next = (span > 0.0)
? playStart + std::fmod(next - playStart, span)
: playStart;
break;
}
case LoopMode::Bounce:
next = playEnd - (next - playEnd); // reflect
m_reversed = true;
break;
default:
next = playEnd;
m_playing = false;
break;
}
}
SetCurrentFrame(next);
}
// ---------------------------------------------------------------------------
void TimelinePanel::Render()
{
// ---- Transport row: icon buttons | start/end range | fps | auto-key ----
// Shared colours for active (pressed-in) toggle buttons.
const ImVec4 kActive (0.26f, 0.59f, 0.98f, 1.00f);
const ImVec4 kActiveHv(0.36f, 0.69f, 1.00f, 1.00f);
// Plain icon button (no active-state colouring).
auto iconBtn = [&](const char* id, Icon icon, const char* fallback) -> bool {
if (m_iconManager) {
ImTextureID tex = m_iconManager->Get(icon);
@@ -59,51 +99,150 @@ void TimelinePanel::Render()
return ImGui::Button(fallback);
};
if (iconBtn("##skipback", Icon::SkipBack, "|<")) { m_playing = false; SetCurrentFrame(m_startFrame); }
ImGui::SameLine();
if (iconBtn("##stepback", Icon::StepBack, "<")) { m_playing = false; SetCurrentFrame(std::floor(m_currentFrame) - 1.0); }
ImGui::SameLine();
if (iconBtn("##playpause", m_playing ? Icon::Pause : Icon::Play, m_playing ? "Pause" : "Play")) m_playing = !m_playing;
ImGui::SameLine();
if (iconBtn("##stepfwd", Icon::StepForward, ">")) { m_playing = false; SetCurrentFrame(std::floor(m_currentFrame) + 1.0); }
ImGui::SameLine();
if (iconBtn("##skipend", Icon::SkipEnd, ">|")) { m_playing = false; SetCurrentFrame(m_endFrame); }
ImGui::SameLine();
int start = int(std::lround(m_startFrame));
int end = int(std::lround(m_endFrame));
ImGui::SetNextItemWidth(90.f);
bool rangeEdited = ImGui::DragInt("##start", &start, 1.0f, 0, 0, "Start %d");
ImGui::SameLine();
ImGui::SetNextItemWidth(90.f);
rangeEdited |= ImGui::DragInt("##end", &end, 1.0f, 0, 0, "End %d");
if (rangeEdited) {
if (end < start) end = start;
m_startFrame = double(start);
m_endFrame = double(end);
if (m_stage) {
// Stage time metadata must live on the root (or session) layer;
// the active edit target may be a sublayer.
pxr::UsdEditContext ec(m_stage, m_stage->GetRootLayer());
m_stage->SetStartTimeCode(m_startFrame);
m_stage->SetEndTimeCode(m_endFrame);
// Icon button that highlights blue when `active` is true.
auto iconToggle = [&](const char* id, Icon icon, const char* fallback,
bool active) -> bool {
if (active) {
ImGui::PushStyleColor(ImGuiCol_Button, kActive);
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, kActiveHv);
}
SetCurrentFrame(m_currentFrame); // re-clamp into the new range
}
bool clicked = iconBtn(id, icon, fallback);
if (active) ImGui::PopStyleColor(2);
return clicked;
};
// ---- Transport buttons ----
if (iconBtn("##skipback", Icon::SkipBack, "|<")) {
m_playing = false;
m_reversed = false;
SetCurrentFrame(m_startFrame);
}
ImGui::SameLine();
if (iconBtn("##stepback", Icon::StepBack, "<")) {
m_playing = false;
SetCurrentFrame(std::floor(m_currentFrame) - 1.0);
}
ImGui::SameLine();
// Play backward (rewind): clicking starts reverse play; clicking again pauses.
{
bool isPlayingBack = m_playing && m_reversed;
if (iconToggle("##playback",
isPlayingBack ? Icon::Pause : Icon::PlayBack,
isPlayingBack ? "||" : "<|",
isPlayingBack)) {
if (isPlayingBack) {
m_playing = false;
} else {
m_reversed = true;
m_playing = true;
}
}
}
ImGui::SameLine();
// Play forward: clicking starts forward play; clicking again pauses.
{
bool isPlayingFwd = m_playing && !m_reversed;
if (iconToggle("##playfwd",
isPlayingFwd ? Icon::Pause : Icon::Play,
isPlayingFwd ? "||" : "|>",
isPlayingFwd)) {
if (isPlayingFwd) {
m_playing = false;
} else {
m_reversed = false;
m_playing = true;
}
}
}
ImGui::SameLine();
if (iconBtn("##stepfwd", Icon::StepForward, ">")) {
m_playing = false;
SetCurrentFrame(std::floor(m_currentFrame) + 1.0);
}
ImGui::SameLine();
if (iconBtn("##skipend", Icon::SkipEnd, ">|")) {
m_playing = false;
m_reversed = false;
SetCurrentFrame(m_endFrame);
}
ImGui::SameLine();
// ---- Loop mode button — click to open Loop / Bounce / Off submenu ----
ImGui::TextDisabled("|");
ImGui::SameLine();
{
bool isActive = (m_loopMode != LoopMode::None);
Icon modeIcon = (m_loopMode == LoopMode::Bounce) ? Icon::Bounce : Icon::Loop;
const char* tip = (m_loopMode == LoopMode::Bounce) ? "Bounce (click to change)"
: (m_loopMode == LoopMode::Loop) ? "Loop (click to change)"
: "No loop (click to change)";
if (iconToggle("##loopModeBtn", modeIcon, "Loop", isActive))
ImGui::OpenPopup("##loopModePopup");
if (ImGui::IsItemHovered()) ImGui::SetTooltip("%s", tip);
if (ImGui::BeginPopup("##loopModePopup")) {
if (ImGui::Selectable("Loop", m_loopMode == LoopMode::Loop))
m_loopMode = LoopMode::Loop;
if (ImGui::Selectable("Bounce", m_loopMode == LoopMode::Bounce))
m_loopMode = LoopMode::Bounce;
ImGui::Separator();
if (ImGui::Selectable("Off", m_loopMode == LoopMode::None))
m_loopMode = LoopMode::None;
ImGui::EndPopup();
}
}
ImGui::SameLine();
// ---- FPS + Auto-Key ----
ImGui::TextDisabled("|");
ImGui::SameLine();
ImGui::Text("%.6g fps", m_fps);
ImGui::SameLine();
if (ImGui::Checkbox("Auto-Key", &m_autoKey)) NotifyTimeChanged();
// ---- Frame slider: full width, snaps to whole frames ----
float frame = float(m_currentFrame);
ImGui::SetNextItemWidth(-FLT_MIN);
if (ImGui::SliderFloat("##frame", &frame,
float(m_startFrame), float(m_endFrame), "%.0f")) {
m_playing = false;
SetCurrentFrame(std::round(double(frame)));
// ---- Slider row: [start] [----slider----] [end] ----
{
const float kNumWidth = 50.f;
const float kGap = 4.f;
int start = int(std::lround(m_startFrame));
int end = int(std::lround(m_endFrame));
ImGui::SetNextItemWidth(kNumWidth);
bool rangeEdited = ImGui::DragInt("##start", &start, 1.0f, 0, 0, "%d");
if (ImGui::IsItemHovered()) ImGui::SetTooltip("Start frame");
ImGui::SameLine(0.f, kGap);
float sliderWidth = ImGui::GetContentRegionAvail().x - kNumWidth - kGap;
float frame = float(m_currentFrame);
ImGui::SetNextItemWidth(sliderWidth);
if (ImGui::SliderFloat("##frame", &frame,
float(m_startFrame), float(m_endFrame), "%.0f")) {
m_playing = false;
SetCurrentFrame(std::round(double(frame)));
}
ImGui::SameLine(0.f, kGap);
ImGui::SetNextItemWidth(kNumWidth);
rangeEdited |= ImGui::DragInt("##end", &end, 1.0f, 0, 0, "%d");
if (ImGui::IsItemHovered()) ImGui::SetTooltip("End frame");
if (rangeEdited) {
if (end < start) end = start;
m_startFrame = double(start);
m_endFrame = double(end);
if (m_stage) {
pxr::UsdEditContext ec(m_stage, m_stage->GetRootLayer());
m_stage->SetStartTimeCode(m_startFrame);
m_stage->SetEndTimeCode(m_endFrame);
}
SetCurrentFrame(m_currentFrame);
}
}
}
src/ui/TimelinePanel.h
+16 -3
View File
@@ -10,10 +10,14 @@ namespace UsdLayerManager {
/// Bottom-docked playback timeline.
///
/// Owns the current frame, playback state, and the Auto-Key toggle, and fires
/// OnTimeChanged whenever either changes:
/// OnTimeChanged whenever the time changes:
/// displayTime — the current frame; used for all reads/evaluation
/// editTime — the current frame when Auto-Key is ON, otherwise Default()
/// (writes at editTime author time samples = keyframes)
///
/// Supports:
/// Loop — playback wraps from end back to start (or vice-versa).
/// Bounce — playback reverses direction at each boundary (ping-pong).
/// Rewind — reverse-direction playback (m_reversed).
class TimelinePanel {
public:
void SetStage(pxr::UsdStageRefPtr stage);
@@ -27,7 +31,7 @@ public:
pxr::UsdTimeCode editTime)> OnTimeChanged;
private:
/// Clamp to [start, end]; fires OnTimeChanged when the frame changes.
/// Clamp to [startFrame, endFrame]; fires OnTimeChanged when the frame changes.
void SetCurrentFrame(double frame);
void NotifyTimeChanged();
pxr::UsdTimeCode EditTime() const;
@@ -35,11 +39,20 @@ private:
IconManager* m_iconManager = nullptr;
pxr::UsdStageRefPtr m_stage;
// Stage range (written back to stage metadata on edit).
double m_startFrame = 1.0;
double m_endFrame = 100.0;
double m_fps = 24.0;
// Playback state.
double m_currentFrame = 1.0;
bool m_playing = false;
enum class LoopMode { None, Loop, Bounce };
bool m_reversed = false; // play backward when true
LoopMode m_loopMode = LoopMode::Loop; // boundary behaviour
// Auto-Key.
bool m_autoKey = false;
};