Add units to photon slider and angle readout label, see #81

phetsims · Jan 17, 2025 · c03aefd · c03aefd
1 parent 3496f4f
commit c03aefd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/js/photons/view/FlatPolarizationAngleIndicator.ts b/js/photons/view/FlatPolarizationAngleIndicator.ts
@@ -8,6 +8,7 @@
  */
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import Utils from '../../../../dot/js/Utils.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
@@ -16,6 +17,7 @@ import ArrowNode, { ArrowNodeOptions } from '../../../../scenery-phet/js/ArrowNo
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import { Circle, Color, Node, NodeOptions, Text } from '../../../../scenery/js/imports.js';
 import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
+import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
 import VectorTailNode from './VectorTailNode.js';
@@ -95,6 +97,16 @@ export default class FlatPolarizationAngleIndicator extends Node {
       fill: QuantumMeasurementColors.photonBaseColorProperty
     } );
 
+    // Create and position the angle readout label
+    const angleReadoutLabel = new Text( new DerivedStringProperty(
+      [ polarizationAngleProperty ],
+      angle => angle === null ? '' : `${QuantumMeasurementConstants.THETA} = ${angle}°`
+    ), {
+      centerX: horizontalAxis.centerX + 35,
+      centerY: verticalAxis.top + 5,
+      font: new PhetFont( 12 )
+    } );
+
     const options = optionize<PolarizationPlaneRepresentationOptions, SelfOptions, NodeOptions>()( {
       children: [
         unitCircle,
@@ -103,7 +115,8 @@ export default class FlatPolarizationAngleIndicator extends Node {
         horizontalAxisLabel,
         verticalAxisLabel,
         polarizationVectorNode,
-        vectorTailSymbol
+        vectorTailSymbol,
+        angleReadoutLabel
       ]
     }, providedOptions );
 

diff --git a/js/photons/view/PhotonPolarizationAngleControl.ts b/js/photons/view/PhotonPolarizationAngleControl.ts
@@ -114,13 +114,13 @@ export default class PhotonPolarizationAngleControl extends Panel {
       trackFillEnabled: Color.BLACK,
       majorTickLength: 10,
       majorTickLineWidth: 1.5,
-      constrainValue: value => Utils.roundToInterval( value, 1 ),
+      constrainValue: value => Utils.roundToInterval( value, 5 ),
       tandem: providedOptions.tandem.createTandem( 'customAngleSlider' )
     } );
 
     // slider tick marks
-    customAngleSlider.addMajorTick( 0, new Text( 0, TICK_MARK_TEXT_OPTIONS ) );
-    customAngleSlider.addMajorTick( 90, new Text( 90, TICK_MARK_TEXT_OPTIONS ) );
+    customAngleSlider.addMajorTick( 0, new Text( '0°', TICK_MARK_TEXT_OPTIONS ) );
+    customAngleSlider.addMajorTick( 90, new Text( '90°', TICK_MARK_TEXT_OPTIONS ) );
 
     // Assemble the title, radio button group, and slider into a VBox.
     const leftPortionOfPanel = new VBox( {