Add info dialog explaining track digitization workflow - #42
Merged
Conversation
Adds a '?' button in the lower-left corner (mirroring the reset button margin) that toggles a floating InfoDialogNode explaining the six main steps of the digitizing workflow: load video, set up coordinate system, calibrate scale, add a track, digitize frame by frame, and auto-track. - InfoDialogNode.ts: new Panel-based modal with title, separator, step-by-step instructions, and a CloseButton - SimScreenView.ts: wires the info button + dialog; positions both in the visibleBoundsProperty link so they track the actual visible area - StringManager.ts: adds getInfoDialog() accessor - strings_en.json / strings_fr.json: adds infoDialog string group (title + 6 step title/body pairs) in both languages https://claude.ai/code/session_019asowJWZYPgvgsefumiFmG
Replace the hand-rolled '?' RectangularPushButton with the standard InfoButton (RoundPushButton with circle-i icon) from scenerystack/scenery-phet, and replace the custom Panel-based InfoDialogNode with a proper Dialog subclass from scenerystack/sun. Key changes: - InfoDialogNode now extends Dialog; title passed as option, built-in CloseButton replaces the manual one, Panel/Rectangle/separator removed - SimScreenView: imports InfoButton instead of ButtonNode/RectangularPushButton; listener calls infoDialogNode.show() — Dialog uses phet.joist.sim's popup layer so no addChild or manual positioning needed - Removed now-unused imports: Text, PhetFont, ButtonNode, RectangularPushButton, TrackLabColors, BUTTON_X_MARGIN, BUTTON_Y_MARGIN from SimScreenView https://claude.ai/code/session_019asowJWZYPgvgsefumiFmG
…oButton Dialog is not exported from any scenerystack barrel (sun, sim, joist) in v3.0.0, so the previous commit's Dialog subclass caused a TS2305 error. Revert InfoDialogNode to its working Panel+Node approach (CloseButton, manual header layout, visibility toggle). Keep InfoButton from scenerystack/scenery-phet, which IS publicly exported and replaces the hand-rolled RectangularPushButton with the standard ⓘ icon button. Also restore the infoDialogNode positioning inside visibleBoundsProperty.link and the this.addChild(infoDialogNode) call, both required by the Node-based visibility approach. https://claude.ai/code/session_019asowJWZYPgvgsefumiFmG
Auto-formatted by Biome after first npm install in this environment. All changes are whitespace/line-length only — no logic changes. https://claude.ai/code/session_019asowJWZYPgvgsefumiFmG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds an interactive info dialog that guides users through the track digitization workflow in TrackLab. The dialog is accessible via a new info button (?) in the lower-left corner of the screen and displays six steps explaining how to use the application.
Key Changes
New
InfoDialogNodecomponent (src/screen-name/view/InfoDialogNode.ts): A modal dialog displaying step-by-step instructions for digitizing tracks. Features include:Updated
SimScreenView: Integrated the info dialog and info button into the main screen:Extended
StringManager: AddedgetInfoDialog()method to provide localized string properties for all dialog contentLocalization: Added complete English and French translations for all six workflow steps in
strings_en.jsonandstrings_fr.jsonImplementation Details
VBoxlayout with proper spacing constants for visual hierarchyhttps://claude.ai/code/session_019asowJWZYPgvgsefumiFmG