Hoist magic numbers and strings across view and graph files

src/TrackLabConstants.ts

@@ -59,3 +59,8 @@ export const BUTTON_Y_MARGIN = 6;
 // ── Webcam panel ──────────────────────────────────────────────────────────────
 export const WEBCAM_PREVIEW_WIDTH = 480; // width of the preview and review video elements
 export const WEBCAM_PREVIEW_HEIGHT = 270; // height of the preview and review video elements
+
+// ── Overlay tool interaction ───────────────────────────────────────────────────
+// Opacity applied to coordinate system and calibration tool overlays while
+// the user is actively digitizing, signalling that those tools are locked out.
+export const DIGITIZING_DIM_OPACITY = 0.35;

src/i18n/StringManager.ts

@@ -215,9 +215,28 @@ export class StringManager {
    */
   public getAutoTracker(): {
     dragToSelectStringProperty: ReadOnlyProperty<string>;
+    videoTrackingAreaStringProperty: ReadOnlyProperty<string>;
+    trackingInitFailedStringProperty: ReadOnlyProperty<string>;
   } {
     return {
       dragToSelectStringProperty: this.stringProperties.autoTracker.dragToSelectStringProperty,
+      videoTrackingAreaStringProperty: this.stringProperties.autoTracker.videoTrackingAreaStringProperty,
+      trackingInitFailedStringProperty: this.stringProperties.autoTracker.trackingInitFailedStringProperty,
+    };
+  }
+
+  /**
+   * Get calibration tool string properties
+   */
+  public getCalibration(): {
+    pointsTooCloseStringProperty: ReadOnlyProperty<string>;
+    calibrationPoint1StringProperty: ReadOnlyProperty<string>;
+    calibrationPoint2StringProperty: ReadOnlyProperty<string>;
+  } {
+    return {
+      pointsTooCloseStringProperty: this.stringProperties.calibration.pointsTooCloseStringProperty,
+      calibrationPoint1StringProperty: this.stringProperties.calibration.calibrationPoint1StringProperty,
+      calibrationPoint2StringProperty: this.stringProperties.calibration.calibrationPoint2StringProperty,
     };
   }
 
@@ -278,10 +297,29 @@ export class StringManager {
   public getCoordSystem(): {
     xAxisLabelStringProperty: ReadOnlyProperty<string>;
     yAxisLabelStringProperty: ReadOnlyProperty<string>;
+    rotationHandleStringProperty: ReadOnlyProperty<string>;
+    coordinateSystemStringProperty: ReadOnlyProperty<string>;
   } {
     return {
       xAxisLabelStringProperty: this.stringProperties.coordSystem.xAxisLabelStringProperty,
       yAxisLabelStringProperty: this.stringProperties.coordSystem.yAxisLabelStringProperty,
+      rotationHandleStringProperty: this.stringProperties.coordSystem.rotationHandleStringProperty,
+      coordinateSystemStringProperty: this.stringProperties.coordSystem.coordinateSystemStringProperty,
+    };
+  }
+
+  /**
+   * Get video source control string properties
+   */
+  public getVideoSource(): {
+    downloadVideoStringProperty: ReadOnlyProperty<string>;
+    openVideoFileStringProperty: ReadOnlyProperty<string>;
+    recordWebcamStringProperty: ReadOnlyProperty<string>;
+  } {
+    return {
+      downloadVideoStringProperty: this.stringProperties.videoSource.downloadVideoStringProperty,
+      openVideoFileStringProperty: this.stringProperties.videoSource.openVideoFileStringProperty,
+      recordWebcamStringProperty: this.stringProperties.videoSource.recordWebcamStringProperty,
     };
   }
 
@@ -294,13 +332,67 @@ export class StringManager {
     processingStringProperty: ReadOnlyProperty<string>;
     fixingMetadataStringProperty: ReadOnlyProperty<string>;
     recordingStringProperty: ReadOnlyProperty<string>;
+    cancelStringProperty: ReadOnlyProperty<string>;
+    startRecordingStringProperty: ReadOnlyProperty<string>;
+    stopRecordingStringProperty: ReadOnlyProperty<string>;
+    reRecordStringProperty: ReadOnlyProperty<string>;
+    useVideoStringProperty: ReadOnlyProperty<string>;
+    cameraStringProperty: ReadOnlyProperty<string>;
+    recordFromWebcamStringProperty: ReadOnlyProperty<string>;
+    estimatingFrameRateStringProperty: ReadOnlyProperty<string>;
+    highConfidenceStringProperty: ReadOnlyProperty<string>;
+    mediumConfidenceStringProperty: ReadOnlyProperty<string>;
+    lowConfidenceStringProperty: ReadOnlyProperty<string>;
+    estimatedFpsStringProperty: ReadOnlyProperty<string>;
+    cameraLabelStringProperty: ReadOnlyProperty<string>;
   } {
     return {
       requestingAccessStringProperty: this.stringProperties.webcam.requestingAccessStringProperty,
       accessDeniedStringProperty: this.stringProperties.webcam.accessDeniedStringProperty,
       processingStringProperty: this.stringProperties.webcam.processingStringProperty,
       fixingMetadataStringProperty: this.stringProperties.webcam.fixingMetadataStringProperty,
       recordingStringProperty: this.stringProperties.webcam.recordingStringProperty,
+      cancelStringProperty: this.stringProperties.webcam.cancelStringProperty,
+      startRecordingStringProperty: this.stringProperties.webcam.startRecordingStringProperty,
+      stopRecordingStringProperty: this.stringProperties.webcam.stopRecordingStringProperty,
+      reRecordStringProperty: this.stringProperties.webcam.reRecordStringProperty,
+      useVideoStringProperty: this.stringProperties.webcam.useVideoStringProperty,
+      cameraStringProperty: this.stringProperties.webcam.cameraStringProperty,
+      recordFromWebcamStringProperty: this.stringProperties.webcam.recordFromWebcamStringProperty,
+      estimatingFrameRateStringProperty: this.stringProperties.webcam.estimatingFrameRateStringProperty,
+      highConfidenceStringProperty: this.stringProperties.webcam.highConfidenceStringProperty,
+      mediumConfidenceStringProperty: this.stringProperties.webcam.mediumConfidenceStringProperty,
+      lowConfidenceStringProperty: this.stringProperties.webcam.lowConfidenceStringProperty,
+      estimatedFpsStringProperty: this.stringProperties.webcam.estimatedFpsStringProperty,
+      cameraLabelStringProperty: this.stringProperties.webcam.cameraLabelStringProperty,
+    };
+  }
+
+  /**
+   * Get kinematics graph string properties
+   */
+  public getKinematicsGraph(): {
+    trackSelectorLabelStringProperty: ReadOnlyProperty<string>;
+    noTracksStringProperty: ReadOnlyProperty<string>;
+    trackItemStringProperty: ReadOnlyProperty<string>;
+  } {
+    return {
+      trackSelectorLabelStringProperty: this.stringProperties.kinematicsGraph.trackSelectorLabelStringProperty,
+      noTracksStringProperty: this.stringProperties.kinematicsGraph.noTracksStringProperty,
+      trackItemStringProperty: this.stringProperties.kinematicsGraph.trackItemStringProperty,
+    };
+  }
+
+  /**
+   * Get playback format string properties
+   */
+  public getPlayback(): {
+    secondsUnitStringProperty: ReadOnlyProperty<string>;
+    durationZeroStringProperty: ReadOnlyProperty<string>;
+  } {
+    return {
+      secondsUnitStringProperty: this.stringProperties.playback.secondsUnitStringProperty,
+      durationZeroStringProperty: this.stringProperties.playback.durationZeroStringProperty,
     };
   }
 

src/i18n/strings_en.json

@@ -60,7 +60,14 @@
     "showAccelerationDescription": "When enabled, acceleration components (ax, ay, |a|) are available as choices on the kinematics graph axes."
   },
   "autoTracker": {
-    "dragToSelect": "Drag on video to select object to track"
+    "dragToSelect": "Drag on video to select object to track",
+    "videoTrackingArea": "Video tracking area \u2014 drag to select object to track",
+    "trackingInitFailed": "Tracking initialisation failed. Try again."
+  },
+  "calibration": {
+    "pointsTooClose": "Points too close \u2014 move apart to calibrate",
+    "calibrationPoint1": "Calibration Point 1",
+    "calibrationPoint2": "Calibration Point 2"
   },
   "dataTable": {
     "title": "Data",
@@ -75,21 +82,50 @@
   },
   "ui": {
     "fps": "fps:",
-    "selectVideo": "— select a video —",
-    "sampleVideos": "── Sample Videos ──",
-    "myRecordings": "── My Recordings ──",
-    "uploadedVideos": "── Uploaded Videos ──"
+    "selectVideo": "\u2014 select a video \u2014",
+    "sampleVideos": "\u2500\u2500 Sample Videos \u2500\u2500",
+    "myRecordings": "\u2500\u2500 My Recordings \u2500\u2500",
+    "uploadedVideos": "\u2500\u2500 Uploaded Videos \u2500\u2500"
   },
   "coordSystem": {
     "xAxisLabel": "x",
-    "yAxisLabel": "y"
+    "yAxisLabel": "y",
+    "rotationHandle": "Rotation Handle",
+    "coordinateSystem": "Coordinate System"
+  },
+  "videoSource": {
+    "downloadVideo": "Download Video",
+    "openVideoFile": "Open Video File",
+    "recordWebcam": "Record Webcam"
   },
   "webcam": {
     "requestingAccess": "Requesting camera access\u2026",
     "accessDenied": "Camera access denied.",
     "processing": "Processing\u2026",
     "fixingMetadata": "Fixing video metadata\u2026",
-    "recording": "\u25CF Recording {{time}}"
+    "recording": "\u25CF Recording {{time}}",
+    "cancel": "Cancel",
+    "startRecording": "Start Recording",
+    "stopRecording": "Stop Recording",
+    "reRecord": "Re-record",
+    "useVideo": "Use Video",
+    "camera": "Camera",
+    "recordFromWebcam": "Record from Webcam",
+    "estimatingFrameRate": "Estimating frame rate\u2026",
+    "highConfidence": "High confidence",
+    "mediumConfidence": "Medium confidence",
+    "lowConfidence": "Low confidence",
+    "estimatedFps": "Estimated: {{fps}} fps {{symbol}} ({{confidence}}, {{method}})",
+    "cameraLabel": "Camera {{number}}"
+  },
+  "kinematicsGraph": {
+    "trackSelectorLabel": "Track:",
+    "noTracks": "No tracks",
+    "trackItem": "Track {{symbol}}"
+  },
+  "playback": {
+    "secondsUnit": "s",
+    "durationZero": "0.00 s"
   },
   "videoFiles": {
     "ballOil": "Ball in Oil",

src/i18n/strings_fr.json

@@ -6,66 +6,73 @@
   "controls": {
     "play": "Lecture",
     "pause": "Pause",
-    "reset": "Réinitialiser",
+    "reset": "R\u00e9initialiser",
     "step": "Pas",
     "speed": "Vitesse",
     "record": "Enregistrer",
-    "stop": "Arrêter",
+    "stop": "Arr\u00eater",
     "graphVs": "vs"
   },
   "tracking": {
     "track": "Suivre",
     "target": "Cible",
     "origin": "Origine",
     "calibrate": "Calibrer",
-    "scale": "Échelle",
+    "scale": "\u00c9chelle",
     "position": "Position",
     "velocity": "Vitesse",
-    "acceleration": "Accélération"
+    "acceleration": "Acc\u00e9l\u00e9ration"
   },
   "video": {
     "openFile": "Ouvrir un fichier",
     "frameRate": "Images par seconde",
     "currentFrame": "Image",
-    "duration": "Durée",
+    "duration": "Dur\u00e9e",
     "export": "Exporter"
   },
   "measurement": {
     "time": "Temps",
     "distance": "Distance",
     "angle": "Angle",
     "mass": "Masse",
-    "gravity": "Gravité"
+    "gravity": "Gravit\u00e9"
   },
   "keyboardShortcuts": {
     "title": "Raccourcis clavier",
-    "simulationControls": "Contrôles de simulation",
+    "simulationControls": "Contr\u00f4les de simulation",
     "graphInteractions": "Interactions avec le graphique",
     "playPauseSimulation": "Lecture/Pause de la simulation",
-    "resetSimulation": "Réinitialiser la simulation",
+    "resetSimulation": "R\u00e9initialiser la simulation",
     "stepBackward": "Reculer d'un pas",
     "stepForward": "Avancer d'un pas",
-    "rewindToStart": "Revenir au début",
-    "resetZoom": "Réinitialiser le zoom",
-    "zoomInOut": "Zoom avant/arrière",
-    "panView": "Déplacer la vue"
+    "rewindToStart": "Revenir au d\u00e9but",
+    "resetZoom": "R\u00e9initialiser le zoom",
+    "zoomInOut": "Zoom avant/arri\u00e8re",
+    "panView": "D\u00e9placer la vue"
   },
   "preferences": {
     "simulation": "Simulation",
     "enableAutoTracking": "Activer le suivi automatique",
-    "enableAutoTrackingDescription": "Lorsque activé, affiche la case à cocher du suivi automatique dans le panneau de contrôle, permettant le suivi automatique d'objets basé sur OpenCV. Lorsque désactivé, la case est cachée et seule la numérisation manuelle est disponible.",
+    "enableAutoTrackingDescription": "Lorsque activ\u00e9, affiche la case \u00e0 cocher du suivi automatique dans le panneau de contr\u00f4le, permettant le suivi automatique d'objets bas\u00e9 sur OpenCV. Lorsque d\u00e9sactiv\u00e9, la case est cach\u00e9e et seule la num\u00e9risation manuelle est disponible.",
     "showVelocity": "Afficher la vitesse",
-    "showVelocityDescription": "Lorsque activé, les composantes de vitesse (vx, vy, rapidité) sont disponibles comme choix sur les axes du graphique cinématique.",
-    "showAcceleration": "Afficher l'accélération",
-    "showAccelerationDescription": "Lorsque activé, les composantes d'accélération (ax, ay, |a|) sont disponibles comme choix sur les axes du graphique cinématique."
+    "showVelocityDescription": "Lorsque activ\u00e9, les composantes de vitesse (vx, vy, rapidit\u00e9) sont disponibles comme choix sur les axes du graphique cin\u00e9matique.",
+    "showAcceleration": "Afficher l'acc\u00e9l\u00e9ration",
+    "showAccelerationDescription": "Lorsque activ\u00e9, les composantes d'acc\u00e9l\u00e9ration (ax, ay, |a|) sont disponibles comme choix sur les axes du graphique cin\u00e9matique."
   },
   "autoTracker": {
-    "dragToSelect": "Faire glisser sur la vidéo pour sélectionner l'objet à suivre"
+    "dragToSelect": "Faire glisser sur la vid\u00e9o pour s\u00e9lectionner l'objet \u00e0 suivre",
+    "videoTrackingArea": "Zone de suivi vid\u00e9o \u2014 faire glisser pour s\u00e9lectionner l'objet \u00e0 suivre",
+    "trackingInitFailed": "\u00c9chec de l'initialisation du suivi. R\u00e9essayez."
+  },
+  "calibration": {
+    "pointsTooClose": "Points trop proches \u2014 les \u00e9carter pour calibrer",
+    "calibrationPoint1": "Point de calibration 1",
+    "calibrationPoint2": "Point de calibration 2"
   },
   "dataTable": {
-    "title": "Données",
+    "title": "Donn\u00e9es",
     "csv": "CSV",
-    "noData": "Aucun point numérisé",
+    "noData": "Aucun point num\u00e9ris\u00e9",
     "frame": "Image",
     "timeSeconds": "Temps (s)"
   },
@@ -74,22 +81,51 @@
     "tracks": "Pistes"
   },
   "ui": {
-    "fps": "ips :",
-    "selectVideo": "— sélectionner une vidéo —",
-    "sampleVideos": "── Vidéos exemples ──",
-    "myRecordings": "── Mes enregistrements ──",
-    "uploadedVideos": "── Vidéos importées ──"
+    "fps": "ips\u00a0:",
+    "selectVideo": "\u2014 s\u00e9lectionner une vid\u00e9o \u2014",
+    "sampleVideos": "\u2500\u2500 Vid\u00e9os exemples \u2500\u2500",
+    "myRecordings": "\u2500\u2500 Mes enregistrements \u2500\u2500",
+    "uploadedVideos": "\u2500\u2500 Vid\u00e9os import\u00e9es \u2500\u2500"
   },
   "coordSystem": {
     "xAxisLabel": "x",
-    "yAxisLabel": "y"
+    "yAxisLabel": "y",
+    "rotationHandle": "Poign\u00e9e de rotation",
+    "coordinateSystem": "Syst\u00e8me de coordonn\u00e9es"
+  },
+  "videoSource": {
+    "downloadVideo": "T\u00e9l\u00e9charger la vid\u00e9o",
+    "openVideoFile": "Ouvrir un fichier vid\u00e9o",
+    "recordWebcam": "Enregistrer avec la webcam"
   },
   "webcam": {
-    "requestingAccess": "Demande d'accès à la caméra\u2026",
-    "accessDenied": "Accès à la caméra refusé.",
+    "requestingAccess": "Demande d'acc\u00e8s \u00e0 la cam\u00e9ra\u2026",
+    "accessDenied": "Acc\u00e8s \u00e0 la cam\u00e9ra refus\u00e9.",
     "processing": "Traitement\u2026",
-    "fixingMetadata": "Correction des métadonnées vidéo\u2026",
-    "recording": "\u25CF Enregistrement {{time}}"
+    "fixingMetadata": "Correction des m\u00e9tadonn\u00e9es vid\u00e9o\u2026",
+    "recording": "\u25CF Enregistrement {{time}}",
+    "cancel": "Annuler",
+    "startRecording": "D\u00e9marrer l'enregistrement",
+    "stopRecording": "Arr\u00eater l'enregistrement",
+    "reRecord": "R\u00e9enregistrer",
+    "useVideo": "Utiliser la vid\u00e9o",
+    "camera": "Cam\u00e9ra",
+    "recordFromWebcam": "Enregistrer depuis la webcam",
+    "estimatingFrameRate": "Estimation de la fr\u00e9quence d'images\u2026",
+    "highConfidence": "Haute confiance",
+    "mediumConfidence": "Confiance moyenne",
+    "lowConfidence": "Faible confiance",
+    "estimatedFps": "Estim\u00e9\u00a0: {{fps}} ips {{symbol}} ({{confidence}}, {{method}})",
+    "cameraLabel": "Cam\u00e9ra {{number}}"
+  },
+  "kinematicsGraph": {
+    "trackSelectorLabel": "Piste\u00a0:",
+    "noTracks": "Aucune piste",
+    "trackItem": "Piste {{symbol}}"
+  },
+  "playback": {
+    "secondsUnit": "s",
+    "durationZero": "0,00 s"
   },
   "videoFiles": {
     "ballOil": "Balle dans l'huile",

src/screen-name/graph/ConfigurableGraph.ts

@@ -552,14 +552,12 @@ export default class ConfigurableGraph extends Node {
     this.chartTransform.setViewHeight(newHeight);
 
     // Update invisible interaction regions
-    const axisInteractionWidth = 60;
-    const axisInteractionHeight = 30;
-    this.yAxisInteractionRegion.setRect(-axisInteractionWidth, 0, axisInteractionWidth, newHeight);
-    this.xAxisInteractionRegion.setRect(0, newHeight, newWidth, axisInteractionHeight);
+    this.yAxisInteractionRegion.setRect(-Y_AXIS_INTERACTION_WIDTH, 0, Y_AXIS_INTERACTION_WIDTH, newHeight);
+    this.xAxisInteractionRegion.setRect(0, newHeight, newWidth, X_AXIS_INTERACTION_HEIGHT);
 
     // Update axis labels positions
     this.xAxisLabelNode.centerX = newWidth / 2;
-    this.xAxisLabelNode.top = newHeight + 35;
+    this.xAxisLabelNode.top = newHeight + AXIS_LABEL_OFFSET;
     this.yAxisLabelNode.centerY = newHeight / 2;
 
     // Update title panel position