From f559e6263c99eea5c60dd0b9cb6bd58780ab3395 Mon Sep 17 00:00:00 2001 From: Jonah <47046556+jwbonner@users.noreply.github.com> Date: Wed, 6 Nov 2024 10:38:38 -0500 Subject: [PATCH] Add keyboard shortcut to zoom to enabled range (closes #255) --- docsSite/docs/getting-started/keyboard.md | 1 + docsSite/docs/tab-reference/3d-field.md | 2 +- docsSite/docs/tab-reference/console.md | 2 +- docsSite/docs/tab-reference/joysticks.md | 2 +- docsSite/docs/tab-reference/mechanism.md | 2 +- docsSite/docs/tab-reference/odometry.md | 2 +- docsSite/docs/tab-reference/points.md | 2 +- docsSite/docs/tab-reference/swerve.md | 2 +- docsSite/docs/tab-reference/video.md | 2 +- src/hub/SelectionImpl.ts | 7 +++++++ src/hub/hub.ts | 18 +++++++++++++++++- src/main/main.ts | 10 ++++++++++ src/satellite.ts | 4 ++++ src/shared/Selection.ts | 3 +++ 14 files changed, 50 insertions(+), 9 deletions(-) diff --git a/docsSite/docs/getting-started/keyboard.md b/docsSite/docs/getting-started/keyboard.md index 375071fe..5b411ae3 100644 --- a/docsSite/docs/getting-started/keyboard.md +++ b/docsSite/docs/getting-started/keyboard.md @@ -81,6 +81,7 @@ AdvantageScope includes numerous keyboard shortcuts that allow for faster naviga `Space`Toggle playback `Left` and `Right`Step through log file `L`Toggle lock when viewing live data +`Ctrl+\`Zoom timeline to enabled range ### Touch Bar diff --git a/docsSite/docs/tab-reference/3d-field.md b/docsSite/docs/tab-reference/3d-field.md index 65107960..9770af48 100644 --- a/docsSite/docs/tab-reference/3d-field.md +++ b/docsSite/docs/tab-reference/3d-field.md @@ -19,7 +19,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/console.md b/docsSite/docs/tab-reference/console.md index 3911d4b6..7a9669e5 100644 --- a/docsSite/docs/tab-reference/console.md +++ b/docsSite/docs/tab-reference/console.md @@ -19,7 +19,7 @@ Drag the desired field to the main view to get started. Each row represents an u Click the color palette icon to toggle highlighting for warning and error messages. Messages are highlighted if they contain the text "warning" or "error". ::: -The controls are similar to the 🔢 [Table](../tab-reference/table.md) tab. The selected time is synchronized across all tabs. Click a row to select it, or hover over a row to preview it in any visible pop-up windows. Clicking the ↓ button jumps to the selected time (or the time entered in the box). Enter text in the "Filter" input to only display rows which contain the filter text. Press **Ctrl+F** to quickly select the "Filter" input. +The controls are similar to the 🔢 [Table](../tab-reference/table.md) tab. The selected time is synchronized across all tabs. Click a row to select it, or hover over a row to preview it in any visible pop-up windows. Clicking the ↓ button jumps to the selected time (or the time entered in the box). Enter text in the "Filter" input to only display rows which contain the filter text. Press `Ctrl+F` to quickly select the "Filter" input. :::info Add a "!" at the start of the filter text to _exclude_ matching messages from the main view. diff --git a/docsSite/docs/tab-reference/joysticks.md b/docsSite/docs/tab-reference/joysticks.md index 71b79d5e..8a68e49b 100644 --- a/docsSite/docs/tab-reference/joysticks.md +++ b/docsSite/docs/tab-reference/joysticks.md @@ -15,7 +15,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/mechanism.md b/docsSite/docs/tab-reference/mechanism.md index d0e2463f..0b503022 100644 --- a/docsSite/docs/tab-reference/mechanism.md +++ b/docsSite/docs/tab-reference/mechanism.md @@ -18,7 +18,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/odometry.md b/docsSite/docs/tab-reference/odometry.md index a46e5787..162625dc 100644 --- a/docsSite/docs/tab-reference/odometry.md +++ b/docsSite/docs/tab-reference/odometry.md @@ -18,7 +18,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/points.md b/docsSite/docs/tab-reference/points.md index 2ab10d18..3b9fe083 100644 --- a/docsSite/docs/tab-reference/points.md +++ b/docsSite/docs/tab-reference/points.md @@ -18,7 +18,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/swerve.md b/docsSite/docs/tab-reference/swerve.md index 30cce453..a6dcfaba 100644 --- a/docsSite/docs/tab-reference/swerve.md +++ b/docsSite/docs/tab-reference/swerve.md @@ -18,7 +18,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/docsSite/docs/tab-reference/video.md b/docsSite/docs/tab-reference/video.md index 7cade23b..a4603307 100644 --- a/docsSite/docs/tab-reference/video.md +++ b/docsSite/docs/tab-reference/video.md @@ -65,7 +65,7 @@ The timeline is used to control playback and visualization. Clicking on the time The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated. -To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. +To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again. Press `Ctrl+\` to zoom to the period where the robot is enabled. ![Timeline](./img/timeline.png) diff --git a/src/hub/SelectionImpl.ts b/src/hub/SelectionImpl.ts index a8dc1e90..663d81bd 100644 --- a/src/hub/SelectionImpl.ts +++ b/src/hub/SelectionImpl.ts @@ -346,6 +346,13 @@ export default class SelectionImpl implements Selection { return this.timelineRange; } + /** Set the visible range for the timeline. */ + setTimelineRange(range: [number, number], lockMaxZoom: boolean) { + this.timelineRange = range; + this.timelineMaxZoom = lockMaxZoom; + this.applyTimelineScroll(0, 0, 0); + } + /** Updates the timeline range based on a scroll event. */ applyTimelineScroll(dx: number, dy: number, widthPixels: number) { // Find available timestamp range diff --git a/src/hub/hub.ts b/src/hub/hub.ts index ed01b46f..08e8e1d0 100644 --- a/src/hub/hub.ts +++ b/src/hub/hub.ts @@ -6,7 +6,7 @@ import Preferences from "../shared/Preferences"; import Selection from "../shared/Selection"; import { SourceListItemState, SourceListTypeMemory } from "../shared/SourceListConfig"; import Log from "../shared/log/Log"; -import { AKIT_TIMESTAMP_KEYS, MERGE_PREFIX } from "../shared/log/LogUtil"; +import { AKIT_TIMESTAMP_KEYS, getEnabledData, MERGE_PREFIX } from "../shared/log/LogUtil"; import { calcMockProgress, clampValue, htmlEncode, scaleValue } from "../shared/util"; import SelectionImpl from "./SelectionImpl"; import Sidebar from "./Sidebar"; @@ -644,6 +644,22 @@ async function handleMainMessage(message: NamedMessage) { } break; + case "zoom-enabled": + { + let enabledData = getEnabledData(window.log); + let range = window.log.getTimestampRange(); + let firstEnableIndex = enabledData === null ? -1 : enabledData.values.findIndex((value) => value); + let lastDisableIndex = enabledData === null ? -1 : enabledData.values.findLastIndex((value) => !value); + if (firstEnableIndex !== -1) { + range[0] = enabledData!.timestamps[firstEnableIndex]; + } + if (lastDisableIndex !== -1) { + range[1] = enabledData!.timestamps[lastDisableIndex]; + } + window.selection.setTimelineRange(range, firstEnableIndex === -1 && lastDisableIndex === -1); + } + break; + case "show-update-button": document.documentElement.style.setProperty("--show-update-button", message.data ? "1" : "0"); UPDATE_BUTTON.hidden = !message.data; diff --git a/src/main/main.ts b/src/main/main.ts index 696e6f49..5d7adaa2 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -1791,6 +1791,16 @@ function setupMenu() { { role: "zoomIn" }, { role: "zoomOut" }, { type: "separator" }, + { + label: "Zoom to Enabled Range", + accelerator: "CmdOrCtrl+\\", + click(_, baseWindow) { + const window = baseWindow as BrowserWindow | undefined; + if (window === undefined || !hubWindows.includes(window)) return; + sendMessage(window, "zoom-enabled"); + } + }, + { type: "separator" }, { label: "Toggle Sidebar", accelerator: "CmdOrCtrl+.", diff --git a/src/satellite.ts b/src/satellite.ts index 0cf9d586..a50101f5 100644 --- a/src/satellite.ts +++ b/src/satellite.ts @@ -332,6 +332,10 @@ class MockSelection implements Selection { throw new Error("Method not implemented."); } + setTimelineRange(range: [number, number], lockMaxZoom: boolean) { + throw new Error("Method not implemented."); + } + applyTimelineScroll(dx: number, dy: number, widthPixels: number): void { window.sendMainMessage("call-selection-setter", { name: "applyTimelineScroll", args: [dx, dy, widthPixels] }); } diff --git a/src/shared/Selection.ts b/src/shared/Selection.ts index 60a6f2b2..2c566ab2 100644 --- a/src/shared/Selection.ts +++ b/src/shared/Selection.ts @@ -68,6 +68,9 @@ export default interface Selection { /** Returns the visible range for the timeline. */ getTimelineRange(): [number, number]; + /** Set the visible range for the timeline. */ + setTimelineRange(range: [number, number], lockMaxZoom: boolean): void; + /** Updates the timeline range based on a scroll event. */ applyTimelineScroll(dx: number, dy: number, widthPixels: number): void; }