add control for photon polarization angle, see #52

js/bloch-sphere/view/BlochSphereScreenView.ts

@@ -56,8 +56,8 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
         azimuthSlider
       ]
     } ), {
-      fill: QuantumMeasurementColors.basisStatesPanelFillColorProperty,
-      stroke: QuantumMeasurementColors.basisStatesPanelStrokeColorProperty,
+      fill: QuantumMeasurementColors.controlPanelFillColorProperty,
+      stroke: QuantumMeasurementColors.controlPanelStrokeColorProperty,
       yMargin: 10,
       minWidth: 270
     } );

js/coins/view/InitialCoinStateSelectorNode.ts

@@ -108,8 +108,8 @@ export default class InitialCoinStateSelectorNode extends VBox {
     } );
 
     const selectorPanel = new Panel( selectorPanelContent, {
-      fill: QuantumMeasurementColors.basisStatesPanelFillColorProperty,
-      stroke: QuantumMeasurementColors.basisStatesPanelStrokeColorProperty,
+      fill: QuantumMeasurementColors.controlPanelFillColorProperty,
+      stroke: QuantumMeasurementColors.controlPanelStrokeColorProperty,
       yMargin: 10,
       minWidth: 270,
       visibleProperty: new GatedVisibleProperty( preparingExperimentProperty, radioButtonGroupTandem ),

js/common/QuantumMeasurementColors.ts

@@ -104,13 +104,13 @@ const QuantumMeasurementColors = {
     default: '#0ffdfd'
   } ),
 
-  // Initial Orientation/Basis States panel stroke
-  basisStatesPanelStrokeColorProperty: new ProfileColorProperty( quantumMeasurement, 'basisStatesPanelStroke', {
+  // control panel stroke
+  controlPanelStrokeColorProperty: new ProfileColorProperty( quantumMeasurement, 'basisStatesPanelStroke', {
     default: 'transparent'
   } ),
 
-  // Initial Orientation/Basis States panel fill
-  basisStatesPanelFillColorProperty: new ProfileColorProperty( quantumMeasurement, 'basisStatesPanelFill', {
+  // control panel fill
+  controlPanelFillColorProperty: new ProfileColorProperty( quantumMeasurement, 'basisStatesPanelFill', {
     default: '#EEE'
   } ),
 
@@ -125,6 +125,14 @@ const QuantumMeasurementColors = {
   } ),
   landingZoneFillColorProperty: new ProfileColorProperty( quantumMeasurement, 'landingZoneFill', {
     default: 'rgba( 255, 192, 203, 0.5 )'
+  } ),
+
+  // Colors for the photon polarization
+  horizontalPolarizationColorProperty: new ProfileColorProperty( quantumMeasurement, 'horizontalPolarization', {
+    default: '#F0F'
+  } ),
+  verticalPolarizationColorProperty: new ProfileColorProperty( quantumMeasurement, 'verticalPolarization', {
+    default: '#00F'
   } )
 };
 

js/photons/model/PolarizingBeamSplitter.ts

@@ -59,6 +59,15 @@ export default class PolarizingBeamSplitter {
     this.customPolarizationAngleProperty = new NumberProperty( 45, {
       tandem: providedOptions.tandem.createTandem( 'customPolarizationAngleProperty' )
     } );
+
+    // TODO: This is temporary code to log changes to the properties.  It will be removed later.  See https://github.com/phetsims/quantum-measurement/issues/52.
+    this.presetPolarizationDirectionProperty.lazyLink( presetPolarizationDirection => {
+      console.log( `presetPolarizationDirection = ${presetPolarizationDirection}` );
+    } );
+    this.customPolarizationAngleProperty.lazyLink( customPolarizationAngleProperty => {
+      console.log( `customPolarizationAngleProperty = ${customPolarizationAngleProperty}` );
+    } );
+
   }
 }
 

js/photons/view/PhotonsExperimentSceneView.ts

@@ -11,6 +11,7 @@ import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
 import { Color, HBox, HBoxOptions, Rectangle } from '../../../../scenery/js/imports.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import PhotonsExperimentSceneModel from '../model/PhotonsExperimentSceneModel.js';
+import PhotonPolarizationAngleControl from './PhotonPolarizationAngleControl.js';
 
 type SelfOptions = EmptySelfOptions;
 type PhotonsExperimentSceneViewOptions = SelfOptions & WithRequired<HBoxOptions, 'tandem'>;
@@ -21,10 +22,6 @@ export default class PhotonsExperimentSceneView extends HBox {
 
     // TODO: This set of rectangles is a placeholder for working on layout, see https://github.com/phetsims/quantum-measurement/issues/52
     const testRectHeight = 510;
-    const testRect1 = new Rectangle( 0, 0, 220, testRectHeight, {
-      fill: new Color( '#C35985' ),
-      stroke: new Color( '#C35985' ).darkerColor( 0.5 )
-    } );
     const testRect2 = new Rectangle( 0, 0, 370, testRectHeight, {
       fill: new Color( '#947A0C' ),
       stroke: new Color( '#947A0C' ).darkerColor( 0.5 ),
@@ -41,9 +38,18 @@ export default class PhotonsExperimentSceneView extends HBox {
       lineWidth: 2
     } );
 
+    const photonPolarizationAngleControl = new PhotonPolarizationAngleControl(
+      model.polarizingBeamSplitter.presetPolarizationDirectionProperty,
+      model.polarizingBeamSplitter.customPolarizationAngleProperty,
+      {
+        tandem: providedOptions.tandem.createTandem( 'photonPolarizationAngleControl' )
+      }
+    );
+
     const options = optionize<PhotonsExperimentSceneViewOptions, SelfOptions, HBoxOptions>()( {
-      children: [ testRect1, testRect2, testRect3, testRect4 ],
-      spacing: 3
+      children: [ photonPolarizationAngleControl, testRect2, testRect3, testRect4 ],
+      spacing: 3,
+      align: 'bottom'
     }, providedOptions );
 
     super( options );

js/spin/view/SpinStatePreparationArea.ts

@@ -47,7 +47,7 @@ export default class SpinStatePreparationArea extends VBox {
         center: new Vector2( 100, 100 ),
         tandem: tandem.createTandem( 'numberOfCoinsRadioButtonGroup' ),
         radioButtonOptions: {
-          baseColor: QuantumMeasurementColors.basisStatesPanelFillColorProperty
+          baseColor: QuantumMeasurementColors.controlPanelFillColorProperty
         }
       }
     );

quantum-measurement-strings_en.json

@@ -21,7 +21,7 @@
     "value": "Coin Bias (State)"
   },
   "custom": {
-    "value": "custom"
+    "value": "Custom"
   },
   "down": {
     "value": "Down"